[vovanxp 0]

Помогите создать реализовать частичное динамическое обновление веб-страницы.

 

Проект на основе демки STM324xG_EVAL, LwIP_HTTP_Server_Raw, без FreeRTOS

 

Хочу сделать управление микроконтроллером через веб-страницу. Веб сервер работает,

 

Хочу сделать так чтоб на веб-страничке выводились информация так же как как выводится на ЛСД дисплей. Информация обновлялась динамически не перегружая страничку, под этим веб-дисплеем на веб-странице будут кнопки управления.

 

Знаю что нужно через javаscript, jQuery. Можно ли это реализовать без netconn и FreeRTOS и как реализовать.

 

Спасибо.

[scifi 1]

Знаю что нужно через javаscript, jQuery. Можно ли это реализовать без netconn и FreeRTOS и как реализовать.

Javascript - однозначно. jQuery - совсем-совсем не обязательно. Это называется AJAX, а если совсем точно, то XMLHttpRequest. Есть куча примеров. Никакой netconn и RTOS не нужен. Учите матчасть, она не очень большая.

[Xenia 35]

Можно проще - разделить страницу на окна (FRAMES) в каждом окне которой будет свой интернет-контекст (<FRAME SRC=...>).

И во все контексты, которые требуют периодического обновления, поставить тег вроде этого:

<meta http-equiv="refresh" content="60">

который обновляется/перезагружается через каждый 60 сек.

 

Самая сложная здесь проблема - так поделить страницу на части, чтобы обновляемые числа оказались в отдельном окне(ах).

Но самая простая реализиция - двухфреймовая, где внешний вид табло и шапка заголовка (может быть не только вверху, но и слева) находится в одном фрейме и никогда не обновляется (мегатег refresh у нее отсутствует), а числа находятся в другом фрейме, который периодически обновляется.

[x893 35]

К ARM не имеет отношения. Смотрите на сайтах по веб дизайну - там этого тонны.

[Xenia 35]

К ARM не имеет отношения.

 

А я-то думала, что HTML он и в Африке HTML. Не знала, что у ARM он какой-то особенный.

 

[A. Fig Lee 0]

Дело не в арме, то, что человек хочет, сейчас называется angular js.

Погуглите. поддержку этого на микроконтролере развернуть возможно, но трудозатраты нереальны.

Обычно серверная часть берется уже готовая и делов не много.

Но в данном случае не тут то было.

 

Есть другие извращения, менее современные..

[uriy 4]

Без jquery это делать не удобно.

XMLHttpRequest не во всех браузерах работает одинаково.

Я уже делал AJAX в связке с ucLinux на железке.

Сейчас работаю с проектом на FreeRTOS, надеюсь тоже использовать AJAX.

Через пару месяцев наверно доберусь до веб морды.

Про angular js не слыхал надо почитать.

[vovanxp 0]

Можно проще - разделить страницу на окна (FRAMES) в каждом окне которой будет свой интернет-контекст (<FRAME SRC=...>).

И во все контексты, которые требуют периодического обновления, поставить тег вроде этого:

<meta http-equiv="refresh" content="60">

который обновляется/перезагружается через каждый 60 сек.

 

Самая сложная здесь проблема - так поделить страницу на части, чтобы обновляемые числа оказались в отдельном окне(ах).

Но самая простая реализиция - двухфреймовая, где внешний вид табло и шапка заголовка (может быть не только вверху, но и слева) находится в одном фрейме и никогда не обновляется (мегатег refresh у нее отсутствует), а числа находятся в другом фрейме, который периодически обновляется.

 

Я понимаю что это наглость, но не могли бы вы заготовку создать, для меня это все очень новое. Пока хочу сделать как можно проще, а потом буду скрипты докручивать. Я понимаю что HTML, JAVASCRIPT... не имеет прямое отношение к ARM, но как я понимаю веб- сервер на stm имеет ограничения, у меня веб-сервер без NETCONN и SOCKETS.

 

 

 

 

 

 

 

 

[AlexandrY 3]

Я понимаю что это наглость, но не могли бы вы заготовку создать, для меня это все очень новое. Пока хочу сделать как можно проще, а потом буду скрипты докручивать. Я понимаю что HTML, JAVASCRIPT... не имеет прямое отношение к ARM, но как я понимаю веб- сервер на stm имеет ограничения, у меня веб-сервер без NETCONN и SOCKETS.

 

Вот пример страницы выводящей непрерывно график нагрузки за последнюю секунду микроконтроллера встроенного WEB сервера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="FLOT/excanvas.pack.js"></script>
<script language="javascript" type="text/javascript" src="FLOT/jquery.js"></script>
<script language="javascript" type="text/javascript" src="FLOT/jquery.flot.js"></script>
</head>
<body>

