KNX-User-Forum Redaktion
KNX-User-Forum Redaktion

Misterhouse IPhone Skin

0
Von am Allgemein

Erste Schritte

  • Voraussetzungen
    Vorraussetzungen für die Nutzung des iPhoneSkin ist natürlich eine laufende Misterhouse Installation.
  • Installation
    Bitte die iphone.pl auf dem Verzeichnis /mh/code/ in das persönliche code Verzeichnis kopieren!
    180px-Iphoneskin-screenshot
    So schaut’s auf dem iPhone ausAb der Version 2.105 von Misterhouse ist das iphoneskin integriert und zu finden unter: web/iphone
  • Gruppen in Misterhouse
    Wie gesagt, die Vorraussetzung ist ein laufender Misterhouse. Hier nur noch mal eine kurze Wiederholung mit dem Fokus auf die Gruppen in Misterhouse
    Misterhouse arbeitet mit einzelnen Objekten für z.B. eine Lampe. Nehmen wir mal an ihr habt in der Küche eine Lampe, die ihr über einen Aktorkanal und die Gruppenadresse 1/1/0 ein und ausschaltet. Dann habt ihr in der eib_items.mht folgende Zeile

    EIB1, 1/1/0, Kueche, EG_Kueche|Beleuchtung,

    Hierbei sind:

    • EIB1: der Typ des Objekts
    • Kueche: der Name des Objekts.
    • EG_Kueche|Beleuchtung: Die Namen der Gruppen denen das Objekt Kueche zugeordnet wird. Mehrere Gruppennamen werden durch „|“ getrennt.

    Soweit also nichts neues. Üblicherweise hat man pro Raum eine Gruppe. Auf diesen von euch definierten Gruppen baut die Visualisierung nun auf.
    Gehen wir mal im weiteren davon aus, dass ihr euch auf obigem Wege für die Räume eures Hauses jeweils eine Gruppe definiert habt (z.B.: EG_Kueche, EG_Wohnen, EG_Essen, EG_GWC, OG_Kind1, OG_Kind2, OG_Eltern, OG_Bad, …)

  • Gruppen für die iPhone SKin
    Damit wir auf diese Gruppen nun – z.B. geschossweise – zugreifen können, definieren wir uns nun Gruppen je Geschoss (hier gEG und gOG). Die Elemente in diesen Gruppen sind jedoch nicht einzelne Objekte, sondern wiederrum Gruppen.

    • gEG
      • EG_Kueche
      • EG_Wohnen
      • EG_Essen
      • EG_GWC
    • gOG
      • OG_Kind1
      • OG_Kind2
      • OG_Eltern
      • OG_Bad

    Dafür erstellt ihr in eurem User Code Verzeichnis eine Datei mit (Name ist unerheblich, hier groups.pl):

    $gEG = new Group;
    $gEG -> add($EG_Kueche);
    $gEG -> add($EG_Wohnen);
    $gEG -> add($EG_Essen);
    $gEG -> add($EG_GWC);

    $gOG = new Group;
    $gOG -> add($OG_Kind1);
    $gOG -> add($OG_Kind2);
    $gOG -> add($OG_Eltern);
    $gOG -> add($OG_Bad);

    Wichtig für die nächsten Schritte: Jetzt erstellt ihr noch zusätzlich eine Gruppe Main, in denen die beiden Gruppen gEG und gOG zugefügt werden:

    $Main = new Group;
    $Main -> add($gEG);
    $Main -> add($gOG);

    Vielleicht habt ihr in der eib_items.mht noch eine Gruppe für die Jalousien, die Fensterkontakte, … etc. eingerichtet. Die könnt ihr natürlich auch der Gruppe Main hinzufügen:

    $Main -> add($Jalousien);
    $Main -> add($Fensterkontakte);

    Die hier verwendeten Gruppen sind natürlich nur ein Beispiel, um euch die Funktionsweise zu verdeutlichen. Natürlich könnte ihr auch ganz andere Gruppen erstellen. Das Prinzip sollte jedoch klar geworden sein. Ihr erstellt durch diese Gruppen quasi eine Baumstruktur, durch die ihr euch im Menu dann durchhangeln könnt.

  • Erste Erfolge
    Ihr habt es fast geschafft. Nach einem Restart und dem Aufruf der URL [URL]http://ip:8080/iphone seht ihr eure definierte Menustruktur im Browser.

