Прошивка TCP2UART переходника с настройкой по Web

[pvvx]

Это всего ознакомительный пример, построенный на проекте web-свалки из Разработка ‘библиотеки’ малого webсервера на esp8266. Он создан не для таких как @AleksLux, а для модификации пользователем HTML файлов web-диска и общего примера использования web-свалки.

Прошивка TCP2UART переходника - там качаем fullflash_and_webfs_xxx.zip

Внимание!:
1) Если не требуется Web, то TCP2UART организуется на прошивке AT версии от 0.23, к примеру командой: AT+SAVETRANSLINK =<mode>,<IP>,<port>[,<type>].
2) GPIO15 на модулях ESP-01 соединен с GND и включать "Flow enable" нельзя.
3) При прошивке всегда ставим размер Flash 512 Кбайт (4Mbit)! Реальный размер определяется автоматически самой прошивкой.
4) Если Flash на модуле более 512 Кбайт, то после подключения к AP "ESP8266" требуется заливка диска программой WEBFS22.exe или эксплорером набрав http://192.168.4.1/fsupload. Можно записать WEBFiles.bin и программатором по адресу 0x80000.

NETBIOS имя берется от WiFi AP и для AP добавляется первая буква "a", для ST - "s". Пример (по первому старту): 'http://sesp8266' и 'http://aesp8266'. Но NETBIOS в основном для Windows... и для WiFi-USB свистков возможно надо указать "Включить NetBios через TCP/IP":


Как сделать из прошивки TCP2UART удаленную "мигалку десятью светодиодами" описано в файле 10leds_ru.txt вложенном в архив (дубль тут). Для GPIO, ADC, VDD-ADC есть доступ и через Modbus TCP (порт 502). Краткое описание переменных в ReadMe.txt вложенном в архив (дубль тут)
Так-же в прошивке есть вывод 14-ти битных замеров ADC по UDP с шагом от нескольких Герц до 20 кГц - это обозвано WDRV.

Исходники, временно, до появления сильных различий, находятся в теме
Разработка ‘библиотеки’ малого webсервера на esp8266.


Базовый дизайн страниц от Algis, а ошибки в тексте исправляем сами

При первом старте, после прошивки программы или сбросу установок, имеем AP станцию:
SSID/Name: ESP8266
Password: 0123456789
Режим доступа к AP по умолчанию 'OPEN'.
Имя AP и её пароль является именем и паролем для входа на "защищенные" страницы сервера и используется для записи диска по http://192.168.4.1/fsupload.

Исходники страниц сервера и программа их компоновки диска приведены в архиве вместе с прошивкой.

Диск собирается (и загружаются) программой WEBFS22.exe. Загрузка возможна и через Web интерфейс, даже если файловая система диска WEBFiles.bin не загружена или испорчена.

Предельный размер диска для стандартной Flash в 512 Кбайт (WEBFiles.bin) равен 256 килобайт. Для Flash типа W25Q128 предельный размер диска выходит 15,5 Mbytes. Существует ограничение в максимальном кол-ве файлов в 250 шт.

TCP2COM работает с сигналами RTS/CTS (GPIO15/13 или GPIO1/3 если включен swap) при включенном 'Flow Control'. При неактивном соединении или плохой связи, сигнал RTS запрещает прием данных (RXD, GPIO3(13 - swap) модуля). Сигнал CTS останавливает вывод с модуля данных (TXD, GPIO1(15 - swap) модуля). 'LoopBack' при включенном 'Flow Control' аппаратно не поддерживается чипом.
TCP2COM отключается при установке порта с номером ноль (отключается и управление RTS/CTS и их выводы переводятся I/O порты).

Сброс настроек WiFi по умолчанию:

