221 lines
No EOL
11 KiB
HTML
221 lines
No EOL
11 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %} Home Manager {% endblock title%}
|
|
{% block content %}
|
|
|
|
<style>
|
|
img {
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
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)
|
|
};
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function take_photo() {
|
|
$.get("/photo/", function (data) {
|
|
$("#photo").attr("src", "static/photo.jpg?rand="+Math.random());
|
|
});
|
|
}
|
|
|
|
|
|
function button_painter(pin, x, y, w, h) {
|
|
var canvas = document.getElementById("miCanvas");
|
|
var ctx = canvas.getContext("2d");
|
|
$.get("/button/"+pin, function (data) {
|
|
if (data == 1) {
|
|
ctx.strokeStyle = "#FFFFFF"; // Color blanco
|
|
console.log("Abriendo puerta " + pin)
|
|
} else {
|
|
ctx.strokeStyle = "#FF0000"; // Color negro
|
|
console.log("Cerrando puerta " + pin)
|
|
}
|
|
|
|
ctx.strokeRect(x, y, w, h); // Puerta
|
|
});
|
|
}
|
|
|
|
// Establecer la cantidad de segundos (en milisegundos) entre cada ejecución
|
|
var segundos = 2; // Cambia a la cantidad de segundos deseada
|
|
|
|
// Llamar a la función cada X segundos
|
|
|
|
setInterval(button_painter, segundos * 1000, 7, 300, 100, 1, 75);
|
|
setInterval(button_painter, segundos * 1000, 8, 350, 4, 100, 1);
|
|
setInterval(button_painter, segundos * 1000, 9, 350, 596, 100, 1);
|
|
setInterval(button_painter, segundos * 1000, 10, 500, 400, 1, 75);
|
|
|
|
</script>
|
|
|
|
{% 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, 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>
|
|
<!-- {% load static %}
|
|
<img src="{% static '1.jpg' %}" alt="My image"> -->
|
|
</div>
|
|
|
|
<div class="jumbotron">
|
|
<button class="btn btn-primary btn-lg btn-block" onclick="take_photo();">Take photo</button>
|
|
<p></p>
|
|
<img id="photo" src="{% static 'photo.jpg' %}">
|
|
</div>
|
|
{% else %}
|
|
<div class="jumbotron">
|
|
<p class="lead">You are not logged in</p>
|
|
<p class="lead">
|
|
<a class="btn btn-primary btn-lg" href="{% url 'login' %}" role="button">Log In</a>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
// Obtener el elemento canvas y su contexto
|
|
var canvas = document.getElementById("miCanvas");
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
// Dibujar la casa (un rectángulo)
|
|
ctx.fillStyle = "#ffffff"; // Color amarillo
|
|
ctx.fillRect(0, 0, 800, 600); // (x, y, ancho, alto)
|
|
|
|
// // Dibujar las habitaciones (rectángulos dentro de la casa)
|
|
// ctx.fillStyle = "#ffffff"; // Color blanco
|
|
// ctx.fillRect(0, 0, 300, 300); // Cuarto 1
|
|
// ctx.fillRect(500, 300, 300, 300); // Cuarto 2
|
|
// // ctx.fillRect(70, 190, 260, 110); // Sala y cocina
|
|
|
|
// Dibujar las divisiones de las habitaciones
|
|
ctx.strokeStyle = "#000000"; // Color negro
|
|
ctx.lineWidth = 10
|
|
ctx.strokeRect(0, 0, 300, 300); // Cuarto 1
|
|
ctx.strokeRect(500, 300, 300, 300); // Cuarto 2
|
|
ctx.strokeRect(5, 5, 790, 590); // Casa
|
|
// ctx.strokeRect(70, 190, 260, 110); // Sala y cocina
|
|
|
|
// Etiquetas de las habitaciones
|
|
ctx.fillStyle = "#000000"; // Color negro
|
|
ctx.font = "30px Arial";
|
|
ctx.fillText("Cuarto 1", 100, 150);
|
|
ctx.fillText("Cuarto 2", 600, 450);
|
|
ctx.fillText("Sala", 200, 450);
|
|
ctx.fillText("Cocina", 600, 150);
|
|
|
|
ctx.strokeStyle = "#FF0000"; // Color negro
|
|
ctx.strokeRect(300, 100, 1, 75); // Puerta 1
|
|
|
|
ctx.strokeRect(350, 4, 100, 1); // Puerta trasera
|
|
ctx.strokeRect(350, 596, 100, 1); // Puerta tdelanteearasera
|
|
|
|
ctx.strokeRect(500, 400, 1, 75); // Puerta 2
|
|
|
|
|
|
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)
|
|
};
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
{% endblock content %} |