ESP8266 ESP-01 светодиодная матрица. Выводим текст через web-интерфейс

Нашел пример светодиодной матрицы. Управление которой происходит через web-интерфейс. Достаточно интересная тема. Поэтому решил сделать заметку чтобы не потерять.

Сам не проверял. Да и пока нет возможности проверить. Но мне пригодятся некоторые библиотеки из данного проекта. Ссылка на проект вот тут: ESP8266 ESP-01 - NeoPixel NeoMatrix - Text Scroller.

Необходимые библиотеки можно скачать тут:

• Adafruit-GFX-Library
• Adafruit_NeoPixel
• Adafruit_NeoMatrix
• ESP8266httpUpdate

Скетч ESP8266 ESP-01 - NeoPixel NeoMatrix - Text Scroller

// Include NeoPixel Specific Libraries
#include <Adafruit_GFX.h>
#include <Adafruit_NeoPixel.h>
#include <Adafruit_NeoMatrix.h>
// Include ESP Specific Libraries
#include <ESP8266httpUpdate.h>
#include "espneotext.h"
// Define ESP-01 PIN
#define PIN 2
// MATRIX DECLARATION:
// Parameter 1 = width of EACH NEOPIXEL MATRIX (not total display)
// Parameter 2 = height of each matrix
  // 8x8 (8, 8)
// Parameter 3 = pin number (most are valid)
  // PIN 2
