Use binary data for websocket

Author: stnkl

FastLEDManager.cpp

@@ -224,7 +224,7 @@ void FastLEDManagerClass::begin(Animation *animation)
   if (currentAnimation && currentAnimation->getName() == animation->getName())
     return;
 
-  clear();
+  clear(true);
 
   status = RUNNING;
   currentAnimation = animation;
@@ -252,7 +252,7 @@ void FastLEDManagerClass::stop()
     return;
 
   status = STOPPED;
-  clear();
+  clear(true);
   currentAnimation = NULL;
 
   WebSocket::broadcastStatus();

WebSocket.cpp

@@ -67,41 +67,7 @@ void handleText(String text, uint8_t id)
   text.toCharArray(textArray, text.length());
 
   if (Config.parseJson(textArray))
-  {
     Config.save();
-    return;
-  }
-
-  if (text.startsWith("toggle"))
-  {
-    String animation = text.substring(7);
-    Fade::stop();
-    FastLEDManager.toggle(FastLEDManager.getAnimation(animation));
-  }
-  else if (text == "stop")
-  {
-    if (FastLEDManager.currentAnimation)
-      FastLEDManager.stop();
-  }
-  else if (text == "requesting_config")
-  {
-    DynamicJsonDocument doc(2048);
-    doc = Config.getJson(doc);
-    doc["status"] = String(FastLEDManager.status);
-    doc["currentAnimation"] = FastLEDManager.currentAnimation ? FastLEDManager.currentAnimation->getName() : "";
-    JsonArray animations = doc.createNestedArray("animations");
-    for (uint8_t i = 0; i < FastLEDManager.animations.size(); i++)
-    {
-      animations.add(FastLEDManager.animations.get(i)->getName());
-    }
-    String buffer = "";
-    serializeJson(doc, buffer);
-    socket.sendTXT(id, buffer.c_str());
-  }
-  else
-  {
-    PRINTLN("Command '" + text + "' not found!");
-  }
 }
 
 void handleBinary(uint8_t *binary, uint8_t id)
@@ -111,30 +77,46 @@ void handleBinary(uint8_t *binary, uint8_t id)
   case 0: // Color
     Config.color = rgb2hex(binary[1], binary[2], binary[3]);
     FastLEDManager.begin(FastLEDManager.getAnimation("Color"));
-    socket.sendTXT(id, String("ok").c_str());
     break;
-  case 1: // Speed
-    Config.speed = binary[1];
-    socket.sendTXT(id, String("ok").c_str());
+  case 1: // Toggle animation
+    Fade::stop();
+    FastLEDManager.toggle(FastLEDManager.getAnimation(binary[1]));
+    break;
+  case 2: // Stop
+    FastLEDManager.stop();
     break;
-  case 4: // Spectroscope data
+  case 10: // Spectroscope data
     if (FastLEDManager.currentAnimation)
       FastLEDManager.stop();
     for (uint16_t i = 0; i < FastLEDManager.numLeds; i++)
-    {
       FastLEDManager.leds[i] = CRGB(binary[1 + i * 3], binary[2 + i * 3], binary[3 + i * 3]);
-    }
     break;
-  case 5: // Saturation
-    Config.saturation = binary[1];
-    socket.sendTXT(id, String("ok").c_str());
-    break;
-  case 6: // linearSpectroscope data
+  case 11: // linear spectroscope data
     Spectroscope::updateSpectroscope(binary + 1, false);
     break;
-  case 7: // symmetricalSpectroscope data
+  case 12: // Symmetrical spectroscope data
     Spectroscope::updateSpectroscope(binary + 1, true);
     break;
+  case 20: // Speed
+    Config.speed = binary[1];
+    break;
+  case 21: // Saturation
+    Config.saturation = binary[1];
+    break;
+  case 30: // Request configuration
+    DynamicJsonDocument doc(2048);
+    doc = Config.getJson(doc);
+    doc["status"] = String(FastLEDManager.status);
+    doc["currentAnimation"] = FastLEDManager.currentAnimation ? FastLEDManager.currentAnimation->getName() : "";
+    JsonArray animations = doc.createNestedArray("animations");
+    for (uint8_t i = 0; i < FastLEDManager.animations.size(); i++)
+    {
+      animations.add(FastLEDManager.animations.get(i)->getName());
+    }
+    String buffer = "";
+    serializeJson(doc, buffer);
+    socket.sendTXT(id, buffer.c_str());
+    break;
   }
 }
 

data/index.htm

@@ -30,7 +30,7 @@ <h1 style="text-align: center">FastLED Manager</h1>
     <div id="animationButtons">
       <button type="button" class="btn btn-secondary color no-alpha" id="colorButton">Color</button>
       <button type="button" class="btn btn-danger color no-alpha" id="stopButton"
-        onclick="sendText('stop')">Stop</button>
+        onclick="ws_pending_msg = [2]">Stop</button>
     </div>
 
     <div class="speedSlider" id="speed"></div>

