Putting this on Gitea so I don't lose it
This commit is contained in:
Gitea
commit
2bec1389b3
|
|
@ -0,0 +1 @@
|
|||
xml/*.*
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# DRIP Reader
|
||||
This tool shows the information currently being displayed on the Variable Message Signs (Dynamisch Route-informatiepaneel) next to the Dutch highways. The data being used is provided by the Nederlandse Database Wegverkeersgegevens.
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
div#map {
|
||||
position: absolute;
|
||||
top: 8em;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.appInfo {
|
||||
width: calc(100% - 2em);
|
||||
position: absolute;
|
||||
height: 4em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
padding: 1em;
|
||||
background-color: white;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title updated"
|
||||
"info info"
|
||||
;
|
||||
}
|
||||
|
||||
div.appInfo span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div.appInfo span:nth-of-type(1) {
|
||||
font-family: 'Codystar', cursive;
|
||||
font-size: 2em;
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
div.appInfo span:nth-of-type(2) {
|
||||
text-align: right;
|
||||
grid-area: updated;
|
||||
}
|
||||
|
||||
div.appInfo span:nth-of-type(3) {
|
||||
grid-area: info;
|
||||
}
|
||||
|
||||
img.vmsImage {
|
||||
border: 5px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content {
|
||||
background: black !important;
|
||||
color: white;
|
||||
width: max-content !important;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-close-button {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
|
||||
border-top-color: black !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
div#map {
|
||||
top: 6em;
|
||||
}
|
||||
|
||||
div.appInfo {
|
||||
height: 2em;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title updated"
|
||||
;
|
||||
}
|
||||
|
||||
div.appInfo span:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
div#map {
|
||||
top: 7em;
|
||||
}
|
||||
|
||||
div.appInfo {
|
||||
height: 3em;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"updated";
|
||||
}
|
||||
|
||||
div.appInfo span:nth-of-type(2) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,12 @@
|
|||
wget http://opendata.ndw.nu/DRIPS.xml.gz
|
||||
wget http://opendata.ndw.nu/LocatietabelDRIPS.xml.gz
|
||||
|
||||
gunzip -f DRIPS.xml.gz
|
||||
gunzip -f LocatietabelDRIPS.xml.gz
|
||||
|
||||
mv DRIPS.xml xml/
|
||||
mv LocatietabelDRIPS.xml xml/
|
||||
|
||||
rm DRIPS.xml.gz.*
|
||||
rm LocatietabelDRIPS.xml.gz.*
|
||||
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>DRIP Reader 2000</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/index.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Codystar&display=swap" rel="stylesheet">
|
||||
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Project info div -->
|
||||
<div class="appInfo">
|
||||
<span>
|
||||
<b>DRIP</b> Reader 2000
|
||||
</span>
|
||||
<span id="updated"></span>
|
||||
<span>
|
||||
This tool shows the information currently being displayed on the Variable Message Signs (Dynamisch
|
||||
Route-informatiepaneel) next to the Dutch highways. The data being used is provided by the Nederlandse
|
||||
Database Wegverkeersgegevens.
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Map container div -->
|
||||
<div id='map'></div>
|
||||
|
||||
<!-- Import logic script -->
|
||||
<script src="js/DRIPS.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
// Setup XML requester
|
||||
var request = new XMLHttpRequest();
|
||||
|
||||
// Setup mapbox
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoidGhlLXJlYWwtbWNhcm4iLCJhIjoiY2p5bXo1dXJsMG1oNzNvbzU0dW84NmlmaSJ9.RiPJ7xRtmO6y4daFXB4Byg';
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/mapbox/streets-v11',
|
||||
center: [5.46, 52.1],
|
||||
zoom: 6
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
// Open xml file containing the statuses of the VMS units
|
||||
request.open("GET", "xml/DRIPS.xml", false);
|
||||
request.send();
|
||||
var xmlContents = request.responseXML;
|
||||
document.getElementById("updated").innerHTML = `Last updated: ${request.responseXML.lastModified}`;
|
||||
|
||||
// Open xml file containing the locations of the VMS units
|
||||
request.open("GET", "xml/LocatietabelDRIPS.xml", false);
|
||||
request.send();
|
||||
var xmlLocation = request.responseXML;
|
||||
|
||||
// Create array of VMS Id's using the status xml file
|
||||
var unitArray = xmlContents.getElementsByTagName('vmsUnit');
|
||||
var statusArray = [];
|
||||
|
||||
for (let index = 0; index < unitArray.length; index++) {
|
||||
statusArray.push(unitArray[index].childNodes[1].getAttribute('id'));
|
||||
}
|
||||
|
||||
// Create array of VMS Id's using the locations xml file
|
||||
var recordArray = xmlLocation.getElementsByTagName('vmsUnitRecord');
|
||||
var referenceArray = [];
|
||||
|
||||
for (let index = 0; index < recordArray.length; index++) {
|
||||
referenceArray.push(recordArray[index].getAttribute('id'));
|
||||
}
|
||||
|
||||
// Remove VMS units which do not have fixed location
|
||||
// var dripsArray = [];
|
||||
|
||||
for (let referenceIndex = 0; referenceIndex < referenceArray.length; referenceIndex++) {
|
||||
var referenceId = referenceArray[referenceIndex];
|
||||
if (statusArray.includes(referenceId)) {
|
||||
var statusIndex = statusArray.indexOf(referenceId);
|
||||
var statusId = statusArray[statusIndex];
|
||||
|
||||
// Check if the VMS unit has a fixed location
|
||||
if (xmlLocation.querySelectorAll('vmsUnitRecord[id="' + referenceId + '"] > vmsRecord > vmsRecord > vmsLocation > locationForDisplay')[0]) {
|
||||
// Add the needed data to the array set
|
||||
const latitude = xmlLocation.querySelectorAll('vmsUnitRecord[id="' + referenceId + '"] > vmsRecord > vmsRecord > vmsLocation > locationForDisplay > latitude')[0].innerHTML;
|
||||
const longitude = xmlLocation.querySelectorAll('vmsUnitRecord[id="' + referenceId + '"] > vmsRecord > vmsRecord > vmsLocation > locationForDisplay > longitude')[0].innerHTML;
|
||||
const type = xmlLocation.querySelectorAll('vmsUnitRecord > vmsRecord > vmsRecord > vmsType')[referenceIndex].innerHTML;
|
||||
|
||||
// Check wether VMS unit is dislaying text or an image
|
||||
var vmsElement = xmlContents.querySelectorAll('vmsUnit > vmsUnitReference[id="' + statusId + '"]')[0].parentElement;
|
||||
|
||||
if (vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > vmsMessageExtension > vmsMessageExtension > vmsImage > imageData > binary').length) {
|
||||
const base64Image = vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > vmsMessageExtension > vmsMessageExtension > vmsImage > imageData > binary')[0].innerHTML;
|
||||
var content = '<img class="vmsImage" src="data:image/png;base64, ' + base64Image + '" alt="' + statusId + '"/>';
|
||||
} else if (vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > textPage > vmsText > vmsTextLine').length) {
|
||||
var content = ''
|
||||
var textLines = vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > textPage > vmsText > vmsTextLine > vmsTextLine > vmsTextLine');
|
||||
for (let index = 0; index < textLines.length; index++) {
|
||||
if (textLines[index].innerHTML == '' && index == 0) {
|
||||
content = 'No data<br>';
|
||||
} else {
|
||||
content += textLines[index].innerHTML + '<br>';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var content = 'No data'
|
||||
}
|
||||
|
||||
// Push VMS Id to array
|
||||
addMarker([longitude, latitude], content);
|
||||
// dripsArray.push({
|
||||
// statusId,
|
||||
// longitude,
|
||||
// latitude,
|
||||
// type,
|
||||
// content
|
||||
// });
|
||||
} else {
|
||||
console.log('Location not Found');
|
||||
}
|
||||
} else {
|
||||
console.log('VMS ID not found');
|
||||
}
|
||||
}
|
||||
|
||||
//// Add markers to the map
|
||||
async function addMarker(coordinates, content) {
|
||||
var popup = new mapboxgl.Popup({
|
||||
offset: 25
|
||||
})
|
||||
// .setHTML(contentArray[index]);
|
||||
.setHTML(content)
|
||||
|
||||
new mapboxgl.Marker()
|
||||
.setLngLat(coordinates)
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
}
|
||||
|
||||
// for (let index = 0; index < dripsArray.length; index++) {
|
||||
// const coordinates = [
|
||||
// dripsArray[index]['longitude'],
|
||||
// dripsArray[index]['latitude']
|
||||
// ];
|
||||
// var popup = new mapboxgl.Popup({
|
||||
// offset: 25
|
||||
// })
|
||||
// // .setHTML(contentArray[index]);
|
||||
// .setHTML(dripsArray[index]['content'])
|
||||
|
||||
// new mapboxgl.Marker()
|
||||
// .setLngLat(coordinates)
|
||||
// .setPopup(popup)
|
||||
// .addTo(map);
|
||||
// }
|
||||
Loading…
Reference in New Issue