VVO/DVB iFrame solution

SaxnPaule

Hello community,
for all of you, who want to see actual departures of selected VVO stops I built a new “plugin” that can be used as i-frame.
At first find your stopid with help of the official page: https://www.vvo-online.de/de

Search for your stop an copy the stop id from the url.

Now copy the three files to a webserver of your choice and pass the stopid(s) to the corresponding array in dvb.js.

dvb.js:


var api = "https://webapi.vvo-online.de/dm?format=json";

var schedule = new XMLHttpRequest();
var stopids = [33000335, 33000331, 33000147];
var amount = 6;
var offset = 0;

var now = new Date();
var time = now;
if (offset !== 'undefined' && offset !== 0) {
	time = new Date(now.getTime() + (offset * 60 * 1000));
}


function execute(stopids, callback) {
	var done = 0;
	var placeholderContent = "";
	
	for(var k = 0; k < stopids.length; k++) {
		var stopid = stopids[k];
		
		var url = api + "&stopid=" + stopid + "&limit=" + amount + "&time=" + time.toISOString();

		schedule.open("GET", url, false);
		schedule.send(null);

		var data = JSON.parse(schedule.response);

		if(data && data.Departures && data.Departures.length > 0) {
			var departures = data.Departures;
			
			placeholderContent = placeholderContent + "<div class=\"dvb\"><div class=\"stop\">" + data.Name + "</div><div class=\"clear\"></div><div class=\"head\"><div class=\"line caption col-1\">Linie</div><div class=\"target caption col-2\">Ziel</div><div class=\"minutes caption col-3\">Min.</div></div><div class=\"clear\"></div>";
			
			for(var i = 0; i < departures.length; i++) {
				var hit = departures[i];

				var arrivalTime = new Date(parseInt(hit.RealTime ? hit.RealTime.match(/\d+/)[0] : hit.ScheduledTime.match(/\d+/)[0]));
				var arrivalTimeRelative = Math.round((arrivalTime - now) / 1000 / 60);
			
				var row = "<div class=\"col-1\">" + hit.LineName + "</div><div class=\"col-2\">" + hit.Direction + "</div><div class=\"col-3\">" + arrivalTimeRelative + "</div><div class=\"clear\"></div>";
				
				placeholderContent = placeholderContent + row;
			}
			
			placeholderContent = placeholderContent + "</div>";	
			done++;
			
			if(done == stopids.length) {
				callback(placeholderContent);
			}
		}
	}
}	

execute(stopids, function(result) {
	document.getElementById("placeholder").innerHTML = result;
});

dvb.css:

/*Custom CSS*/
html {width: 100%;}

body {
	background-color: #212121;
	margin: 0;
	color: #F1F1F1;
	width: 100%;
}

.clear {
	clear: both;
}
	
.dvb {
	width: 100%;
}

.col-1, .col-2, .col-3 {
 	float:left;
 	height:  20px;
 	border-bottom: 3px solid white;
	padding-left: 5px;
}

.col-1 {
	width: 15%;
}

.col-2 {
	width: 63%;
}

.col-3 {
	width: 20%;
}	

.icon, .aktuell, .forecast, .hum, .temp {
	background-color: #212121;
	height: 80px;
	float: left;
}

.caption, .stop {
	padding: 5px 0 0 5px;
	font-weight: 800;
}

.stop {
	font-size: 20px;
	margin-bottom: 5px;
	margin-top: 15px;
}

dvb.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>DVB - Fahrplan</title>

	<link href="css/dvb.css" rel="stylesheet">
	
  </head>
  <body>
  
	<div id="placeholder">&nbsp;</div>  
  
    <script src="js/dvb.js"></script>
  </body>
</html>

SaxnPaule

Guest

@SaxnPaule
Good Job Paule!
Genial für alle Dresdner Pimatic Freunde :-D
Kriegs grad nich auf englisch hin: Sind das die fahrplanmäßigen Halte oder ist das tatsächlich live inkl. “Verspätungen”?
Kann man das noch weiter eingrenzen? Nur Linie x in Richtung xxx an Haltestelle y?

SaxnPaule

Hi,
thats the actual ETA including delays. It’s exactly what you’ll see at the stops display too.