Weitere Schritte
Wer bis hierher gekommen ist, der möchte evtl. das Aussehen des Menus noch durch Icons, angepasstem Text und ähnlichem verbessern. Dem steht nichts im Wege.

  • Aufbau einer Menuzeile
    Ihr habt sicherlich schon bemerkt, dass die Menuzeile in der Skin bei den meisten Objekten aus dem Namen der Variable links und dem Status rechts besteht. Nur macht sich „Kueche“ oder „FK_Kuechenfenster_oben“ in der Darstellung noch nicht wirklich gut. Das kann man besser machen.

Grundsätzlich besteht eine Menuzeile in der Skin aus vier Elementen:

  • Icon: Ganz links könnt ihr ein Icon darstellen. Dazu gleich mehr.
  • Name: Der Name wird abgeleitet aus dem Objektnamen. Dabei wird er noch etwas ‚aufgehübscht‘ und zB der Unterstrich durch ein Leerzeichen ersetzt.
  • Status: Der Status des Objektes (zB: on/ein/aus/off, oder ein Wert wie 21.4)
  • Hinweis auf eine folgende Seite: Enthält die Zeile am Ende ein „>“, dann ist das ein Hinweis auf eine weitere Menuseite, die ihr hier erreichen könnt.

 

  • Icons
    Der original Misterhouse hat ein recht mächtiges, aber denoch unscheinbares feature, welches ich hier auch nutze. In einem in der mh.ini konfigurierbaren Suchpfad wird eine Grafik Datei automatisch gesucht. Die Datei wird abhängig vom Typ des Objektes, dem Namen und dem Status verwendet. Die notwendigen Grafiken/Icons liegen im web/graphics Verzeichnis.

 

Erinnern wir uns an die Definition des Küchenlichts ganz oben:

EIB1, 1/1/0, Kueche, EG_Kueche|Beleuchtung,
Es ist gut zu Wissen, dass MH aus der *.mht datei automatisch eine *.mhp Datei macht. Diese enthält den Perl Code, der eure definierten Objekte, Gruppenzuweisungen, etc, als eigentlichen Programmcode erzeugt. Da reinzuschauen schadet nicht. Editiert wird jedoch immer die mht Datei. Der entsprechende Abschnitt in der mhp Datei sieht für das Küchenlicht folgendermassen aus:

$Kueche = new EIB1_Item('1/1/10','');
$EG_Kueche = new Group();
$EG_Kueche -> add($Kueche);
$Beleuchtung = new Group();
$Beleuchtung -> add($Kueche);

Wie man in der ersten Zeile erkennen kann, handelt es sich bei „Kueche“ um ein Objekt des Typs „EIB1_Item“, mit dem Namen „Kueche“.
Nehmen wir mal an die Lampe ist aus, dann sucht Misterhouse nun nach folgenden Grafikdateien (png ist nur ein Beispiel. Er findet auch jpgs, gifs, etc) und verwendet die erste in folgender Liste (man beachte die Kleinschreibung!)

  • kueche-off.png
  • kueche.png
  • eib1_item-off.png
  • eib1_item.png
  • off.png

Optional kann man im Usercode noch einen einweiteren Dateinamen für ein Icon angeben mit:
[CODE]$Kueche -> set_icon('Lampe_Erdgeschoss');[/CODE]

Dann erweitert sich der Suchpfad wie folgt:

  • [set_icon-status] lampe_erdgeschoss-off.png
  • [set_icon]lampe_erdgeschoss.png
  • [name-status] kueche-off.png
  • [name]kueche.png
  • [type-status] eib1_item-off.png
  • [type]eib1_item.png
  • [status]off.png

