===== Эксперимент 60. Веб-страница и веб-форма ===== В прошлом эксперименте мы научились передавать данные на сервер через параметры в URL. Мы вручную формировали строку адреса, что не очень удобно. На настоящих сайтах и веб-приложениях такого не происходит. Для удобства пользователя предусмотрены веб-формы. Форма это набор полей для ввода данных и кнопка для отправки формы. При нажатии на кнопку происходит отправка запроса на сервер с передачей данных, введенных в форму. Ранее мы уже выводили пользователю в браузер различные строки. Это были просто строки обычного текста, полноценной веб-страницей назвать их нельзя. Чтобы создавать полноценные веб-страницы нужно освоить язык на котором они пишутся — HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»). HTML нельзя назвать языком программирования, это язык форматирования и разметки текста, изображений, форм, ссылок и других объектов. В HTML нет функций, процедур, переменных и прочего. В нем есть только команды, называемые тегами, для описания страницы. Можно указывать размер шрифта, цвет, форматирование. Можно внедрять картинки, таблицы, видео, формы и другое. Язык HTML заслуживает отдельного большого учебного пособия, поэтому мы, конечно, не будем изучать сейчас все его возможности. Но мы создадим простую веб-страницу с формой для управления яркостью светодиода. Чтобы больше не приходилось вводить число прямо в адресной строке. Если у тебя есть желание, то можно изучить HTML по самоучителям, например вот этим * [[http://htmlbook.ru/samhtml]] * [[https://msiter.ru/tutorials/html-nachalnogo-urovnya]] ==== Схема эксперимента ==== Схема не изменилась по сравнению с прошлым экспериментом {{ :products:esp-iot:exp31_mon.png?direct&600 |}} //Рисунок 1. Монтажная схема эксперимента// ==== Программный код эксперимента ==== Сначала создадим файл веб страницы ''page.html''. Этот файл с этим кодом нужно загрузить в корень внутренней файловой системы микроконтроллера.

Input led duty between 0 and 1023

Сохрани эту страницу в корне файловой системы микроконтроллера под именем page.html Большинство тегов в HTML состоят из двух частей — открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов .... Далее веб страница делится на заголовок ... и тело страницы .... В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым. Внутри тела страницы мы создаем заголовок второго уровня

...

с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 1023. Далее создаем форму с помощью тега

Форма имеет атрибут ''action'' с адресом, куда отправлять данные. Текстовое поле ввода создается тегом . Атрибут type="text" означает тип поля, в данном случае это текстовое поле. Атрибут name="duty" устанавливает имя поля, а атрибут value="512" устанавливает значение поля по умолчанию. Кнопка отправки формы создаются также тегом input, но с типом type="submit". Теперь код программы: from micropyserver import MicroPyServer import time from machine import Pin, PWM import network import gc _init() gc.collect() Led = Pin(13, Pin.OUT) pwmLed = PWM(Led) wlan_id = "Wi-Fi_Name" wlan_pass = "Wi-Fi_Password" wlan = network.WLAN(network.STA_IF) wlan.active(True) wlan.connect(wlan_id, wlan_pass) time.sleep(1) while wlan.isconnected() == False: pass print('Device IP:', wlan.ifconfig()[0]) def index(request, params): if ('duty' in params): pwmLed.duty(int(params['duty'])) html_file = open("page.html") html = html_file.read() html_file.close() server.send(html, content_type="Content-Type: text/html") server = MicroPyServer() server.add_route("/", index) server.start() Первым делом в коде программы нужно заменить ''Wi-Fi_Name'' на имя нужной сети, а ''Wi-Fi_Password'' на пароль от нее. Главным отличием этой программы от предыдущего эксперимента является работа с файлом веб страницы.


    html_file = open("page.html")
    html = html_file.read()
    html_file.close()

Оператор ''open'' открывает файл с именем page.html. Все содержимое этого файла считывается в переменную html с помощью оператора read(). После чего файл закрывается с помощью оператора ''close''. Таким образом при обращении пользователя к нашему мини веб-серверу содержимое файла отправляется ему в браузер. {{ :products:esp-iot:fa5c2a4e-0efa-46d6-a275-52911c49c922.jpg?nolink |}} На скриншоте видно IP адрес, который получил микроконтроллер во время эксперимента у нас в лаборатории. В твоем случае это будет другой IP адрес. После установки соединение с сетью микроконтроллер выводит его в терминал. Именно по нему и нужно обращаться. Теперь мы видим веб-страницу с текстовым полем в котором уже есть значение по- умолчанию. Его можно заменить на свое в промежутке от 0 до 1023. После этого нажать на кнопку Send. Произойдет отправка формы на сервер. Произойдет то же самое, что происходило в прошлом эксперименте, только мы вводили данные не напрямую в строку адреса, а в форму. Более того, после отправки формы URL страницы изменится и в нем появится точно такой же параметр, который мы вводили в прошлом эксперименте вручную. Таким образом мы научились создавать простейшие веб-страницы с формой для отправки данных на сервер.