Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
products:laboratory_iot_c:exp60 [2024/12/06 15:25] – [Программный код эксперимента] labuser30products:laboratory_iot_c:exp60 [2024/12/06 21:54] (текущий) – [Программный код эксперимента] labuser30
Строка 20: Строка 20:
 ==== Программный код эксперимента ==== ==== Программный код эксперимента ====
  
-Сначала создадим файл веб страницы ''page.html''. Этот файл с этим кодом нужно загрузить в корень внутренней файловой системы микроконтроллера.+Сначала создадим файл веб страницы ''page.html''. Мы могли бы загрузить файл в память контроллера, но так как он достаточно короткий мы просто добавим его содержимое в основную программу.
  
 <file html page.html[enable_line_numbers="2", start_line_numbers_at="1"]> <file html page.html[enable_line_numbers="2", start_line_numbers_at="1"]>
 +<!DOCTYPE html>
 <html> <html>
     <head>     <head>
Строка 29: Строка 30:
         <h2>Input led duty between 0 and 1023</h2>         <h2>Input led duty between 0 and 1023</h2>
         <form action="/">         <form action="/">
-            <input type="text" name="duty" value="512">+            <input type="number" name="duty" min="0" max="1023" value="512">
             <input type="submit" value="Send">             <input type="submit" value="Send">
         </form>         </form>
Строка 35: Строка 36:
 </html> </html>
 </file> </file>
- 
-<WRAP center round important 60%> 
-Сохрани эту страницу в корне файловой системы микроконтроллера под именем page.html 
-</WRAP> 
  
 Большинство тегов в HTML состоят из двух частей — открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>...</html>. Далее веб страница делится на заголовок <head>...</head> и тело страницы <body>...</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым. Большинство тегов в HTML состоят из двух частей — открывающего тега и закрывающего, а содержимое пишется между открывающим и закрывающим тегами. Вся веб станица находится внутри тегов <html>...</html>. Далее веб страница делится на заголовок <head>...</head> и тело страницы <body>...</body>. В заголовке прописываются такие параметры как название страницы, язык и прочие служебные данные. Они не являются обязательными и мы оставим заголовок пустым.
  
-Внутри тела страницы мы создаем заголовок второго уровня <h2>...</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 123. Далее создаем форму с помощью тега <form>:+Внутри тела страницы мы создаем заголовок второго уровня <h2>...</h2> с поясняющим текстом: Введите яркость светодиода в промежутке от 0 до 1023. Далее создаем форму с помощью тега <form>:
 <code html[enable_line_numbers="2", start_line_numbers_at="6"]> <code html[enable_line_numbers="2", start_line_numbers_at="6"]>
         <form action="/">         <form action="/">
-            <input type="text" name="duty" value="512">+            <input type="number" name="duty" min="0" max="1023" value="512">
             <input type="submit" value="Send">             <input type="submit" value="Send">
         </form>         </form>
Строка 52: Строка 49:
 Форма имеет атрибут ''action'' с адресом, куда отправлять данные.  Форма имеет атрибут ''action'' с адресом, куда отправлять данные. 
  
-Текстовое поле ввода создается тегом <input>. Атрибут type="text" означает тип поля, в данном случае это текстовое поле. Атрибут name="duty" устанавливает имя поля, а атрибут value="512" устанавливает значение поля по умолчанию.+Текстовое поле ввода создается тегом <input>. Атрибут type="number" означает тип поля, в данном случае это число. Атрибут name="duty" устанавливает имя поля, а атрибут value="512" устанавливает значение поля по умолчанию.
  
 Кнопка отправки формы создаются также тегом input, но с типом type="submit". Кнопка отправки формы создаются также тегом input, но с типом type="submit".
  
 Теперь код программы: Теперь код программы:
