Designidee: Grundriss

[panzaeron]

In den letzten Tagen habe ich mich meiner Visu mal wieder angenommen und grundlegend umgebaut.

Als Grundlage dient der Haus-Grundriss und viele vorhandene Widgets
habe ich so erweitert, dass diese frei auf dem Grundriss verteilt werden können.
Dabei ist die Basis meistens ein Button (immer mit vier verschiedenen Darstellungsarten: micro, mini, midi und nur als icon),
welcher entweder direkt schaltet oder ein Popup-Fenster öffnet.

Dabei stellen die Buttons auf dem Grundriss nicht nur den Status für den Schaltzustand dar, sondern auch z.B. den Helligkeitswert.
Beim Rollladen ist dies die Höhe des Behangs und zusätzlich der Zustand des Fensters (Geschlossen, Gekippt, Drehgeöffnet).
Das geöffnete Fenster wird zusätzlich noch durch eine andere Farbe hervorgehoben.
Ein weiterer Parameter bestimmt bei jedem Button/Text ob dieser bei kleinen Bildschirmen ausgeblendet werden soll.

Hier folgen ein paar Screenshots, unser Erdgeschoss im Desktop-Browser:


und auf einem Tablet, jetzt etwas "gequetscht" aber gut bedienbar:


Jetzt noch als Beispiel das Dachgeschoss, wobei die größeren Button mit der Raumbeschriftung immer zu den bisherigen Seiten führen, die mehr Details beinhalten:


Jetzt ein paar Details, zunächst das Rollladen-Popupfenster:


und hier zeigt der Button vom Rollladen den Status "drehgeöffnet" eines Fensters an:


Jetzt der Dimmer, darunter ist auch zu sehen wie der Button den Helligkeitsstatus anzeigt.


Die RGB-Treppenbeleuchtung mit dem Colorchooser:


und Details für die Temperatur (plot):


Leider dauert das Laden einer Seite mit vielen Plots sehr lange, daher werde ich die wieder rausnehmen.

Szenen lassen sich auch über ein Popup auswählen:


Und zum Schluss noch eine externe Seite (leider hat mein ISG mal wieder die Verbindung verloren ):



Die Kamera in der Türstation wird auch über einen Button eingeblendet,
in einem Desktop-Browser mit dem VLC-Plugin und wenn VLC nicht zur Verfügung steht (Tablet) nur als aktuelles Bild.
Dieses ist allerdings verlinkt, so dass bei einem Klick auf das Bild der Stream im Standard-Player wiedergegeben wird.

Hier ist eine Offline-Version, wer es sich live ansehen möchte (mit allerdings fehlenden Werten): http://dav.square7.ch/visu


Die aktuelle Version des Grundrisses ist auf Github unter pages/otterstaetter/overview zu finden und Teil von smartVISU. Das Beispiel dient, mit der beiliegenden Anleitung, als Grundlage für eigene Seiten.

[stromie]

sieht gut aus.
Kannst du mal bei Gelegenheit die html Seiten online stellen.

[thomaszwanzinger]

sieht gut aus.
Kannst du mal bei Gelegenheit die html Seiten online stellen.

Darf ich mich an den Wunsch anhängen? Genau so etwas wollte ich mir unbedingt für meine Visu basteln. Wäre gut zu sehen, wie du das angegangen bist.

lg,
Thomas

[ErKi]

WOOOOOW

das sieht ja mal richtig super aus. Hatte auch mal die Idee gehabt mit dem Grundriss aber hab mich nie dran getraut. Weil ich überhaupt nicht weiß, wie man das machen sollte also der HTML Code währe natürlich super

[mhoeftx]

äähhh, was ist das denn??
Ich dachte immer, das geht nicht so ohne weiteres!

Das ist ja wohl mal geil !!!!

Wie kann man denn die Buttons so einfach auf der Grundgrafik platzieren?
Mich würde auch ein Blick hinter die Kulissen sehr interessieren?

[panzaeron]

Im ersten Post findet ihr am Ende den Link zum Download des Grundrisses (overview) von Github als Teil von smartVISU (pages/otterstaetter/overview).

Zusätzlich ist in der ZIP-Datei ein Readme vorhanden, in der ich kurz erläutere was für Dateien benötigt werden und wie die Übersicht in eigene Projekte integriert wird.

Es wurden keine Änderungen an den smartvisu-Dateien selbst vorgenommen.

Ich habe keine Erfahrung mit Javascript, so dass es ein wilder Mix aus CSS, HTML, JS geworden ist, eigentlich genau so wie es nicht gemacht wird

