Create your own local Azure IoT Edge dashboard

Earlier this year, when Azure IoT Edge was still in Public Preview, I wrote a couple of blogs about Visualizing Azure IoT Edge using local dashboard.

Back then, I had to do some magic with both a C# IoT Edge module, a custom NodeJS docker container, and a Docker network to get it running.

Since then, a lot has changed. Microsoft already released a ton of new features. a And there is still more to come regarding the Azure IoT platform.

But that awkward local dashboard solution was nagging me. A few months ago, Microsoft introduced a NodeJS module as a first-class citizen for IoT Edge modules.

So it was time to pick up the gauntlet and use NodeJS for this awesome local IoT Edge dashboard:

#tldr;  If you like to dig into the code, zip it, clone it, extend it or even make a pull request, I made this project open source. If you only want to use it the easy-going way, pull it from docker eg. ‘svelde/localdashboard:1.0.1-amd64′.

At this moment, only Linux containers are supported. It is tested both on Windows and Ubuntu as host OS.

Interested in this module? Let’s see how you can use it.

Continue reading “Create your own local Azure IoT Edge dashboard”

Advertenties

Vereenvoudig toch die input in HTML4

Met de komst van HTML5 komen een groot aantal nieuwe mogelijkheden beschikbaar om te gebruiken bij nieuwe  websites.

Eén van die nieuwe features is het toekennen van specifiekere input control types. Voorheen waren er maar een paar standaard inputvelden (textbox, checkbox, radiobutton, etc.). Nu zijn er een aantal nieuwe varianten beschikbaar ter ondersteuning van de invoer van bv. URL’s en e-mailadressen.

Hier volgt een rijtje overgenomen uit w3schools:

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 5.1
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 5.1
search No 4.0 11.0 10.0 No
color No No 11.0 12 No

Voorheen moest hiervoor een textbox omgezet worden tot een maatwerk control mbv. JavaScript (bv. via jQueryUI) Het is de bedoeling dat huidige en toekomstige browsers dus speciale controls gaan verzinnen om de gebruiker te ondersteunen (eenheid in invoer) en de ontwikkelaar te ontlasten (geen extra werk).

Zoals hierboven te zien, zijn er al een aantal browsers druk bezig met die integratie. De laatste tijd wordt ook druk gewezen dat het al toegepast kan gaan worden bij de bouw van websites. Dit is leuk voor de gebruiker van nieuwe (mobiele) browsers want deze hebben een virtueel toetsenbord die reageert op het invoertype. Bij de invoer van een e-mailadres wordt al direct een @ beschikbaar gesteld.

Handig dus.

En deze nieuwe input types worden naar het ‘text’ type vertaald door oudere browsers. Maar waarom zien we dan niet dat bedrijven dit massaal gaan toepassen?

Ik maak zelf ook gebruik , net als vele anderen, van Gmail. Maar het viel me op dat ook Google nog niet echt warm loopt:

Zoals je ziet, wordt het standaard toetsenbord aangeboden op de iPad op deze pagina. Ik moet er wel bij zeggen dat, hoewel de invoer van een e-mailadres wordt gesuggereerd, ook niet-e-mailadressen ingevoerd mogen worden. Maar dan nog heeft, wat mij betreft, het e-mailadres-toetsenbord de voorkeur. Google laat na om de suggestie voor de invoer van een e-mailadres te versterken met het juiste toetsenbord:

<span>Gebruikersnaam:</span>
<br />
  <input type="text" name="Email" id="Email" size="18" value=""  />
<br />

Ik heb mezelf de vraag gesteld, is het dan wellicht alleen in HTML5 website mogelijk om die nieuwe types te gebruiken. Dus ik heb een pagina samengesteld, afgeleid van de standaard Visual Studio 2010 aspx template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
Home Page
</title>
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
</div>
</div>
<div class="main">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit
<a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find
<a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
</form>
</body>
</html>

Deze heb ik laten valideren. En deze pagina is XHTML 1.0 strict:

Vervolgens heb ik enkele HTML5 elementen aan toegevoegd zoals een URL, een email-adres en een numeriek veld:

<p>
  <label>Enter a url:</label>
  <input type="url" name="fname" />
  <br />
  <label>Enter an email address:</label>
  <input type="email" name="lname" />
  <br />
  <label>Enter a number:</label>
  <input type="number" name="lname" />
  <br />
  <input type="submit" value="Submit" />
</p>

Zie dat de types URL, EMAIL en NUMBER zijn. Natuurlijk is mijn pagina nu niet meer honderd procent gevalideerd:

De drie velden zijn van een ‘onbekend’ type:

Dus we hebben hier een niet-HTML5 scherm en er staan drie HTML5 elementen op. En het werkt! Zoals hieronder zichtbaar is, wordt netjes het gewenste URL toetsenbord getoond:

en het email-toetsenbord:

En het numeriek toetsenbord:

Conclusie

Niets houdt ons tegen om in bestaande webpagina’s al de nieuwe input typen toe te passen. Dit verhoogt heel simpel het gebruiksgemak voor gebruikers met moderne (mobiele) browsers.

English: Liked the examples but could not understand the Dutch gibberish? Want to know more? Please contact me!