Форум разработчиков электроники ELECTRONIX.ru > Частичное динамическое обновление веб-страницы

vovanxp

Jan 28 2015, 21:26

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

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

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

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

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

Спасибо.

scifi

Jan 28 2015, 22:03

Цитата(vovanxp @ Jan 29 2015, 00:26)

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

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

Xenia

Jan 28 2015, 22:18

Можно проще - разделить страницу на окна (FRAMES) в каждом окне которой будет свой интернет-контекст (<FRAME SRC=...>).
И во все контексты, которые требуют периодического обновления, поставить тег вроде этого:
<meta http-equiv="refresh" content="60">
который обновляется/перезагружается через каждый 60 сек.

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

x893

Jan 28 2015, 22:30

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

Xenia

Jan 28 2015, 22:34

Цитата(x893 @ Jan 29 2015, 01:30)

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

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

A. Fig Lee

Jan 29 2015, 02:24

Дело не в арме, то, что человек хочет, сейчас называется angular js.
Погуглите. поддержку этого на микроконтролере развернуть возможно, но трудозатраты нереальны.
Обычно серверная часть берется уже готовая и делов не много.
Но в данном случае не тут то было.

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

uriy

Jan 29 2015, 05:14

Без jquery это делать не удобно.
XMLHttpRequest не во всех браузерах работает одинаково.
Я уже делал AJAX в связке с ucLinux на железке.
Сейчас работаю с проектом на FreeRTOS, надеюсь тоже использовать AJAX.
Через пару месяцев наверно доберусь до веб морды.
Про angular js не слыхал надо почитать.

vovanxp

Jan 29 2015, 08:41

Цитата(Xenia @ Jan 29 2015, 02:18)

Можно проще - разделить страницу на окна (FRAMES) в каждом окне которой будет свой интернет-контекст (<FRAME SRC=...>).
И во все контексты, которые требуют периодического обновления, поставить тег вроде этого:
<meta http-equiv="refresh" content="60">
который обновляется/перезагружается через каждый 60 сек.

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

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

AlexandrY

Jan 29 2015, 09:11

Цитата(vovanxp @ Jan 29 2015, 10:41)

Я понимаю что это наглость, но не могли бы вы заготовку создать, для меня это все очень новое. Пока хочу сделать как можно проще, а потом буду скрипты докручивать. Я понимаю что 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

Jan 29 2015, 09:21

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

Xenia

Jan 29 2015, 09:22

Цитата(vovanxp @ Jan 29 2015, 11:41)

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

Таких примеров в интернете масса. Ищите на слово "Фреймы". Например, это:
https://htmlweb.ru/html/frame.php
Там и пример есть. Только заметьте, что в случае фреймовой организации каждое окно заполняется из кого-то адреса/линка.
Т.е. пример скрипта для двух окон может выглядеть так:

Код

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

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

Код

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

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

Mahagam

Jan 29 2015, 09:52

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

AlexandrY

Jan 29 2015, 09:56

Цитата(uriy @ Jan 29 2015, 11:21)

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

Скрипты могут лежать и на embedded WEB сервере.
Броузерами они кэшируются, так что грузиться будут один раз.

Цитата(Mahagam @ Jan 29 2015, 11:52)

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

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

kolobok0

Jan 29 2015, 10:17

Цитата(vovanxp @ Jan 29 2015, 11:41)

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

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

vovanxp

Jan 29 2015, 10:57

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

vovanxp

Feb 5 2015, 12:39

Все получилось, создал простую заготовку, использовал jquery, также получилось график построить.
Может кто-то тоже не будет знать как и с чего начать, выкладываю заготовку.

Теперь пробую создать динамическую страницу, то есть чтоб МК сам строил страницу

vovanxp

Feb 12 2015, 12:16

Не могу найти решение проблемки.

Keil uVision5, в настройках кодировка ANSI

Во всех страничках прописано
<meta http-equiv="content-language" lang="ru" />
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

Если заходить на страничку напрямую http://192.168.5.38/LED.html, то все ОК, а если подтягивать через jQuery('#tabl').load('LED.html');
тогда вместо русских букв симфолы �

scifi

Feb 12 2015, 12:22

Цитата(vovanxp @ Feb 12 2015, 15:16)

Это надо прописывать в заголовках HTTP:
Content-Type: text/html; charset=windows-1251

vovanxp

Feb 12 2015, 13:45

Цитата(scifi @ Feb 12 2015, 16:22)

Это надо прописывать в заголовках HTTP:
Content-Type: text/html; charset=windows-1251

Так и есть

HTTP_Send_String(pcb, hs, "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head>");
HTTP_Send_String(pcb, hs, "<meta http-equiv=\"content-language\" lang=\"ru\" />");
HTTP_Send_String(pcb, hs, "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1251\">");
HTTP_Send_String(pcb, hs, "</head>");

scifi

Feb 12 2015, 14:31

Цитата(vovanxp @ Feb 12 2015, 16:45)

Так и есть

kolobok0

Feb 12 2015, 15:35

Цитата(vovanxp @ Feb 12 2015, 15:16)

Не могу найти решение проблемки....

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

vovanxp

Feb 12 2015, 19:23

Цитата(kolobok0 @ Feb 12 2015, 19:35)

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

Исходный текст формируется на лету в коде, то есть страница заранее не скомпилирована, это страница /LED.html.
На напрямую страница отображается правильно http://192.168.5.38/LED.html