Используется ножка RX (GPIO3 или GPIO13 если включен swap) и при старте модуля на ней отслеживается "притяжка" к gnd в течении 25 ms. Опрос производится сразу после старта прошивки, после вывода сообщений BIOS-а. Если включена инверсия сигнала RX, то сброс производится "притяжкой" вывода RX к +3.3V. В случае, если за время опроса в 25 ms проходят импульсы или есть перепад, сброса не производится. Это защищает от сброса настроек при перезагрузке модуля во время коммуникаций по UART. Импульсы опрашиваются по аппаратному прерыванию от ножки.

О скоростях UART

PS: Проверяем и пишем найденные баги и пожелания - буду править.

 

[Algis]

... пока не будут “касиво” нарисованы и предоставлены участниками данной конференции (или другими) альтернативные и частично адаптированные к данному проекту страницы WEB-интерфейса.

Могу привести в порядок и стилизовать веб файлы, только коротко опишите / дайте пример или ссылку чтобы знать что для вас означает “касиво”

 

[pvvx]

Могу привести в порядок и стилизовать веб файлы, только коротко опишите / дайте пример или ссылку чтобы знать что для вас означает “касиво”

1) Чтобы работало на любой железке с экраном имеющей експлорер и выход в сеть.
2) Чтобы не грузило в странице толпу файлов (пару, типа картинка и ещё скрипт - можно)
3) Чтобы была поддержка будущих изменений (просто требует времени по мере развития, т.к. я не хочу и не имею времени заниматься дизайном)
Уже много было желающих, но "воз и ныне там". Последняя попытка была на основе этого (ещё желательно как-то учесть "моральный аспект", описанный по приведенной ссылке).
Недавно был сделан перевод этих страниц на русский, автор возможно ещё проявиться тут... Для этого проекта и были заменены разделители в именах - вместо '.' теперь '_' - так лучше вяжется при использовании в java - типа: document.wifi_st_ip, а не document.wifi.st.ip ...
Сразу предусмотреть расширения:
1) Включение лампочки на назначенном выводе или делать спец. проект web-страниц для "телепузиков"? (большая кнопка с лампочкой на всю страницу для андроидонутых)
2) Как-то сделать сканирование станций - могу выдавать xml - тут надо обговорить как это будет исполняться и вписываться в страницу по времени...
3) предусмотреть TCP "клиента" - типа два ESP8266 создают удлинитель UART
Вроде всё, остальное - мелочевка.

 

[Algis]

1) Чтобы работало на любой железке с экраном имеющей експлорер и выход в сеть.
2) Чтобы не грузило в странице толпу файлов (пару, типа картинка и ещё скрипт - можно)
...

Прикрепляю пример миниалистического дизайна, все что относятся к оформлению внешнего вида - убранно в общий для всех страниц файл style.css, посмотрите, напишите свои замечания.

3) Чтобы была поддержка будущих изменений (просто требует времени по мере развития, т.к. я не хочу и не имею времени заниматься дизайном)...

хорошо, html часть очень простая, мне это много времени не отнимает, могу обещать поддержку.

 

[Andy Korg]

pvvx а мне веб морда понравилась которую вы выкладывали в "Последняя попытка была на основе этого...", на ней пилю себе морду. В некоторых страницах по три -четыре js файла подгружается, вроде все довольно шустро.

 

[Algis]

pvvx а мне веб морда понравилась которую вы выкладывали в...

html там слишком перегружен обилием атрибутов, можно внешность похожую сделать, но код должен остатся простым

 

[Andy Korg]

html там слишком перегружен обилием атрибутов, можно внешность похожую сделать, но код должен остатся простым

это мой первый проект с использованием html и js, поэтому пока "обилие атрибутов" для меня неважно, считай третий вечер пошел плотного знакомства с вебмордами.

 

[Algis]

это мой первый проект с использованием html и js...

Тогда нормально

 

[JustACat]

