Hallo Kollegen,
wie in diesem Thread bereits angekündigt, arbeite ich derzeit daran, ein Design für die smartVISU ähnlich der Quadclient Visu von Gira zu bauen. Übers WE war meine bessere Hälfte unterwegs, daher hatte ich mal etwas Zeit zu basteln. Die Oberfläche ist bisher hauptsächlich für mein iPhone optimiert, macht aber auch auf dem iPad oder Desktops bereits eine recht gute Figur. Später soll fürs iPad aber vor allem die Anzeige mehrerer Quadranten noch besser umgesetzt werden.
Bisher ist das ganze eher noch ein Proof-of-concept, also noch weit weg von Perfektion. Aber vielleicht findet sich hier ja noch der ein oder andere, der gerne daran mit basteln würde.
@Apollo: wie mach ich das am Besten mit der Verteilung meiner Sourcen? Weil alle Änderungen hier posten wäre viel zu viel
Soll ich mir dafür ein Git Repo anlegen wo nur mein Design drin ist oder soll ich das direkt im smartVISU SVN committen (dann brauch ich da noch Zugang). Ersteres wäre mir eigentlich lieber, da ich mit Git besser zurecht komme und man da die Zusammenarbeit mit anderen dann per Pull Requests lösen könnte (ähnlich sh.py). Wenn das Design dann fertig ist, soll es natürlich ins original smartVISU Repo kommen.
Der Aufbau
An der Navigation selber muss man gar nicht viel machen.... lediglich "nw_tiles" als css Klasse in die Listview mit aufnehmen:
Zum Aufbauen der Listen habe ich die ganzen Widgets abstrahiert. Dadurch wird die Seitendefinition wesentlich einfacher. Hier z.B. für die Ansicht Kochen (siehe Screenshots unten):
Hierzu wurde auch die base.html angepasst... siehe den Block "title" und "header". Dadurch kann man nun im Headerbereich das smartVISU Logo auf Unterseiten gegen ein Icon der Seite ersetzen und als Titel z.B. den Raumnamen setzen.
Man beachte auch das responsive Design. Im Querformat wird auf dem iPhone eine weitere Spalte für UZSU oder andere Dinge eingeblendet. Im RTR Eintrag z.B. zeige ich nur IST Temperatur und Stellwert (sind für mich wichtiger als Sollwert) an. Im Querformat wird dann zusätzlich der Sollwert angezeigt. Klickt man da drauf, öffnet sich dann das RTR Popup zum verstellen der Einstellungen. Ansonsten öffnen sich die Popups immer beim Klick auf die zweite Spalte.
Für Jalousien habe ich einen Button implementiert, der zwischen kurzem und langem Tastendruck unterscheiden kann. Damit kann man dann direkt in der Listenansicht die Jalousien per Kurzzeit- oder Langzeitobjekt fahren.
Aber jetzt gibts erstmal was zu sehen
wie in diesem Thread bereits angekündigt, arbeite ich derzeit daran, ein Design für die smartVISU ähnlich der Quadclient Visu von Gira zu bauen. Übers WE war meine bessere Hälfte unterwegs, daher hatte ich mal etwas Zeit zu basteln. Die Oberfläche ist bisher hauptsächlich für mein iPhone optimiert, macht aber auch auf dem iPad oder Desktops bereits eine recht gute Figur. Später soll fürs iPad aber vor allem die Anzeige mehrerer Quadranten noch besser umgesetzt werden.
Bisher ist das ganze eher noch ein Proof-of-concept, also noch weit weg von Perfektion. Aber vielleicht findet sich hier ja noch der ein oder andere, der gerne daran mit basteln würde.
@Apollo: wie mach ich das am Besten mit der Verteilung meiner Sourcen? Weil alle Änderungen hier posten wäre viel zu viel
Soll ich mir dafür ein Git Repo anlegen wo nur mein Design drin ist oder soll ich das direkt im smartVISU SVN committen (dann brauch ich da noch Zugang). Ersteres wäre mir eigentlich lieber, da ich mit Git besser zurecht komme und man da die Zusammenarbeit mit anderen dann per Pull Requests lösen könnte (ähnlich sh.py). Wenn das Design dann fertig ist, soll es natürlich ins original smartVISU Repo kommen.
Der Aufbau
An der Navigation selber muss man gar nicht viel machen.... lediglich "nw_tiles" als css Klasse in die Listview mit aufnehmen:
HTML-Code:
<ul data-role="listview" data-dividertheme="c" class="nw_tiles">
Code:
{% extends "rooms.html" %}
{% block title %}
Kochen
{% endblock %}
{% block header %}
<img class="icon" src='{{ icon0 }}scene_cooking.png'/>
{% endblock %}
{% block content %}
{% import "widget_list.html" as list %}
<ul data-role="listview" data-dividertheme="c" class="nw_list">
<li data-role="list-divider">Licht</li>
<!--
{{ list.switch('eg.kueche.licht','Deckenspots','eg.kueche.licht') }}
-->
{{ list.dimmer('eg.kueche.licht','Deckenspots','eg.kueche.licht','eg.kueche.licht.wert') }}
{{ list.dimmer('eg.kueche.leds.weiss','Arbeitsplatte Weiß','eg.kueche.leds.weiss','eg.kueche.leds.weiss.wert') }}
{{ list.rgb('eg.kueche.leds.rgb', 'Arbeitsplatte RGB', 'eg.kueche.leds.rot', 'eg.kueche.leds.rot.wert', 'eg.kueche.leds.gruen', 'eg.kueche.leds.gruen.wert', 'eg.kueche.leds.blau', 'eg.kueche.leds.blau.wert') }}
<li data-role="list-divider">Jalousie</li>
{{ list.blind('eg.kueche.jalousie.temp', 'Fenster', 'eg.kueche.jalousie.lang', 'eg.kueche.jalousie.kurz', 'eg.kueche.jalousie.position', 'eg.kueche.jalousie.kurz', 'eg.kueche.jalousie.lamelle') }}
<li data-role="list-divider">Heizung</li>
{{ list.rtr('eg.kueche.heizung', 'Heizung', 'eg.kueche.heizung.ist', 'eg.kueche.heizung.stellwert', 'eg.kueche.heizung.soll', 'eg.kueche.heizung.sollwertverschiebung', 'eg.kueche.heizung.komfort', 'eg.kueche.heizung.nacht', 'eg.kueche.heizung.frostschutz', 'eg.kueche.heizung.heizen') }}
</ul>
<br />
<br />
<div>
{{ plot.period('plot.eg.kueche.heizung.ist', 'eg.kueche.heizung.ist', 'avg', '1d', 0, 20, 30, '', 'Küche IST-Temperatur') }}
</div>
{% endblock %}
Man beachte auch das responsive Design. Im Querformat wird auf dem iPhone eine weitere Spalte für UZSU oder andere Dinge eingeblendet. Im RTR Eintrag z.B. zeige ich nur IST Temperatur und Stellwert (sind für mich wichtiger als Sollwert) an. Im Querformat wird dann zusätzlich der Sollwert angezeigt. Klickt man da drauf, öffnet sich dann das RTR Popup zum verstellen der Einstellungen. Ansonsten öffnen sich die Popups immer beim Klick auf die zweite Spalte.
Für Jalousien habe ich einen Button implementiert, der zwischen kurzem und langem Tastendruck unterscheiden kann. Damit kann man dann direkt in der Listenansicht die Jalousien per Kurzzeit- oder Langzeitobjekt fahren.
Aber jetzt gibts erstmal was zu sehen
Kommentar