data/index.js

@@ -2,14 +2,13 @@ let currentAnimation = '';
 let currentStatus = 0;
 let currentColor = '';
 
-let websocketReady = false;
+let ws_pending_msg;
 let ws_uri = 'ws://' + (location.hostname ? location.hostname : 'localhost') + ':81/';
 let connection = new WebSocket(ws_uri, ['arduino']);
 connection.binaryType = 'arraybuffer';
 
 connection.onopen = function (e) {
-  sendText('requesting_config');
-
+  ws_pending_msg = [30]
   connectingOverlayText.innerHTML = 'Waiting for response...';
   refreshButton.style.display = 'none';
 };
@@ -27,7 +26,6 @@ connection.onclose = function (e) {
 connection.onmessage = function (e) {
   console.log('Received: ', e.data);
 
-  websocketReady = true;
   try {
     handleJsonData(JSON.parse(e.data));
 
@@ -38,7 +36,7 @@ connection.onmessage = function (e) {
 
 function handleJsonData(data) {
   if (data.hasOwnProperty('animations')) {
-    data.animations.forEach(animation => {
+    data.animations.forEach((animation, idx) => {
       // Fill animation dropdowns
       alarmAnimation.add(new Option(animation));
       postAlarmAnimation.add(new Option(animation));
@@ -50,7 +48,7 @@ function handleJsonData(data) {
         let btn = document.createElement('button');
         btn.classList.add('btn-secondary', 'btn');
         btn.innerHTML = animation;
-        btn.onclick = () => { sendAnimationButton(animation); };
+        btn.onclick = () => { sendAnimationButton(idx); };
         animationButtons.insertBefore(btn, stopButton);
       }
     })
@@ -164,18 +162,15 @@ function sendConfig() {
 }
 
 function sendBytes() {
-  if (connection.readyState == 1 && websocketReady) {
-    let data = new Uint8Array(arguments.length);
-    for (let i = 0; i < arguments.length; i++) {
-      data[i] = arguments[i];
+  if (connection.readyState == 1 && ws_pending_msg) {
+    let data = new Uint8Array(ws_pending_msg.length);
+    for (let i = 0; i < ws_pending_msg.length; i++) {
+      data[i] = ws_pending_msg[i];
     }
+    ws_pending_msg = undefined;
     connection.send(data.buffer);
-    websocketReady = false;
     console.log('Sent bytes: ' + data);
   }
-  else {
-    console.log('Not connected. Data not sent!');
-  }
 }
 
 function sendText(text) {
@@ -189,7 +184,7 @@ function sendText(text) {
 }
 
 function sendAnimationButton(animation) {
-  sendText('toggle ' + animation);
+  ws_pending_msg = [1, animation];
 }
 
 
@@ -219,7 +214,7 @@ let $customColorPicker = $('#colorButton').colorPicker({
     let newColor = this.color.colors.HEX + ''; // dereference by appending ''
     if (currentColor != newColor || toggled === true) {
       let newColorRGB = this.color.colors.RND.rgb;
-      sendBytes(0, newColorRGB.r, newColorRGB.g, newColorRGB.b);
+      ws_pending_msg = [0, newColorRGB.r, newColorRGB.g, newColorRGB.b];
       currentColor = newColor;
       document.querySelector('#colorButton').style.borderColor = '#' + newColor;
     }
@@ -229,19 +224,22 @@ let $customColorPicker = $('#colorButton').colorPicker({
 // Sliders
 noUiSlider.create(speed, { start: 128, step: 1, range: { 'min': 0, 'max': 255 } });
 noUiSlider.create(saturation, { start: 255, step: 1, range: { 'min': 110, 'max': 255 } });
-speed.noUiSlider.on('update', (values, handle) => { sendBytes(1, values[handle]); });
-saturation.noUiSlider.on('update', (values, handle) => { sendBytes(5, values[handle]); });
+speed.noUiSlider.on('update', (values, handle) => { ws_pending_msg = [20, values[handle]]; });
+saturation.noUiSlider.on('update', (values, handle) => { ws_pending_msg = [21, values[handle]]; });
 document.querySelector('#speed .noUi-handle').innerHTML = 'Speed';
 document.querySelector('#saturation .noUi-handle').innerHTML = 'Sat.';
 
 // Close connection after being ianctive for 5 minutes
 let idleTime = 0;
 setInterval(() => {
   idleTime++;
-  if (idleTime > 300)//s
+  if (idleTime > 300) // in s
     connection.close();
 }, 1000);
 
+// Rate limit websocket
+setInterval(sendBytes, 15);
+
 document.addEventListener('mousemove', e => { idleTime = 0; });
 document.addEventListener('keypress', e => { idleTime = 0; });
 document.addEventListener('visibilitychange', () => {
@@ -252,4 +250,4 @@ document.addEventListener('visibilitychange', () => {
     else
       location.reload();
   }
-})
+})