-<file python Exp60.py[enable_line_numbers="2", start_line_numbers_at="1"]> +<file arduino Exp60.ino[enable_line_numbers="2", start_line_numbers_at="1"]> 
-from micropyserver import MicroPyServer +#include <ESP8266WiFi.h> 
-import time +#include <ESP8266WebServer.h>
-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: +#define WIFI_NAME     "WiFi_Name" 
-    pass+#define WIFI_PASSWORD "WiFi_Password" 
 +#define PIN_LED 13 
  
-print('Device IP:', wlan.ifconfig()[0])+ESP8266WebServer server(80);
  
 +void indexPage() {
 +  if (server.hasArg("duty")) analogWrite(PIN_LED, server.arg("duty").toInt());
  
-def index(request, params): +  String page = "<!DOCTYPE html>"; 
-    if ('duty' in params): +  page += "<html>"; 
-        pwmLed.duty(int(params['duty'])) +  page += "<head>"; 
-    html_file = open("page.html") +  page += "</head>"; 
-    html = html_file.read() +  page += "<body>"; 
-    html_file.close() +  page += "<h2>Input led duty between 0 and 1023</h2>"; 
-    server.send(html, content_type="Content-Type: text/html")+  page += R"(<form action="/">)"; 
 +  page += R"(<input type="number" name="duty" min="0" max="1023" value="512">)"; 
 +  page += R"(<input type="submit" value="Send">)"; 
 +  page += "</form>"; 
 +  page += "</body>"; 
 +  page += "</html>"; 
 +   
 +  server.send(200, "text/html", page);  
 +}
  
 +void setup() {
 +  Serial.begin(9600);
 +  Serial.println();
 +  pinMode(PIN_LED, OUTPUT);
 +  analogWriteRange(1024);
 +  analogWrite(PIN_LED, 0);
 +  
 +  Serial.print("Connecting to WiFi"); 
 +  WiFi.mode(WIFI_STA);                                         
 +  WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
 +  while (WiFi.status() != WL_CONNECTED) {
 +    Serial.print(".");
 +    delay(500);
 +  }
 +  Serial.println();
 +  Serial.println("WiFi connected");
 +  Serial.print("IP address: ");
 +  Serial.println(WiFi.localIP());
  
-server = MicroPyServer() +  server.on("/", indexPage); 
-server.add_route("/", index) +  server.begin();  
-server.start()+} 
 +void loop() { 
 +  server.handleClient();  
 +}
 </file> </file>
  
 <WRAP center round important 60%> <WRAP center round important 60%>
-Первым делом в коде программы нужно заменить ''Wi-Fi_Name'' на имя нужной сети, а ''Wi-Fi_Password'' на пароль от нее.+Первым делом в коде программы нужно заменить ''WiFi_Name'' на имя нужной сети, а ''WiFi_Password'' на пароль от нее.
 </WRAP> </WRAP>
  
-Главным отличием этой программы от предыдущего эксперимента является работа с файлом веб страницы. +Главным отличием этой программы от предыдущего эксперимента является то, что мы теперь отправляем целиком веб-страницу записанную в переменную ''page''. 
-<code python[enable_line_numbers="2", start_line_numbers_at="29"]> +<code arduino[enable_line_numbers="2", start_line_numbers_at="26"]> 
-    html_file = open("page.html") +  server.send(200, "text/html", page);
-    html = html_file.read() +
-    html_file.close()+
 </code> </code>
  
-Оператор ''open'' открывает файл с именем page.html. Все содержимое этого файла считывается в переменную html с помощью оператора read(). После чего файл закрывается с помощью оператора ''close''. Таким образом при обращении пользователя к нашему мини веб-серверу содержимое файла отправляется ему  в браузер.+Таким образом при обращении пользователя к нашему мини веб-серверу содержимое веб-страницы в виде html-разметки отправляется ему в браузер, который преобразует html-разметку в веб-страницу.
  
 {{ :products:esp-iot:fa5c2a4e-0efa-46d6-a275-52911c49c922.jpg?nolink |}} {{ :products:esp-iot:fa5c2a4e-0efa-46d6-a275-52911c49c922.jpg?nolink |}}