Wechselnde Farben in Smashing Dashboards

An dieser Stelle habe ich meine ersten Gehversuche mit Smashing Dashboard beschrieben. Mein Dashboard ist inzwischen etwas weiter und enthält jetzt die wichtigsten Information aus der Homematic. Hauptsächlich geht es darum schnell zu sehen ob

• alle Fenster geschlossen sind
• die Kellertür zu ist
• Der Bewegungsmelder angeschlagen hat
• Den Status der Alarmanlage zu überwachen. (hier muss später noch mehr dazukommen)

Jetzt möchte ich natürlich das sich die Farben ändern wenn sich ein Status ändert. Hier meine Schritte mit denen ich das hin bekommen habe:

Zuerst erstellen wir ein leeres Widget

  smashing generate widget Alert
   exist  widgets
   create  widgets/alert/alert.coffee
   create  widgets/alert/alert.html
   create  widgets/alert/alert.scss

Damit das Widget auf dem Dashboard sichtbar ist brauche wir mindestens einen Hintergrund

vi widgets/alert/alert.html 
  .widget-alert { background: #00ff99;}

Um das ganze etwas hübscher zu machen möchte ich den Titel und den Wert im Widget angezeigt bekommen

vi widgets/alert/alert.html 
 <h1 class="title" data-bind="title"></h1>
 <div data-bind="value"></div>

Das Widget muss nun in meinem Dashboard eingebunden werden

vi dashboards/hm.erb
 
  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="hm_keller_tuer" data-view="Alert" data-title="Kellertür" ></div>
  </li>

Jetzt können wir wieder mit curl die ersten Tests durchführen ob das Widget funktioniert

 curl -d '{ "auth_token":"asp2y9yd2","value":"zu" }' http://your.dashing.srv:3030/widgets/hm_keller_tuer
 curl -d '{ "auth_token":"asp2y9yd2","value":"offen"}' http://your.dashing.srv:3030/widgets/hm_keller_tuer

Für die Farbanpassung nach Status fügen wir dem Widget auf dem Dashboard noch ein data-addclass-…. Attribut zu

vi dashboards/hm.erb
  <div data-id="hm_keller_tuer" data-view="Alert" data-title="Kellertür" data-addclass-danger="isOpen"></div>

Und legen für das Widget jetzt fest wann “isOpen” zutrifft

vi widgets/alert/alert.coffee 
   class Dashing.Alert extends Dashing.Widget
   onData: (data) ->
    @accessor 'isOpen', ->
      @get('value') =offen 

und definieren die css Eigenschaften durch eine neue Klasse .danger

vi widgets/alert/alert.scss
 .danger { background:  #003399;}

So ist das dann in live aus. Oben der Ausschnitt aus dem Browser und unten das Terminal das die REST-API aufruft. “In echt” das natürlich von der Homematic bei der Statusänderung