В программе FLProg реализована поддержка платы ESP-WROOM-32 на основе контроллера ESP32.
Для создания прошивки доступны практически все функциональные блоки и периферийные устройства, применимые для программирования плат ардуино.
Кроме того, при выборе контроллера ESP8266 появляются новые блоки специфичные именно для этого контроллера.
В виду наличия на борту контроллера WiFi так же изменяется и дерево проекта.
Структура дерева проекта
Давайте немного систематизируем дерево проекта (не подробно)
Первая позиция- Управление мультипроектом.
Вторая- в выбранном контроллере также папка мультипроектом.
Третья- Автонастройка Arduino IDE.
Четвертая- в Настройках контроллера: Защита от зависания
Пятая- EEPROM
Шестая- Настройки WiFi модуля
Седьмая- Пользовательские параметры
Восьмая- Тэги
Девятая- Коммуникации
В зависимости от контроллера и настроек, дерево проекта может меняться.
Настройка WiFi модуля
Настройка клиента WiFi и точки доступа в разделе Настройки WiFi модуля (6 позиция), возможна их одновременная работа.
При открытии подменю Точка доступа и Клиент, открываются настройки (по умолчанию они отключены).
При двойном щелчке мыши на значок «отключён» открываются все настройки Точки доступа. Точка доступа находится в работе.
Имя сети (SSID)- Введём название сети. Например ESP32
Пароль для подключения- можем ввести и тогда при входе придётся ввести сохранённый пароль, если не заполнять пароль, то подключение будет доступно всем.
IP адрес: 0.0.0.0- вводим IP адрес. Например такой:
Все остальные настройки не трогаем (Маска подсети, Сетевой шлюз).
Стандартные параметры- смотрим сохранение параметров сети.
Точка доступа при настройки имеет такой вид:
Настроем Клиента.
При настройке WiFi модуля появляются ещё несколько подразделов.
MiniDNS- (« Модульный информатор имен в Интернете для DNS » ) — это библиотека DNS для Android и Java SE. Он может анализировать записи ресурсов (A, AAAA, NS, SRV, …), прост в использовании и расширении. MiniDNS стремится быть безопасным, модульным, эффективным и максимально простым. Он также обеспечивает поддержку DNSSEC и DANE и, таким образом, является идеальным преобразователем, если вы хотите приблизить DNSSEC к своему приложению.
Обновление прошивки по WIFI- Технология программирования “по воздуху” (Over the Air, OTA) доступна для микроконтроллеров ESP32 и ESP8266, имеющих поддержку WiFi. Данная технология позволяет обновлять их прошивку или загружать в них новую программу беспроводным способом, без всякого физического контакта с ними. Эта технология особенно полезна в случаях, когда модуль жестко закреплен в каком-нибудь устройстве и подключение кабеля к нему затруднено или физически невозможно. Технология беспроводного программирования OTA широко востребована в различных проектах интернета вещей (IoT) и применяется для удаленного обновления программного обеспечения подключенных к сети интернет устройств.
Как работает программирование “по воздуху” (OTA)
Для того чтобы иметь возможность программирования модуля ESP32 “по воздуху” (Over-the-air) сначала в него необходимо через последовательный порт загрузить специальный скетч, который содержит HTML код программы OTA Web Updater. Когда этот скетч будет загружен в модуль ESP32, он создаст веб-сервер, с помощью которого можно будет выбрать и загрузить новый скетч через веб-браузер.
Web интерфейс
Вот по этому разделу поговорим более подробно.
По умолчанию Web интерфейс отключён. Включаем его.
В создании Web интерфейса главную роль играет Отладчик веб интерфейса. Он находится на панели главного меню- меню Инструменты- Отладчик веб интерфейса.
Настроим параметры по картинке
Давайте просто запустим проект. Не забудем указать наш тип контроллера в Ардуино IDE и указать ком-порт.
После загрузки подключим сеть WIFI в телефоне (она будет под названием ESP32, пароль не затребует). Откроем браузер и укажем в командной строке IPадрес точки доступа 192.164.4.2
Загрузим страницу. Получим такой результат.
Это показывает, что код уже содержит некие настройки.
Давайте опять откроем Отладчик веб интерфейса.
Видим, что создана Главная страница. Остановим сервер и нажмём- Открыть страницу в браузере
Откроется страница в браузере компьютера. Теперь мы можем видеть, что будет отправляться в сеть.
Щёлкнем на страницу отладчика веб-интерфейса. Откроются настройки.
Общие настройки– Можно настроить название страницы. Адрес после host. Период обновления. Отображение пунктов меню.
Кнопки– вот здесь и видим две кнопки, которые по умолчанию есть на странице.
Создадим новые страницы в отладчике веб-интерфейса
Дадим название и адрес страницы после /host. Закроем отладчик.
Получится такой вид в веб браузере
Добавим виджеты на страницу
Выберем в Главном меню программы Отладчик Веб интерфейса (значок появляется при работе веб интерфейса).
Выберем 2 страницу. На странице Виджеты нажмём команду Добавить параметр.
Выберем Системный параметр WiFi клиент- Состояние.
Заполним Название параметра, тип параметра, Тексты для состояний
Когда заполним все параметры и сохраним, появится созданный нами системный параметр в вкладке Виджеты.
При просмотре картинки в браузере телефона, это будет выглядеть так.
Есть не соответствие текста и другие дефекты.
Давайте исправим эти моменты.
Во первых изменим текст вначале и конце страницы (ESP8266, ESP8266 – Разработано в программе FLProg (https://flprog.ru)).
Начнём компиляцию, при открытии Arduino IDE, увидим наш текст
Изменим текст.
Надо признать что при следующей загрузки скетча,текст будет изменён на первоначальный. Есть и возможность изменить текст штатно, но здесь мы изучаем расположение кода HTML.
Вот что получится в браузере.
Текст с названиями страниц не вмещается.
Изменим название страницы на короткое имя.
На второй странице есть кнопки (сохранения и перезагрузки).
Уберём их. Отожмём галочку- Использовать кнопку.
Кнопки исчезнут на этой странице. Они не используются.
После изменений, в браузере это будет выглядеть так.
Создадим ещё один элемент. В системном параметре в разделе Контроллер выберем Частота процессора.
Заполним параметры
В разделе Виджеты отобразится новый системный параметр.
Получим такой результат.
Давайте добавим ещё один параметр Размер свободной памяти в качестве виджета на 2 страницу.
Настроим название параметра и сохраним.
Новый виджет отразился на главном окне веб отладчика
Добавим HTML код на страницу. Нажмём значок Добавить HTML код. Введём код как на рисунке.
Здесь мы создали контейнер div внутри контейнера создали flex-container. Для чего это создано можем посмотреть на https://metanit.com/web/html5/12.1.php
Вкратце об этом: благодаря Flexbox проще создавать сложные, комплексные интерфейсы, где мы с легкостью можем переопределять направление и выравнивание элементов, создавать адаптивные табличные представления. Кроме того, Flexbox довольно прост в использовании.
Переместим наш код в начало при помощи кнопки, сделав первым перед другими виджетами.
Создадим ещё HTML код. Сохраним настройки согласно рисунку.
Здесь мы закрываем контейнер div.
Мы создали начало и конец контейнера с классом Flexbox и все остальные виджеты находятся внутри контейнера
У нас должно получится вот такое расположение виджетов.
Давайте создадим такую структуру виджетов
Изучим виджеты.
Изменим HTML код под названием: div 1 начало и style.
Чуть по позже изучим этот код.
Следующий код под названием: div 1 конец. Закроем первый контейнер.
Откроем второй контейнер с названием: div 2 начало
Создадим два виджета
- Имя сети
- Точка доступа
Ну и наконец закроем второй контейнер
Теперь вернёмся к коду под именем: div 1 начало и style. Тег <style> применяется для определения стилей элементов веб-страницы.
<style>.
.flex-container {
column: flex;
}
.flex-container {
text-align:left;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
</style>
<div class=”flex-container color1″>
Первая часть кода
<style>.
.flex-container {
column: flex;
}
Содержит флекс-контейнер
Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items).
Элемент column: flex; Значение flex определяет то, как flex-контейнер будет представлен на странице. В данном случае column располагает flex-элементы располагаются не рядами (rows), а колонками (columns).
Следующий участок кода
.flex-container {
text-align:left;
font-size: 1.1em;
padding: 1.5em;
color: white;
- Свойство text-align определяет горизонтальное выравнивание текста в пределах элемента (в данном случае выравнивание влево- left.
- Свойства font-size: 1.1em;
Определяет размер шрифта.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах. В данном случае размер больше на 1.1 раз.
- Свойства padding: 1.5em;
Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов — это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.
- Свойства color: white;
Определяет цвет шрифта. В данном виде белый цвет
Следующая часть кода.
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
</style>
- Здесь мы создаём два свойства color1, color2 и назначаем им разные цвета фонов контейнеров.
Ну и </style> закрывает настройки стилей.
- Здесь мы открываем первый контейнер флекс-контейнер и ссылаемся на color1″. Все остальные нагрузки в стиле остаются общими для всех контейнеров.
<div class=”flex-container color1″>
Вначале второго контейнера мы ссылаемся уже на color2 с другими настройками фона контейнера
Давайте наконец то изменим заголовок и футер, который отображается на веб странице.
Зайдём в дерево проекта. Выберем Настройки веб интерфейса, двойным щелчком мыши откроем меню настроек.
Здесь можно выполнить много настроек, вернёмся к ним позже.
Ну а пока зайдём на вкладку Порядок блоков. Щёлкнем на Блок заголовка. Вот здесь и изменим текст ESP8266 на ESP32
Изменим текст
Также поступим и с блоком Нижний колонтитул. И также изменим текст ESP8266 – Разработано в программе FLProg (https://flprog.ru) на необходимый нам. Например. Разработано нами.
Зальём проект в контроллер. Откроем в браузере. Посмотрим результат.
Настройки веб интерфейса
Вернёмся к настройкам веб интерфейса.
Пройдёмся по вкладкам настройки веб интерфейса
Общие настройки
Имеются следующие пункты
– Показывать пункт меню для активной страницы
– Показывать сообщение об удачном сохранении изменений. При этом можно ввести текст сообщения.
– Отображение пунктов меню. Вариант либо в виде ссылки либо кнопки.
Доступ
– Есть вариант свободного доступа или через админа.
Кнопки
– Подраздел кнопки. Содержит название стиля, который применяется для конкретной кнопки а таже текст для кнопок.
Порядок блоков
Здесь мы можем настроить использование блока. Порядок расположения блока (ну и собственно отображение в браузере).
А также ссылка на подключенный стиль и текст блока.
Описание стилей
Вот как раз здесь находится описание и все настройки стилей, для элементов, которые созданы по умолчанию (кнопки, блоки и т. д.)
Ниже мы разберём все настройки описания стилей.
Скрипты
Здесь мы можем создать скрипты (на языке javascript).
Скрипт будет выполняться при каком то событии, например при загрузке (OnLoad), сохранении (Save), перезагрузки (Reset) или функцию выхода (Logout).
Специальные адреса
Здесь можно использовать динамический адрес либо статический.
Динамический адрес вы получаете этот адрес каждый раз при подключении к сети и каждый раз он может быть новым.
При выборе статического адреса команды при запросах имеют конкретную команду.
Настройки описания стилей
Вернёмся к вкладке описания стилей. Здесь у нас созданы стили для существующих элементов веб интерфейса.
На закладке «Описание стилей» находится поле ввода непосредственно описания стилей, применяемых для всех страниц настройки.
По умолчанию это поле уже заполнено стилями для создания стандартного интерфейса. Но если есть желание изменить дизайн страниц, то можно их изменить.
Названия функций максимально приближены к функционалу.
Например функция .menu содержит настройки для блока меню.
Если откроем вкладку Порядок блоков и в нём Блок меню то увидим присоединённые стили к этому блоку
Ну или использование стиля в блоке Блок заголовка. Мы уже выше меняли здесь текст.
Найдём и посмотрим стиль header.
Изучим его.
padding: 10 px;
Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента.
left 0px; отступы слева
right 0px; отступы справа
top 0px; отступы от центра
background: #00FFFF; цвет фона
text-align: center;
расположение текста по центру
font-weight: 600;
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
font-family: ‘Times New Roman’, Times, serif;
CSS-свойство font-family определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.
Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки. Здесь показаны два шрифта ‘Times New Roman’, и Times
Serif
Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
font-size: 250%;
Свойство
Изменим размер font-size на 50%
Получим такой вид. Мы видим, что шрифт уменьшился
Добавление Главной страницы в меню
Откроем Настройка страницы веб интерфейса и добавим к Главной странице её название (например Старт). Чтобы мы могли вернуться на главную страницу с других страниц. Пункт Главная страница появится в меню.
Создание Пользовательских параметров
Для взаимодействия веб интерфейса с контроллером необходимо создать параметр.
В дереве проекта выберем Настройки контроллера, далее Пользовательские параметры- Добавить параметр.
Добавим параметр. Назовём его Светодиод, Тип- Boolean. Значение по умолчанию- False.
В дереве проекта в подменю Пользовательские параметры, появится новый параметр с выпадающем меню со своими настройками. Так можно создать любое количество параметров. При создании необходимо учитывать название параметра согласно с задачами для которого параметр создаётся. И тип переменной, а также стартовое значение по умолчанию.
Откроем Отладчик веб интерфейса. Перейдём на третью страницу.
Выберем создание виджета (Добавить параметр). Заполним настройки согласно рисунку.
Откроем вкладку Системный параметр. Выберем из выпадающего меню созданный ранее Пользовательский параметр Светодиод.
У нас должны получится настройки как на картинке.
На этой же странице уберём кнопки, которые стояли по умолчанию.
В зоне Тэгов программы FLProg, создадим новый выход. Введём имя и остальные настройки согласно картинке. Мы создали выход на пине которого находится светодиод на плате.
Вытащим на рабочее поле выход.
В разделе Встроенные пользовательские блоки в папке Триггеры выберем ТТ Триггер, также перетащим на рабочее поле.
В разделе Встроенные пользовательские блоки в папке Система выберем Чтение системного параметра, и также перетащим на рабочее поле.
В блоке Чтение системного параметра в выпадающем списке Параметр, найдём созданный пользовательский параметр Светодиод, сохраним выбор.
Соединим все блоки.
Создадим еще один Пользовательский параметр Назовём Светодиод сработка
Выбрать настройки согласно картинки
Создадим новый виджет Цветовой индикатор на третьей странице.
В разделе Встроенные пользовательские блоки в папке Система выберем Запись системного параметра, выберем новый пользовательский параметр Светодиод сработка и также перетащим на рабочее поле.
Соединим блоки
Создадим новый виджет Цветовой индикатор на третьей странице.
И в качестве системного параметра выберем Светодиод сработка
Созданные виджеты, если мы не внесли код дополнительно унаследуют стили, которые имеются в вкладке Настройки веб интерфейса- Описание стилей. И соответственно виджеты на третьей странице также ссылаются на них. Например чекбокс ссылается на стиль stChb.
А Цветовой индикатор на stLig
Теперь при нажатии на чекбокс изменится значение и цветового индикатора.
Полезная ссылка