// Parameter 4 = matrix layout flags, add together as needed
// Parameter 5 = pixel type flags, add together as needed:
  // NEO_GRB     Pixels are wired for GRB bitstream (v2 pixels)
  // NEO_KHZ800  800 KHz bitstream (e.g. High Density LED strip)
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(8, 8, PIN,
  NEO_MATRIX_TOP     + NEO_MATRIX_RIGHT +
  NEO_MATRIX_COLUMNS + NEO_MATRIX_PROGRESSIVE,
  NEO_GRB            + NEO_KHZ800
);
// Define Your WiFi Connection Information
const char* WiFi_SSID = "<SSID-HERE>";
const char* WiFi_PASS = "<PASSWORD-HERE>";
// Set Defaults
String dispText;
String dispColor;
int disp = 0;
int pixelsInText;
int x = matrix.width();
const uint16_t colors[] = {
  matrix.Color(255, 0, 0),
  matrix.Color(0, 255, 0),
  matrix.Color(0, 0, 255)
};
// Create an instance of the server and specify the port to listen on as an argument.
WiFiServer server(80);
void setup(){
  matrix.begin();
  matrix.setTextWrap(false);
  matrix.setBrightness(40);
  matrix.setTextColor(matrix.Color(80,255,0));
  //matrix.setTextColor(colors[0]);
  //Serial.begin(115200); // DEBUG
  delay(10);
  // Connect to WiFi network
  //Serial.println(); // DEBUG
  //Serial.print("Connecting to "); // DEBUG
  //Serial.println(WiFi_SSID); // DEBUG
  WiFi.begin(WiFi_SSID,WiFi_PASS);
  while(WiFi.status() != WL_CONNECTED){
    delay(1000);
    //Serial.print("."); // DEBUG
  }
  //Serial.println(""); // DEBUG
  //Serial.println("WiFi Connected"); // DEBUG
  // Start the server
  server.begin();
  //Serial.println("Server Started"); // DEBUG
  // Print the IP address
  //Serial.println(WiFi.localIP()); // DEBUG
}
void loop(){
  // Check if a client has connected
  WiFiClient client = server.available();
  // Wait until the client sends some data
  if(!client){ return; }
    //Serial.println("Client Connected"); // DEBUG
  // Color Options
  // http://www.javascripter.net/faq/hextorgb.htm
  // Process the Request/GET - Strips out everything in order.
  String command0 = client.readStringUntil('?');
    //Serial.print("Command0: "); // DEBUG
    //Serial.println(command0); // DEBUG
  String allParams = client.readStringUntil(' ');
    //Serial.print("Query Parameter: "); // DEBUG
    //Serial.println(allParams); // DEBUG
  if(allParams.indexOf("line=") >= 0){
    disp = 1; // true
    dispText = allParams.substring(allParams.indexOf("=")+1,allParams.indexOf("&rgb="));
    dispText.replace("+"," ");
    dispText.replace("%20"," ");
    dispText.replace("%21","!");
    dispText.replace("%27","'");
    pixelsInText = (dispText.length() * 7)+8;
      //Serial.print("Scroll Text: ");       // DEBUG
      //Serial.println(dispText);            // DEBUG
    // Set user prefered color
    dispColor = allParams.substring(allParams.indexOf("&rgb=")+5,allParams.length());
      //Serial.print("Scroll Text Color: "); // DEBUG
      //Serial.println(dispColor);           // DEBUG
    // Lame check for any other parameters. Need a better way to do this!
    if(dispColor.indexOf("&") == -1){
      int r = dispColor.substring(0,dispColor.indexOf(",")).toInt();
        //Serial.println(r_val); // DEBUG
      int g = dispColor.substring(int(dispColor.indexOf(","))+1,(dispColor.lastIndexOf(","))).toInt();
        //Serial.println(g_val); // DEBUG
      int b = dispColor.substring(int(dispColor.lastIndexOf(","))+1).toInt();
        //Serial.println(b_val); // DEBUG
      matrix.setTextColor(matrix.Color(r,g,b));
    }
    if(disp){
      while(x + 17 > (matrix.width() - pixelsInText)){
        matrix.fillScreen(0);
        matrix.setCursor(--x, 0);
        matrix.print(dispText);
        matrix.show();
        delay(100);
      }
      x = matrix.width();
    }
    // Display form page again so it's not blank! ------------------
    // Prepare the response
    String resp = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
    resp += displayPage;
    // Send the response to the client
    while(resp.length()>2000){
      String dummy = resp.substring(0,2000);
      client.print(dummy);
      resp.replace(dummy," ");
    }
    client.flush();
    client.print(resp);
    delay(10);
    // The client will actually be disconnected, when the function returns and 'client' object is destroyed!
    //Serial.println("Client Disconnected!"); // DEBUG
  }else{
    // Display requested form page -----------------------------------
    // Prepare the response
    String resp = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
    resp += displayPage;
    // Send the response to the client
    while(resp.length()>2000){
      String dummy = resp.substring(0,2000);
      client.print(dummy);
      resp.replace(dummy," ");
    }
    client.flush();
    client.print(resp);
    delay(10);
    // The client will actually be disconnected, when the function returns and 'client' object is destroyed!
    //Serial.println("Client Disconnected!"); // DEBUG
  }
}

Настройка подключения к сети Wi-fi

// Define Your WiFi Connection Information
const char* WiFi_SSID = "<SSID-HERE>";
const char* WiFi_PASS = "<PASSWORD-HERE>";

Пин подключения светодиодов

// Define ESP-01 PIN
#define PIN 2

Настройка светодиодной матрица

// MATRIX DECLARATION:
// Parameter 1 = width of EACH NEOPIXEL MATRIX (not total display)
// Parameter 2 = height of each matrix
  // 8x8 (8, 8)
// Parameter 3 = pin number (most are valid)
  // PIN 2
// Parameter 4 = matrix layout flags, add together as needed
// Parameter 5 = pixel type flags, add together as needed:
  // NEO_GRB     Pixels are wired for GRB bitstream (v2 pixels)
  // NEO_KHZ800  800 KHz bitstream (e.g. High Density LED strip)
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(8, 8, PIN,
  NEO_MATRIX_TOP     + NEO_MATRIX_RIGHT +
  NEO_MATRIX_COLUMNS + NEO_MATRIX_PROGRESSIVE,
  NEO_GRB            + NEO_KHZ800
);

Подключаем веб интерфейс приложения который находиться в файле #include "espneotext.h"

