222 lines
8.4 KiB
HTML
222 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0'/>
|
|
<title>ESP32 CARRO</title>
|
|
|
|
<style>
|
|
*{-webkit-touch-callout: none;
|
|
-webkit-text-size-adjust: none;
|
|
-webkit-tap-highlight-color: #FFFFFF;
|
|
-webkit-user-select: none;
|
|
-webkit-tap-highlight-color: #FFFFFF;}
|
|
|
|
body {margin: 0px;}
|
|
canvas {display:block; position:absolute}
|
|
.containerButtons {width: auto; display: flex; justify-content: space-around;}
|
|
.buttons {border: none; color: white; padding: 4px 4px; text-align: center; text-decoration: none; display: inline-block; font-size: 4.0vmin; font-weight: bold; margin: 4px 2px;
|
|
-webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; width: 25%; border-radius: 2px;}
|
|
.btn1 {background-color: #808080; color: #FFFFFF; border: 3px solid #808080;} .btn1:hover {background-color: #F2F2F2; color: #000000; border: 3px solid #FF0000;}
|
|
.btn2 {background-color: #1E90FF; color: #FFFFFF; border: 3px solid #1E90FF;} .btn2:hover {background-color: #F2F2F2; color: #000000; border: 3px solid #FF0000;}
|
|
.data {padding: 2px 4px; background-color: #F2F2F2; color: #000000; font-size: 3.5vmin; border: 2px solid #000000;}
|
|
.containerCanvas {width: auto;}
|
|
</style>
|
|
|
|
<body id='body'>
|
|
<div class='containerButtons'>
|
|
<button class='buttons btn1' onclick='onStatic()' autofocus>Estático</button>
|
|
<button class='buttons btn2' onclick='onDynamic()'>Dinámico</button>
|
|
<p id='txt1_id' class='buttons data'></p>
|
|
<p id='txt2_id' class='buttons data'></p>
|
|
<p id='sensores' class='buttons data'></p>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
///////VARIABLES GLOBALES Y OPERACIONES CON VECTORES ///////
|
|
var canvas, c , containerCanvas, ratioWindow, ladoMenor;
|
|
var estatico = true, touchStart = false, mouseDown = false;
|
|
var angRad, angGrd, vectorHypot, speed;
|
|
var vector2 = function (x,y) {this.x= x || 0; this.y = y || 0;};
|
|
let sensores =0;
|
|
var sensores_label = document.getElementById('sensores');
|
|
vector2.prototype = {
|
|
reset: function ( x, y ) {this.x = x; this.y = y; return this;},
|
|
copyFrom : function (v) {this.x = v.x; this.y = v.y; return this;},
|
|
minusEq : function (v) {this.x-= v.x; this.y-= v.y; return this;},
|
|
};
|
|
var pos = new vector2(0,0), startPos = new vector2(0,0), vector = new vector2(0,0), posMax = new vector2(0,0);
|
|
|
|
var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
|
|
connection.onopen = function () {connection.send('Connect ' + new Date()); };
|
|
connection.onerror = function (error) {console.log('WebSocket Error ', error);};
|
|
connection.onmessage = function (event) {
|
|
|
|
//if(!isNaN(event.data))
|
|
|
|
sensores = event.data//parseInt(event.data,10)
|
|
sensores_label.innerHTML = 'Sensores Linea<br/>'+sensores
|
|
console.log('Server: ', sensores);
|
|
};
|
|
|
|
///////CANVAS///////
|
|
setupCanvas();
|
|
function setupCanvas() {
|
|
canvas = document.createElement('canvas');
|
|
c = canvas.getContext('2d');
|
|
resetAll();
|
|
containerCanvas = document.createElement('div');
|
|
containerCanvas.className = "containerCanvas";
|
|
document.body.appendChild(containerCanvas);
|
|
containerCanvas.appendChild(canvas);
|
|
}
|
|
function resetAll () {
|
|
var buttonsHeight = Math.min(window.innerWidth, window.innerHeight)*0.04+44;
|
|
canvas.width = window.innerWidth; canvas.height = window.innerHeight-buttonsHeight;
|
|
ratioWindow = canvas.width/canvas.height; ladoMenor=Math.min(canvas.width, canvas.height);
|
|
window.scrollTo(0,0);
|
|
c.font = Math.round(ladoMenor*0.03) + 'px sans-serif';
|
|
c.fillStyle = "white";
|
|
c.textAlign="center";
|
|
estatico? onStatic() : onDynamic();
|
|
}
|
|
function resetByOrientationchange () {
|
|
document.body.removeChild(containerCanvas);
|
|
setTimeout(function(){
|
|
setupCanvas();
|
|
startEventListener();
|
|
}, 450);
|
|
}
|
|
|
|
///////DETECCIÓN DE EVENTOS Y DETERMINACIÓN DEL TIPO DE DISPOSITIVO SEÑALADOR (TÁCTIL O RATÓN)///////
|
|
var touchable = 'createTouch' in document;
|
|
startEventListener();
|
|
function startEventListener(){
|
|
window.onresize = resetAll;
|
|
if(touchable) {
|
|
canvas.addEventListener( 'touchstart', onTouchStart, false);
|
|
canvas.addEventListener( 'touchmove', onTouchMove, false);
|
|
canvas.addEventListener( 'touchend', onTouchEnd, false);
|
|
window.onorientationchange = resetByOrientationchange;
|
|
} else {
|
|
canvas.addEventListener( 'mousedown', onMouseDown, false);
|
|
canvas.addEventListener( 'mousemove', onMouseMove, false);
|
|
['mouseup', 'mouseout'].forEach(function(event){canvas.addEventListener(event,onMouseEnd,false);});
|
|
}
|
|
}
|
|
|
|
///////ESTÁTICO / DINÁMICO///////
|
|
function onStatic() {
|
|
estatico = true;
|
|
document.getElementById('body').style.background= '#CECECE';
|
|
c.strokeStyle = '#808080';
|
|
drawOnCanvasStartOrMoveEnd();
|
|
}
|
|
function onDynamic() {
|
|
estatico = false;
|
|
document.getElementById('body').style.background= '#ADD8E6';
|
|
c.strokeStyle = '#1E90FF';
|
|
drawOnCanvasStartOrMoveEnd();
|
|
}
|
|
|
|
///////GESTIÓN DE DISPOSITIVO TÁCTIL///////
|
|
function onTouchStart(event) {
|
|
touchStart = true;
|
|
if (estatico){
|
|
pos.reset(event.touches[0].clientX-canvas.getBoundingClientRect().left, event.touches[0].clientY-canvas.getBoundingClientRect().top);
|
|
vector.copyFrom(pos);
|
|
vector.minusEq(startPos);
|
|
} else {
|
|
startPos.reset(event.touches[0].clientX-canvas.getBoundingClientRect().left, event.touches[0].clientY-canvas.getBoundingClientRect().top);
|
|
pos.copyFrom(startPos);
|
|
}
|
|
}
|
|
function onTouchMove(event) {
|
|
if (touchStart){
|
|
event.preventDefault();
|
|
pos.reset(event.touches[0].clientX-canvas.getBoundingClientRect().left, event.touches[0].clientY-canvas.getBoundingClientRect().top);
|
|
vector.copyFrom(pos);
|
|
vector.minusEq(startPos);
|
|
}
|
|
}
|
|
function onTouchEnd(event) {
|
|
touchStart = false;
|
|
drawOnCanvasStartOrMoveEnd();
|
|
sendData ();
|
|
}
|
|
|
|
///////GESTIÓN DEL RATÓN///////
|
|
function onMouseDown(event) {
|
|
event.preventDefault();
|
|
mouseDown = true;
|
|
if (estatico){
|
|
pos.reset(event.offsetX, event.offsetY);
|
|
vector.copyFrom(pos);
|
|
vector.minusEq(startPos);
|
|
} else {
|
|
startPos.reset(event.offsetX, event.offsetY);
|
|
pos.copyFrom(startPos);
|
|
}
|
|
}
|
|
function onMouseMove(event) {
|
|
if(mouseDown){
|
|
pos.reset(event.offsetX, event.offsetY);
|
|
vector.copyFrom(pos);
|
|
vector.minusEq(startPos);
|
|
}
|
|
}
|
|
function onMouseEnd(event) {
|
|
mouseDown = false;
|
|
drawOnCanvasStartOrMoveEnd();
|
|
sendData ();
|
|
}
|
|
|
|
///////DIBUJO DE LA BASE Y STICK///////
|
|
setInterval(drawOnMove, 1000/50);
|
|
function drawOnMove() {
|
|
if(touchStart || mouseDown) {
|
|
c.clearRect(0,0,canvas.width, canvas.height);
|
|
drawBase (startPos.x, startPos.y);
|
|
newValues ();
|
|
drawStick ();
|
|
drawText ();
|
|
sendData ();
|
|
}
|
|
}
|
|
function drawOnCanvasStartOrMoveEnd(){
|
|
c.clearRect(0,0,canvas.width, canvas.height);
|
|
startPos.reset(canvas.width/2,canvas.height/2);
|
|
vector.reset(0,0);
|
|
estatico? drawBase() : c.fillText('TOCA LA PANTALLA PARA COMENZAR',canvas.width/2,canvas.height/2);
|
|
newValues ();
|
|
drawText ();
|
|
}
|
|
function newValues(){
|
|
angRad = Math.atan2(-vector.y,vector.x).toFixed(2);
|
|
angGrd = Math.round(angRad*180/Math.PI);
|
|
vectorHypot = Math.hypot(vector.x,vector.y);
|
|
posMax.reset(startPos.x+Math.min(vectorHypot, ladoMenor*0.25)*Math.cos(angRad), startPos.y-Math.min(vectorHypot, ladoMenor*0.25)*Math.sin(angRad));
|
|
speed = Math.round((Math.min(vectorHypot,ladoMenor*0.25)/(ladoMenor*0.25)*100));
|
|
}
|
|
function drawBase(){
|
|
c.beginPath(); c.lineWidth = 6; c.arc(startPos.x, startPos.y, ladoMenor*0.10 ,0,Math.PI*2,true); c.stroke();
|
|
c.beginPath(); c.lineWidth = 2; c.arc(startPos.x, startPos.y, ladoMenor*0.35 ,0,Math.PI*2,true); c.stroke();
|
|
}
|
|
function drawStick(){
|
|
c.beginPath(); c.arc(posMax.x, posMax.y, ladoMenor*0.10, 0,Math.PI*2, true); c.stroke();
|
|
}
|
|
|
|
function drawText(){
|
|
document.getElementById('txt2_id').innerHTML = 'Ángulo<br/>'+angGrd+'º';
|
|
document.getElementById('txt1_id').innerHTML = 'Velocidad<br/>'+speed+'%';
|
|
|
|
}
|
|
function sendData(){
|
|
var dir = 'Velocidad:'+speed+' Angulo:'+angRad;
|
|
console.log(dir);
|
|
connection.send(dir);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |