[HowTo] Material Design: FLOT-Diagramm Zeitspanne setzen, Vollbild

[Uhula]

<size size="150">[HowTo] Material Design: FLOT-Diagramm Zeitspanne setzen, Vollbild</size>

Ein FLOT Diagramm wird in einem basic-iFrame Widgets dargestellt. Zwar ist es möglich, hier einen „Finger-ZOOM“ für die Bestimmung der Zeitspanne vorzunehmen, jedoch ist es dann eher ein Zufall, eine gewünschte Zeitspanne wie z.B. „1 Woche“ zu erwischen. Besser geht dieses, wenn man dafür eigene Schaltflächen hätte. Und genau diese werden beschrieben.

Technisch wird die Eigenschaft „Quelle“ , welche die FLOT-URL enthält, via Javascript manipuliert. Hierzu müssen sowohl die MD CSS-Anweisungen als auch das MD Skript in das ioBroker.vis Projekt kopiert werden.

Weiterhin ist es möglich die komplette View, auf welcher das FLOT-Diagramm platziert wurde, als Vollbild darzustellen, siehe hierzu Unterkapitel 3.

Ein Beispiel-Video (download 500 KB): https://github.com/Uhula/ioBroker-Mater … mespan.mp4

Eine detaillierte Beschreibung: https://github.com/Uhula/ioBroker-Mater … eitung.pdf

ioBroker.vis Demo-Projekt: https://github.com/Uhula/ioBroker-Mater … 20projects

Da hierbei die CSS-Klassen und Javascript-Code des Material Designs benutzt werden, funktioniert es nur dort. Allerdings, wer mit CSS/JS umgehen kann, könnte sich die entsprechenden CSS-Klassen und den JS-Code auch herausziehen.

[Meistertr]

Echt wieder mal super Arbeit, bin schon gespannt auf die Tabellen :). Ich habe ein kleines Problem, oder besser frage. In der Demo sind die Tile wenn sie floaten alle 4 px auseinander, wenn ich CSS uns Scripte übernehme sind sie liegen sie bei mit alle aneinander also mit 0 abstand weißt du woran das liegt?

[Pman]

Tile sollte keinen Abstand haben, Card schon.

[Uhula]

Am Anfang hatte ich bei Cards und Tiles eine margin von 4px im CSS gesetzt, für Tiles dann aber entfernt (da diese keine Schatten haben, benötigen sie auch keinen Zwangsabstand). Wenn man den Abstand doch möchte, kann man ihn über die "Border/Abstände"-Eigenschaft des genutzten "view in Widgets" auf margin-left/margin-top 4px setzen (ist im Demoprojekt teilweise auch so).

–---

Im neuesten MD-Demo Projekt sind die Tabellen bereits auf einer eigenen Demo-Seite integriert, diese wechseln responsive ihr Aussehen je nach Bildschirmbreite in Tabellenstruktur / Cards- / Tiles- oder Listform. Jeweils mit verschiedenen Optionen. Wenn ich Zeit für die Doku habe, gibt es hier ein entsprechendes Thema.

[davincino]

@Uhula

Danke für das Material Design. habe nun inzwischen vieles meinen Wünschen angepasst und hänge nun am Flot.

Habe in deinem Demo-Projekt ein Flot-Link von meinen Daten eingestellt. Leider funktionieren die Buttons aus dem Dropdown-Feld nicht.
Das Diagramm ist grundsätzlich sichtbar, nur die Interaktionen gehen nicht. Gibt es eine Möglichkeit das zu debuggen? Skripte und CSS-Klassen sind unberührt.

EDIT:
Habe nun nochmals den Code durchleuchtet. Es muss ein Flot hinterlegt werden, welches Zahlenwerte in Minuten enthält. Wenn bei "Flot-Umfang" mehr als 14 Tage gewählt wird, werden nicht mehr Minuten sondern andere Einheiten (1 Monat = 1m) verwendet. Dann kann es nicht mehr funktionieren. Lasse es hier trotzdem stehen falls jemand über das selbe Problem stolpert.