commit 2bec1389b3137182901bd4ccc3ad73ba78573ec7 Author: Gitea Date: Mon Sep 6 22:54:59 2021 +0200 Putting this on Gitea so I don't lose it diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dce0efa --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +xml/*.* diff --git a/README.md b/README.md new file mode 100644 index 0000000..5fe4fae --- /dev/null +++ b/README.md @@ -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. diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..a31f0b6 --- /dev/null +++ b/css/index.css @@ -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; + } +} \ No newline at end of file diff --git a/fonts/Ozone.ttf b/fonts/Ozone.ttf new file mode 100644 index 0000000..2c780ad Binary files /dev/null and b/fonts/Ozone.ttf differ diff --git a/getVMS.sh b/getVMS.sh new file mode 100644 index 0000000..7608774 --- /dev/null +++ b/getVMS.sh @@ -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.* + diff --git a/index.html b/index.html new file mode 100644 index 0000000..449e09f --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + + DRIP Reader 2000 + + + + + + + + + + + +
+ + DRIP Reader 2000 + + + + 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. + + +
+ + +
+ + + + + + \ No newline at end of file diff --git a/js/DRIPS.js b/js/DRIPS.js new file mode 100644 index 0000000..49bb7dc --- /dev/null +++ b/js/DRIPS.js @@ -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 = '' + 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
'; + } else { + content += textLines[index].innerHTML + '
'; + } + } + } 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); +// } \ No newline at end of file