fabian/triviOS
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add leds indicators

Browse source
This commit is contained in:
Alejandro Diaz 2023-09-13 15:41:34 -06:00
parent b6c6060a89
commit f6392a43b2
1 changed files with 97 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
ui/main/templates/home.html
View file

@ -9,12 +9,43 @@
} }
</style> </style>
<script> <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) { $.get("/led/"+ led +"/", function (data) {
console.log(data); console.log(data);
if (led < 6 && led > 0) { if (led < 6 && led > 0) {
if (data == "off"){ if (data == "off"){
$("#but"+led).text("Turn off "+led) $("#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() { function take_photo() {
$.get("/photo/", function (data) { $.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 %} {% if user.is_authenticated %}
<div class="jumbotron justify-content-center align-items-center"> <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="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);">Turn off 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);">Turn on 1</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);">Turn on 2</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);">Turn on 3</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);">Turn on 4</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);">Turn on 5</button> <button id="but5" class="btn btn-primary btn-lg" onclick="toggle_leds(5, 350, 400, 100, 100);">Turn on 5</button>
</div> </div>
<div class="jumbotron" width="800" height="600"> <div class="jumbotron" width="800" height="600">
<canvas id="miCanvas" class="mx-auto" width="800" height="600"></canvas> <canvas id="miCanvas" class="mx-auto" width="800" height="600"></canvas>
@ -125,16 +156,65 @@
ctx.strokeRect(500, 400, 1, 75); // Puerta 2 ctx.strokeRect(500, 400, 1, 75); // Puerta 2
// var imagen = new Image();
// // Definir la ruta de la imagen que deseas cargar var image = new Image();
// imagen.src = "https://www.freepngimg.com/thumb/light/78155-icons-light-idea-computer-lighting-incandescent-bulb.png"
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> </script>