Neues Design: Grid-Layout

[panzaeron]

Dies ist ein Design speziell für kleine Bildschirme im Querformat, wie Smartphones oder auch kleine Raspberry PI 2 Displays.

Wie der Name vermuten lässt, basiert das Layout auf einem strengen Raster, als Vorgabe 4 Zeilen und acht Reihen. In diesem Raster können einzelne Widgets angeordnet werden. Es ist kein responsible Design, d.h. das Raster ist fix und verändert sich nicht, sondern nur die Größe wird angepasst.

Das Layout ist als Ergänzung zu einer bestehenden smartVisu-Seite konzipiert und kommt in ein Unterverzeichnis (mobile) der aktiven Seite.

Das Grid-Layout ist bei Github unter pages/otterstaetter/mobile verfügbar.

Wer es sich vorher anschauen möchte findet hier eine Beispielseite: http://dav.square7.ch/visu/index.php?page=mobile/index

Und so sieht es auf meinem Smartphone aus:

Screenshot.png

[cocoon]

Wo befindet sich der Anhang. Sieht klasse aus, würde es gerne testen.

[panzaeron]

Mit den angehängten Dateien gibt es irgendwie immer Probleme in diesem Forum. Du findest aber alles was benötigt wird auf Github unter der Beispielseite otterstaetter/mobile.

[patrickgoll]

Hey,

danke das ist ja das geilste Design, was ich je gesehen habe von der Smartvisu für mobile Endgeräte und kleine Touchscreens. Ich evaluiere gerade einen Raspberry Pi 2 zusammen mit dem offiziellen Raspberry Pi 7" Touch Display als Raumsteuerungskomponente. Und jetzt würde mich interessieren als halb-git-laie, wie ich an die in der Anleitung erwähnte Trunk Version mit den neuen SVG Icons komme, da mir natürlich das dynamische Icon light fehlt zum Beispiel.

Ansonsten größten Respekt und ich bin gespannt, wie sich das hier weiter entwickelt mit dem Grid Design. Ganz großes Potential.
Danke.

[panzaeron]

patrickgoll

Danke für das Lob

SVG Icons inkl. light bulb findest du mittlerweile im Master-Zweig von smartVISU. Eine ZIP-Datei um alle benötigten Dateien auf einmal herunterzuladen findest du hier: https://github.com/Martin-Gleiss/sma...ive/master.zip

In der Datei ist auch das Verzeichnis pages/otterstaetter/mobile mit dem Beispiel aus dem ersten Post enthalten.

[patrickgoll]

patrickgoll

SVG Icons inkl. light bulb findest du mittlerweile im Master-Zweig von smartVISU. Eine ZIP-Datei um alle benötigten Dateien auf einmal herunterzuladen findest du hier: https://github.com/Martin-Gleiss/sma...ive/master.zip

Das bedeutet aber, dass wenn ich die smartvisu so installiere:

[COLOR=#FFFFFF][FONT=monospace]wget http://smartvisu.de/download/smartVISU_2.7.zip[/FONT][/COLOR]

ich die Icons nicht an der richtigen Stelle habe und das nachträglich über die master.zip entpacken muss, oder?

[patrickgoll]

Oh mann bin ich dumm Wenn ich nen

git clone https://github.com/Martin-Gleiss/smartvisu.git

mache habe ich dann wohl den aktuellsten Stand der master branch und brauche nicht nachträglich so umständlich das master.zip das du gepostet hast reinfummeln.

[panzaeron]

Ja fast, der Download erfolgt mit:
wget https://github.com/Martin-Gleiss/sma...ive/master.zip

Dann entpackst du es und wenn du nicht alles überschreiben möchtest, dann genügt es auch nur die folgenden Dateien zu ersetzen:

• widgets/icon.html
• widgets/widget.min.js
• widgets/widget.js

[panzaeron]

Hat sich überschnitten, wenn du git clone machst hast du auch den aktuellen Stand, ich wusste nicht das du git verwendest.

[patrickgoll]

Das einzige was ich nicht so hinbekomme ist das grid.plot_period. In meiner normalen Ansicht bekomme ich die Temperaturchart korrekt angezeigt. Im Grid Layout leider nicht. Hast du eine Idee?

Normale Visu: {{ plot.period('WohnTempChart', 'EG.Wohnzimmer.Temperatur', 'avg', '96h', 0, 0, 30, '', 'Temperatur', '', '', '', '1h' ) }}

Grid Layout: {{ grid.plot_period ('wonhzimmer_temperaturPlot', 'Temperatur', 3, 7, 2, 2, 'EG.Wohnzimmer.Temperatur', 'avg', '96h', '', '0', '30', '', 'Temperatur', '', '', '', '1h') }}

[panzaeron]

Leider funktioniert der Plot nicht, ich habe es nie sauber hin bekommen (du könntest höchstens mal ein längliches Grid probieren), da ich aber die Plots nur in meiner Hauptvisu nicht aber in der mobilen Version verwende habe ich auch nicht so sehr viel Zeit darauf verwendet.

[patrickgoll]

Okay folgendes konnte ich rausfinden. Reicht vielleicht als Info für dich damit du einen Quick Fix machen kannst. In meiner normalen Visu, wenn dich im Chrome Browser das Plot Element auf Quellcode Ebene untersuche ergibt sich folgendes data-item="EG.Wohnzimmer.Temperatur.avg.96h.0.100"

Wenn ich das nun in der mobilen Version aufrufe dann bekomme ich das hier: data-item="EG.Wohnzimmer.Temperatur.avg.96h.0"

Wie man sieht fehlt hinten die .100. Wenn ich im Browser bei Echtzeit die .100 einfüge in der mobilen Version, dann bekomme ich plötzlich auch den plot angezeigt:

Screen.JPG

Das könnte dir vielleicht helfen das Widget so umzuschreiben, dass es funktioniert.

Wenn du weitere Debugginghilfe brauchst sag es nur

Grüße Patrick und ich bin gespannt was draus wird :P

[panzaeron]

Vielen Dank für den Hinweis, ich habe es nicht getestet, aber könntest du die angehängte grid.html.zip entpacken, die enthaltene grid.html mit deiner vorhandenen ersetzen und testen ob diese funktioniert?
grid.html.zip

[patrickgoll]

Das würde ich total gerne machen aber der Download deiner .zip funktioniert nicht. Lande auf einer weißen Seite und kein Download startet. Ist da was schief gelaufen beim Upload? Nehme gerne auch Dropbox, OneDrive oder ähnliches. Oder per Mail patrickhener@gmx.de (Nicht wundern, habe geheiratet und den Namen meiner Frau genommen)

[patrickgoll]

So hab mich selbst mal versucht.

Habe in der grid.html folgendes geändert:

Zeile 1120 war: <div id="{{ uid(page, id) }}-plot" data-widget="plot.period" data-item="{{ implode(gad, [mode|default('avg'), tmin|default('1h'), tmax|default('0')]) }}"

Zeile 1120 ist: <div id="{{ uid(page, id) }}-plot" data-widget="plot.period" data-item="{{ implode(gad, [mode|default('avg'), tmin|default('1h'), tmax|default('0'), '100']) }}"

Und siehe da, es funktioniert. Was genau ich hier geändert habe kann ich euch leider nicht erklären, es löst aber das Problem