Как верстальщик/web-программист (PHP, JS, CSS) соглашусь с Algis на 100%: разметка (html) отдельно, внешний вид (стили в css) отдельно.
В идеале: в html ничего связанного с внешним видом. Только разметка в виде чистых html тегов (с классами и/или с id) и данные.
Вид от Algis понравился. Плюсую. Единственно что я бы от одинарных кавычек отказался, там в href. Почему-то привык в html только двойные кавычки везде использовать, а одинарные оставить для js.
Если нужно еще сжать и уменьшить кол-во файлов, то можно еще: минифицировать js (если будет), ну и css каким-нить постпроцессингом.
А еще можно картинки прямо в css закинуть (закодировав, либо в svg).
PS: если возникают вопросы по HTML, CSS - посоветую htmlbook.ru - там и справочник хороший по всем тегам, свойствам с поиском, и отдельно есть разные статьи на тему.

 

[Algis]

Единственно что я бы от одинарных кавычек отказался, там в href...

Согласен, просто забыл вычистить...

Если нужно еще сжать и уменьшить кол-во файлов, то можно еще: минифицировать js (если будет), ну и css каким-нить постпроцессингом.А еще можно картинки прямо в css закинуть

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

 

[mcmega]

Может понадобится, переведённые страницы залил https://yadi.sk/d/A_QI3PI-f94bh
там файлы html и один общий main.css

 

[pvvx]

Как верстальщик/web-программист (PHP, JS, CSS) соглашусь с Algis на 100%: разметка (html) отдельно, внешний вид (стили в css) отдельно.
В идеале: в html ничего связанного с внешним видом. Только разметка в виде чистых html тегов (с классами и/или с id) и данные.

А тут всё наоборот. На каждое соединение требуется память. Она уходит на прием заголовка, а експлореры ныне шлют толстые заголовки... Если из файла торчит сотня запросов на другие файлы, то столько нормальный эксплорер и откроет СРАЗУ соединений. Хотя эти буфера заголовков и удаляются после обработки, но у ESP всего 30 килобайт на всё... Для него это DDOS Так что тут ваши привычки не канают - все внешние файло в ~inc:xxx.css~ в заголовок HTML . Качество от этого не ухудшается, а скорость отдачи повышается.
Для каждого длиннющего TCP запроса, до его принудительного останова (уменьшением размера приемного окна, а начальный у нас ~4 MSS задан в LwIP) требуется буфер в 6 кило и ещё пару MSS (~1560 байт шт) в LwIP. Не забывайте - минимальный WEB сервер с нормальным TCP стеком требует от 128 килобайт памяти на буфера для одного сокета .
Короче при куче запросов будет тормоз, т.к. LwIP уменьшит буфера (размеры стеков) для каждого соединения (память ему для сборки ограничена и выделяется она в том-же heap).
Открыть 10 соединений и в каждом передать по одному байту, закрыть эти 10 соединений и оставить 10 структур TIME_WAIT на сотню секунд в памяти для полной поддержки TCP - это приходит на ум только великим программистам Зато тепло - поработает на славу каждый промежуточный элемент цепи инета, лопятя 100500% лишних транзакций для передачи этих 10 байт и детям останется топить только ядеркой...

 

[JustACat]

pvvx, а вот вы меня и поняли с точностью до наоборот (либо просто невнимательно прочли)
Про отделение html и css я писал именно логическое, чтобы стили были отделены от разметки - это в итоге дает удобство, гибкость и простоту изменения вида без изменения данных.
При этом я ни разу не говорил, что обязательно раскидывать на файлы... Если вы перечитаете, то увидите, что я наоборот даже предложил картинки закодировать в css (есть для этого способы, либо можно еще svg применить).
А далее, если нужно вообще все свести в 1 файл, то пихаем стили прямо в html, но в отдельную секцию style. Так же можно в html и js вшить в секцию script. В итоге можно вообще все нужное для отображения и работы странички выдать одним единственным файлом.

Для примера, который выложил Algis, получится примерно так:

Спойлер: Код

