• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Нужна помощь HTML кнопка на веб сервере.ESP8266 Arduino IDE

SIZAM

New member
Здравствуйте! ESP8266, Arduino IDE, по нажатию на кнопку "Пуск" в браузере, должен загореться светодиод. Вопрос: как можно реализовать HTML кнопку в браузере, привязать к ней нужный пин, чтобы при нажатии на нее начиналась работа с этим пином.
Спасибо.
[off]Заранее приношу извинения, если подобная тема создавалась, поиск юзал - ничего из найденного не подошло[/off]
 

fps

Active member
Давайте сначала разберемся с первым вопросом "как можно реализовать HTML кнопку в браузере".

Я знаю для этого 3 способа:
1. С помощью формы.
Создаёте форму (элемент form), прописываете адрес ее обработки (action), размещаете на странице элемент submit.
По его нажатии браузер перейдет по адресу, указанному вами для обработки формы.

2. С помощью ссылки.
Создаете ссылку (элемент a), указываете ей целевой адрес (атрибут href), используя стили (css) оформляете её в виде кнопки нужного вам вида.

3. Используя события.
Настраиваете обработку события (например click) для выбранного вами в качестве кнопки элемента страницы (например, div, input). В обработчике события осуществляете переход к нужному URL.

Всё понятно?

Подробности здесь HTML Tutorial
 

Юрий Ботов

Moderator
Команда форума
4 способ: начало аналогично 3, но не переходить по ссылке, а вызвать XMLHttpRequest, что позволяет использовать не только GET но и POST запросы
 

SIZAM

New member
Спасибо за ответы! А как привязать, например, 5 пин к кнопке?
Дело в том, что мои знания в этой области недостаточны, чтобы начать "копать" по названию технологии. Если не сложно, можно фрагмент кода создания кнопки и привязки к пину. И как потом работать с событием нажатия на нее? Сигнал сразу поступает на пин или же нужно считываь его состояние через digitalRead(MyPin) ?
Если я создаю форму так:
HTML:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
</head>
<body>
  <form action="тут что нужно указать?" enctype="text/plain  - это можно так оставить?">
   <p><input name="a"> <input type="submit"></p>
  </form>
</body>
</html>
Собственно, осталось непонятным, как к пину-то можно привязать и как считать(или это и не нужно будет)?
 
Последнее редактирование:

Hardwired

New member
Здравствуйте, прошло 3 года, а этот вопрос всплыл снова)
Я недавно в Arduino и у меня задача похожая, но в ней присутствуют некоторые коррективы
На Arduino поднята HTML страничка, которая выводит значения датчиков импульсов для газового счётчика
Есть поле для ввода чисел, я ввёл число, нажал на кнопку и это число должно отправится на Arduino и записаться там в переменную
Не знаю, как это реализовать
Прикладываю код, заранее спасибо!

Код:
#include <SPI.h>
#include <Ethernet2.h>
#include <EEPROM.h>
#define PINSENSE 3
double gasCount;
double waterCount;
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 0, 81);
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
int pulseCountGas = 0;
int pulseCountWater = 0;

void setup() {
  gasCount = EEPROM.read(1);
  pulseCountGas = EEPROM.read(0);
  pulseCountWater = EEPROM.read(2);
  waterCount = EEPROM.read(3);
  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  pinMode(PINSENSE, INPUT);
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        Serial.print(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          //============================HTML=========================================
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
          client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<head>");
          client.println("<meta charset=""utf-8"">");
          //=========================script1=============================
          client.println("<script>");
          client.println("function send(){");
          client.println();
          client.println();
          client.println();
          client.println();
          client.println();
          client.println();
          client.println();
          client.println();
          client.println();
          client.println();
          client.println("</script>");
          //==============================================================
          client.println("</head>");
          client.println("<body>");
          client.println("<h2>");
          client.println("GAS");
          client.println("</h2>");
          client.println("<big>");
          client.println("<style>");
          client.println("body {");
          client.println("background: #333;");
          client.println("color: #fc1;");
          client.println("}");
          client.println(".layer1 {");
          client.println("bottom: 520px;");
          client.println("right: 1300px;");
          client.println(" line-height: 1px;");
          client.println("}");
          client.println(".layer2 {");
          client.println("bottom: 510px;");
          client.println(" right: 800px;");
          client.println("line-height: 1px;");
          client.println("}");
          client.println(".layer3 {");
          client.println(" bottom: 730px;");
          client.println("right: 1000px;");
          client.println("line-height: 1px;");
          client.println("}");
          client.println("</style>");
          client.println("<big>");
          // output the value of each analog input pin
          //The sensor shows 2 values: 0 or 1
          client.print("Pulse Count(gas) = ");
          client.println(pulseCountGas);
          client.println("</br>");
          client.print("Gas: ");
          client.print(gasCount);
          client.println(" m3");
          client.println("</br>");
          client.println("EEPROM SECTOR 0 = ");
          client.println(EEPROM.read(0));
          client.println("</br>");
          client.println("EEPROM SECTOR 1 = ");
          client.println(EEPROM.read(1));
          client.println("<div class=layer3>");
          client.println("<h5>");
          client.println("<big>");
          client.println("WATER");
          client.println("</big>");
          client.println("</h5>");
          client.print("Pulse Count(Water) = ");
          client.print(pulseCountWater);
          client.println(" m3");
          client.println("<p>");
          client.println("EEPROM SECTOR 2 = ");
          client.println(EEPROM.read(2));
          client.println("<p>");
          client.println("EEPROM SECTOR 3 = ");
          client.println(EEPROM.read(3));
          client.println("<p>");
          client.print("Water: ");
          client.println(waterCount);
          client.print(" m3");
          client.println("<p>");
          client.println("</div>");
          //===========================gas counter==============================
          client.println("<div class = layer1>");
          client.println("<h3>");
          client.println("Enter a value from counter GAS");
          client.println("</h3>");
          client.println("<input name=gas1 type=number size=20 id=gascount >");
          client.println("<input type=submit name=send1 value=send onclick=");
          client.println("</div>");
          //========================water counetr===========================
          client.println("<div class = layer2>");
          client.println("<h4>");
          client.println("<big>");
          client.println(" Enter a value from counter WATER");
          client.println("</big>");
          client.println("</h4>");
          client.println("<input name=water1 type=number size=20 id=watercount >");
          client.println("<input type=submit name=send2 value=send onclick=");
          client.println("</form>");
          client.println("<p style=text-align: center>");
          client.println("</div>");
            //===================================Scripts====================================
          if (digitalRead(PINSENSE) == 0)
          {
            pulseCountGas = pulseCountGas + 1;
            gasCount = gasCount + 0.01;
            pulseCountWater = pulseCountGas + 1;
            waterCount = gasCount + 0.01;
            EEPROM.write(0, pulseCountGas);
            EEPROM.write(1, gasCount);
            EEPROM.write(2, pulseCountWater);
            EEPROM.write(3, waterCount);
          }
          else
          {
            pulseCountGas = pulseCountGas;
            pulseCountWater = pulseCountGas + 1;
          }
          if (pulseCountGas >= 100)
          {
            gasCount = gasCount + 1;
            pulseCountGas = 0;
            pulseCountWater = 0;
            waterCount = waterCount + 1;
          }
          client.println("</big>");
          client.println("</big>");
          client.println("</body>");
          client.println("</html>");
          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(2);
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}
 
Сверху Снизу