Hauptmenü

Tag / Nacht css

Begonnen von spacecowboy.21, 19 März 2017, 11:41:10

Vorheriges Thema - Nächstes Thema

Kehemann

Hi MarcoE,

probiere mal statt:

<link rel="stylesheet" href="/fhem/tablet/css/ftui-bright-mint-ui.css" data-type="theme"

<link rel="stylesheet" href="css/ftui-bright-mint-ui.css" data-type="theme"

also "/fhem/tablet/" weglassen. Dann ging es bei mir.

Grüße Kehemann

MarcoE

Hi,
einfach einen Teil des Pfads weg zu lassen ändert nichts (hätte mich auch gewundert).
Was aber funktioniert (bis auf die background-color on und off bei zwei Dimmern- die sind jetzt blau) ist folgendes:

<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />

<link rel="stylesheet" href="/fhem/tablet/css/ftui-bright-mint-ui.css" data-type="theme"
          data-device="ftui1" data-get="state" data-get-on="day" data-get-off="!day" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" data-type="theme"
          data-device="ftui1" data-get="state" data-get-on="night" data-get-off="!night" />



Viele Grüsse,
Marco

setstate

Das kann man weglassen:

        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" data-type="theme"
          data-device="ftui1" data-get="state" data-get-on="night" data-get-off="!night" />


Die muss man weglassen, wenn die erste Zeile nicht da wäre.

Ulm32b

#18
Nun gibt es auch einen Wiki-Beitrag zu Theme: https://wiki.fhem.de/wiki/FTUI_Widget_Theme. Bitte korrekturlesen.
Ich habe mir erlaubt, die schönen Bilder aus diesem Thread als Blickfang zu kapern.

setstate


Ulm32b

Nachdem ich jetzt auch den Zweck von

  • fhem-blue-ui.css
  • fhem-green-ui.css
  • fhem-mobile-ui.css
  • fhem-darkblue-ui.css
  • fhem-darkgreen-ui.css
verstanden habe, wurde der Wiki-Beitrag zu Theme ergänzt. Mit den Beispielbildern gewinnt man schnell einen Überblick.

Über das Reading von Twilight lässt sich auch die Dämmerungsphase einfach ausdifferenzieren.

https://wiki.fhem.de/wiki/FTUI_Widget_Theme

Sailor

Hallo zusammen

ich stehe hier noch auf dem Schlauch...

Habe ein device namens "Test_Twilight" angelegt um die 6 Stadien zu simulieren.

Folgenden Kopf in der index.html:

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     */
    -->

<link rel="icon"       href="favicon.ico"              type="image/x-icon" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />

<link rel="stylesheet" href="css/individual/LightScene_0.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/individual/LightScene_1.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="1" data-get-off="!1" />

<script src="js/fhem-tablet-ui.js" defer></script>

<title>Sailor's Home</title>

</head>


Folgenden Eintrag in der LightScene_0.css

body {
    background-color: #FF0000 !important;
}


Folgenden Eintrag in der LightScene_1.css


body {
    background-color: #00FF00 !important;
}


Ich kann das device Test_Twilight setzen wie ich will (0 oder 1), der Hintergrund bleibt immer grün...

Wo mache ich hier den Denkfehler?  :o

Gruss
    Sailor
******************************
Man wird immer besser...

Ulm32b

Zitat von: Sailor am 16 September 2018, 17:09:08

<link rel="stylesheet" href="css/individual/LightScene_0.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="0" data-get-off="!0" />
<link rel="stylesheet" href="css/individual/LightScene_1.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="1" data-get-off="!1" />

Ich kann das device Test_Twilight setzen wie ich will (0 oder 1), der Hintergrund bleibt immer grün...

Wo mache ich hier den Denkfehler?  :o

Vielleicht muss in "Test_Twilight" "event-on-change-reading" aktiviert sein, damit die Änderungen sofort in theme ankommen.
attr Test_Twilight event-on-change-reading 1

Direkt aus twilight heraus funktioniert es bei mir (mit dem reading "light") einwandfrei. Vorschlag: Einfach gemäß Wiki aufsetzen, einmal schlafen und am nächsten Morgen nachschauen.  :D

Sailor

Hi Ulm

Zitat von: Ulm32b am 16 September 2018, 22:40:22
Vielleicht muss in "Test_Twilight" "event-on-change-reading" aktiviert sein, damit die Änderungen sofort in theme ankommen.
attr Test_Twilight event-on-change-reading 1
Leider hat das nichts gebracht.

Zitat von: Ulm32b am 16 September 2018, 22:40:22
Direkt aus twilight heraus funktioniert es bei mir (mit dem reading "light") einwandfrei. Vorschlag: Einfach gemäß Wiki aufsetzen, einmal schlafen und am nächsten Morgen nachschauen.  :D
Das ist ja der Grund, warum ich es mit einem Dummy testen will... Es funktioniert nicht.

Gruss
    Sailor
******************************
Man wird immer besser...

Ulm32b

Zitat von: Sailor am 17 September 2018, 08:30:10
Leider hat das nichts gebracht.
Das ist ja der Grund, warum ich es mit einem Dummy testen will... Es funktioniert nicht.

Dateipfad zur CSS korrekt?
Devicenamen durchgängig?

Wenn es das nicht ist, lautet meine Empfehlung, eine minimalistische index_Twilight.html aufzusetzen und zunächst alles (!) wegzulassen, was nicht unmittelbar mit theme zu tun hat, auch
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />.

Sailor

Hi Ulm

