De vraag van onze klant: We zouden graag leren om zelf de dashboards te maken. Denk jij dat we dat zouden kunnen en zou jij ons dat kunnen leren?

Wat is een dashboard

Een dashboard is een verzameling aan grafieken, knoppen, alarmen en indicaties die u kunt plaatsen op een pagina, het dashboard genoemd. Elk dashboard kunt u vervolgens veilig en eenvoudig delen via een unieke link. Met deze unieke link kan u eenvoudig het dashboard delen via WhatsApp, email, X, facebook, website, etc. Hieronder een afbeelding van een voorbeeld dashboard van een tuinbouw / landbouw firma. Deze medewerkers kunnen eenvoudig zien wat de actuele temperatuur is maar ook de historie van de temperatuur, de luchtvochtigheid en hoe vol de silo is. Tevens kunnen de alarmen weergegeven worden, bijvoorbeeld als een temperatuur een ingesteld bereik over gaat. Dan kan daar een alarm van gemaakt worden een actie aan worden gekoppeld, bijvoorbeeld, zet de ventilatie aan.

Waar begin je met een dashboard?

  1. Login op https://thingsboard.cloud/
  2. Klik in de lijst links op ‘customer’ of ‘klant’ , zie pijl (1) in afbeelding rechts.
  3. Klik nu op uw klant waar u een dashboard voor wilt aanmaken. Zie pijl (2) in de afbeelding rechts. Er opent nu een zij-balk.
  4. Klik op “manage dashboards” of “beheer dashboards. Zie pijl (3) in afbeelding rechts.

Manage dashboards

Als bovenstaande stappen zijn uitgevoerd, dan kunnen er nieuwe dashboards voor deze klant worden aangemaakt of bestaande dashboards bewerkt worden.

Ik heb vooraf alvast een demo dashboard aangemaakt in de afbeelding links. In de afbeelding links is te zien aan pijl (3) wat de naam is van het demo dashboard. Mocht u een nieuwe klant hebben, dan zal er nog geen regel met een dashboard naam staan en kunt u deze aanmaken met de volgende stappen:

Het aanmaken van een nieuw dashboard in Thingsboard

  1. Klik op het plus (+) symbool, links aangewezen met pijl (1).
  2. Er komt nu een lijst met 2 keuzes, hier klikt u op “create new dashboard” ofwel pijl (2) in de afbeelding links.
  3. Er komt nu een popup waar details voor het nieuwe dashboard kan worden ingevuld. Zie hieronder

Rechts ziet u een afbeelding van deze nieuwe popup. U kunt een titel opgeven voor uw nieuwe dashboard. Voor deze uitleg gebruiken we als titel “ProCircuits Dashboard nr. 1”. Dit kunt u invullen bij “Tittle”. Optioneel kunt u ook een beschrijving invoeren voor het dashboard onder “description” in de afbeelding rechts. Dit kan handig zijn mocht u met meerdere mensen werken, waarbij het handig is dat deze weten waarom en voor wie deze dashboard bedoelt is.

Tot slot kunt u ook een afbeelding toevoegen voor het dashboard, maar de meeste klanten laten dit achterwege.

  1. Vul de titel van het dashboard in
  2. Kies een beschrijving (optioneel)
  3. Kies een afbeelding (optioneel)
  4. Klik op ‘add’ of toevoegen. GEFELICITEERD…… Het nieuwe dashboard is nu aangemaakt en automatisch geopend. Het nieuwe dashboard is nog leeg, u kunt nu grafieken, knoppen, alarmen en indicaties naar wens toevoegen. Hoe? Dat staat in het volgende blok.

Het nieuwe dashboard vullen

