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

remove unused files frontend

Browse source
This commit is contained in:
Alejandro Diaz 2023-09-13 10:38:24 -06:00
parent 9cb8078742
commit 3da3cd544b
11 changed files with 122 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,20 +8,44 @@
object-fit: cover;
}
</style>
<script>
function toggle_leds(led) {
$.get("/led/"+ led +"/", function (data) {
console.log(data);
if (led < 6 && led > 0) {
$("#but"+led).text(data);
}
});
}
function take_photo() {
$.get("/photo/", function (data) {
});
}
</script>
{% if user.is_authenticated %}
<div class="jumbotron">
<form action="" method="post">
{% csrf_token %}
<ul class="list-group">
{{ form.as_ul }}
</ul>
<input class="btn btn-primary btn-lg" type="submit" value="Enable">
</form>
<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">
{% load static %}
<img src="{% static image %}" alt="My image">
<button class="btn btn-primary btn-lg btn-block" onclick="take_photo();">Take photo</button>
<p></p>
<img src="{% static '1.jpg' %}" alt="My image">
</div>
{% else %}
<div class="jumbotron">
@ -32,5 +56,49 @@
</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);
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 %}