Putting this on Gitea so I don't lose it
This commit is contained in:
Gitea
commit
2bec1389b3
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
xml/*.*
|
||||||
2
README.md
Normal file
2
README.md
Normal 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
101
css/index.css
Normal 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
BIN
fonts/Ozone.ttf
Normal file
Binary file not shown.
12
getVMS.sh
Normal file
12
getVMS.sh
Normal 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
40
index.html
Normal 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
124
js/DRIPS.js
Normal 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);
|
||||||
|
// }
|
||||||
Loading…
Reference in New Issue
Block a user