From 70d1f14442d10842eda58521834325eca6bdbb99 Mon Sep 17 00:00:00 2001
From: Zhao Xin <7176466@qq.com>
Date: Mon, 5 Sep 2022 15:47:26 +0800
Subject: [PATCH] update

---
 sensehat/index.html | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/sensehat/index.html b/sensehat/index.html
index bb1d679..b8401c0 100644
--- a/sensehat/index.html
+++ b/sensehat/index.html
@@ -139,6 +139,15 @@
             onclick="client.emit('action', {action:'showMessage', text:'Hello', color:[50,50,255], speed: 1})">Hello</button>
         <button
             onclick="client.emit('action', {action:'flashMessage', text:'Hello', color:[50,50,255], speed: 1})">Hello</button>
+        <div style="display:flex;">
+            <div>
+                <p>红 <input type="range" name="red" id="red" min="0" , max="255" step="1" value="50"></p>
+                <p>绿 <input type="range" name="green" id="green" min="0" , max="255" step="1" value="50"></p>
+                <p>蓝 <input type="range" name="blue" id="blue" min="0" , max="255" step="1" value="255"></p>
+            </div>
+            <div id="selected_color"
+                style="width:100px;border:1px solid black;margin:1rem;background-color: rgb(50,50,255);"></div>
+        </div>
     </div>
 
     <script src="http://pi/sensehat/socket.io/socket.io.js"></script>
@@ -147,8 +156,9 @@
 
         client.on('action', ({ action, x, y, color, pixels }) => {
             var leds = document.querySelectorAll('.led')
-            if (color == undefined) color = [0, 0, 0]
+            if (color == undefined || color == [0, 0, 0]) color = [255, 255, 255]
             var [r, g, b] = color
+            if (r == 0 && g == 0 && b == 0) [r, g, b] = [255, 255, 255]
             switch (action) {
                 case 'clear':
                     for (let i = 0; i < 64; i++) {
@@ -161,6 +171,7 @@
                 case 'setPixels':
                     for (let i = 0; i < 64; i++) {
                         var [r, g, b] = pixels[i]
+                        if (r == 0 && g == 0 && b == 0) [r, g, b] = [255, 255, 255]
                         leds[i].style.backgroundColor = `rgb(${r}, ${g}, ${b})`
                     }
                     break
@@ -171,9 +182,19 @@
 
         function setPixel(led) {
             const { x, y } = led.dataset
-            const color = led.classList.toggle('on') ? [255, 255, 255] : [0, 0, 0]
-            client.emit('action', { action: 'setPixel', x, y, color })
+            const r = Number(red.value)
+            const g = Number(green.value)
+            const b = Number(blue.value)
+            client.emit('action', { action: 'setPixel', x, y, color: [r, g, b] })
         }
+
+        red.onchange = change_color
+        green.onchange = change_color
+        blue.onchange = change_color
+        function change_color() {
+            selected_color.style.backgroundColor = `rgb(${red.value},${green.value},${blue.value})`
+        }
+        change_color()
     </script>
 </body>