#ifndef header_h
#define header_h
String displayPage =
"<!DOCTYPE HTML>\r\n"
"<html lang=\"en\">\r\n"
"<head>\r\n"
"  <meta charset=\"utf-8\">\r\n"
"  <meta name='viewport' content='width=device-width'>\r\n"
"  <title>Send Text to ESP-01 / NeoMatrix / v2</title>\r\n"
"  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' crossorigin='anonymous'>\r\n"
"  <link rel=\"stylesheet\" href=\"https://raw.githubusercontent.com/bgrins/spectrum/master/spectrum.css\">\r\n"
"  <style>#sentMsgs{display:inline-block;margin:0 15px 20px;padding:10px 20px;min-height:60px;background-color:#777;color:lime;border:1px solid gray;clear:both;}.adjust-text{margin:20px 0 0;padding:0 20px;}.clearfix{clear:both;}</style>\r\n"
"</head>\r\n\r\n"
"<body style='background:#EFEFEF;'>\r\n"
"\r\n"
"   <form>\r\n"
"     <div class='col-md-4'>\r\n"
"       <h3>Enter Text to Send on the NeoPixel Matrix: <input type=\"text\" id=\"color-picker\"></h3>\r\n"
"       <div class='input-group'>\r\n"
"         <input type='text' name='line' id='line' class='form-control' maxlength='60'>\r\n"
"         <div class='input-group-btn'>\r\n"
"           <button class='btn btn-default' id='send-text'>Send Text</button>\r\n"
"         </div>\r\n"
"       </div>\r\n"
"     </div>\r\n"
"   </form><br>\r\n\r\n"
"   <div class='col-md-4 adjust-text clearfix'><h4>Messages Sent</h4></div>\r\n"
"   <div id='sentMsgs' class='col-md-4' contentEditable='true'></div>\r\n"
"\r\n"
" <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></script>\r\n"
" <script src=\"https://raw.githubusercontent.com/bgrins/spectrum/master/spectrum.js\"></script>\r\n"
" <script>\r\n"
"   // This will build up a queue and send or just timeout if the messages are too many or the message is too long\r\n"
"   function sendMsg(){\r\n"
"     var line = $('#line');\r\n"
"     var color = '';\r\n"
"     var colorPicker = $('#color-picker');\r\n"
"     var msg = line.val().replace(';','');\r\n"
"     if(colorPicker.val() == ''){ color = '&rgb=80,255,0'; }\r\n"
"     else{ color = '&'+colorPicker.val().replace('(','=').replace(/\\)| /g,''); }\r\n"
"\r\n"
"     var url2Send = '/?line='+msg+color;\r\n"
"     line.val('');\r\n"
"     if(typeof msg !== 'undefined' && msg.trim() !== ''){\r\n"
"       $.ajax({ url: url2Send }).done(function(){ $('#sentMsgs').prepend('Message Sent: '+msg+'<br>\\n\'); console.log('Message Sent: '+msg+' ['+color+']'); });\r\n"
"     }\r\n"
"   }\r\n"
"   $(document).keypress(function(e){ if(e.which === 13){ sendMsg(); e.preventDefault(); } });\r\n"
"   $('#send-text').click(function(e){ sendMsg(); e.preventDefault(); });\r\n"
"   $('#color-picker').spectrum({preferredFormat:'rgb',clickoutFiresChange:true,color:'#50FF00'});\r\n"
" </script>\r\n"
"\r\n"
"</body>\r\n"
"</html>\r\n";
#endif

Если вы все правильно сделали у вас должно получиться вот такой интерфейс

Можно изменить цвет текста

Если у вас выводит на экран только текст проверти, что у вас есть подключения к интернету так как стили https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/cs... https://raw.githubusercontent.com/bgrins/spectrum/... и скрипты https://ajax.googleapis.com/ajax/libs/jquery/2.2.2... https://raw.githubusercontent.com/bgrins/spectrum/... грузятся из интернета. Или скачайте их и загрузите в микроконтроллер. Конечно я не могу гарантировать что для них хватит места в ESP-01.

Подписывайтесь на мой канал на Youtube и вступайте в группы в Вконтакте и Facebook.

Спасибо за внимание!