ESP8266 и Arduino IDE. Часть 7: Управление 3 светодиодами

Примечание

Оригинал статьи: martyncurrey.com

Этот урок демонстрирует, как управлять тремя светодиодами с помощью микроконтроллера ESP8266 через веб-интерфейс с AJAX-управлением.

Демонстрация управления 3 светодиодами

Улучшение управления одним LED

Статья начинается с улучшения управления одним светодиодом:

  • Изменение текста кнопки на «ON» или «OFF»

  • Цветовое кодирование (красный для OFF, зелёный для ON)

  • Упрощение кодов управления до «L11» (LED 1 ON) и «L10» (LED 1 OFF)

  • Табличная вёрстка страницы

Улучшенный интерфейс одного LED

Схема подключения

Три светодиода подключены к пинам D1, D2 и D3 ESP8266, каждый управляется независимо.

Фото подключения 3 LED Схема подключения 3 LED

CSS-улучшения

Обновлённый подход использует CSS-классы для стилизации:

input[type="button"] { width: 4em; font-size: 120%; }
.green { background-color: #50FF50;  }
.red   { background-color: #FF5050;  }

Скетч: ESP8266_LED_CONTROL_AJAX_08

Финальная оптимизированная версия с одной параметризованной функцией:

/*
 * Sketch: ESP8266_LED_CONTROL_AJAX_08
 * Intended to be run on an ESP8266
 */

String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";

String html_1 = R"=====(
<!DOCTYPE html>
<html>
 <head>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
 <meta charset='utf-8'>
 <style>
  body {font-size:140%; }
  #main {display: table; margin: auto;  padding: 0 5px 0 5px;  }
  h2 {text-align:center; }
  input[type="button"] { width: 4em; font-size: 120%; }
  .green { background-color: #50FF50;  }
  .red   { background-color: #FF5050;  }
  table {width: 100%; }
 </style>

<script>
  function switchLED(buttonID,LED)
  {
   var button_text = document.getElementById(buttonID).value;
     if (button_text=="OFF")
     {
       document.getElementById(buttonID).value = "ON";
       document.getElementById(buttonID).style.background = "#50FF50";
       ajaxLoad('L' + LED + '1');
     document.getElementById("p2").textContent = 'L' + LED + '1';
     }
     else
     {
       document.getElementById(buttonID).value = "OFF";
       document.getElementById(buttonID).style.background = "#FF5050";
       ajaxLoad('L' + LED + '0');
     document.getElementById("p2").textContent = 'L' + LED + '0';

    }
  document.getElementById("p1").textContent = buttonID;
  }

  var ajaxRequest = null;
  if (window.XMLHttpRequest)  { ajaxRequest =new XMLHttpRequest(); }
  else                        { ajaxRequest =new ActiveXObject("Microsoft.XMLHTTP"); }


  function ajaxLoad(ajaxURL)
  {
    if(!ajaxRequest){ alert("AJAX is not supported."); return; }

    ajaxRequest.open("GET",ajaxURL,true);
    ajaxRequest.onreadystatechange = function()
    {
      if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
      {
        var ajaxResult = ajaxRequest.responseText;
      }
    }
    ajaxRequest.send();
  }

</script>

 <title>LED Control</title>
</head>
<body>
 <div id='main'>
  <h2>LED Control</h2>
  <table id = "controls">
   <tr>
    <td width="70%">LED 1</td>
)=====" ;

String html_2 = "    <td> <input type='button' id='LED1_button' value='OFF' class='red' onclick='switchLED(this.id,1)' />  </td>";

String html_3 = R"=====(
   </tr>
   <tr>
    <td width="70%">LED 2</td>
)=====" ;

String html_4 = "    <td> <input type='button' id='LED2_button' value='OFF' class='red' onclick='switchLED(this.id,2)' />  </td>";

String html_5 = R"=====(
   </tr>
   <tr>
    <td width="70%">LED 3</td>
)=====" ;

String html_6 = "    <td> <input type='button' id='LED3_button' value='OFF' class='red' onclick='switchLED(this.id,3)' />  </td>";

String html_7 = R"=====(
   </tr>
  </table>
  <p id="p1">Button ID</p>
  <p id="p2">LED number</p>
 </div>
</body>
</html>
)=====" ;