Zitat von: Ulm32b am 17 September 2018, 09:54:19
Dateipfad zur CSS korrekt?
Devicenamen durchgängig?

Wenn es das nicht ist, lautet meine Empfehlung, eine minimalistische index_Twilight.html aufzusetzen und zunächst alles (!) wegzulassen, was nicht unmittelbar mit theme zu tun hat, auch
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />.

Also Minimalistischer geht es nicht:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/LightScene_1.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="1" data-get-off="!1" />
<link rel="stylesheet" href="css/LightScene_0.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="0" data-get-off="!0" />
</head>
</html>


Die Pfade müssen korrekt sein, denn wenn ich die Stylesheet-Einträge vertausche wird es grün...
Lässt sich aber nicht umschalten.

Gruss
    Sailor
******************************
Man wird immer besser...

Ulm32b

Zitat von: Sailor am 17 September 2018, 12:18:44
Die Pfade müssen korrekt sein, denn wenn ich die Stylesheet-Einträge vertausche wird es grün...
Lässt sich aber nicht umschalten.
Als Nächstes würde ich für die states nicht 1 und 0, sondern 1 und 2 (oder a, b oder ...) versuchen. Nach dem Posting sieht es zwar nicht so aus, dass 0 und O vermischt wurden, aber ich selbst habe schon einmal ... ;D

Und dann bitte alle Konstellationen (Vertauschen ...) genau dokumentieren. Vielleicht erkennt man nach und nach eine "Systematik".

Sailor

Hi Ulm

Zitat von: Ulm32b am 17 September 2018, 13:56:25
Als Nächstes würde ich für die states nicht 1 und 0, sondern 1 und 2 (oder a, b oder ...) versuchen. Nach dem Posting sieht es zwar nicht so aus, dass 0 und O vermischt wurden, aber ich selbst habe schon einmal ... ;D
Und dann bitte alle Konstellationen (Vertauschen ...) genau dokumentieren. Vielleicht erkennt man nach und nach eine "Systematik".

Im Index-File: Aus "0" macht "2"
Im css-Ordner aus "LightScene_0.css" macht "LightScene_2.css"

Resultat: Geht immer noch nicht!  >:(

Irgendetwas ganz Offensichtliches mache ich falsch!
Wenn ich nur wüsste was...

Gruss
    Sailor
******************************
Man wird immer besser...

Ulm32b

#28
Zitat von: Sailor am 18 September 2018, 08:02:55
Im Index-File: Aus "0" macht "2"
Im css-Ordner aus "LightScene_0.css" macht "LightScene_2.css"

Resultat: Geht immer noch nicht!  >:(

Ich dachte weniger an eine Variation der Dateinamen, sondern an

<link rel="stylesheet" href="css/individual/LightScene_0.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="a" data-get-off="!a" />
<link rel="stylesheet" href="css/individual/LightScene_1.css" data-type="theme" data-device="Test_Twilight" data-get="state" data-get-on="b" data-get-off="!b" />

(Statt a/b kann man natürlich auch 1/2 o.ä. verwenden.)
Die Testumgebung könnte noch um einen switch erweitert werden, um den Informationsfluss zwischen FHEM und FTUI zu hinterfragen, z.B. mit
<div data-type="switch" data-device="Test_Twilight" data-get-on="a" data-set-on="a" data-get-off="b" data-get-off="b"></div>
attr Test_Twilight setList a b

Ansonsten gibt es ja bereits einen Ansatzpunkt: Die Reihefolge der Definitionen in index.html
Gibt es bei Hard- und Software irgendwelche Abweichungen von einer 08/15-Installation? Alle Updates eingespielt?

Die Umstände deuten in der Tat darauf hin, dass die Ursache "trivial" ist. Da sitzt irgendwo ein unscheinbarer Käfer ...
Weitere Ideen habe ich im Augenblick leider nicht, außer dem Rat, möglichst systematisch alle Zimmerecken auf den Prüfstand zu stellen.

CQuadrat

Zitat von: Kehemann am 12 Januar 2018, 20:30:39
Hallo,

da ich mich auch mit dem Thema Tag/Nachtanzeige beschäftig habe, möchte ich gern meine Lösung vorstellen.

(...)

Grüße

Kehemann

Hallo Kehemann,

mich würde interessieren, wie Du die Regenmenge der Vortage visualisierst. Leider sind bei Deinen Beispielen jeweils 0 Liter Regen gefallen.

Im html steht zum Beispiel bei Dir:

<!--  2. Zeile / 2. Spalte Regenmenge gestern -->
<div class="cell">
  <div data-type="image"
data-device="RM_yest"
data-get="state"
data-path="/fhem/www/images/default/"
data-suffix=".png"
data-hide="Night_Status"
data-hide-on="on"
data-hide-off="off"
data-size="20px">
  </div>
   (...)
</div>


Hast Du im Device RM_yest eine qualitatitive Mengenangabe à la "nichts", "wenig", "viel" und dazu jeweils ein PNG?
Ist das PNG dann ein Balken unterschiedlicher Höhe?

Danke und Gruß

Christoph
FHEM auf Mini-ITX-Server mit Intel Quad-Core J1900:
+ HM: HM-LAN, HM-USB, HM-MOD-UART mit div. HM-Komponenten
+ RFXtrx: Funkwetterstation Bresser mit ext. Thermometer, Regenmesser und Windmesser
+ TUL (KNX-Anbindung), KM271 (per ser2net), SONOS (div. Gimmicks), OneWire, Hue