class Sensor { constructor(id, posx, posy, angle, anglerad) { this.id= id; this.posx=posx; this.posy=posy; this.angle=angle; this.anglerad = anglerad; } } class Ray { constructor(id, signal, angle){ this.id = id; this.signal = signal; this.angle = angle; } } var sensorData =""; var sensors = []; var rays = []; var canvas; var ctx; var grid; var ctxFOV = "rgba(0,0,255,0.1)"; var sensorChecker = ""; var previousx = 0; var previousy = 0; function getSensor() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if (this.status == 200) { sensorData = this.responseText; splitSensorData(sensorData); start(); } } }; xhr.open('POST', 'http://bitkozpont.mik.uni-pannon.hu/Vigyazz3SensorData.php', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(JSON.stringify({ request: 'sensors' })); } function getSensorDataV1() { if (previousx != aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja || previousy != aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if (this.status == 200) { sensorChecker = this.responseText; splitDetectedSensorData(sensorChecker); } } }; xhr.open('POST', 'http://bitkozpont.mik.uni-pannon.hu/Vigyazz3SensorData.php', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(JSON.stringify({ request: 'sensordata', version: 1, posx: aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja, posy: aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja })); } previousx = aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja; previousy = aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja; } function getSensorDataV2() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if (this.status == 200) { sensorChecker = this.responseText; splitDetectedSensorData(sensorChecker); } } }; xhr.open('POST', 'http://bitkozpont.mik.uni-pannon.hu/Vigyazz3SensorData.php', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(JSON.stringify({ request: 'sensordata', version: 2, })); } //R.I.P nyikon dzsézönje :D // function splitSensorData(rtrnValue){ // var str = rtrnValue.split("[")[1].split("]")[0]; // var snsrs = str.split("}"); // var sensors = []; // for (var i = 0; i < snsrs.length - 1; i++){ // sensor = snsrs[i].split("{")[1]; // var data = sensor.split(","); // sensors.push(new Sensor(data[0].split(":")[1], data[1].split(":")[1], data[2].split(":")[1], data[3].split(":")[1]), data[4].split(":")[1]); // } // // // for (var i = 0; i < sensors.length; i++){ // alert(sensors[i].id + ";", sensors[i].posx + ";", sensors[i].posy + ";", sensors[i].angle + ";", sensors[i].anglerad + ";"); // } // } function splitSensorData(json_text){ var jsn = JSON.parse(json_text); for (var i = 0; i < 4; i++) { var sensor = jsn.data[i]; sensors.push(new Sensor(sensor.id, sensor.posx, sensor.posy, sensor.angle, sensor.anglerad)); } } var startX1; var startY1; var startX2; var startY2; var endX1; var endY1; var endX2; var endY2; var rectX; var rectY; function splitDetectedSensorData(json_text){ var sensorCount = 0; var rayIDs = []; rays = []; var jsn = JSON.parse(json_text); for (var i = 0; i < 4; i++) { var ray = jsn.data[i]; rays.push(new Ray(ray.id, ray.signal, ray.angle)); // console.log(rays[i].id + ";" + rays[i].signal + ";" + rays[i].angle); if (ray.signal && sensorCount < 2) { rayIDs[sensorCount] = ray.id; sensorCount++; } } if (sensorCount == 2) { //Ilyeneket nem tanultunk! startX1 = sensors[rayIDs[0]].posx; startY1 = sensors[rayIDs[0]].posy; startX2 = sensors[rayIDs[1]].posx; startY2 = sensors[rayIDs[1]].posy; endX1 = startX1 + Math.cos((sensors[rayIDs[0]].angle + rays[rayIDs[0]].angle) * Math.PI / 180) * 400; endY1 = startY1 + Math.sin((sensors[rayIDs[0]].angle + rays[rayIDs[0]].angle) * Math.PI / 180) * 400; endX2 = startX2 + Math.cos((sensors[rayIDs[1]].angle + rays[rayIDs[1]].angle) * Math.PI / 180) * 400; endY2 = startY2 + Math.sin((sensors[rayIDs[1]].angle + rays[rayIDs[1]].angle) * Math.PI / 180) * 400; //console.log(startX1 + ", " + startY1 + " " + endX1 + ", " + endY1 + " " + startX2 + ", " + startY2 + " " + endX2 + ", " + endY2); // var b_angle = 90 - rays[rayIDs[0]].angle + sensors[rayIDs[0]].angle; // var a_side = (Math.sin(sensors[rayIDs[0]].angle + rays[rayIDs[0]].angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180); // var b_side = (Math.sin(b_angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180); // // endX1 = startX1 + b_side; // endY1 = startY1 + a_side; // // var b_angle = 90 - rays[rayIDs[1]].angle + sensors[rayIDs[0]].angle; // var a_side = (Math.sin(sensors[rayIDs[0]].angle + rays[rayIDs[1]].angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180); // var b_side = (Math.sin(b_angle*Math.PI/180) * 400) / Math.sin(90*Math.PI/180); // endX2 = startX2 + b_side; // endY2 = startY2 + a_side; var pos = detectIntersection(startX1, startY1, endX1, endY1, startX2, startY2, endX2, endY2); drawSquare(Math.floor(pos[0] / 100) * 100, Math.floor(pos[1] / 100) * 100); rectX = Math.floor(pos[0] / 100) * 100; rectY = Math.floor(pos[1] / 100) * 100; } else { rectX = -101; rectY = -101; } } function start() { modal(); canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); grid = canvas.getContext("2d"); versionPicker(); var canvasRefresher = setInterval(refreshCanvas, 35); } function refreshCanvas() { var canvasHeight=canvas.offsetHeight; var canvasWidth=canvas.offsetWidth; ctx.clearRect(0, 0, canvasHeight, canvasWidth); drawGrid(); drawFOV(); drawDetection(); drawSensors(); drawSquare(); if (version){ drawCircle(); } } function drawSquare() { ctx.fillStyle = "rgba(255, 255, 0, 0.6)"; ctx.fillRect(rectX + 1, rectY + 1, 99, 99); } function drawGrid(){ var p = 0; for (var x = 0; x <= 500; x += 100) { grid.moveTo(0.5 + x + p, p); grid.lineTo(0.5 + x + p, 500 + p); } for (var x = 0; x <= 500; x += 100) { grid.moveTo(p, 0.5 + x + p); grid.lineTo(500 + p, 0.5 + x + p); } grid.strokeStyle = "black"; grid.stroke(); } function drawSensors() { ctx.fillStyle = "darkred"; for (var si=0; siMath.PI*2) jsAngleStart-=Math.PI*2; if (jsAngleEnd<0) jsAngleEnd+=Math.PI*2; else if (jsAngleEnd>Math.PI*2) jsAngleEnd-=Math.PI*2; ctx.beginPath(); ctx.moveTo(sensors[si].posx, sensors[si].posy); ctx.lineTo(sensors[si].posx+Math.cos(anglerad-Math.PI/4)*20, sensors[si].posy+Math.sin(anglerad-Math.PI/4)*20); ctx.lineTo(sensors[si].posx+Math.cos(anglerad+Math.PI/4)*20, sensors[si].posy+Math.sin(anglerad+Math.PI/4)*20); ctx.lineTo(sensors[si].posx, sensors[si].posy); ctx.fill(); } } function drawFOV() { ctx.fillStyle = ctxFOV; for (var i = 0; i < 4; i++) { ctx.moveTo(sensors[i].posx, sensors[i].posy); ctx.beginPath(); ctx.arc(sensors[i].posx, sensors[i].posy, 400, (sensors[i].angle - 45) * Math.PI / 180, (sensors[i].angle + 45) * Math.PI / 180); ctx.lineTo(sensors[i].posx, sensors[i].posy); ctx.fill(); }; } function fovonoff() { if (document.getElementById("fovswitch").checked) { ctxFOV = "rgba(0,0,255,0.1)"; } else { ctxFOV = "rgba(0,0,0,0)"; } } var refreshSensorData2; var refreshSensorData1; function versionPicker() { if (document.getElementById("versionswitch").checked) { clearInterval(refreshSensorData1); getSensorDataV2(); refreshSensorData2 = setInterval(getSensorDataV2, 1000); version = false; } else { clearInterval(refreshSensorData2); refreshSensorData1 = setInterval(getSensorDataV1, 35); version = true; } } function drawDetection() { ctx.fillStyle = "rgba(255,0,0,0.2)"; for (var i = 0; i < 4; i++) { if (rays[i] != undefined) { if (rays[i].signal) { ctx.moveTo(sensors[i].posx, sensors[i].posy); ctx.beginPath(); ctx.arc(sensors[i].posx, sensors[i].posy, 400, (sensors[i].angle + rays[i].angle - 2) * Math.PI / 180, (sensors[i].angle + rays[i].angle + 2) * Math.PI / 180); ctx.lineTo(sensors[i].posx, sensors[i].posy); ctx.fill(); } } } } var aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja = 250; var aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja = 250; function drawCircle(){ ctx.strokeStyle = "rgba(0, 0, 0, 0)"; ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja, aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja, 4, 0, Math.PI*2, true); ctx.fill() } window.addEventListener("keydown", moveObject, false); function moveObject(e) { var step=8; switch(e.keyCode) { case 37: if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja - step >= 0) aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja -= step; break; case 38: if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja - step >= 0) aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja -= step; break; case 39: if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja + step <= 500) aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorVizszintesPozicioja += step; break; case 40: if (aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja + step <= 500) aFeherHatteruKozepenElhelyezkedoNegyzetAlakuVaszononMegjelenitettTelitettFeketenKitoltottKorFuggolegesPozicioja += step; break; } } function modal() { var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } } //[0, 0], [0, 0] function detectIntersection(x1, y1, x2, y2, x3, y3, x4, y4){ denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)); if (denominator === 0) { return false; } let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator; let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator; if (ua < 0 || ua > 1 || ub < 0 || ub > 1) { return false; } let x = x1 + ua * (x2 - x1); let y = y1 + ua * (y2 - y1); return [x, y]; }