Нужна помощь HTML редактор/ версия HTML для ESP8266

-VenoM- · 4 Авг 2016

Осваиваю web интерфейс. Столкнулся с тем, что для нормального редактирования нужно странички делать в редакторе. Выбор пал на compoZer - отличная штука, которая позволяет делать странички визуально.
Но. Грабли в том, что компилятор не принимает этот html.
Вот, например.
static const char *pageStart1="

Код:

<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title>1</title>
</head>
<body>
<div style="text-align: center;"><big
style="font-weight: bold;"><big><big><big><span
style="color: black;"> NETWORK WEB SERVER</span></big></big></big></big><br>
</div>
<br>
<ul>
  <li>WEB SERVER DEFAULT SETTINGS</li>
</ul>
<br>
<textarea cols="1" rows="1" name="11"></textarea><br>
</body>
</html>"

Вылазит миллион ошибок. Может, нужно какие-то ещё библиотеки подключить? Иначе мозг взорвётся кодить HTML непосредственно в eclipse.

Victor · 4 Авг 2016

попробуйте экранировать двойные кавычки
примерно так WiFiManager/WiFiManager.h at master · tzapu/WiFiManager · GitHub

-VenoM- · 4 Авг 2016

Victor написал(а):
попробуйте экранировать двойные кавычки
примерно так WiFiManager/WiFiManager.h at master · tzapu/WiFiManager · GitHub

Спасибо, так всё работает. Однако автоматически возникает следующий вопрос... Странички постоянно добавляются, редактируются и т.д., поэтому добавление \"\" к каждым кавычкам это взрыв мозга, только несколько в замедленно действии. Не знакома ли вам программа, или функция в том же NotePad++, которая бы выполняла это форматирование автоматически?

tretyakov_sa · 4 Авг 2016

-VenoM- написал(а):
Спасибо, так всё работает. Однако автоматически возникает следующий вопрос... Странички постоянно добавляются, редактируются и т.д., поэтому добавление \"\" к каждым кавычкам это взрыв мозга, только несколько в замедленно действии. Не знакома ли вам программа, или функция в том же NotePad++, которая бы выполняла это форматирование автоматически?

Используйте внешние страницы у меня в видео есть примеры как это делается, или программу от Рубена http://esp8266.ru/forum/resources/form_convert-1-0.27/

Юрий Ботов · 5 Авг 2016

А что мешает вообще использовать в html 'одинарные кавычки' вместо "двойных"?

-VenoM- · 8 Авг 2016

tretyakov_sa написал(а):
Используйте внешние страницы у меня в видео есть примеры как это делается, или программу от Рубена http://esp8266.ru/forum/resources/form_convert-1-0.27/

Спасибо! Программа очень полезная. Подключение внешних страниц обязательно изучу, но несколько позднее.

Не судите строго, появляются новые вопросы. Надеюсь, ответы на них помогут будущим любителям.
Итак. Связка ПО Рубена+kompoZer отлично справляются. Разработка web-страницы теперь занимает приемлемое время.
Появились вопросы с обработкой данных/парсингом.

Имеем константу/страничку:

Код:

const char *pageStart1 ="<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n\r"
        "<html>\n\r"
        "<head>\n\r"
        "  <meta content=\"text/html; charset=ISO-8859-1\"\n\r"
        " http-equiv=\"content-type\">\n\r"
        "  <title>MIWI WEB SERVER</title>\n\r"
        "  <meta content=\"222\" name=\"description\">\n\r"
        "</head>\n\r"
        "<body>\n\r"
        "<div style=\"text-align: center;\">\n\r"
        "<div align=\"center\"><big style=\"font-weight: bold;\"><big><big><big><span\n\r"
        " style=\"color: black;\">MIWI NETWORK WEB SERVER</span></big></big></big></big><br>\n\r"
        "</div>\n\r"
        "<hr size=\"2\" width=\"100%\"><input name=\"page\"\n\r"
        " value=\"mainmenu\" type=\"hidden\"><br>\n\r"
        "<br>\n\r"
        "<blockquote>\n\r"
        "  <blockquote>\n\r"
        "    <dl>\n\r"
        "      <dt>&nbsp; &nbsp;\n\r"
        "LOGIN:&nbsp;&nbsp;&nbsp;&nbsp;<input maxlength=\"6\"\n\r"
        " size=\"6\" name=\"login\" value=\"login\">\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; PASSWORD: &nbsp;\n\r"
        "&nbsp;&nbsp;<input maxlength=\"20\" size=\"20\"\n\r"
        " name=\"password\" value=\"{password}\" type=\"password\">\n\r"
        "&nbsp;&nbsp; </dt>\n\r"
        "    </dl>\n\r"
        "  </blockquote>\n\r"
        "</blockquote>\n\r"
        "<blockquote id=\"dfgdfg\">\n\r"
        "  <dl>\n\r"
        "    <dt><strong><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></strong></dt>\n\r"
        "    <dt><strong><big>&nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; <button accesskey=\"0\"\n\r"
        " type=\"button\" value=\"1\" name=\"login\">LOGIN</button></big></strong></dt>\n\r"
        "  </dl>\n\r"
        "  <br>\n\r"
        "  <hr size=\"2\" width=\"100%\">\n\r"
        "  <div align=\"left\"></div>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "  <br>\n\r"
        "</blockquote>\n\r"
        "<strong></strong></div>\n\r"
        "<ul>\n\r"
        "</ul>\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\n\r"
        "&nbsp; &nbsp; &nbsp;\n\r"
        "<ul>\n\r"
        "</ul>\n\r"
        "</body>\n\r"
        "</html>\n\r";

