FHEM Dashboard

[Blackcat]

Guten Morgen,

Habe gestern Abend angefangen das Dashboard für das iOS 6 Skin anzupassen und dabei sind mir zwei Sachen aufgefallen (ich nutze fhem.cfg.demo für die Entwicklung):

- Zuklappen der Fenster geht nicht (mehr). Muss ich jetzt dafür ein Attr. setzen?
- maximale Höhe eines tr ist 40px (sieht dadurch etwas gequetscht aus  ) 42 oder 44 wären wahrscheinlich besser

Dem Wunsch mehr als 7 Tabs zu unterstützen schließe ich mich an.
Würde gerne oben ein Icon Menü für das Dashboard machen (Name pro Tab:   ) und da wäre dann noch Platz für mehr

PS: immer noch Super Arbeit

PSS: bei wichtigen css Änderungen, bitte kurz Bescheid geben, damit ich diese einpflegen kann

[svenson08]

Zuklappen der Fenster geht nicht (mehr). Muss ich jetzt dafür ein Attr. setzen

Schau mal ein paar Posts zurück. Ist bekannt und ist erstmal so.

maximale Höhe eines tr ist 40px (sieht dadurch etwas gequetscht aus  ) 42 oder 44 wären wahrscheinlich besser

was? wo? ich weis nicht was du meinst

Würde gerne oben ein Icon Menü für das Dashboard machen

Ähm, Icons gehen. Aber nur SVGs. Siehe den config Dialog des Dashboards.

[Blackcat]

was? wo? ich weis nicht was du meinst

In der Gruppenauflistung die Höhe der Rows wenn du hier ein Padding hast und somit die Row höher als 40px wird überlappt die Tabelle mit den Tabellen unten und das Vergrößerungsicon sitzt dann auch nicht mehr in der Ecke

Ähm, Icons gehen. Aber nur SVGs. Siehe den config Dialog des Dashboards.

Ich weiß aber da wäre jetzt Platz für mehr Tabs (siehe Bild - Warnung noch im Rohzustand)
10 Tabs hätten bestimmt Platz

[Michi240281]

@Svensson:

Also scheinbar gibt es für meine Firefox Version kein Firebug Addon! Werd heute Abend nochmal nach ner Alternative schauen.

Kann dir aber schonmal "gestoppte" Werte geben:

- Nach Klick auf Dashboard dauert es ca. 1 Sekunde, bis dieses "durcheinander" angezeigt wird
- Nach weiteren 2 Sekunden ist dann alles sortiert
- Nach weiteren 2 Sekunden sind dann auch die Icons vor den Tabnamen da

Es vergehen also wirklich 5 Sekunden, bis von Klick auf Dashboard die vollständigen Anzeige erstellt ist.

Ich gebe zu, dass ich das 1. Tab ziemlich voll habe! Da sind Gruppen, Schalter, Dummys, Anzeigen etc.! Auf Tab 2 sind dann 3 Plots! Das wars!

[stromer-12]

Hast du im FF schon mal unter "Extras" - "Web-Entwickler" geschaut.

[svenson08]

@Blackcat

In der Gruppenauflistung die Höhe der Rows wenn du hier ein Padding hast und somit die Row höher als 40px wird überlappt die Tabelle mit den Tabellen unten und das Vergrößerungsicon sitzt dann auch nicht mehr in der Ecke

Aber das sollte doch über CSS machbar sein. Wo soll den die 40 für das tr herkommen?

@Michi240281

Also scheinbar gibt es für meine Firefox Version kein Firebug Addon!

Doch, müsste es geben

Ich gebe zu, dass ich das 1. Tab ziemlich voll habe! Da sind Gruppen, Schalter, Dummys, Anzeigen etc.! Auf Tab 2 sind dann 3 Plots! Das wars!

Pack die Gruppen doch mal in einen separaten Raum und schau wie lange es dauert bis der Raum angezeigt wird.

[Blackcat]

@BlackcatAber das sollte doch über CSS machbar sein. Wo soll den die 40 für das tr herkommen?

Sieht so aus als berechnest du die Höhe der Reihendivs für die Gruppen... 

Code Auswählen Erweitern

#dashboard  tr {
height:45px
}
so kannst du ganz leicht die Auswirkung sehen, dann hängt das obere Gruppenelement in der Überschrift des unteren (siehe Anhang)

[svenson08]

so kannst du ganz leicht die Auswirkung sehen, dann hängt das obere Gruppenelement in der Überschrift des unteren

