arne/DRIP
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Putting this on Gitea so I don't lose it

Browse Source
This commit is contained in:
Gitea 2021-09-06 22:54:59 +02:00
commit 2bec1389b3
7 changed files with 280 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
xml/*.*

2
README.md Normal file
View File

@ -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.

101
css/index.css Normal file
View File

@ -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;
}
}

BIN
fonts/Ozone.ttf Normal file
View File

Binary file not shown.

12
getVMS.sh Normal file
View File

@ -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.*

40
index.html Normal file
View File

@ -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>

124
js/DRIPS.js Normal file
View File

@ -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);
// }