{"id":2172,"date":"2017-06-28T14:27:05","date_gmt":"2017-06-28T14:27:05","guid":{"rendered":"http:\/\/www.daveakerman.com\/?p=2172"},"modified":"2017-06-28T14:27:05","modified_gmt":"2017-06-28T14:27:05","slug":"web-dashboards","status":"publish","type":"post","link":"http:\/\/www.daveakerman.com\/?p=2172","title":{"rendered":"Web Dashboards"},"content":{"rendered":"<p>When following a flight &#8211; whether it&#8217;s your own or someone else&#8217;s &#8211; there are some great online tools to see what&#8217;s going on. \u00a0The main one of course is the map, but there are also pages for showing live images and for displaying sensor values graphically.<\/p>\n<p>HAB flights in the UK in particular are often community things, with the launch and chase teams keeping in touch via the #highaltitude IRC chatroom. \u00a0This is useful both for keeping other balloonists up to date with what&#8217;s happening (e.g. letting them know the launch is delayed) or for asking for help when recovering the flight. \u00a0Some launchers also provide video streams from the launch and sometimes the chase and recovery too, and all of this helps with the community spirit &#8211; balloonists sometimes dedicate hours to help receive data from a flight, so providing them with these extra things is a form of payback for their efforts.<\/p>\n<p>For a while now I&#8217;ve wanted to add a custom dashboard page for my flights, to combine elements that are of interest at that stage of the flight in one simple screen. \u00a0This screen needs to change during the flight &#8211; for example the map isn&#8217;t of much interest before launch, and the launch video isn&#8217;t useful after the launch. \u00a0So I&#8217;ve designed 4 custom dashboard screens for my next flight, for launch, ascent, descent and landing.<\/p>\n<h1>thedash.com<\/h1>\n<p>I wanted a visual dashboard design tool that is simple to use, has useful widgets, produces pretty results, is responsive to new data, adjusts to different screen sizes, and is flexible enough to allow the embedding of various items and representations that are of interest during a balloon flight. \u00a0I soon came across www.thedash.com which fits the bill mostly. \u00a0One issue was that I wanted to include a Twitter feed, and that&#8217;s currently not a live item on thedash (it doesn&#8217;t update, so it&#8217;s pretty useless). \u00a0Another issue, with the free version, is that dynamic items are polled and only refresh every 30 seconds (though this can be worked around by embedding html\/javascript, but that breaks the &#8220;simple to use&#8221; requirement. \u00a0Both these issues can be avoided by paying for an account ($9.99\/month or $99\/year) because that allows for new data to be pushed to the dashboard via html.<\/p>\n<h2>Launch Dashboard<\/h2>\n<p>Here I&#8217;ve added a basic description of the flight, current time, a video from the launch site, and a list of status updates.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-2179\" src=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-launch-1024x597.png\" alt=\"\" width=\"640\" height=\"373\" srcset=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-launch-1024x597.png 1024w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-launch-300x175.png 300w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-launch-768x448.png 768w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-launch.png 1798w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>The video is a life feed, using the &#8220;embed&#8221; URL from YouTube. \u00a0For now this links to a recorded video but for the actual launch it will be streamed live of course.<\/p>\n<p>The &#8220;Status Updates&#8221; list was originally intended to be a Twitter feed, and I wrote a Python script to generate the tweets automatically from the telemetry downloaded from the habhub server. \u00a0However as I said earlier, the Twitter widgets on thedash.com are not live (one is supposed to be but is currently broken due to changes at the Twitter end), so I replaced the Twitter feed with a live table widget. \u00a0That table has data pushed at it from a Python script that grabs the current telemetry from habhub, decides if anything interesting has changed, and if so generates a suitable message which it pushes to thedash using the Python requests library.<\/p>\n<p>&nbsp;<\/p>\n<h2>Ascent Dashboard<\/h2>\n<p>For this part of the flight, the launch video stream is no longer of interest, but the map is:<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-2178\" src=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-ascent-1024x591.png\" alt=\"\" width=\"640\" height=\"369\" srcset=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-ascent-1024x591.png 1024w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-ascent-300x173.png 300w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-ascent-768x443.png 768w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-ascent.png 1777w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Descent Dashboard<\/h2>\n<p>Normally there would be no point having a separate dashboard for the descent phase, but for this flight there will be some extra things happening, so I intend to add some extra items to this screen soon. \u00a0For now it just shows the altitude as well as the usual map and status.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-2177\" src=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-descent-1024x582.png\" alt=\"\" width=\"640\" height=\"364\" srcset=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-descent-1024x582.png 1024w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-descent-300x170.png 300w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-descent-768x436.png 768w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-descent.png 1795w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Landing Dashboard<\/h2>\n<p>This is more interesting as I intend to stream the landing video on this flight. \u00a0The map is also needed (so we can see the approach to the landing spot). \u00a0I&#8217;ve also added some servo positions which should be some clue as to what&#8217;s going on.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-2176\" src=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-landing-1024x604.png\" alt=\"\" width=\"640\" height=\"378\" srcset=\"http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-landing-1024x604.png 1024w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-landing-300x177.png 300w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-landing-768x453.png 768w, http:\/\/www.daveakerman.com\/wp-content\/uploads\/2017\/06\/dash-landing.png 1767w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When following a flight &#8211; whether it&#8217;s your own or someone else&#8217;s &#8211; there are some great online tools to see what&#8217;s going on. \u00a0The main one of course is the map, but there are also pages for showing live images and for displaying sensor values graphically. HAB flights in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=\/wp\/v2\/posts\/2172"}],"collection":[{"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2172"}],"version-history":[{"count":4,"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=\/wp\/v2\/posts\/2172\/revisions"}],"predecessor-version":[{"id":2180,"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=\/wp\/v2\/posts\/2172\/revisions\/2180"}],"wp:attachment":[{"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2172"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daveakerman.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}