From cb9cfda088d51be5ddc05597f54bff9c027a41fa Mon Sep 17 00:00:00 2001 From: Cp0204 Date: Mon, 22 Jul 2024 22:52:00 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20random=20effect=20fea?= =?UTF-8?q?ture?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add a new `/light/random` endpoint to trigger a random effect. - Add a "Random" button to the web interface to trigger the random effect. - Implement the `randomEffect()` function to generate a random effect with random color, speed, and lightness. - Update the web interface to display the random effect. --- cubefx/cubefx.ino | 47 +++++++++++++++++++++++++-------------- installer/post/index.html | 30 ++++++++++++++++++------- 2 files changed, 52 insertions(+), 25 deletions(-) diff --git a/cubefx/cubefx.ino b/cubefx/cubefx.ino index e5a7438..257d40a 100644 --- a/cubefx/cubefx.ino +++ b/cubefx/cubefx.ino @@ -38,7 +38,7 @@ static const char htmlIndex[] PROGMEM = R"(
  • Light Panel
  • Light Status
  • Light Switch
    • -
  • Light NextDemo
    • +
  • Random Effect
  • WiFiAP TurnOff
  • Firmware Update
    • @@ -63,17 +63,20 @@ Firmware: CubeFX Panel

    CubeFX Panel

    on: 

    id:  

    -

    speed:  150

    lightness:  255

    -

    data: 

    Made with ❤️ by Cp0204
+lightRng.addEventListener('input', ()=>lightVal.textContent=lightRng.value); btnNext.addEventListener('click', ()=>{ let currentId=parseInt(idSel.value); idSel.value=currentId==5 ? -71 : currentId + 1;
+form.dispatchEvent(new Event('submit'));}); btnRandom.addEventListener('click', ()=>{ getData('/light/random');}); idSel.addEventListener('change', ()=>{ const colorPickers=document.querySelectorAll('.colorPicker');
+for (let i=1; i < colorPickers.length; i++){ colorPickers[i].style.display=idSel.value !=5 ? 'none' : '';}}); form.addEventListener('submit', (event)=>{ event.preventDefault(); const data={ on: onCheck.checked ? 1 : 0,
+id: parseInt(idSel.value), speed: parseInt(speedRng.value), lightness: parseInt(lightRng.value), data: Array.from(document.querySelectorAll('.colorPicker')).map(picker=>picker.value.replace('#', ''))};
+fetch(apiServer + '/post',{ method: 'POST', headers:{ 'Content-Type': 'application/json'}, body: JSON.stringify(data)}) .then(response=>response.json()) .then(response=>log.textContent +="\n/post Success " + JSON.stringify(response)) .catch(err=>log.textContent +='\nError: ' + err);});
+window.addEventListener('load', ()=>{ getData('/get');}); function getData(endpoint){ fetch(apiServer + endpoint) .then(response=>response.json()) .then(data=>{ onCheck.checked=data.on===1; idSel.value=data.id;
+speedRng.value=data.speed; speedVal.textContent=data.speed; lightRng.value=data.lightness; lightVal.textContent=data.lightness; const colorPickers=document.querySelectorAll('.colorPicker');
+for (let i=0; i < data.data.length; i++){ colorPickers[i].value='#' + data.data[i];} idSel.dispatchEvent(new Event('change')); log.textContent +='\n' + endpoint + ' Success';}) .catch(err=>{ log.textContent +='\nError: ' + err;});} 
 )";
 
 DynamicJsonDocument doc(1024);
@@ -209,11 +212,10 @@ void openHttpServer() {
     EEPROM.put(EEPROM_ADDR_IS_LIGHT_ON, isLightOn);
     EEPROM.commit();
   });
-  // light demo
-  httpServer.on("/light/demo", HTTP_GET, [](AsyncWebServerRequest *request) {
-    effectId = effectId == 5 ? -71 : (effectId + 1);
-    showEffect();
-    request->send(200, "application/json", "{\"action\":\"" + request->url() + "\",\"message\":\"Quick Next Demo... " + String(effectId) + ":" + ws2812fx.getModeName(ws2812fx.getMode()) + "\"}");
+  // random effect
+  httpServer.on("/light/random", HTTP_GET, [](AsyncWebServerRequest *request) {
+    randomEffect();
+    handleHttpGet(request);
   });
   // 404
   httpServer.onNotFound([](AsyncWebServerRequest *request) {
@@ -347,7 +349,18 @@ void handleBtnClick() {
   digitalWrite(BOARD_LED, LOW);
   delay(50);
   digitalWrite(BOARD_LED, HIGH);
-  openAP();
+  randomEffect();
+}
+
+void randomEffect() {
+  effectId = random(-71, 6);
+  effectSpeed = random(50, 201);
+  lightness = random(50, 201);
+  for (int i = 0; i < NUM_PIXELS; i++) {
+    colors[i] = ws2812fx.color_wheel(ws2812fx.random8());
+  }
+  showEffect();
+  saveToEEPROM();
 }
 
 // ==============================================================
diff --git a/installer/post/index.html b/installer/post/index.html
index 394e266..0be2d62 100644
--- a/installer/post/index.html
+++ b/installer/post/index.html
@@ -23,7 +23,7 @@ 
    CubeFX Panel
    
     
    speed:  150
    
     
    lightness:  255
    
     
    data: 
    
-    
+     
   
   
    
   Made with ❤️ by Cp0204
@@ -32,6 +32,7 @@ 
    CubeFX Panel
    
       onCheck = document.getElementById('onCheck'),
       idSel = document.getElementById('idSel'),
       btnNext = document.getElementById('btnNext'),
+      btnRandom = document.getElementById('btnRandom'),
       speedRng = document.getElementById('speedRng'),
       speedVal = document.getElementById('speedVal'),
       lightRng = document.getElementById('lightRng'),
@@ -63,6 +64,17 @@ 
    CubeFX Panel
    
       form.dispatchEvent(new Event('submit'));
     });
 
+    btnRandom.addEventListener('click', () => {
+      getData('/light/random');
+    });
+
+    idSel.addEventListener('change', () => {
+      const colorPickers = document.querySelectorAll('.colorPicker');
+      for (let i = 1; i < colorPickers.length; i++) {
+        colorPickers[i].style.display = idSel.value != 5 ? 'none' : '';
+      }
+    });
+
     form.addEventListener('submit', (event) => {
       event.preventDefault();
       const data = {
@@ -83,7 +95,11 @@ 
    CubeFX Panel
    
     });
 
     window.addEventListener('load', () => {
-      fetch(apiServer + '/get')
+      getData('/get');
+    });
+
+    function getData(endpoint) {
+      fetch(apiServer + endpoint)
         .then(response => response.json())
         .then(data => {
           onCheck.checked = data.on === 1;
@@ -96,15 +112,13 @@ 
    CubeFX Panel
    
           for (let i = 0; i < data.data.length; i++) {
             colorPickers[i].value = '#' + data.data[i];
           }
-          log.textContent += '/get Success';
+          idSel.dispatchEvent(new Event('change'));
+          log.textContent += '\n' + endpoint + ' Success';
         })
         .catch(err => {
-          log.textContent += 'Error: ' + err;
-          form.querySelectorAll('button').forEach(button => {
-            button.disabled = true;
-          });
+          log.textContent += '\nError: ' + err;
         });
-    });
+    }