Da seh ich das der Helper nicht bis zum unteren rand der Gruppe gezogen ist, und daher die andere Gruppe drüber ragt.
Ich vermute das tr nicht aus der dashboard css kommt, sondern aus eigentlichen Style CSS. An dem was in dem Widget angezeigt wird berechne ich nichts. Alles was berechnet wird geht immer auf ein DIV.

[Blackcat]

Ich vermute das tr nicht aus der dashboard css kommt, sondern aus eigentlichen Style CSS.

komisch da habe ich auch 44px drin also auch mehr als 40px :/

tritt das auch bei dark etc auf, wenn man die Rows größer macht?

[Bennemannc]

Hallo svenson08,

könntest Du mal bitte hier: http://forum.fhem.de/index.php/topic,23406.120.html eine Komentar zu abgeben, was aus Deiner Sicht das beste ist, oder wie man das lösen könnte.

Gruß Christoph

[Blackcat]

Hi,
habe den Rowhöhe Fehler auch beim dark Theme feststellen können (siehe Screen).
Und irgendwie zerhaut es mir jetzt alle Tabs ab 2 (egal wo) - neu einfügen ect hilft auch nicht. (im Anhang als demo cfg)

Zu Christophs anliegen:
Hier wäre die Farbe die man im Colorpicker wählen kann ideal als Hintergrundfarbe nutzbar anstatt das Icon direkt zu färben. Man könnte dafür ein Attribut setzen UseColorAsBackgroundColor (oder so ähnlich) mit 0 und 1 -- bei 0 wird das svg gefärbt, bei eins über css die background-color des svgs wäre schon ne richtig coole Sache.

Noch was zum Colorpickerinput:

Code Auswählen Erweitern

<div style="width:214px;padding:1px 0;">
<input id="tabIconColor" class="colorPicker evo-cp0" type="text" size="7">
Leider ist die Größe hier direkt im HTML eingeben ohne class oder id sodass diese über css leider nicht änderbar ist und so über die Dialogbox ragt (die ja nur 205px breit ist);

Vielen Dank nochmal 

PS: Zu den Ladezeiten ... liegt das vielleicht am longpoll und dem nachladen von jquery? (das macht mit Fhem gerne Probleme)

[svenson08]

@Blackcat

habe den Rowhöhe Fehler auch beim dark Theme feststellen können (siehe Screen).

Blende bitte mal den Helper ein (unlock), dann sieht man wo die Row endet. Und solange der Punkt der Vergrößerung nicht mind. die Höhe und breite des Widget hat ist das normal.

Hier wäre die Farbe die man im Colorpicker wählen kann ideal als Hintergrundfarbe nutzbar anstatt das Icon direkt zu färben

Wenn ich damit Anfange kommt der nächste und möchte etwas anderes über ein Attribut konfigurierbar habe. Den Aufwand möchte ich nicht angehen, ich hab genug Baustellen - nicht nur in dem Modul. Wer das in deinem Style möchte, muss halt den Style manuell anpassen. Das dashboard_customcss Attribut war bereits ein Zugeständnis.

Leider ist die Größe hier direkt im HTML eingeben ohne class oder id sodass diese über css leider nicht änderbar ist und so über die Dialogbox ragt (die ja nur 205px breit ist);

.... das kommt aus dem Plugin, an dem ich nichts geändert habe.

[Blackcat]

Kostest du den anderen Fehler reproduzieren?

Das Custom css habe ich erklärt, daher von meiner Seite in Ordnung. Sonst bin ich natürlich immer offen auch bei Sachen zu helfen und das diff dafür zu posten. Denke aber die Performance ist kritisch, dann deine geplanten Features zum bearbeiten etc pp.

Welches Modul nutzt du den dafür? Dann könnte ich mich an den zuständigen wenden und ein fix diff mit id liefern.

[herrmannj]

PS: Zu den Ladezeiten ... liegt das vielleicht am longpoll und dem nachladen von jquery? (das macht mit Fhem gerne Probleme)

Hi,

wenn es jquery ist dann sollte die fhemweb.js aus diesem Post das ändern.
http://forum.fhem.de/index.php/topic,10628.msg172763.html#msg172763

vg
Jörg

[svenson08]

jquery und jquery-ui werden durch das define des Dashboards (als Extention) geladen, daher ist das immer geladen wenn man das Dashboard anwählt - gilt auch für anderes was jquery verwendet. Es wird nicht wie an andere Stelle bei bedarf geladen. Von dem Konstrukt halte ich nicht viel, aber dazu gibt es verschiedene Gesichtspunkte. Dem einen ist es lieber jquery und co werden nur geladen wenn bedarf besteht um manches System nicht zu überfrachten. Andere möchten den Komfort einer schnelleren und flüssigeren Anzeige