Het nieuwe dashboard die is aangemaakt in de stappen hierboven, is nog leeg. Er is alleen een grote plus (+) te zien met de tekst “add new widget” (zie pijl nr (1)). Een widget kan bestaan uit een grafiek, knop, indicatie, indicator en analoge meters. We gaan nu een grafiek maken die laat zien wat het stroomverbruik is van de desinfectie machine in de afgelopen 7 dagen.

  1. Klik op de grote plus (+) in het nieuwe dashboard, daar waar ernaast staat “add new widget”, zie ook de pijl (1) in het plaatje links.
  2. Er komt nu een grote zij-balk (pijl 2) waar de widgets gekozen kunnen worden.
  3. Klik in de widget lijst op “charts” (charts betekend grafiek in Engels). Zie ook pijl (2) in het plaatje links.

Nu kunt u kiezen voor verschillende typen grafieken. U kiest een grafiek die u het beste vindt aansluiten op uw toepassing. Voor dit voorbeeld kiezen we voor de “timeseries line chart“. Deze kan heel goed actuele en historisch stroomverbruik in een oogopslag weergeven.

  1. Klik op “timeseries line chart”. In de afbeelding rechts wijst pijl (1) op dit type grafiek
  2. Er komt nu een nieuw scherm popup waar u details van het grafiek kunt toevoegen zoals de naam van de grafiek, welke data erin mag staan en welke periode het om gaat.

We gaan verder hieronder

Links ziet u de afbeelding van de nieuwe popup om de grafiek aan te maken.

  1. We moeten beginnen met het kiezen van welk fysiek apparaat de data opgehaald mag worden om te verwerken in de grafiek.
  2. Klik op “device”, er komt nu een lijst met apparaten die horen bij uw systemen. Kies het apparaat waarvan u de data wilt inzien. Hieronder kunt u de lijst zien die bij deze demo klant toebehoord.
  3. Voor deze demo kiezen we het bovenste apparaat die eindigt met “test”. Maar in uw eigen situatie zal u een apparaat moeten kiezen uit uw eigen voorraad.

Als u het apparaat heeft geselecteerd, zal automatisch het knopje “add” (ofwel toevoegen) van grijs naar groen veranderen. Maar voordat u dat doet, moeten we nog eerst kiezen welke gegevens we van dit apparaat willen zien op de grafiek. Klik hiervoor op het kruisje bij pijl nr. (3). Er komt nu een nieuwe lijst met gegevens die u kunt weergeven. Voor deze demo selecteren we

relayState (dit kunt u type of zoeken in de lijst) relayState geeft aan of het apparaat ingeschakeld is of uitgeschakeld.

Daarna kunt u de label aanpassen van “temperature” naar bijvoorbeeld “status”. En de units staat in de afbeelding links op Celsius, dit kan verwijdert worden.

Vanaf hier kunt u of de grafiek afronden door op ‘add’ te drukken of u kunt nog een extra grafiek lijn toevoegen, bijvoorbeeld als u 2 items wilt weergeven in dezelfde grafiek. Als u een extra datalijn wilt toevoegen, klik dan op “add series” knop en herhaal de stappen van hierboven.

Druk nu op het knopje “add”. De grafiek zal nu zichtbaar zijn op het nieuwe dashboard.

De grafiek zal er uitzien zoals in de afbeelding rechts (zie pijl 3.).

Verander nu de afmeting van de grafiek naar de gewenste grootte, dit doet u door met de muis-cursor te gaan naar het hoekje van de grafiek, zie pijl (1). Maak de grafiek op de maat wat u prettig vindt.

Nu moet u de tijdbestek van de grafiek aanpassen. Standaard staat deze op 1 minuut, maar we willen dat op 7 dagen hebben. Dan kan je in een oogopslag zien wat er de laatste 7 dagen is gebeurd in de grafiek. Druk hiervoor op het klokje, zie pijl (2) rechts. Er komt nu een pop-up. Zie het volgende blok.

Klik op de pijl en verander deze tijd naar 7 dagen “7 days”. Druk vervolgens op “update” rechtsonder van de popup. De grafiek zal nu aangepast zijn naar 7 dagen weergave.

We slaan nu het dashboard op, druk hiervoor rechtsboven op “save”. Zie de pijl (1) in de afbeelding hieronder.

Gefeliciteerd. Het dashboard is gemaakt!