Skip to content

Instantly share code, notes, and snippets.

@MehrCurry
Last active August 29, 2015 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MehrCurry/94e086eced8bd7d1a7ee to your computer and use it in GitHub Desktop.
Save MehrCurry/94e086eced8bd7d1a7ee to your computer and use it in GitHub Desktop.
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"]]}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment