esp8266 Как я могу обновить данные на всех подключенных клиентах (Slider и Selectbox)? - PullRequest
Новая
       14

esp8266 Как я могу обновить данные на всех подключенных клиентах (Slider и Selectbox)?

0 голосов
/ 11 мая 2018

Я написал программу для Arduino IDE для esp-12.С помощью этой программы я могу выбрать скорость, яркость и эффект для светодиодной ленты WS2812 через Wi-Fi.Я могу подключиться с любого смартфона к точке доступа (ESP-12), после чего отобразится HTML-сайт с ползунками и полем выбора.Это работает нормально.

Моя цель:
Когда подключенный пользователь вносит изменения на веб-сайте ESP, веб-сайт (ползунки и поле выбора) всех остальных подключенных пользователей должен быть немедленно обновлен.Максимальное количество возможных подключенных пользователей - 3.

Если пользователь перетаскивает ползунок, ESP-12 много зависает.

Вот мой код Arduino: 

#define WEBSOCKETS_NETWORK_TYPE NETWORK_ESP8266_ASYNC

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) { // When a WebSocket message is received
  switch (type) {
    case WStype_DISCONNECTED:             // if the websocket is disconnected
      Serial.printf("[%u] Disconnected!\n", num);
      break;
    case WStype_ERROR: {                 // websocket connection error
        String payloadString=(const char *)payload;
        Serial.println("error: "+payloadString);
    }
    break;
    // new client connected 
    case WStype_CONNECTED: {              
        IPAddress ip = webSocket.remoteIP(num);
        Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
        // update website of new connected client with current data
         webSocket.broadcastTXT('*'+String(effekt_name));
         webSocket.broadcastTXT('-'+String(animation_speed));
         webSocket.broadcastTXT('+'+String(helligkeit));
      }
      break;
    case WStype_TEXT:                    
      // receive data 
      Serial.printf("[%u] get Text: %s\n", num, payload);
      /* Effekt */
     if (payload[0] == '*') {            // we get effekt back
         String payloadString=(const char *)payload;
         String text = String((char *) &payload[1]);
         effekt_name = text;
         Serial.println("effekt: "+effekt_name);         
      }
     /* Brightness */
     if (payload[0] == '+') {            // we get brightness back
         String payloadString=(const char *)payload;
         String text = String((char *) &payload[1]);
         helligkeit = text.toInt();
         FastLED.setBrightness(helligkeit);
         Serial.println("brightness: "+text);

      }
     /* Speed */
     if (payload[0] == '-') {            // we get speed back
         String payloadString=(const char *)payload;
         String text1 = String((char *) &payload[1]);
         animation_speed = atoi((const char*)&payload[1]);    
         Serial.println("payload "+payloadString);
         Serial.println(animation_speed, DEC);
      }
      break;
  }
}

void loop() {
  if (effekt_name == "Confetti") {
    if (last_effekt != "Confetti") {
      last_effekt = "Confetti";
      all_off();
    }
    confetti1a();
  } 
  if (effekt_name == "Flashes") {
    if (last_effekt != "Flashes") {
      last_effekt = "Flashes";
      all_off();
    }
    flashes1a();
  } 
  if (effekt_name == "Juggle") {
    if (last_effekt != "Juggle") {
      last_effekt = "Juggle";
      all_off();
    }
    juggle1a();
  }

  // send data (slider and selectbox) to all clients 
  if (millis()>wait001){
    webSocket.broadcastTXT('*'+String(effekt_name));
    webSocket.broadcastTXT('-'+String(animation_speed));
    webSocket.broadcastTXT('+'+String(helligkeit));
    wait001=millis()+websockMillis;  
  }  
}

Вот мой код JavaScript: 

var websock;
function start() {
  websock = new WebSocket('ws://' + window.location.hostname + ':81/');
  websock.onopen = function(evt) { console.log('websock open'); };
  websock.onclose = function(evt) { console.log('websock close'); };
  websock.onerror = function(evt) { console.log(evt); };

  websock.onmessage = function(evt) {
    console.log(evt);
    if (evt.data.substring(0,1)=="*") {
    document.getElementById("idOfSelectInput").value = (evt.data.substring(1,evt.data.length));
    }
    if (evt.data.substring(0,1)=="-") {
    document.getElementById('speed').value = (evt.data.substring(1,evt.data.length));
    }
    if (evt.data.substring(0,1)=="+") {
    document.getElementById('brightness').value = (evt.data.substring(1,evt.data.length));
    }

    function effekt() {
        var x = document.getElementById("idOfSelectInput").value;   
        websock.send('*'+x);    
        console.log('effekt: ' + value); 
    }
    function brightness() {
        var b = document.getElementById('brightness').value; 
        websock.send('+'+b);    
        console.log('brightness: ' + b); 
    }
    function speed() {
        var s = document.getElementById('speed').value; 
        websock.send('-' + s);  
        console.log('brightness: ' + s); 
    }

  } 
}

Вот мой код HTML: 

<!DOCTYPE HTML>
<html>
<head>
  <title>LED Control</title>
  <meta charset="UTF-8"> 
  <link href='main.css' rel='stylesheet' type='text/css'>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="144x144"  href="/favicon-144x144.png">
  <link rel="icon" type="image/png" sizes="48x48" href="/favicon.ico">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#00878f">
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
  <script src="WebSocket.js" type="text/javascript"></script>
  <script src="jscolor.js" type="text/javascript"></script>
</head>

<body onload="javascript:start();">
  <center>
    <header>
      <h1>LED Control</h1>
    </header>
    <div>
      <table>
        <tr>
          <td style="width:14.4px; text-align: right">Helligkeit: </td>
          <td><input class="enabled" id="brightness" type="range" min="5" max="255" step="5" oninput  ="brightness();" value="50"></td>
        </tr>
        <tr>
          <td style="width:1.4px; text-align: right"><br></td>
          <td><br></td>
        </tr>
        <tr>
          <td style="width:14.4px; text-align: right">Geschwindigkeit: </td>
          <td><input class="enabled" id="speed" type="range" min="1" max="50" step="1" oninput  ="speed();" value="5"></td>
        </tr>
      </table>
    </div>

    <div>
      <table>
        <tr>
          <td style="width:14.4px; text-align: right">Effekt: </td>
          <td style="width:auto;">
            <select onchange="effekt1()" name="select" style="width: 200px" id="idOfSelectInput"> 
              <option value='1'>Rainbow</option> 
              <option>Confetti</option> 
              <option>Flashes</option> 
            </select>
          </td>
          <td style="width: 100%; text-align: right"> 
          </td>
        </tr>
      </table>
    </div>    
  </center>
</body>
</html>
...