triviOS/ui/main/templates/home.html

{% extends "base.html" %}
{% block title %} Home Manager {% endblock title%}
{% block content %}

    <style>
        img {
        max-width: 100%;
        object-fit: cover;
        }
    </style>
        <script>
            function toggle_leds(led) {
                $.get("/led/"+ led +"/", function (data) {
                    console.log(data);
                    if (led < 6 && led > 0) {
                        if (data == "off"){
                            $("#but"+led).text("Turn off "+led)
                        }
                    }
                });
            }

            function take_photo() {
                $.get("/photo/", function (data) {
                    $("#photo").attr("src", "static/photo.jpg?"+d.getTime());
                });
            }


            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);">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>
        </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 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"

        // // 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>


{% endblock content %}