Страницы

22 октября 2018 г.

Wemos D1 mini. Точка доступа и Web-сервер. Демонстрационный стенд

Логическое продолжение заметки.
В данном случае использован микроконтроллер Wemos D1 mini (аналогично можно использовать и NodeMcu v1.0).
Основное отличие заключается в том, что в этом примере микроконтроллер сам является точкой доступа и на нем же функционирует Web-сервер и интерфейсом управления светодиодами.

В примере реализовано:
0. Поднят Web-сервер.
1. Управление светодиодами (включение/выключение 2-х светодиодов)
2. Отображение состояния (включено/выключено) для каждого из 2-х светодиодов
3. Вывод времени работы (дней/часов/минут/секунд) демонстрационного стенда с момента включения (uptime)
На стенде присутствуют:
Модуль Wemos D1 mini (или NodeMcu v1.0) - 1 шт.
Светодиоды - 2 шт.
Постоянный резистор на 220 Ом (для ограничения тока на светодиоде) - 2 шт.

Для проверки подключиться к Wi-Fi сети Demo c паролем 12345678
Открыть в браузере адрес 192.168.4.1

Код:

/* подключение необходимых библиотек */
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

/* набор переменных для подсчета uptime */
long secs, mins;
int hours, days;

/* набор параметров для создания точки доступа */
const char *ssid = "Demo";
const char *password = "12345678";

/* параметры для создания Web-сервера */
ESP8266WebServer server(80);

/* пины для светодиодов */
#define D1 5 //Светодиод 1 на пине D1
#define D2 4 //Светодиод 2 на пине D2

void setup() {

  /* подготовка пинов для светодиодов */
  pinMode(D1, OUTPUT);
  digitalWrite(D2, LOW);
  pinMode(D2, OUTPUT);
  digitalWrite(D3, LOW);

  //############### Светодиод 1 ###############
  server.on("/", []() {
    server.send(200, "text/html", webPage());
  });
  server.on("/socket1On", []() {
    digitalWrite(D1, HIGH);
    server.send(200, "text/html", webPage());
    delay(100);
  });
  server.on("/socket1Off", []() {
    digitalWrite(D1, LOW);
    server.send(200, "text/html", webPage());
    delay(100);
  });
  //########################################

  //############### Светодиод 2 ###############
  server.on("/", []() {
    server.send(200, "text/html", webPage());
  });
  server.on("/socket4On", []() {
    digitalWrite(D2, HIGH);
    server.send(200, "text/html", webPage());
    delay(100);
  });
  server.on("/socket4Off", []() {
    digitalWrite(D2, LOW);
    server.send(200, "text/html", webPage());
    delay(100);
  });
  //########################################

  delay(1000);

  Serial.begin(115200);
  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  server.begin();
}

void loop() {

  server.handleClient();

  /*########### Пересчет millis для uptime ###############*/
  secs = millis() / 1000;
  mins = secs / 60;
  hours = mins / 60;
  days = hours / 24;
  secs -= mins * 60;
  mins -= hours * 60;
  hours -= days * 24;
  /*######################################################*/

}
String webPage()
{
  String web;
  //Выводим заголовок вкладки
  web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>Web Server</title><style>button{color:red;padding: 10px 27px;}</style></head>";

  //Выводим название страницы
  web += "<h1 style=\"text-align: center;font-family: Open sans;font-weight: 100;font-size: 20px;\">Demo: Wemos D1 mini + Web Server</h1><div>";

  //Содержимое страницы
  web += "<p style=\"text-align: left;margin-top: 0px;margin-bottom: 5px;\">Uptime:  " + String(days) + " days " + String(hours) + " h " + String(mins) + " min " + String(secs) + " sec </p>";

  //Блоки для перехода по ссылкам
  //############### Светодиод 1 ###############
  web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 5px;\">[LED 1]</p>";
  if (digitalRead(D1) == 1)
  {
    web += "<div style=\"text-align: center;width: 98px;color:black ;padding: 10px 30px;background-color: #FFEB3B;margin: 0 auto;\">ON</div>";
  }
  else
  {
    web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #000000;margin: 0 auto;\">OFF</div>";
  }
  web += "<div style=\"text-align: center;margin: 5px 0px;\"> <a href=\"socket1On\"><button>ON</button></a>&nbsp;<a href=\"socket1Off\"><button>OFF</button></a></div>";
  //########################################

  //############### Светодиод 2 ###############
  web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 5px;\">[LED 2]</p>";
  if (digitalRead(D2) == 1)
  {
    web += "<div style=\"text-align: center;width: 98px;color:black ;padding: 10px 30px;background-color: #FFEB3B;margin: 0 auto;\">ON</div>";
  }
  else
  {
    web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #000000;margin: 0 auto;\">OFF</div>";
  }
  web += "<div style=\"text-align: center;margin: 5px 0px;\"> <a href=\"socket4On\"><button>ON</button></a>&nbsp;<a href=\"socket4Off\"><button>OFF</button></a></div>";
  //########################################

  //############### Кнопка обновить ###############
  web += "<div style=\"text-align:center;margin-top: 20px;\"><a href=\"/\"><button style=\"width:158px;\">Refresh</button></a></div>";
  //###############################################

  web += "</div>";
  return (web);
Автор:
Ярлыки: , , ,

4 комментария:

  1. Анонимный7 февраля 2019 г. в 16:40

    Огромное спасибо - пример очень помог, я только начинаю осваивать ESP8266!
    Решил дополнить Ваш код возможностью ввода данных в TEXTBOX и отправки их в цикл LOOP для дальнийших манипуляций с введенной строкой.
    Реализовал ввод данных на форме так:
    String webPage(){
    ................................
    ................................

    //###############################################
    web += "function update_href(id,value){document.getElementById(id).href=value;}";
    web += "Отправить";
    web += "";
    //############### Кнопка Refresh ################
    ................................
    ................................
    }
    В коде теги , и аттрибут ИД надо записать на латинице (иначе не получалось опубликовать комментарий).
    ---------------------------------------
    Но застрял - не знаю, как из текстового поля HTML-кода/страницы вытащить введенную строку в переменную типа String - для последующего использования в цикле LOOP.
    Конструкция вида

    server.on("/333", []() {
    digitalWrite(D1, HIGH);
    server.send(200, "text/html", webPage());
    delay(100);
    });

    при введении в TEXTBOX и отправке "333" работает - но как записать это "333" (и любую произвольную строку) в переменную типа String для обработки в цикле?
    То есть - чтобы вместо конкретной "333" была переменная, принимающая введенные пользователем в TEXTBOX значения, и далее обрабатываемая (например, нахождение подстроки из первых 3 символов).

    Помогите, пожалуйста!

    ОтветитьУдалить
  2. Анонимный7 февраля 2019 г. в 16:51

    Код не вставился, но был взят без принципиальных изменений отсюда (комментарий пользователя Rootpassword) :

    http://javascript.ru/forum/misc/26081-dobavit-tekst-iz-polya-input-k-ssylke-i-otpravit-po-nejj-polzovatelya.html

    ОтветитьУдалить
  3. Анонимный7 февраля 2019 г. в 18:37

    И еще интересует обратная задача - когда "Wemos D1 mini" при работе генерирует данные - чтобы данные с Wemos отображались на форме (например, на лейбле при нажатии кнопки) на экране [смартфона].
    Спасибо.

    ОтветитьУдалить
  4. Анонимный2 декабря 2022 г. в 01:57

    Спасибо , много перебрал , но этот сработал....

    ОтветитьУдалить

Подписаться на: Комментарии к сообщению (Atom)