<?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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter