From f6392a43b2d09d5c65ce13647bd7e47f4e0eb950 Mon Sep 17 00:00:00 2001
From: Alejandro Diaz <alejandrodp@protonmail.com>
Date: Wed, 13 Sep 2023 15:41:34 -0600
Subject: [PATCH] add leds indicators

---
 ui/main/templates/home.html | 114 ++++++++++++++++++++++++++++++------
 1 file changed, 97 insertions(+), 17 deletions(-)

diff --git a/ui/main/templates/home.html b/ui/main/templates/home.html
index f5d7062..5c5bb8f 100644
--- a/ui/main/templates/home.html
+++ b/ui/main/templates/home.html
@@ -9,12 +9,43 @@
         }
     </style>
         <script>
-            function toggle_leds(led) {
+
+            function place_blank(x, y, w, h) {
+
+                var canvas = document.getElementById("miCanvas");
+                var ctx = canvas.getContext("2d");
+
+                ctx.fillStyle = "#ffffff"; // Color blanco
+                ctx.fillRect(x, y, w, h);
+            }
+
+
+            function toggle_leds(led, x, y, w, h) {
+
+                var image = new Image();
+
                 $.get("/led/"+ led +"/", function (data) {
                     console.log(data);
                     if (led < 6 && led > 0) {
                         if (data == "off"){
                             $("#but"+led).text("Turn off "+led)
+
+                            place_blank(x, y, w, h);
+                            image.src = "https://www.freepngimg.com/thumb/light/78155-icons-light-idea-computer-lighting-incandescent-bulb.png";
+                            // Esperar a que la imagen se cargue antes de dibujarla
+                            image.onload = function () {
+                                ctx.drawImage(image, x, y, w, h); // (imagen, x, y)
+                            };
+
+                        } else {
+                            $("#but"+led).text("Turn on "+led)
+
+                            place_blank(x, y, w, h);
+                            image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+                            // Esperar a que la imagen se cargue antes de dibujarla
+                            image.onload = function () {
+                                ctx.drawImage(image, x, y, w, h); // (imagen, x, y)
+                            };
                         }
                     }
                 });
@@ -22,7 +53,7 @@
 
             function take_photo() {
                 $.get("/photo/", function (data) {
-                    $("#photo").attr("src", "static/photo.jpg?"+d.getTime());
+                    $("#photo").attr("src", "static/photo.jpg?rand="+Math.random());
                 });
             }
 
@@ -58,13 +89,13 @@
     {% if user.is_authenticated %}
 
         <div class="jumbotron justify-content-center align-items-center">
-            <button id="but6" class="btn btn-primary btn-lg" onclick="toggle_leds(6);">Turn on all</button>
-              <button id="but0" class="btn btn-primary btn-lg" onclick="toggle_leds(0);">Turn off all</button>
-              <button id="but1" class="btn btn-primary btn-lg" onclick="toggle_leds(1);">Turn on 1</button>
-              <button id="but2" class="btn btn-primary btn-lg" onclick="toggle_leds(2);">Turn on 2</button>
-              <button id="but3" class="btn btn-primary btn-lg" onclick="toggle_leds(3);">Turn on 3</button>
-              <button id="but4" class="btn btn-primary btn-lg" onclick="toggle_leds(4);">Turn on 4</button>
-              <button id="but5" class="btn btn-primary btn-lg" onclick="toggle_leds(5);">Turn on 5</button>
+            <button id="but6" class="btn btn-primary btn-lg" onclick="toggle_leds(6, 0, 0, 0, 0);">Turn on all</button>
+              <button id="but0" class="btn btn-primary btn-lg" onclick="toggle_leds(0, 0, 0, 0, 0);">Turn off all</button>
+              <button id="but1" class="btn btn-primary btn-lg" onclick="toggle_leds(1, 20, 80, 100, 100);">Turn on 1</button>
+              <button id="but2" class="btn btn-primary btn-lg" onclick="toggle_leds(2, 50, 400, 100, 100);">Turn on 2</button>
+              <button id="but3" class="btn btn-primary btn-lg" onclick="toggle_leds(3, 350, 50, 100, 100);">Turn on 3</button>
+              <button id="but4" class="btn btn-primary btn-lg" onclick="toggle_leds(4, 500, 400, 100, 100);">Turn on 4</button>
+              <button id="but5" class="btn btn-primary btn-lg" onclick="toggle_leds(5, 350, 400, 100, 100);">Turn on 5</button>
         </div>
         <div class="jumbotron" width="800" height="600">
             <canvas id="miCanvas" class="mx-auto" width="800" height="600"></canvas>
@@ -125,16 +156,65 @@
 
         ctx.strokeRect(500, 400, 1, 75); // Puerta 2
 
-        // var imagen = new Image();
 
-        // // Definir la ruta de la imagen que deseas cargar
-        // imagen.src = "https://www.freepngimg.com/thumb/light/78155-icons-light-idea-computer-lighting-incandescent-bulb.png"
+        var image = new Image();
+
+        image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        image.onload = function () {
+            ctx.drawImage(image, 20, 80, 100, 100); // (imagen, x, y)
+        };
+
+        var image = new Image();
+
+        image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        image.onload = function () {
+            ctx.drawImage(image, 500, 400, 100, 100); // (imagen, x, y)
+        };
+
+        var image = new Image();
+
+        image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        image.onload = function () {
+            ctx.drawImage(image, 50, 400, 100, 100); // (imagen, x, y)
+        };
+
+        var image = new Image();
+
+        image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        image.onload = function () {
+            ctx.drawImage(image, 50, 400, 100, 100); // (imagen, x, y)
+        };
+
+
+        var image = new Image();
+
+        image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        image.onload = function () {
+            ctx.drawImage(image, 350, 400, 100, 100); // (imagen, x, y)
+        };
+
+        var image = new Image();
+
+        image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";image.src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.pngmart.com%2Ffiles%2F7%2FLight-Bulb-PNG-Picture.png&f=1&nofb=1&ipt=afac257c7b6ce4e6c1fda1b32c1775c687841d1c138e1257f3f821cbff14c5e0&ipo=images";
+
+        // Esperar a que la imagen se cargue antes de dibujarla
+        image.onload = function () {
+            ctx.drawImage(image, 350, 50, 100, 100); // (imagen, x, y)
+        };
+
+
+
 
-        // // Esperar a que la imagen se cargue antes de dibujarla
-        // imagen.onload = function () {
-        //     // Dibujar la imagen en el canvas
-        //     ctx.drawImage(imagen, 20, 100, 80, 80); // (imagen, x, y)
-        // };
     </script>