Visu im Windows 8 Kachel Look

[2ndsky]

Hallo Kollegen,

angereget durch den Thread: https://knx-user-forum.de/cometvisu/...cometvisu.html
habe ich damit begonnen, die Visu von smarthome.py etwas aufzubohren. Dazu verwende ich das Metro UI CSS von Sergey Pimenov: Metro UI CSS
Davon habe ich auf github einen fork gemacht: https://github.com/2ndsky/sh_metro

Das ganze ist bisher eher quick and dirty als Proof-of-Concept umgesetzt, aber die ersten Sachen wie Jalousien mit Kurz- und Langzeitfahrten sowie Dimmer für Leuchten mit heller/dunkler und An/Aus funktionieren schon. Am CSS muss noch einiges angepasst werden sowie das JavaScript ins reine gebracht werden. Hier schwebt mir noch ein objektorientierter Ansatz vor um so Sachen wie Dimmer und Jalousiesteuerung in Objekte kapseln zu können. Allerdings kann sich das ganze noch ein wenig ziehen. Später soll dann evtl. ein automatische Visu Erstellung möglich werden. Wann das aber soweit ist kann ich noch nicht sagen. Daher geht dieser Thread eher an interessierte Entwickler als an Endverbraucher.

Im Anhang findet ihr noch einen Screenshot

EDIT: achso, wollte noch etwas zur Umsetzung in HTML sagen

Die sogenannten Tiles (also die Kacheln) werden im HTML so definiert:

<div class="tile bg-color-yellow dimmer">
    <div class="tile-content">
        <h2>Wohnen</h2>
        <h5>Deckenspots</h5>
        <div style="float:left;margin: 5px 0 0 5px;">
            <img data-sh="eg.wohnen.licht" data-sh-long="eg.wohnen.licht.dim" value="1" src="img/steuer_auf.png" width="48" height="48" />
        </div>
        <div style="float:left;margin:5px 0 5px 15px;">
            <img data-sh="eg.wohnen.licht" data-sh-long="eg.wohnen.licht.dim" value="0" src="img/steuer_ab.png" width="48" height="48" />
        </div>
    </div>
    <div class="brand">
        <div style="margin: 0 0 0 10px;">
            <img src="img/licht_licht.png" widht="24" height="24" />
        </div>
        <div class="name" style="padding: 0 0 3px 25px;">
            100%
        </div>
    </div>
</div>

Wichtig für die Funktion ist aber nur die CSS Klasse "dimmer" (bzw. "jalousie" im Falle von Jalousien) im übergeordneten DIV und die Angabe des smarthome.py Kurz- und Langzeititems sowie der Wert der auf dieses Item geschrieben werden soll als Attribut eines img Tags:

data-sh="eg.wohnen.licht" data-sh-long="eg.wohnen.licht.dim" value="0"

[callidomus]

Respekt

Hi Niko,

was soll ich dazu sagen? Es sieht einfach nur super aus!

Bis bald

Marcus

[2ndsky]

Hallo Marcus,

Danke für die Blumen.

Habe noch etwas experimentiert. Das Einbinden von Webcams ist super easy (werden automatisch in eine Kache skaliert) und auch Unterseiten sind erwartungsgemäß einfach. Woran ich noch ein wenig hänge sind Slider. Nicht von der Umsetzung her sondern eher wie ich diese schön in eine Kachel verpacke. Momentan sieht das so aus wie im Anhang und das gefällt mir noch nicht wirklich.

[2ndsky]

Okay, hab eine Lösung gefunden die mir besser gefällt. Nun muss ich es nur noch auf'm iPhone testen, ob die Slider sich auch ausreichend bedienen lassen.

[MatthiasS]

Gefällt mir gut!

[2ndsky]

Also die Slider vom Metro UI CSS funktionieren auf iOS nicht, die Größe ist aber in Ordnung. Werde mal versuchen ob ich die jQuery mobile Slider umgestylt bekomm.

[2ndsky]

Nun funktionieren die Slider auch im iOS. Habe die von jQuery entsprechend per CSS angepasst. Die vom Metro UI CSS gehen nicht. Hier mal ein Screenshot vom iPad:

[jonasboehl]

Abend Niko,

die Optik sieht wirklich sehr gut aus. Da ich nen Windows-Phone habe, kenne ich die Kacheln natürlich auch schon länger...
Die wichtigsten Funktionen gehen ja auch schon, also immer weiter so!

Grüße Jonas

[2ndsky]

Hallo Jonas,

Danke für das Kompliment. Seit heute geht auch das responsive Design richtig mit den Änderungen die ich bisher gemacht habe sprich es sieht jetzt auch aufm iPhone gut aus. Bilder folgen...

[2ndsky]

Hier mal Bilder vom iPhone

[2ndsky]

Kleines Update: Es gibt nun nen Color Picker... auf den Bildern der Slider ist weiß, RGB wird über den Picker gewählt. Screenshots sind vom iPhone und iPad mini.

[Hennessy]

Hallo Niko

Kommst Du an den nächsten Stammtisch nach Zürich? Würde mir gerne mal alles vin nahe anschauen. Internetzugang möglich über mein iPhone, habe eine Flatrate.

Gruss
Christian

[2ndsky]

Hallo Chrstian,

weiß ich noch nicht, würde zwar gerne, aber in meinem Privatleben geht gerade einiges drunter und drüber das ich erstmal auf die Reihe kriegen sollte... werde das also kurzfristig entscheiden müssen.

[Hennessy]

Danke für die Antwort und ist schon klar. Alles Gute!

[2ndsky]

Hatte mal wieder etwas Zeit zu basteln und hab von hier: Creating the QLOCKTWO in HTML5, CSS and Javascript | CSSDeck
das CSS und JS für eine QlockTwo implementiert.

Diese kann momentan in einer Kachel mit doppelter Größe angezeigt werden (andere Kachelgrößen folgen) und natürlich auch standalone auf einer Seite ohne Kacheln.

Der Plan ist es, dass bei längerer Inaktivität später die QlockTwo im Fullscreenmode angezeigt wird. Dadurch kann die Seite geöffnet bleiben und über die Websocket Implementierung von smarthome.py kann der Client bei Events geweckt werden und diese Visualisieren. Ein Beispiel wäre wenn jemand an der Tür klingelt wird die QlockTwo ausgeblendet und eine Visu Seite mit Kamerabild und Möglichkeiten der Türöffnung wird angezeigt. Gerade wenn die Visu fest verbaut ist (werde mein iPad bald auch an die Wand nageln), kann man somit einiges möglich machen und hat immer einen schönen Screensaver der auch noch nützlich ist