Archive for the ‘HTML / JavaScript’ Category.

Hue Programmierung via REST – Teil 2

This entry is part 3 of 4 in the series Hue Programmierung

Nachdem wir jetzt den API-Schlüssel erstellt haben, können wir ihn zur Abfrage der Konfiguration nutzen. Dazu geht man auf die /debug/clip.html Seite und trägt unter URL /api/#Schlüssel# ein. Nach dem Drücken des GET Buttons erhält man dann im Command Response Fenster die Ausgabe, die aus JSON-Teilen für Lampen, Gruppen und der Konfiguration besteht. Da ich einige Lampen und Gruppen habe, kommen bei mir etwas über 5000 Zeilen zurück.

Die JSON-Struktur ist hierarchisch aufgebaut, durch leichte Anpassungen der URL kann man auf die einzelnen Teile der Konfiguration zugreifen, so erhält man durch

  • /api/#Schlüssel#/lights den Abschnitt mit den Lampen
  • /api/#Schlüssel#/lights/1 den Abschnitt von Lampe 1
  • /api/#Schlüssel#/groups den Abschnitt mit den Gruppen
  • /api/#Schlüssel#/config die Systemkonfiguration

Lampen steuern

Um jetzt einzelne Eigenschaften wie an/aus, Helligkeit und Farbe zu setzen, müssen wir per „PUT“ (nicht „GET“) entsprechende JSON-Schnipsel absenden. Das folgende Beispiel schaltet Lampe 9 aus:

  • URL:
    /api/#Schlüssel#/lights/9/state
  • Message Body:
    {"on":false}

und das folgende wieder an:

  • URL:
    /api/#Schlüssel#/lights/9/state
  • Message Body:
    {"on":true}

Hier jetzt noch das wichtigste Beispiel, das nicht nur an/aus kontrolliert, sondern auch Farbe und Helligkeit:

  • URL:
    /api/#Schlüssel#/lights/9/state
  • Message Body:
    {"on":true, "sat":254,"bri":254, "hue":30000}

Im nächsten Teil dieser Serie schauen wir uns dann an, wie die einzelnen Komponenten umgewandelt werden müssen, um die gewünschte Farbe und Helligkeit zu erhalten.

Uwe

Uwe Ziegenhagen likes LaTeX and Python, sometimes even combined. Do you like my content and would like to thank me for it? Consider making a small donation to my local fablab, the Dingfabrik Köln. Details on how to donate can be found here Spenden für die Dingfabrik.

More Posts - Website

Hue Programmierung via REST – Teil 1

This entry is part 2 of 4 in the series Hue Programmierung

Der folgende Artikel und seine Folgeartikel sind für diejenigen gedacht, die ein Philips Hue System ihr Eigen nennen und ein wenig tiefer in die Programmierung einsteigen möchten. Grundvoraussetzung ist eine aktive Hue Bridge im lokalen Netz und mindestens eine gekoppelte Lampe.

In diesem Artikel erstellen wir einen neuen Api-Schlüssel, den wir für alle weiteren Experimente brauchen. In den Folgeartikeln zeige ich dann, wie man mittels Webinterface, CURL und Python entsprechende Befehle an die Hue Bridge senden kann.

Grundsätzliches

Die IP-Adresse der Hue Bridge bekommen wir über den Router raus, sofern wir sie nicht kennen, Philips selbst zeigt noch andere Wege. Ruft man diese IP-Adresse im Browser auf, so kommt nur die Webseite des Systems zusammen mit den Hinweisen auf die entsprechenden Opensource-Lizenzen, nichts sonderlich spannendes.

Spannender wird es allerdings, wenn man die IP-Adresse mit der URL /debug/clip.html aufruft. Dann nämlich präsentiert sich ein Formular mit mehreren Textfeldern und Buttons, die wir im Laufe der Artikel noch näher kennenlernen werden.

Drückt man den GET-Button, kommt die folgende Meldung zurück:

[
	{
		"error": {
			"type": 1,
			"address": "/",
			"description": "unauthorized user"
		}
	}
]

Der Hue Bridge fehlt also der entsprechende Authentifizierungsschlüssel, ohne den keine Befehle angenommen werden. Um einen solchen Schlüssel zu erstellen, geht man wie folgt vor:

  1. Drücke den Link-Button oben auf der Hue Bridge
  2. Gib in der URL Box /api ein
  3. Gib in der Message Body Box einen Text analog zum folgenden Muster ein

    {"devicetype":"commandline#Uwe"}. Ich habe hier einen Hinweis auf meine Kommandozeile als Namen gewählt, letztlich ist man hier aber recht frei. So nennt sich IFFT bei mir „ifft2“, der Logitech Harmony Hub heißt einfach „Harmony Hub“

Wenn alles geklappt hat, dann antwortet die Bridge mit einer Antwort analog zur folgenden:

[
	{
		"success": {
			"username": "yxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxt"
		}
	}
]