With the offset parameter you could also say, that you only want to see departures in x minutes. I use an offset of 8 minutes. Thats the time I need to walk to the stops.

With some little adjustments its also possible to filter specific lines. I’ll add such a filter. Gimme some minutes.

Filter for a specific direction is not that easy, because you need the exact wording thats given by the API.

SaxnPaule

Got it. The sample code only displays lines 6 and 7.
Be sure, that you also add the E lines like E6, E7 too.

dvb.js


var api = "https://webapi.vvo-online.de/dm?format=json";

var schedule = new XMLHttpRequest();
var stopids = [33000335, 33000331, 33000147];
var linesToDisplay = [6, 7];
var amount = 6;
var offset = 8;

var now = new Date();
var time = now;
if (offset !== 'undefined' && offset !== 0) {
	time = new Date(now.getTime() + (offset * 60 * 1000));
}


function execute(stopids, callback) {
	var done = 0;
	var placeholderContent = "";
	
	for(var k = 0; k < stopids.length; k++) {
		var stopid = stopids[k];
		
		var url = api + "&stopid=" + stopid + "&limit=" + amount + "&time=" + time.toISOString();

		schedule.open("GET", url, false);
		schedule.send(null);

		var data = JSON.parse(schedule.response);

		if(data && data.Departures && data.Departures.length > 0) {
			var departures = data.Departures;
			
			placeholderContent = placeholderContent + "<div class=\"dvb\"><div class=\"stop\">" + data.Name + "</div><div class=\"clear\"></div><div class=\"head\"><div class=\"line caption col-1\">Linie</div><div class=\"target caption col-2\">Ziel</div><div class=\"minutes caption col-3\">Min.</div></div><div class=\"clear\"></div>";
			
			for(var i = 0; i < departures.length; i++) {
				var hit = departures[i];
				
				if(linesToDisplay.length > 0 && linesToDisplay.indexOf(parseInt(hit.LineName)) < 0) {
					continue;
				}

				var arrivalTime = new Date(parseInt(hit.RealTime ? hit.RealTime.match(/\d+/)[0] : hit.ScheduledTime.match(/\d+/)[0]));
				var arrivalTimeRelative = Math.round((arrivalTime - now) / 1000 / 60);
			
				var column = "<div class=\"col-1\">" + hit.LineName + "</div><div class=\"col-2\">" + hit.Direction + "</div><div class=\"col-3\">" + arrivalTimeRelative + "</div><div class=\"clear\"></div>";
				
				placeholderContent = placeholderContent + column;
			}
			
			placeholderContent = placeholderContent + "</div>";	
			done++;
			
			if(done == stopids.length) {
				callback(placeholderContent);
			}
		}
	}
}	

execute(stopids, function(result) {
	document.getElementById("placeholder").innerHTML = result;
});

If you want to show all lines, leave the array empty

var linesToDisplay = [];

Guest

How can i integrate it into pimatic? Via iframe plugin?

SaxnPaule

Yes exactly. Run a simple webserver on your pi and add the page via the iframe plugin.

Guest

@SaxnPaule
Is it possible to build a dedicated plugin. otherwise it is not possible to reuse this data…
would be very nice to get a reminder via pushover or alexa when you have to walk to tramstation

SaxnPaule

Yes this would be possible. There already is a nodejs library called dvbjs. But I don’t have time to build a separate plugin. This coffeescript stuff is so annoying.

Just copy and paste the three files. That’s all you have to do.

SaxnPaule

@dk00000 Only for you , I built a dedicated plugin: https://forum.pimatic.org/topic/3933/new-plugin-pimatic-vvo

Just waiting for an answer to solve the last issue. After that you could give it a try

Guest

I tried the plugin and i like it!
Good job @SaxnPaule !

Would be nice if you could make it more responsive! at smartphone it looks really ugly …

SaxnPaule

Yes, I will adjust it, when I installed it on my productive system. Atm it’s only installed on my DEV environment where I have no access with my Smartphone.

SaxnPaule

I fixed the real plugin. I won’t adjust the iFrame solution. Please consider this thread: https://forum.pimatic.org/topic/3933/new-plugin-pimatic-vvo

Guest

👍🏼👍🏼👍🏼