WEB интерфейс и конфигурационный файл для ESP8266 и ESP32⁠⁠

Используйте мой код как шаблон для своих проектов на esp8266 и esp32.

Фреймворк поможет вам использовать конфигурационный файл и веб интерфейс.

В качестве среды разработки я настоятельно рекомендую использовать PlatformIO, но можно использовать Arduino IDE

Для начала работы необходимо создать параметры, которые в последующем будут настраиваться с помощью веб интерфейса. Параметр на самом деле представляет из себя json объект. Следующие манипуляции производятся в файле ‘html.h’

Создать новый параметр:

create_param( String Name , String Value )

Веб интерфейс создается с помощью простых методов:

input_text( String id , String name , String type , String placeholder , String title )

‘id‘, ‘name‘, ‘type‘, ‘placeholder‘, ‘title‘ – аналогичны тем, что вы использовали бы в HTML

на пример ‘type’:

‘text‘ – ввод текста

‘numbet‘ – ввод только цифр

‘date‘ – ввод даты

‘time‘ – ввод времени

в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param

input_range( String id , String name , int min , int max , String title )

‘min‘ и ‘max‘ – минимальное и максимальное значение ползунка

в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param

select_elements( String value , String title )

создает элемент выпадающего списка.

input_select( String id , String name , bool refresh , String title)

‘refresh‘ – если true, страница будет обновлена сразу после выбора элемента

в качестве ‘id‘ укажите созданный ранее параметр с помощью create_param

button_save( String title , int color )

Создает кнопку отправки данных формы

‘color‘ – цвет кнопки, соответствует цветам Bootstrap

1 – “primary“

2 – “secondary“

3 – “success“

4 – “danger“

5 – “warning“

6 – “info“

7 – “light“

8 – “dark“

button_reboot( String title , int color )

Создает кнопку перезагрузки устройства (иногда это нужно, чтобы настройки вступили в силу)

alert( int color , String strong , String text , bool close )

Создает элемент, соответствующий ‘alert‘ HTML

‘strong‘ – Текст с выделением

‘text‘ – текста

‘close‘ – если true – буде возможность закрыть элемент

border( String title )

начинает и заканчивает границу.

Чтобы начать границу ‘title‘ должен быть не пустым,

Чтобы закончить границу ‘title‘ должен быть = “”.

Скачать можно на GitHub