<html><head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>ESP8266EX TCP2UART</title>
    <style type="text/css">
        body{width:450px;color:black;background:#fff;font-size:14px;font-family:arial;}
        img,table{border:0;}
        .top{color:#888;background:url(logo.gif) no-repeat 10px 0;padding:3px 0 0 55px;font-style:italic;margin:0 0 10px 0;}
        .top img{vertical-align:middle;}
        ... остальные стили ...
    </style>
    <script type="text/javascript">
        ... тут можно js скриптов напихать ...
    </script>
</head>
<body>
<h3 class="top">ESP8266EX TCP2UART</h3>
<div class="menu">
    <a href="index.htm">Main</a>
    <a href="protect/uart.htm">TCP-UART Seting</a>
    <a href="protect/wifi_ap.htm">WiFi AP Seting</a>
    <a href="protect/wifi_sta.htm">WiFi Station Seting</a>
    <a href="protect/upload.htm">WebFS Upload</a>
</div>
<div class="content">
    <table class="details">
    <caption>Pin definition</caption>
    <tr>
        <th>I/O</th><th>Dir</th><th>Name</th>
    </tr><tr>
        <td>GPIO1</td><td>Output</td><td>TX</td>
    </tr><tr>
        <td>GPIO3</td><td>Input</td><td>RX</td>
    </tr><tr>
        <td>GPIO13</td><td>Input</td><td>CTS</td>
    </tr><tr>
        <td>GPIO15</td><td>Output</td><td>RTS</td>
    </tr></table>
</div>
<div class="footer">
    Version: ~sys_sysver~.<br>
    TCP2UART Connection: ~tcp_uart_remote~<br>
</div>
<div class="copyright">(c) 2014..2015 by <a href="http://esp8266.ru/">esp8266.ru</a></div>
</body></html>

Причем подставлять стили/js в нужное место можно уже по ходу выдачи данных серверу. А на ESP хранить их отдельно, опять же чтобы не дублировать (если стили одинаковые для нескольких разных html'ек).

В итоге мы можем выдать весь контент 1 файлом через 1 запрос.

Единственное но: мы при этом полностью лишаемся преимуществ кеширования в браузере. То есть обычно браузер кеширует файлы стилей и js-скриптов (как и картинки/шрифты и прочее), подключаемые к страницам, и не перекачивает их каждый раз с сервера (в нашем случае - с ESP). А в случае полного включения всего и вся в html-страничку, нам придется каждый раз отдавать браузеру весь этот объем данных, пусть и через 1 запрос.

Что в случае с ESP предпочтительнее? - это уже вам виднее как мастеру в этой области.

PS: кстати, минификацию (сжатие, путем убирания лишних символов и заменой длинных имен классов/функций на короткие), можно производить в момент формирования WEBFS-диска вашей утилитой. То есть имеем для редактирования нормальные html, css, js со всеми пробелами, отступами и нормальными названиями, а когда запускаем формирование из них бинарника для загрузки в ESP, тогда и минифицируем их (например, этим, сам не проверял).

 

[pvvx]

pvvx, а вот вы меня и поняли с точностью до наоборот (либо просто невнимательно прочли)

Извиняюсь, да - неверно выразился и переборщил привязав к вам. Я не имел в виду лично кого-то... ночью писал, да чем то занят был...

В итоге мы можем выдать весь контент 1 файлом через 1 запрос.

Можно, но истина она всегда посередке. Большие картинки и общий, не парсящийся скрипт можно отдельно - они кешируются и передаются сжатыми GZIP.
Css при отладке можно внешний, потом его включить в файлы функцией include: ~inc:имя_файла~ для уменьшения общего размера диска. В данной версии ~inc:имя_файла~ поддерживает глубину вложений в 3 итерации. Используется буфер в 4-ре индекса файлов: 1 -основной и 3 inc друг в друге. 4-ре по причине 32-х битного CPU - индекс файла 8-ми битный, а менее 32 бит в структуре на каждое соединение переменную не выделится - align(4)...

 

[pvvx]

Прикрепляю пример миниалистического дизайна, все что относятся к оформлению внешнего вида - убранно в общий для всех страниц файл style.css, посмотрите, напишите свои замечания.

Очень хорошо - мне нравится Надо бы всё слить в кучу и дописать - будет вариант N1 (основной), если допишите. Вариантов сайта можно приложить много, чтобы никому не отказывать, а место в прошивке ещё много и все можно поддержать...
Допишите что сможете, я адаптирую, если что не так пойдет. Разбивка на файлы (меню) как у меня в примере не обязательна. Там не хватает странички общего выбора - AP и/или Station и других настроек - было лень и не нарисовал.

 

[Algis]

Очень хорошо - мне нравится Надо бы всё слить в кучу и дописать - будет вариант N1 (основной), если допишите...

хорошо, вернусь после выходных, сделаю. Сколько смотрел, ваша сборка без проблем работает, когда доплнительно используется один js + один css файлы.
Кстати, поддержку языков тоже лучше сделать не плодя html файлы а через массив фраз в том самом js, в сумме займет меньше места, гораздо проще поддержывать и легче добавить новый язык.

 

[pvvx]

Сколько смотрел, ваша сборка без проблем работает, когда дополнительно используется один js + один css файлы.

Там и десять запросов почти одновременно поддерживается. Всё это чисто для оптимизации и возможности дальнейшего расширения.
По умолчанию стоит #define MAX_WEBFS_OPENFILES 31 - одновременно открытых файлов из 250 в переделе на диске

 

[Algis]

Там и десять запросов почти одновременно поддерживается. Всё это чисто для оптимизации и возможности дальнейшего расширения.
По умолчанию стоит #define MAX_WEBFS_OPENFILES 31 - одновременно открытых файлов из 250 в переделе на диске

Отлично

веб файлы для приведения в порядок брать из Web_Base2.zip? из первого поста темы "Разработка ‘библиотеки’ малого webсервера на esp8266" ?
там последняя версия ?

 

[pvvx]

Отлично

веб файлы для приведения в порядок брать из Web_Base2.zip? из первого поста темы "Разработка ‘библиотеки’ малого webсервера на esp8266" ?
там последняя версия ?

Здесь аналогичные - там исходники СИ .
Да есть фича. Если в режиме ST меняем настройки ST, то при загрузке страницы со счетчиком адрес "редиректа" не верен. Его невозможно узнать, пока WiFi не переподключится к новой указанной в настройках AP и ему не выдадут IP. Сделать это не имеется возможности и переход к таймеру бесполезен. Конигурацию ST при таких условиях придется заканчивать как то по другому.

 

[shaman1010]

Всем доброго вечера. Теперь и сюда добрался
По прошивке - есть проблемы с режимами WiFi.
Объясню: flash - 128-я, девственно чистая.
Прошил fullflash, затем зашел в открытую сеть и залил WEBFiles.
После таймаута - все настройки видны.
Затем в настройках просто меняю OPEN на WEP (начинал по фен-шую, с WPA2-PSK) - нажимаю Set, после таймаута - в настройках остается OPEN, сетка видна.
Выбираю WPA (аналогично и со всеми остальными режимами) - после таймаута видна сеть 8266 с верным шифрованием, но ключ (даже 0123456789, думал сначала, что пароль вбиваю слишком сложный, укорачивал, но по итогу остановился на дефолтном) не подходит, соответственно подключиться к модулю нельзя.
Естественно при переводе модуля в режим station - "мы его теряем" аналогичным образом.
Т.е. при включении шифрования - всегда получаем проблему с подключением, в любой конфигурации, а WEP вообще не выбирается.

Модуль под этот проект решил выделить самый правильный (для тестов). Вот такой.