<?php
// error_reporting(E_ALL);
// ini_set("display_errors", 1);
require('gpssimulation.class.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPS SIMULATION</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="gpsstyle.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: Rubik, sans-serif;
}
select,
option {
font-size: 1.2em;
font-family: Spectral, serif;
}
</style>
</head>
<body>
<?php
$gps = new GPSSimulation('localhost', 'gps', 'root', 'root', true); // true=refresh
echo $gps->createSelectbox();
echo "<hr>";
?>
<canvas id="myCanvas" width="660" height="350"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
function processWagonData(whichWagon) {
ctx.clearRect(0, 0, 660, 350);
ctx.moveTo(0, 0);
ctx.beginPath();
let locationData = <?php echo json_encode($gps->getTraject()); ?>;
console.log(locationData);
let teller = 1;
ctx.fillStyle = "black"; // toon welke satelliet
ctx.font = "16px Arial";
ctx.fillText(whichWagon, canvas.width-120, 18);
locationData.forEach((elm) => {
if (elm.wagon === whichWagon) {
ctx.fillStyle = "green";
ctx.setLineDash([5, 5]);
ctx.lineTo(elm.x, elm.y);
ctx.stroke();
ctx.fillStyle = "black";
ctx.font = "11px Arial";
ctx.fillText("(" + elm.x + "," + elm.y + ") / " + (teller++),
elm.x - 8, elm.y + 14);
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(elm.x - 2, elm.y - 2, 5, 0, 2 * Math.PI, false);
ctx.fill();
}
});
}
function getWagonSelected(whichOne) {
let selvalue = document.getElementById(whichOne.name).value;
if (selvalue != 0) {
processWagonData(selvalue);
}
}
let selectedWagon = 'Old Faithful'; // start met deze
processWagonData(selectedWagon); // laat eventueel weg, dan lege select
</script>
</body>
</html>
Comments