• Уважаемые посетители сайта esp8266.ru!
    Мы отказались от размещения рекламы на страницах форума для большего комфорта пользователей.
    Вы можете оказать посильную поддержку администрации форума. Данные средства пойдут на оплату услуг облачных провайдеров для сайта esp8266.ru
  • Система автоматизации с открытым исходным кодом на базе 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");
  }
}
 
Сверху Снизу