New FHEM Tablet UI

DJ_SAMMY190 · 19 Juli 2015, 23:22:35

Mal ne frage, kann man das "CIRCLEMENU" transparent machen?

NoFaker76 · 20 Juli 2015, 08:18:25

Zitat von: schitzosteve am 17 Juli 2015, 18:01:22
Hallo zusammen,

Versuche mich gerade an einem Iphone-UI. Nachdem ich viel gelesen und probiert habe, bin ich nun aber bezüglich CSS und Farben einigermaßen verzweifelt und brauche Hilfe....

Ich habe ein eigenes CSS, basierend auf dem fhem-mobil-ui.css, in mein html eingebunden (als letzte CSS Datei). Teilweise scheint das auch zu funktionieren, zumindest das geht:

Code Auswählen Erweitern
.weather:before { color: #222222; }

Das Setzen der Farben für switch und dimmer ist aber komplett wirkungslos. Hier die betreffenden Zeilen aus der CSS-Datei:

Code Auswählen Erweitern
.switch.on{color:#000000;background-color:#FFFFFF;} .switch.off{color:#FFFFFF;background-color:#000000;} .dimmer.on{color:#000000;background-color:#FFFFFF;} .dimmer.off{color:#FFFFFF;background-color:#000000;}

Was mache ich falsch?

Dies würde mich auch brennend interessieren.

Wenn ich z.B. meine eigene fhem-tablet-ui-user.css (welche eine Kopie der fhem-tablet-ui ist) bearbeite und unter dem im Header angegebenen Pfad ablege, funktioniert auf einmal nichts mehr. Besser gesagt, es ist alles verschoben (z.B. im Circlemenu).

Daher wäre es schön, wenn mal jemand kurz erläutern könnte, wie die einzelnen css-Dateien zusammen spielen.

Z.B. ob es überhaupt möglich ist, zwei Dateien einzubauen, welche sich nur in den Farben unterscheiden oder muss der Header dann entsprechend angepasst und der Verweis auf die eigentlich nicht benötigte Datei daraus entfernt werden?

Oder gibt es hierzu eine gute Beschreibung im Netz?

Vielen Dank.
Kim

setstate · 20 Juli 2015, 10:24:32

Es gibt keine speziellen Beschreibungen. Es ist Standard CSS, also könnte jedes beliebige CSS Tutorial weiterhelfen. Meine Tipps:
- Syntax checken
- File Reihenfolge beachten
- mit kleinen Änderungen von einem funktionierenden Beispiel ausgehend anfangen (mobil_2.html + fhem-mobil-ui.css)
- File Namen + Pfad richtig ?
- Entwicklertools im Browser benutzen: zeigt Zusammenhänge und man kann live editieren.

setstate · 20 Juli 2015, 14:32:33

Zitat von: DJ_SAMMY190 am 19 Juli 2015, 23:22:35
Mal ne frage, kann man das "CIRCLEMENU" transparent machen?

Dann ist es ja unsichtbar!?

chris1284 · 20 Juli 2015, 15:08:01

Zitat von: setstate am 20 Juli 2015, 10:24:32
Es gibt keine speziellen Beschreibungen. Es ist Standard CSS, also könnte jedes beliebige CSS Tutorial weiterhelfen. Meine Tipps:
- Syntax checken
- File Reihenfolge beachten
- mit kleinen Änderungen von einem funktionierenden Beispiel ausgehend anfangen (mobil_2.html + fhem-mobil-ui.css)
- File Namen + Pfad richtig ?
- Entwicklertools im Browser benutzen: zeigt Zusammenhänge und man kann live editieren.

kopiert man die datei 1:1 und benennt sie um und bindet sie im abschnitt der index ein

Code Auswählen



zerhaut es den style (ohne das man am css irendetwas inhaltlich geändert hat). übernimmt man nur teile und passt sie an (zb nur body{}) läuft dies einwandfrei.
ist mir gestern auch aufgefallen als ich das originale css so ein wenig ändern wollte.

NoFaker76 · 20 Juli 2015, 16:08:06

Genau das Gleiche passiert mir auch ständig.
Und da ich komplett neu bin in der Materie, dachte ich halt immer, dass ich etwas falsch mache.

Ich bin halt davon ausgegangen, dass ich die fhem-tablet-ui.css kopiere und in fhem-tablet-ui-user.css umbenenne, meine Farbänderungen eintrage und dann läuft das schon. Aber dann verhagelt es mir alles.

Gruß
Kim

DJ_SAMMY190 · 20 Juli 2015, 17:05:38

Zitat von: setstate am 20 Juli 2015, 14:32:33
Dann ist es ja unsichtbar!?

Schlecht ausgedrückt.

Hier der screenshot. ich denke du weisst dann was ich meine

Das untere beide sind beides Circlemenüs^^

setstate · 20 Juli 2015, 19:11:36

Zitat von: DJ_SAMMY190 am 20 Juli 2015, 17:05:38
Schlecht ausgedrückt.

Hier der screenshot. ich denke du weisst dann was ich meine
Das untere beide sind beides Circlemenüs^^

Hast du mal probiert, dem mittleren Element (push?) data-off-background-color="transparent" und data-on-background-color="transparent" zu setzen?

DJ_SAMMY190 · 20 Juli 2015, 19:37:26

Hab mal getestet. Leider ohne Erfolg. verschwindet nur der Kreis. Aber trotzdem das grau nicht transparent :/

OliS. · 20 Juli 2015, 20:05:45

Zitat von: Brockmann am 18 Juli 2015, 11:25:19
Bezieht sich dieser deutliche Zuwachs auch auf den Seitenaufbau der Tablet UI beispielsweise auf einem Android-Tablet?
Ich bin mir nicht sicher, ob da nicht die Tablet-Hardware der Flaschenhals ist? Am PC wird dieselbe Seite jedenfalls flotter aufgebaut.

Entschuldige die späte Antwort.
Über den Geschwindigkeitszuwachs der FTUI kann ich leider nichts sagen, da ich das auf meinem ersten Raspi noch nicht genutzt habe. Aber auf dem Raspi 2 ist die UI (WEB und FTUI) recht flott.

Oli

viegener · 20 Juli 2015, 21:08:16

Zitat von: chris1284 am 20 Juli 2015, 15:08:01
kopiert man die datei 1:1 und benennt sie um und bindet sie im abschnitt der index ein
Code Auswählen Erweitern


zerhaut es den style (ohne das man am css irendetwas inhaltlich geändert hat). übernimmt man nur teile und passt sie an (zb nur body{}) läuft dies einwandfrei.
ist mir gestern auch aufgefallen als ich das originale css so ein wenig ändern wollte.

Die Erklärung dafür ist, dass beim zweiten Einbinden der fhem-tablet-ui.css auch Definitionen aus den anderen css-Dateien (z.B.: powerange oder jquery.toast) überschrieben werden. Die Regeln dazu was überschrieben wird und was nicht, ergeben sich aus dem CSS Standard. Leider ist dieser wie auch andere webstandards alles andere als optimal und wird dann auch noch in verschiedenen Browsern unterschiedlich implementiert.

Ich bin zu meinen EInstellungen durch Try-and-Error bekommen und bin mit der Aufteilung auch nicht überall zufrieden, insbesondere weil ich versuche soviel wie möglich auf meiner Einstiegsseite unterzubekommen. Ich kann vorschlagen, dass ich versuche bei konkreten Zielen/Problemen zu helfen, allerdings ohne eine gewisses Grundverständnis von css wird es nicht gehen. Die gute Nachricht ist, ein vollständiges Verständnis von css ist sowieso unmöglich

devil77 · 21 Juli 2015, 17:23:53

Ich habe 2 kleine Probleme und weiß nicht so recht ob die Selbstverschuldet sind oder ob einer anderen Stelle was nicht passt.
Bei mir werden zum Teil Befehle doppelt an FHEM gesendet, wie z.Bsp. bei einem Schalter.
Das andere Problem ist das widget mit der Windrichtung. Es wir bei mir immer doppelt dargestellt und ich weiß nicht woran es liegt.
Kann mir da jemand weiterhelfen woran es liegt?

Brockmann · 22 Juli 2015, 08:39:15

Zitat von: devil77 am 21 Juli 2015, 17:23:53
Kann mir da jemand weiterhelfen woran es liegt?

Es wäre schon hilfreich, wenn Du Deinen Code dazu postest, am besten innerhalb eines Code-Blocks, wegen der Übersichtlichkeit.
Ansonsten ist es doch reine Kaffeesatzleserei...

HoTi · 22 Juli 2015, 12:24:59

Hallo zusammen,

ich versuche mich gerade an diesem Frontend. Kann mir jemand erklären wie ich nun meine readingsgroup rein bekomme? Weil da soll es ein widget geben, aber kein erklärung dazu

HoTi · 22 Juli 2015, 12:50:52

Zitat von: setstate am 29 März 2015, 20:12:34
Wow chris1284,

das gefällt mir sehr sehr gut. Nur noch den Grauton den Button im OFF Status etwas heller machen und es sieht wunderschön als Bright Theme des FHEM Tablet UI aus. Was hast du alles geändert? Ist es schon veröffentlichbar?
Wir haben auch schon über ein Farbschema nachgedacht, genau das wäre das zweite offizielle Schema, was ich anbiete würde.

Code Auswählen Erweitern
data-type="switch" data-off-background-color="#999999"

Gibt es das schon? Meine Frau will was helleres