#include <ESP8266WiFi.h>

char ssid[] = "NetworkName";
char pass[] = "password";

WiFiServer server(80);

String request = "";
int LED1_Pin = D1;
int LED2_Pin = D2;
int LED3_Pin = D3;

void setup()
{
    pinMode(LED1_Pin, OUTPUT);
    pinMode(LED2_Pin, OUTPUT);
    pinMode(LED3_Pin, OUTPUT);

    Serial.begin(115200);
    Serial.println();
    Serial.println(F("Serial started at 115200"));
    Serial.println(F("ESP8266_LED_CONTROL_AJAX_08"));
    Serial.println();

    Serial.print(F("Connecting to "));  Serial.println(ssid);
    WiFi.begin(ssid, pass);

    while (WiFi.status() != WL_CONNECTED)
    {
        Serial.print(".");
        delay(500);
    }

    Serial.println("");
    Serial.println(F("[CONNECTED]"));
    Serial.print("[IP ");
    Serial.print(WiFi.localIP());
    Serial.println("]");

    server.begin();
    Serial.println("Server started");

}



void loop()
{
    WiFiClient client = server.available();
    if (!client)  {  return;  }

    request = client.readStringUntil('\r');

    Serial.print("request: "); Serial.println(request);

    if       ( request.indexOf("L11") > 0 )  { digitalWrite(LED1_Pin, HIGH);  }
    else if  ( request.indexOf("L10") > 0 )  { digitalWrite(LED1_Pin, LOW);   }
    if       ( request.indexOf("L21") > 0 )  { digitalWrite(LED2_Pin, HIGH);  }
    else if  ( request.indexOf("L20") > 0 )  { digitalWrite(LED2_Pin, LOW);   }
    if       ( request.indexOf("L31") > 0 )  { digitalWrite(LED3_Pin, HIGH);  }
    else if  ( request.indexOf("L30") > 0 )  { digitalWrite(LED3_Pin, LOW);   }
    else
    {
       if (digitalRead(LED1_Pin)==HIGH)
       {
         html_2 = "    <td> <input type='button' id='LED1_button' value='ON' class='green' onclick='switchLED(this.id,1)' />  </td>";
       }
       else
       {
         html_2 = "    <td> <input type='button' id='LED1_button' value='OFF' class='red' onclick='switchLED(this.id,1)' />  </td>";
       }

       if (digitalRead(LED2_Pin)==HIGH)
       {
         html_4 = "    <td> <input type='button' id='LED2_button' value='ON' class='green' onclick='switchLED(this.id,2)' />  </td>";
       }
       else
       {
         html_4 = "    <td> <input type='button' id='LED2_button' value='OFF' class='red' onclick='switchLED(this.id,2)' />  </td>";
       }

       if (digitalRead(LED3_Pin)==HIGH)
       {
         html_6 = "    <td> <input type='button' id='LED3_button' value='ON' class='green' onclick='switchLED(this.id,3)' />  </td>";
       }
       else
       {
         html_6 = "    <td> <input type='button' id='LED3_button' value='OFF' class='red' onclick='switchLED(this.id,3)' />  </td>";
       }

        client.flush();
        client.print( header );
        client.print( html_1 );
        client.print( html_2 );
        client.print( html_3 );
        client.print( html_4 );
        client.print( html_5 );
        client.print( html_6 );
        client.print( html_7 );
        delay(5);
    }

}
Интерфейс 3 LED - мобильная версия Интерфейс 3 LED - все включены

Ключевые технические концепции

  1. AJAX-коммуникация: отправка управляющих запросов без полной перезагрузки страницы

  2. Передача параметров: использование ID кнопки и номера LED для масштабируемого управления

  3. Отражение состояния: веб-страница отображает точный статус ON/OFF при загрузке

  4. Эффективность кода: уменьшение дублирования через параметризованные функции

Доступные скетчи

  • ESP8266_LED_CONTROL_AJAX_06: AJAX-управление одним LED

  • ESP8266_LED_CONTROL_AJAX_07: управление тремя LED с отдельными функциями

  • ESP8266_LED_CONTROL_AJAX_08: оптимизированное управление тремя LED