Auf der Suche nach einem Wetter Widget für das Dashboard bin ich auf das Verbinski Widget gestoßen.

Das Widget benötigt 3 Kacheln und zeigt das Wetter im Moment, das heutige und 7 Tage im voraus an. Neben normalen Wetterdaten wird unter anderem der Zeitpunkt des Sonnenaufgangs bzw. Sonnenuntergangs angegeben, sowie Windgeschwindigkeit und Feuchtigkeit.

Die Wetterdaten werden über http://forecast.io/ abgerufen. Für den Zugriff auf die Daten wird ein API KEY benötigt, diesen erhält man nach kostenloser Registrierung.
Der API KEY sowie die LAT LONG Informationen werden in der verbinski.rb hinterlegt.

# Forecast API Key from https://developer.forecast.io
forecast_api_key = "82827928342934729387492837492374"

# Latitude, Longitude for location
forecast_location_lat = "53.167075"
forecast_location_long = "8.199514"


Auf Deutsch umstellen

Möchte man alle Informationen auf Deutsch darstellen, müssen kleinere Anpassungen in der verbinski.html Datei vorgenommen werden. Für die Wochentage unter „this week“ wurde eine Funktion in der verbinski.rb wie folgt angepasst:

this_week = []
for day in (1..7)
day = forecast["daily"]["data"][day]
tagGer = "tes"
if day_to_str(day["time"]) == "Sun"
tagGer = "Son"
elsif day_to_str(day["time"]) == "Mon"
tagGer = "Mon"
elsif day_to_str(day["time"]) == "Tue"
tagGer = "Die"
elsif day_to_str(day["time"]) == "Wed"
tagGer = "Mit"
elsif day_to_str(day["time"]) == "Thu"
tagGer = "Don"
elsif day_to_str(day["time"]) == "Fri"
tagGer = "Frei"
elsif day_to_str(day["time"]) == "Sat"
tagGer = "Sam"
end
this_day = {
max_temp: day["temperatureMax"].round,
min_temp: day["temperatureMin"].round,
time: tagGer,
icon: day["icon"]
}
this_week.push(this_day)

Um nun die Wetterinformationen in deutscher Sprache zu erhalten, muss der Zeile 34 (verbinski.rb) &lang=de hinzugefügt werden.

....ng}?units=#{forecast_units}&lang=de"))

Wenn das erstellte Dashboard auf einem größeren Bildschirm ausgegeben wird, kann es je nach Anzahl der Widgets vorkommen, das nicht die gesamte Bildschirmfläche genutzt wird.

Das Problem lässt sich sehr schnell lösen, in dem man in der Dashboard(erb)Datei folgendes hinzufügt.

<script type='text/javascript'>

});
<script>


Die Lösung hatte ich hier gefunden: https://github.com/Shopify/dashing/issues/388

Je nachdem wieviele Widgets auf dem Dashboard aufgeführt sind, ist es hilfreich das das Widget hervorgehoben wird auf dem zum Beispiel die Daten aktualisiert werden oder ein bestimmter Status erreicht wird.

In diesem Beispiel blinkt das Widget auf, wenn neue Daten ausgegeben werden.

Hierfür wurde in der scss Datei folgendes hinterlegt:
@keyframes blink {
50% { opacity : 0.0; }
}

Vor dem letzten } der Widget Klasse wurde zusätzlich folgendes eingefügt:
&.blinking {
animation: blink 1s linear infinite;
animation-iteration-count: 2;
}

Der Aufruf der Klasse erfolgt bei neuen Daten in der coffee Datei:
class Dashing.Text extends Dashing.Widget
onData: (data) ->
node = $(@node)
node.addClass("blinking")
setTimeout ( =>
node.removeClass("blinking")
), 5000

Damit das Widget nur blinkt wenn sich auch der Inhalt der Daten ändert, wurde in der coffee Datei eine Zeile hinzugefügt:
class Dashing.Text extends Dashing.Widget
onData: (data) ->
if data.blink
node = $(@node)
node.addClass("blinking")
setTimeout ( =>
node.removeClass("blinking")
), 5000

Das Widget blinkt nur wenn die Variable blink mit übergeben wurde.

Die Prüfung ob neue Werte mit übergeben werden, erfolgt hier in dem eingerichtetem Job.
Von dem aktuellen und dem neuen Datenarray wird zum Vergleich ein hash generiert, stimmt der hash nicht überein, wird die blink Variable mit übermittelt.
if ausgabe_hash == ausgabe.to_set.hash
send_event("widget1",{ values: ausgabe.values })
else
send_event("widget1",{ values: ausgabe.values, blink: ausgabe.length })
end

ausgabe_hash = ausgabe.to_set.hash

Neben der Datenübergabe per http Post können auch Werte aus einer csv Datei gelesen werden. Die Datei kann manuell erstellt werden, oder Sie wird aus einem Ticketsystem generiert und zur Verfügung gestellt. In diesem Beispiel befindet sich die csv Datei in dem Root Verzeichniss des Dashboard.

Aufbau der file.csv(Ticket,Kunde,Störung)

DB-2233,Kunde1,Ausfall Datenbank
AP-1294,Kunde2,schlechte Performance Webservice

Aufbau der jobs/tickets.rb:

require 'csv'
require 'json'

end

Eine kurze Anleitung zum installieren das Dashboards findet ihr hier.

Zum experimentieren habe ich alle zuvor angelegten Widgets, Jobs etc. im Demo Dashboard entfernt.

Für das Widget wurden in der dashboard/sample.erb folgende Zeilen hinzugefügt.

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><code>
<div data-id="tickets" data-view="Text"></div>
</li>

Angesprochen wird das Widget über die data-id=“tickets“.

Unter dem Verzeichnis widgets/text wurden die benötigten Dateien mit dem entsprechendem Inhalt angelegt.

text.html



<h1 class=“title“ data-bind=“title“></h1>

<li data-foreach-value=“values“ data-bind-class=“value.status“>

      <div class=“ticket“ data-bind=“value.ticket“></div>

      <div class=“kunde“ data-bind=“value.kunde“></div>

      <div class=“stoerung“ data-bind=“value.stoerung“></div>

        <div style=“clear:both“></div>

    </li>

<p class=“more-info“ data-bind=“moreinfo“></p>

<p class=“updated-at“ data-bind=“updatedAtMessage“></p>

text.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #ec663c;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-text {
background-color: $background-color;
.title {
color: $title-color;
}
.more-info {
color: $moreinfo-color;
}
.updated-at {
color: rgba(255, 255, 255, 0.7);
}
.ticket{
width:50px;
float:left;
text-align:left;
}
.kunde{
width:175px;
float:left;
text-align:left;
}
.stoerung{
width:300px;
float:left;
text-align:left;
}
}

text.coffee
class Dashing.Text extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered

onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

Damit die angelegten Wigdets per http Post mit Daten befüllt werden können, wird der in der config.ru hinterlegte Token benötigt.

require 'dashing'

configure do
set :auth_token, 'hereweare‘

Nun können die Werte zum Beispiel per curl übergeben werden.
curl -d '{ "auth_token": "hereweare", "values":[{"ticket":"223","kunde":"Kassupke","stoerung":"Ausfall Datenbank"},{"ticket":"231","kunde":"Müller","stoerung":"Mailversand eingeschränkt"}] }' http://localhost:3030/widgets/tickets