<div id="placeholder1" style="margin-left:20px;width:500px;height:150px"></div>

<script type="text/javascript">

var t;

var data_arr1 = [<!-#cpuuse_graph CPUUSE=last_sec>];

var options1 = 
{
    legend: { show: false},
    lines: { show: true},
    colors: ["#000066"],
    grid: { color: "#990000"},
    points: { show: true},
    yaxis: { noTicks: 10},
    selection: { mode: "xy"}
};

function timedCount()
{
    t=setTimeout("timedCount()",1000);
    
    $.post('/cpuuse_graph',{CPUUSE:"last_sec"}, refresh_placeholder1);
}

function refresh_placeholder1(data)
{
    eval("data_arr1 = [" + data + "]");
    $.plot($("#placeholder1"), [ data_arr1] , options1);
}

$( timedCount());

</script>
</body>
</html>

 

Сделано с использованием библиотеки Google jquery

Каждую секунду вызывается функция timedCount которая посылает CGI запрос вида http://{имя вашего сервера}/cpuuse_graph?CPUUSE=last_sec

Сервер должен понимать такой запрос и высылать в ответ массив чисел через запятую.

 

[uriy 4]

Использование Google jquery требует наличие интернета?

[Xenia 35]

Я понимаю что это наглость, но не могли бы вы заготовку создать, для меня это все очень новое. Пока хочу сделать как можно проще, а потом буду скрипты докручивать. Я понимаю что HTML, JAVASCRIPT... не имеет прямое отношение к ARM, но как я понимаю веб- сервер на stm имеет ограничения, у меня веб-сервер без NETCONN и SOCKETS.

 

Таких примеров в интернете масса. Ищите на слово "Фреймы". Например, это:

https://htmlweb.ru/html/frame.php

Там и пример есть. Только заметьте, что в случае фреймовой организации каждое окно заполняется из кого-то адреса/линка.

Т.е. пример скрипта для двух окон может выглядеть так:

<HTML>
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="yes" BORDER="5" >
   <FRAME src="left.htm" NAME="toc_window">
   <FRAME src="right.htm" NAME="main_window">
</FRAMESET>
</HTML>

- Это ВСЁ! Ничего другого в этом html-скрипте нет и не должно быть! Хотя многооконная структура может быть богаче.

Однако во всех случаях сначала <FRAMESET> делит площадь вертикально (COLS) или горизонтально (ROWS), а затем тут же следуют в требуемом количестве <FRAME>, которые указывают адрес контеста, который в образовавшиеся окна загружать. Но можно в какие-то окна не загружать контест, а продолжать делить дальше, с помощью другого <FRAMESET>.

 

Вот вам наглядный пример (я его пришпилила к сообщению):

<HTML>
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="yes" BORDER="5" >
   <FRAME src="http://ru.thetimenow.com/clock/russia/moscow">
   <FRAME src="http://electronix.ru/forum/index.php?s=&showtopic=125728&view=findpost&p=1310551">
</FRAMESET>
</HTML>

Здесь я поделила страницу по вертикали на части 25% : 75%. В левую часть загрузила сайт http://ru.thetimenow.com/clock/russia/moscow, а в правую ваше сообщение с этого сайта.

 

В тех случаях, когда требуется периодическое обновление, то тег <meta> ставится не здесь, а в скрипте того контекста, который в данном окне вызывается.

Слева часы идут, только шрифт слишком крупый - ползунок влево надо смещать, чтобы секунды видно было. При этом текст обновляется только слева, а справа он неподвижен.

test.html

[Mahagam 0]

Xenia, сегодня фреймы считаются дурным тоном, сродни использованию goto.

[AlexandrY 3]

Использование Google jquery требует наличие интернета?

 

Скрипты могут лежать и на embedded WEB сервере.

Броузерами они кэшируются, так что грузиться будут один раз.

 

Xenia, сегодня фреймы считаются дурным тоном, сродни использованию goto.

 

Эт точно, гонять целиком WEB страницы, когда можно послать только данные и даже сжатые это немного кривовато.

[kolobok0 0]

Я понимаю что это наглость,...

 

это не наглость, это ваша лень...

поиск Вам в зубы. Вектора уже написали выше. Имхо "XMLHttpRequest" вектор правильный. Через него выйдете на готовый JScript-пример по асинхронному запросу к серваку пост либо гэт (там же найдёте универсальность к броузерам).

Далее вкурите язык, немного хэтэмээль и будет вам счастье.

Изменено 29 января, 2015 пользователем kolobok0

[vovanxp 0]

Всем большое спасибо, теперь знаю куда двигаться.