Страничка отображает корректно, проблем нет.

1. Параметр input с value=mainmenu необходимо использовать в ф-ции:

Код:

if(os_strncmp(page, "mainmenu", 4) == 0 && strlen(page) == 8)
    {
       len = os_sprintf(buff, "%s",pageStart1);
       control_httpdSend(conn, buff, len);
    }

Но страничка не парсится (условие соответствия не выполняется), почему - ломаю голову пару дней, не могу понять.

2. Не совсем понимаю логику загрузки и работу гиперссылок между страницами.
Например.

Грузим первую страничку с гиперссылкой на вторую:

Код:

if(os_strncmp(page, "mainmenu", 4) == 0 && strlen(page) == 8)
    {
       len = os_sprintf(buff, "%s",pageStart1);
       control_httpdSend(conn, buff, len);

Грузим вторую страничку:

Код:

if(os_strncmp(page, "config", 4) == 0 && strlen(page) == 6)
    {
       len = os_sprintf(buff, "%s",pageStart2);
       control_httpdSend(conn, buff, len);

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

Юрий Ботов, программка решает. Вручную это не дело заниматься. Не индусские мы программеры

Shyster · 9 Авг 2016

-VenoM- написал(а):
что для нормального редактирования нужно странички делать в редакторе

Используйте онлайн редактор Plunker
Сразу видно результат.

-VenoM- · 15 Авг 2016

Shyster, KompoZer удобнее в разы. Перепробовал с десяток редакторов - этот мне больше всего понравился.

Вопрос с парсингом решил. Причина "не работает" была банальна: абсолютно не знаю html. Добавил поле "form" и всё гуд. Теперь создание своего web-сервера на базе noolite уже дело техники. Дальше на очереди - подключить SPI в режиме slave

и наладить общение с ЦП.

-VenoM- · 26 Авг 2016

Столкнулся с тем, что приличные странички не влазят в константы типа

Код:

static const char *page

. Какие есть варианты выйти из положения?

Сразу отвечу по поводу внешних страниц - из под адруино не пишу, так что не вариант. Пользую сборку Eclipse.

Юрий Ботов · 27 Авг 2016

-VenoM- написал(а):
[/code]. Какие есть варианты выйти из положения?
Сразу отвечу по поводу внешних страниц - из под адруино не пишу, так что не вариант.

1. Ajax с начальной загрузкой шаблона и последующей подгрузкой прочих прелестей
2. Динамическое сжатие

А приличные это сколько?

-VenoM- · 27 Авг 2016

Юрий Ботов написал(а):
1. Ajax с начальной загрузкой шаблона и последующей подгрузкой прочих прелестей
2. Динамическое сжатие

А приличные это сколько?

1. Всё новые слова. Почитал немного про AJAX. Ещё разбираться и разбираться, но принцип идеи понятен. Не понятно как загрузить в ESP этот шаблон странички, ну и ф-ции для парсинга сходу не нашёл. Есть какие-то простенькие примерчики?

2. Пока п №1 хватит

.

3. "Приличные" это 5кБ - уже всё, "memory out". С запасом неплохо бы килобайт 50-60.

Юрий Ботов · 28 Авг 2016

5 кб - это очень маленькие. Странно что с ними проблемы... хотя я не знаю сколько у вас кода. AJAX - это просто. Создаете *.html страницу, выкладываете ее на сервере, это тот шаблон который будете потом наполнять. В этой странице подключаете сверху *.js файл. В js по событию window.onload запускаете код который грузит другие куски с сервера (почитайте про XMLHttpRequest) подцепляет их либо напрямую в дерево DOM, либо, если это код js то через eval(' ... ')

-VenoM- · 28 Авг 2016

Код:

static const char *pageIndex  ="<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n\r"
"<html>\n\r"
"<head>\n\r"
"  <meta content=\"text/html; charset=ISO-8859-1\"\n\r"
" http-equiv=\"content-type\">\n\r"
"  <title>sensors</title>\n\r"
"</head>\n\r"
"<body>\n\r"
"<form>\n\r"
"  <h2 align=\"center\"><em><input value=\"sensors\"\n\r"
" name=\"page\" type=\"hidden\">&nbsp;</em></h2>\n\r"
"  <div align=\"center\"><big><big><big><big>SENSORS</big></big></big></big></div>\n\r"
"  <hr><br>\n\r"
"Enter you name for a MIWI SLAVE DEVICE #1: <input size=\"13\"\n\r"
" name=\"miwi_slave_name1\"><br>\n\r"
"  <br>\n\r"
"  <table border=\"1\" cellpadding=\"2\" cellspacing=\"2\"\n\r"
" height=\"192\" width=\"457\">\n\r"
"    <tbody>\n\r"
"      <tr>\n\r"
"        <td colspan=\"4\" rowspan=\"1\" align=\"left\"\n\r"
" height=\"5\" valign=\"undefined\" width=\"70\">MIWI\n\r"
"SLAVE DEVICE <input name=\"miwi1_number\" value=\"N/A\"\n\r"
" type=\"hidden\"> &nbsp; &nbsp;NAME:&nbsp;<input\n\r"
" value=\"N/A\" name=\"miwi1_name\" type=\"hidden\"></td>\n\r"
"        <td align=\"undefined\" valign=\"undefined\"\n\r"
" width=\"80\">Status:<font color=\"black\"><input\n\r"
" onblur=\"1\" value=\"N/A\" name=\"status1\"\n\r"
" type=\"hidden\"></font></td>\n\r"
"      </tr>\n\r"
"      <tr>\n\r"
"        <td align=\"center\" valign=\"undefined\"\n\r"
" width=\"70\">№\n\r"
"        <br>\n\r"
"of sensor</td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"80\">Type</td>\n\r"
"        <td align=\"center\" valign=\"undefined\"\n\r"
" width=\"80\">Data</td>\n\r"
"        <td align=\"center\" valign=\"undefined\">ID</td>\n\r"
"        <td align=\"center\" valign=\"undefined\">Starus</td>\n\r"
"      </tr>\n\r"
"      <tr>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_number1\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_type1\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_data1\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_id1\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_status1\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"      </tr>\n\r"
"      <tr>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_number2\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_type2\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_data2\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_id2\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_status2\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"      </tr>\n\r"
"      <tr>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_number3\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_type3\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_data3\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_id3\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_status3\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"      </tr>\n\r"
"      <tr>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_number4\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_type4\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_data4\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_id4\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" bgcolor=\"#ccccff\"\n\r"
" height=\"10\" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_status4\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"      </tr>\n\r"
"      <tr>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_number5\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_sens_type5\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_data5\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_id5\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"        <td align=\"center\" height=\"10\"\n\r"
" valign=\"undefined\" width=\"70\"><input\n\r"
" name=\"miwi1_status5\" value=\"N/A\" type=\"hidden\"></td>\n\r"
"      </tr>\n\r"
"    </tbody>\n\r"
"  </table>\n\r"
"  <br>\n\r"
"</form>\n\r"
"</body>\n\r"
"</html>\n\r";

Кода не много, тем не менее ф-ция вывода возвращает error.

Код:

len = os_sprintf(buff,"%s", pageIndex);
    if(!control_httpdSend(conn, buff, len)) {
        ESPOOLITE_LOGGING("Error httpdSend: pageStart out-of-memory\r\n");
    }

По поводу AJAX. То есть шаблон страницы может быть размещён только на внешем сервере? В ESP8266 его впихнуть никак нельзя?

И ещё такой вопрос. Библиотеки для работы с xml для UDK? По аналогии с адруиной,
типа HTTP.on(/"xml", handleXML) - отдаёт XML строки как web-страницу.

Юрий Ботов · 28 Авг 2016

6 к. примерно. Странно что с этим возникли проблемы... Видимо реально много другого кода.
Шаблон нужно размещать ИМЕННО на esp.
Как то так:
index.html
"<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n\r"
"<html>\n\r"
"<head>\n\r"
" <meta content=\"text/html; charset=ISO-8859-1\"\n\r"
" <script src="http://192.168.x.x/load.js"></script> "
" http-equiv=\"content-type\">\n\r"
" <title>sensors</title>\n\r"
"</head>\n\r"
"<body>\n\r"
"<div id="additionalcode"></div>"
"</body>";

load.js
"window.onload=function() {"
"// 1. Создаём новый объект XMLHttpRequest"
"var xhr = new XMLHttpRequest();"
"// 2. Конфигурируем его:'"
"xhr.open('GET', 'additionalcode.dat', false);"
"// 3. Отсылаем запрос"
"xhr.send();"
"// 4. Если код ответа сервера не 200, то это ошибка"
"if (xhr.status != 200) {"
"// обработать ошибку"
"alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found"
"} else {"
"// вcтавить результат в страницу"
"document.getElementById('additionalcode').innerHTML= xhr.responseText; // responseText -- текст ответа."
"}"
"}"

И таких загружаемых дивов может быть множество

Нужна помощь HTML редактор/ версия HTML для ESP8266

-VenoM-

New member

Victor

Administrator

-VenoM-

New member

tretyakov_sa

Moderator

Юрий Ботов

Moderator

-VenoM-

New member

Shyster

New member

-VenoM-

New member

-VenoM-

New member

Юрий Ботов

Moderator

-VenoM-

New member

Юрий Ботов

Moderator

-VenoM-

New member

Юрий Ботов

Moderator