Stau Prognose
This flow uses Microsoft Bing Map API to calculate the route home and get informations about this traffic situation. It displays a small web page with these traffic informations and an graphical representation about delays on the route.
To get that page call http://example.com:1880/home It designed for mobile use on a mobile phone or a tablet.
The Flow contains a subflow to call the bing api. There you must provide your BING api key. Its free. See https://msdn.microsoft.com/de-de/library/ff428642.aspx
On the main flow you have to set your home address. For testing purpose the address "Brandenburger Tor" is used.
[{"id":"b1f77b14.4e0888","type":"subflow","name":"Calculate Route","in":[{"x":78.05556678771973,"y":155.69445037841797,"wires":[{"id":"785985fc.87a67c"}]}],"out":[{"x":724.7221775054932,"y":154.58334350585938,"wires":[{"id":"6d08b818.92f748","port":0}]}]},{"id":"6d08b818.92f748","type":"http request","name":"askBing","method":"GET","ret":"obj","url":"","x":609.1666374206543,"y":154.58333206176758,"z":"b1f77b14.4e0888","wires":[[]]},{"id":"2cbb68ab.d34498","type":"function","name":"prepare Bing URL","func":"msg.url = \"http://dev.virtualearth.net/REST/v1/Routes?wayPoint.1=\" + msg.payload.from + \"&wayPoint.2=\" + msg.payload.to + \"&optimize=timeWithTraffic&mfa=1&key=\" + msg.api_key;\nreturn msg;","outputs":1,"valid":true,"x":430.38886642456055,"y":155.13887405395508,"z":"b1f77b14.4e0888","wires":[["6d08b818.92f748"]]},{"id":"785985fc.87a67c","type":"function","name":"Add Bing API Key","func":"msg.api_key=\"<Your API Key>\";\nreturn msg;","outputs":1,"valid":true,"x":230.1666374206543,"y":154.58333206176758,"z":"b1f77b14.4e0888","wires":[["2cbb68ab.d34498"]]},{"id":"4d9c5feb.b263a","type":"comment","name":"Your API Key here","info":"","x":230.00000381469727,"y":101.25000190734863,"z":"b1f77b14.4e0888","wires":[]},{"id":"188cef67.e77311","type":"http response","name":"","x":1447.5000228881836,"y":207.5,"z":"dbf92274.2406e","wires":[]},{"id":"f5446cd3.0abb9","type":"function","name":"Extract result","func":"var result=msg.payload.resourceSets[0].resources[0];\nvar percentage=Math.round(result.travelDurationTraffic / result.travelDuration * 100);\nvar dauerAktuell=Math.round(result.travelDurationTraffic / 60);\n\nmsg.payload={\n route: result.routeLegs[0].description,\n dauer: Math.round(result.travelDuration / 60),\n dauerAktuell: dauerAktuell,\n stunden: Math.floor(dauerAktuell / 60) + \":\" + dauerAktuell % 60,\n zeitverlust: Math.round ((result.travelDurationTraffic - result.travelDuration) / 60), \n entfernung: Math.round(result.travelDistance),\n stau: result.trafficCongestion.toLowerCase(),\n percentage: percentage,\n color: percentage <= 105 ? \"Green\" : percentage > 150 ? \"DarkRed\" : \"GoldenRod\"\n}\nreturn msg;","outputs":1,"valid":true,"x":885.5000152587891,"y":140.5,"z":"dbf92274.2406e","wires":[["b1f1c13f.4e0e4"]]},{"id":"1f8d997.fe07267","type":"switch","name":"","property":"payload.statusCode","rules":[{"t":"eq","v":"200"},{"t":"else"}],"checkall":"true","outputs":2,"x":729.7500076293945,"y":146.99999904632568,"z":"dbf92274.2406e","wires":[["f5446cd3.0abb9"],["ec0a6c52.13f59"]]},{"id":"ec0a6c52.13f59","type":"template","name":"Send Error Message","field":"payload","format":"handlebars","template":"Der Service steht z.Z. nicht zur Verfügung.","x":930.0000152587891,"y":211.49999904632568,"z":"dbf92274.2406e","wires":[["188cef67.e77311"]]},{"id":"28d60860.d729f8","type":"http in","name":"","url":"/home","method":"get","x":65,"y":186.4999885559082,"z":"dbf92274.2406e","wires":[["4a99de57.b5662"]]},{"id":"50e4ac7b.af1b54","type":"template","name":"Get Position Page","field":"payload","format":"handlebars","template":"<!DOCTYPE html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stau Prognose</title>\n</head>\n<html>\n<body onload=\"getLocation()\">\nPlease wait a moment to get current postion ... \n<div id=\"msg\"></div>\n<script>\nvar x = document.getElementById(\"msg\");\n\nfunction getLocation() {\n if (navigator.geolocation) {\n x.innerHTML = \"redirecting ...\"\n navigator.geolocation.getCurrentPosition(showPosition);\n } else { \n x.innerHTML = \"Geolocation is not supported by this browser.\";\n }\n}\n\nfunction showPosition(position) {\n window.location=\"/home?lat=\"+ position.coords.latitude + \"&lon=\" + position.coords.longitude; \n}\n</script>\n\n</body>\n</html>","x":437.00000762939453,"y":192.75,"z":"dbf92274.2406e","wires":[["2534f32c.dacb0c"]]},{"id":"2534f32c.dacb0c","type":"http response","name":"","x":616.5000114440918,"y":192.75000381469727,"z":"dbf92274.2406e","wires":[]},{"id":"4a99de57.b5662","type":"switch","name":"Is Position set?","property":"payload.lat","rules":[{"t":"nnull"},{"t":"else"}],"checkall":"true","outputs":2,"x":223,"y":186.4999885559082,"z":"dbf92274.2406e","wires":[["edfaaadb.120558"],["50e4ac7b.af1b54"]]},{"id":"edfaaadb.120558","type":"function","name":"Set Route","func":"msg.payload= {\n from: msg.payload.lat + \",\" + msg.payload.lon,\n to: encodeURIComponent('Brandenburger'),\n };\nreturn msg;","outputs":1,"valid":true,"x":385.25001525878906,"y":145.5,"z":"dbf92274.2406e","wires":[["675e1e9c.98a1e"]]},{"id":"b1f1c13f.4e0e4","type":"template","name":"Result Page","field":"payload","format":"handlebars","template":"<!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Stau Prognose</title>\n<style>\n body {\n font-size: 125%;\n }\n .data {\n font-weight: bold;\n color: {{payload.color}};\n }\n</style> \n</head>\n<body>\n<canvas id=\"linear\"></canvas>\n<br/>\nAuf der Strecke über die <span class=\"data\">{{payload.route}}</span> beträgt die Fahrzeit aktuell <span class=\"data\">{{payload.dauerAktuell}}</span> Minuten <span class=\"data\">({{payload.stunden}}h)</span>. Der Zeitverlust beträgt <span class=\"data\">{{payload.zeitverlust}}</span> Minuten. Die Stausituation ist <span class=\"data\">{{payload.stau}} ({{payload.percentage}}%)</span>.\n<script type=text/javascript src=\"https://rawgit.com/HanSolo/SteelSeries-Canvas/master/tween-min.js\"></script>\n<script type=text/javascript src=\"https://rawgit.com/HanSolo/SteelSeries-Canvas/master/steelseries-min.js\"></script>\n<script>\n var linear;\n var valGrad = new steelseries.gradientWrapper( 0,\n 200,\n [ 0, 0.25, 0.35, 1],\n [ \n new steelseries.rgbaColor(0, 200, 0, 1),\n new steelseries.rgbaColor(200, 200, 0, 1),\n new steelseries.rgbaColor(200, 0, 0, 1),\n new steelseries.rgbaColor(200, 0, 0, 1) ]);\n \n window.onorientationchange = init;\n init();\n \n function init() {\n var width = window.innerWidth\n || document.documentElement.clientWidth\n || document.body.clientWidth;\n \n var height = window.innerHeight\n || document.documentElement.clientHeight\n || document.body.clientHeight;\n \n linear = new steelseries.LinearBargraph('linear', {\n width: Math.min(960,width)-15,\n height: 140,\n minValue: 80,\n maxValue:200,\n valueGradient: valGrad,\n useValueGradient: true,\n titleString: \"Fahrzeit\",\n unitString: \"%\",\n threshold: 125,\n lcdVisible: false\n });\n linear.setValueAnimated({{payload.percentage}})\n }\n</script>\n</body> \n</html>\n","x":1068.750015258789,"y":140.49999809265137,"z":"dbf92274.2406e","wires":[["9d061338.62f9f"]]},{"id":"9d061338.62f9f","type":"function","name":"Set Type HTML","func":"msg.headers={\n \"Content-Type\": \"text/html\"\n}\nreturn msg;","outputs":1,"valid":true,"x":1249.750015258789,"y":140.49999904632568,"z":"dbf92274.2406e","wires":[["188cef67.e77311"]]},{"id":"aba31fca.545ce","type":"comment","name":"Edit your home address here!","info":"","x":328.00000762939453,"y":105.24999904632568,"z":"dbf92274.2406e","wires":[]},{"id":"675e1e9c.98a1e","type":"subflow:b1f77b14.4e0888","x":565.555534362793,"y":146.36110496520996,"z":"dbf92274.2406e","wires":[["1f8d997.fe07267"]]}]