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://:1880/home It designed for moblie use on a mobile 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"]]}]
MehrCurry

Flow Info

created 2 years, 7 months ago

Node Types

Core
  • comment (x2)
  • function (x5)
  • http in (x1)
  • http request (x1)
  • http response (x2)
  • switch (x2)
  • template (x3)
Other
  • subflow (x1)
  • subflow:b1f77b14.4e0888 (x1)

Tags

  • geolocation
  • traffic
  • web
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option