Im ersten Post habe ich zusätzlich ein Link zu einer offline Version eingefügt.

Wenn jetzt noch einer eine Idee hat wie ich es hin bekomme, dass die Plots nicht erst fertig geladen werden und dann die Werte angezeigt werden, wäre das Toll. Wie schon im ersten Post erwähnt, würde es auch reichen wenn die Plots erst mit dem Öffnen des Popups geladen werden.

[stromie]

Besten Dank.

[marcel0509]

Wow, 1000-Dank und dann auch noch eine super Readme-Datei.

Vielen Dank für die großartige Arbeit

[Claus.Mallorca]

sehr geil!!!!

[feftopper]

Wow! Super!

Vielen Dank fürs teilen

[stromie]

Hallo Axel

habe jetz entlich Zeit gefunden deine Arbeit mal in meine Visu einzubauen.
Läuft super.

Zum Thema

Wenn jetzt noch einer eine Idee hat wie ich es hin bekomme, dass die Plots nicht erst fertig geladen werden und dann die Werte angezeigt werden, wäre das Toll. Wie schon im ersten Post erwähnt, würde es auch reichen wenn die Plots erst mit dem Öffnen des Popups geladen werden.

bin ich gerade drann. Würde es so probieren, dass man die "Data-item" zum start leer läst. Dadruch wird der Plot nicht geladen.
Erst beim öffnen des Popups wird nachgeschaut ob "data-item" einen Wert hat, wenn nicht dann bekommt er den richtigen. Jetzt noch ein widget.prepare();
widget.refresh();
io.monitor();

und der Plot wird geladen.

Ist alles quick and dirty. Bin nicht der JS Programmierer.

Stelle die geänderten Datein in den nächsten Tage mal rein.

Grüße Ronny

[panzaeron]

Super, die Idee ist gut.

Die Performance habe ich bei mir schon wesentlich verbessert, in dem ich die Werte von smarthome.py nicht mit sqlite speichern lasse, sondern das rrdtool-Plugin verwende. Aber deine Lösung ist natürlich noch besser, bin gespannt.

[stromie]

So hier mal mein erster Versuch. Daten werden erst nach dem öffnen geladen.
Dabei bekommt der Plot sein "Data-Item" und wird ab jetzt mit neuen Daten versorgt.
Dann kann man noch die Datentiefe (Start der Datenaufzeichung) einstellen.
Das Einstellen des Datenendes funktioniert noch nicht.
Auch der resize Button geht noch nicht. Man muss das Popup schliessen und wieder öffnen. Erst dann wird der neue Bereich angewendet.
Zur Zeit ist alles in der Html Datei, auch das JS.

Das neue Element nennt sich float1 und hatte alle Information auch die vom Plot.

Beispiel liegt bei.


Grüße Ronny

[stromie]

Hier der Anhang.

Werde mich in den nächsten Tagen daran machen HTML und JS zu trennen. JS kommt in die Visu.js

Grüße Ronny

[chris5020]

Danke für dieses tolle Beispiel, das motiviert einen die Visu zu komplett zu überarbeiten.

Irgendwie hab ich in meiner Visu aber ein Problem mit der Darstellung. Das Hintergrundbild ist verkleinert, der Rest zerwürfelt und ich hab keine Ahnung wieso?

Sieht dann etwa so aus wie im Anhang.

Ich hab das auch schon mit firebug untersucht, hier sieht die verschachtelung ja grundsätlich so aus

<div class="primary">
    <div class="html">    
        <div class="preblock">
        <div class="ui-grid-a ui-responsive">
            <div class="overview">
            <div class="ui-block-b">
            <div class="ui-block-b">

das primary hat eine width von 60% und float right,
das overview eine width von 50% und teilt sich damit die 60% gemeinsam mit den beiden
Blöcken rechts (ui-block-b)

wenn ich das mit firebug von 60 auf 100 und die 50/50 auf 70/30 ändere sieht es besser aus, aber immer noch nicht richtig.

Vermutlich liegt das daran, dass ich grundsätzlich links noch einen Menüblock um Design habe, vermutlich muss ich komplett auf die Basis "oetterstaetter2" umstellen.

Wenn ich die base.html und visu.css aus dem Beispiel verwende, dann sind die 60% weg und die Navi ist so wie im Beispiel, Plan und Blöcke sind aber immer noch 50/50

Hat wer einen Tipp wo ich ansetzen muss um das in mein Design zu bringen, das grundsätzlich ähnlich ist wie das in der Doku?

lg, chris