Web/erzekelo/javascript.js

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; si<sensors.length; si++){
		var anglerad=sensors[si].angle*Math.PI/180;
		ctx.beginPath();
		ctx.arc(sensors[si].posx, sensors[si].posy, 10, 0, 2 * Math.PI);
		ctx.fill();
		var jsAngleStart=anglerad-Math.PI/4;
		var jsAngleEnd=anglerad+Math.PI/4;
		if (jsAngleStart<0) jsAngleStart+=Math.PI*2;
		else if (jsAngleStart>Math.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];

}