Erstellt bzw. nennt die Icons also bitte in Abhängigkeit von eurer Installation und schwupps habt ihr – ohne eine Zeile HTML zu verändern – Icons in euren Menus.

  • Name
    Wie schon beschrieben nutzt Misterhouse ohne weitere Eingriffe den Objektnamen in der Darstellung. Dies kann durch die Methode „set_label“ beeinflusst werden. Wir bleiben beim Bsp. des Kuechenlichts von oben.
    Mit folgender Zeile im user Code (zB. labels.pl) ändert ihr den Namen im Webinterface auf „Deckenlicht Küche“
    [CODE]$Kueche -> set_label('Deckenlicht Küche');[/CODE]
  • Status

  • Handelt es sich bei dem Objekt Status um einen nummerischen Wert, dann möchtet ihr vielleicht noch die Einheit entsprechend anzeigen. Auch das ist möglich. Nehmen wir an wir hätten folgendes EIB5 Objekt definiert:
    [CODE]EIB5, 1/1/1, Solltemp_Kueche, Kueche|Solltemperaturen, R[/CODE]
    Dann sollte in der Visu hinter dem eigentlichen Zahlenwert noch „°C“ auftauchen. Nichts leichter als das:
    Im User Code muss dazu nur folgender Aufruf von „set_label“ auftauchen:
    [CODE]$Solltemp_Kueche -> set_label('Solltemperatur Küche[%.1f°C]');[/CODE]
    Der Teil vor der Klammer beschreibt den darzustellenden Namen und der Teil in der Klammer den Status. Das Format ist analog zu printf und damit sehr mächtig.
    Details zur Syntax dieses Formatstrings findet ihr zB unter [URL]http://www.cplusplus.com/reference/clibrary/cstdio/sprintf.html
  • Seitenaufbau der WebApps
    Wem das alles noch nicht reicht um seine Visu aufzubauen, dem kann noch weiter geholfen werden. Zum Beispiel kann noch der Wunsch bestehen andere Webseiten aus der Visu aufzurufen oder ähnliches. Wer diesen Pfad geht, geht ihn ohne Support meinerseits ;).
    Ich nutze zur Darstellung der Visu ein Framework von http://webapp.net.free.fr . Dort gibt es auch eine, wenn auch recht dürftige, aber lesenswerte Doku.
    Eine HTML Seite in der Visu hat den folgenden Aufbau:

 

[HTML]

…
…
…
…

…

…

[/HTML]

Die eigentliche Visu Seite ist in iGroup enthalten. darin befinden sich verschiedene Seiten, die iLayer und darin verschiedene iMenu.
Der Aufruf

<!--#include code="&#038;iphoneWebApp('Main','iLayer')"-->

aus der iphone.shtml fügt die Gruppe ‚Main‘ als ‚iLayer‘ ein. Anstatt iLayer, kann man dem Aufruf auch noch ‚iMenu‘ mitgeben und bekommt anstatt eines Layers nur ein Menu eingefügt. Damit kann man sich dann eine weiter fortgeschrittene Startseite zusammenbauen.
Hier folgt nur noch ein kurzes Beispiel meiner Startseite. Wer bis hierher mitkam, der findet auch alleine raus was man damit alles machen kann.

<div id="iGroup">
<div id="iLoader">Loading, please wait...</div>
<div id="waHome" class="iLayer" title="Home">
<div class="iMenu">
<ul class="iArrow">
	<li><a href="#_gEG"><img src="/graphics/geg.png" alt="" width="29" height="29" />Erdgeschoß</a></li>
	<li><a href="#_gOG"><img src="/graphics/gog.png" alt="" width="29" height="29" />Obergeschoß</a></li>
	<li><a href="#_Rollladen">Rollläden</a></li>
	<li><a href="#_Fensterkontakte">Fenster</a></li>
	<li><a href="#_Temp">Temperatur</a></li>
	<li><a href="#_Verschiedenes">Verschiedenes</a></li>
</ul>
</div>
<!--#include code="&#038;iphoneWebApp('Status','iMenu')"-->

</div>
<!--#include code="&#038;iphoneWebApp('gEG','iLayer')"-->
<!--#include code="&#038;iphoneWebApp('gOG','iLayer')"-->
<!--#include code="&#038;iphoneWebApp('Rollladen','iLayer')"-->
<!--#include code="&#038;iphoneWebApp('Fensterkontakte','iLayer')"-->
<!--#include code="&#038;iphoneWebApp('Verschiedenes','iLayer')"-->
<div id="waTemp" class="iLayer" title="Temperatur">
<div class="iBlock">
<h1>Strom</h1>
Verbrauch

<img style="margin: 4px;" src="/ia5/rrd/graphs/strom.gif" alt="" />

&nbsp;
<h1>Temperatur</h1>
Küche

<img style="margin: 4px;" src="/ia5/rrd/graphs/kueche.gif" alt="" />

Bad

<img style="margin: 4px;" src="/ia5/rrd/graphs/bad.gif" alt="" />

</div>
</div>
</div>

[/HTML]

Folgende Endgeräte/Browserkombinationen werden unterstützt
Wenn ihr den Skin auf einem Gerät/Browser nutzt, welcher hier nicht aufgeführt ist, dann macht einfach einen Screenshot und hängt den hier rein.

  • iPhone
  • Nokia N800
  • PC
    • Firefox
    • Safari

Related Posts

Kommentare sind gesperrt.