А index.shtml кодится с помощью makefsdata.exe

uriy

Feb 13 2015, 04:55

У меня тоже бывали проблемы с кодировкой. Перешел на utf-8 все стало нормально.

vovanxp

Feb 13 2015, 05:14

Цитата(uriy @ Feb 13 2015, 07:55)

У меня тоже бывали проблемы с кодировкой. Перешел на utf-8 все стало нормально.

Тогда в keil нужно выставить в настройках utf-8 соответсвено русской язык не будет правильно отображается.
Попробуюю сделать по-другому шапку и подвал брать из файлов а таблицу генерыровать в коде

P.S. А не тогда придется всю страницу тянуть

kolobok0

Feb 15 2015, 10:22

Цитата(vovanxp @ Feb 13 2015, 08:14)

Тогда...

локаль со стороны сервака на обработчике выставляете или нет?

vovanxp

Feb 17 2015, 08:27

Давайте я лучше всю инфу напишу.
keil настройках utf-8, подменен UvEdit.dll, иначе русский не отображается.

LED.html подтягивается с index.html

В броузере отображается так на скриншоте
Исходные коды страниц сохранные из броузера

kolobok0

Feb 17 2015, 20:29

Цитата(vovanxp @ Feb 17 2015, 11:27)

Давайте...

Вот тут похоже Ваша проблема обсуждалась

траблы jQuery (читать последнии два топика)

Если бы всё сделали в рукопашную (там функция на 50 строчек) то проблем бы собственно и не было бы...
А со слоном в стеклянной лавке - вот посуда и полетела...
имхо если с чёрным ящиком не получится = вектор прежний "XMLHttpRequest"

scifi

Feb 18 2015, 06:47

Цитата(kolobok0 @ Feb 17 2015, 23:29)

Если бы всё сделали в рукопашную (там функция на 50 строчек) то проблем бы собственно и не было бы...
А со слоном в стеклянной лавке - вот посуда и полетела...
имхо если с чёрным ящиком не получится = вектор прежний "XMLHttpRequest"

+1. Вот до чего доводит вредная привычка всюду тащить "библиотеки" по поводу и без повода.
Голый жабаскрипт и HTML - очень адекватное решение. Любой вопрос по этой теме разжёван в инете 50 раз и гуглится за секунду.
Кстати, у меня 55 строчек :-)

CODE

window.onload = refInit;
var timeout;

var refXmlHttp;

function refInit()
{
	timeout = 1000 * document.getElementById("refrate").firstChild.nodeValue;
	refXmlHttp = new XMLHttpRequest();
	refXmlHttp.onreadystatechange = refOnLoad;
	if (timeout != 0)
	{
		setTimeout("refSendRequest()", timeout);
	}
}

function refSendRequest()
{
	refXmlHttp.open("GET", "/mondata.xml", true);
	refXmlHttp.send(null);
}

function refOnLoad()
{
	if (refXmlHttp.readyState == 4) // 4 = "loaded"
	{
		if (refXmlHttp.status == 200) // 200 = OK
		{
			refIterateAll();
			if (timeout != 0)
			{
				setTimeout("refSendRequest()", timeout);
			}
		}
	}
}

function refIterateAll()
{
	var nodes = refXmlHttp.responseXML.documentElement.childNodes;
	for (var i = 0; i < nodes.length; i++)
	{
		for (var item = nodes.item(i).firstChild; item; item = item.nextSibling)
		{
			if (item.parentNode.nodeName == "values")
			{
				var target = document.getElementById(item.nodeName);
				if (target)
				{
					target.firstChild.nodeValue = item.firstChild.nodeValue;
				}
			}
		}
	}
}

kolobok0

Feb 19 2015, 00:13

ОФФ/2:

Цитата(scifi @ Feb 18 2015, 09:47)

CODE

...
function refInit()
{
	timeout = 1000 * document.getElementById("refrate").firstChild.nodeValue;
	refXmlHttp = new XMLHttpRequest();
	refXmlHttp.onreadystatechange = refOnLoad;
	if (timeout != 0)
	{
		setTimeout("refSendRequest()", timeout);
	}
}
...

Не совсем универсальное решение. На просторах инета накопал в своё время более универсальную приблуду...

Код

function createRequestObject()
{
    try
    {
        return new XMLHttpRequest()
    }
    catch (e)
    {
        try
        {
            return new ActiveXObject('Msxml2.XMLHTTP')
        }
        catch(e)
        {
            try
            {
                return new ActiveXObject('Microsoft.XMLHTTP')
            }
            catch(e)
            {
                return null;
            }
        }
    }
}

Сишный стиль - то привычка

но вызовы которые могут вызвать падёж - лучше в трай-кэтч. И разные активИкс - то под разны броузеры. Это создаётся один объект связи для асинхронного обращения
к серваку. Ну и универсальная функция приёма-передачи. Там собственно всегда одно и то-же, только обработчик для парсинга - разные, передаётся как параметр в обработчик.

scifi

Feb 19 2015, 07:27

Цитата(kolobok0 @ Feb 19 2015, 03:13)

Не совсем универсальное решение. На просторах инета накопал в своё время более универсальную приблуду...

А я намеренно срезал всю эту хрень. Если у юзверя стоит IE6, то он сам дурак. В нормальных браузерах всё работает, а большего мне и не надо.