Der zufällige String hinter username, hier unkenntlich gemacht, ist der entsprechende Schlüssel, den wir bei jeder Anfrage an die HUE Bridge mitliefern müssen. Es empfiehlt sich daher, den in einer Textdatei zu parken und keinesfalls zu veröffentlichen.

Uwe

Uwe Ziegenhagen likes LaTeX and Python, sometimes even combined. Do you like my content and would like to thank me for it? Consider making a small donation to my local fablab, the Dingfabrik Köln. Details on how to donate can be found here Spenden für die Dingfabrik.

More Posts - Website

Org-Mode export and upload from the command line

The following is a little snippet to export an Emacs org mode file to HTML and to upload it to the server via FTP. Remark: It’s better to use scp for the upload!

G:\Programme\emacs-24.3\bin\emacs.exe --batch -l "C:\Users\Uwe\.emacs" --visit "nameoftheorgfile.org" --funcall org-html-export-to-html

@echo off
echo user Myusername> ftpcmd.dat
echo MyPassword>> ftpcmd.dat
echo bin>> ftpcmd.dat
echo put nameoftheorgfile.html>> ftpcmd.dat
echo quit>> ftpcmd.dat
ftp -n -s:ftpcmd.dat servername
del ftpcmd.dat

Uwe

Uwe Ziegenhagen likes LaTeX and Python, sometimes even combined. Do you like my content and would like to thank me for it? Consider making a small donation to my local fablab, the Dingfabrik Köln. Details on how to donate can be found here Spenden für die Dingfabrik.

More Posts - Website

Buchkritik: „JavaScript & jQuery: The Missing Manual“ von David Sawyer McFarland

Wie einige Leser meines Blogs möglicherweise wissen, unterrichte ich auch an der FOM hier in Köln. Für die Vorlesung zu „Web Programmierung“ hatte ich noch ein Buch gesucht, das die Grundlagen zu JavaScript/jQuery gut vermittelt. Über einen Kontakt der Kölner Python-Usergroup (vielen Dank auch dorthin) habe ich dann vom O’Reilly Verlag freundlicherweise ein Rezensionsexemplar der mittlerweile dritten Ausgabe von „JavaScript & jQuery: The Missing Manual“ erhalten, die ich hier kurz besprechen möchte.

Das Buch gliedert sich in sechs Teile:

  1. Getting Started with JavaScript
  2. Getting Started with jQuery
  3. Getting Started with jQuery UI
  4. Advanced jQuery and JavaScript
  5. Tips, Tricks, and Troubleshooting
  6. Appendix

Das Buch geht (zu Recht) davon aus, dass man grundlegende HTML-Kenntnisse hat. Am Anfang wird zwar kurz über HTML-Tags gesprochen — auch CSS wird kurz erwähnt — dann geht es aber los mit der JavaScript Programmierung. Nach dem obligatorischen „Hello World“ bekommt man die grammatikalischen Grundlagen der Sprache nähergebracht und welche Datentypen und Schlüsselwörter es gibt. Sehr ausführlich ist auch die Beschreibung von Flusssteuerung und Schleifen.

Im zweiten Teil startet man dann mit jQuery. Im direkten Vergleich mit JavaScript merkt man als Leser schnell, dass die Nutzung von jQuery doch einige Vorteile hat. Was in reinem JavaScript mühsame Konstrukte erfordert, ist in jQuery meist in einer kurzen Zeile erledigt. Der Autor zeigt hier auch sehr ausführlich, wie man Elemente in jQuery selektieren und auswerten kann. In Kapitel 5 geht es dann um die Behandlung von Events, in Kapitel 6 um die Steuerung von Animationen mittels jQuery.

Kapitel 7 vermittelt, wie häufig vorkommende Aufgaben wie das Austauschen von Bildern in jQuery schnell & einfach gelöst werden können, Kapitel 8 geht auf die Nutzung von jQuery in Web-Formularen ein.

Der dritte Teil ab Kapitel 9 behandelt jQuery UI, ein Thema, das ich aus Zeitmangel in der Vorlesung nur am Rande behandeln konnte. Der Autor zeigt hier, wie man die verschiedenen Komponenten aus dem jQuery UI Paket nutzt und wie man das gewonnene Wissen nutzen kann, um eine TODO-Listen Anwendung zu schreiben.

Fazit

Auf über 650 Seiten und bei einem aktuellen Preis von etwas mehr als 30 Euro bietet dieses Buch einen sehr guten und umfassenden Einstieg in das Thema. Ich konnte eine ganze Reihe von Inhalten — auch in Bezug auf die Vermittlung des Wissens — direkt in der Vorlesung einsetzen. Ich empfehle dieses Buch auch meinen Studenten, wenn sie mehr wissen wollen zu JavaScript & jQuery.

Uwe

Uwe Ziegenhagen likes LaTeX and Python, sometimes even combined. Do you like my content and would like to thank me for it? Consider making a small donation to my local fablab, the Dingfabrik Köln. Details on how to donate can be found here Spenden für die Dingfabrik.

More Posts - Website