Autor Thema: Tag / Nacht css  (Gelesen 7720 mal)

Offline spacecowboy.21

  • New Member
  • *
  • Beiträge: 29
Tag / Nacht css
« am: 19 März 2017, 11:41:10 »
Hallo, leider kenne ich mich mit CSS nicht so aus.

Ich würde gerne am Tag helle Farben benutzen und in der Nacht dunkle.

Kann ich da Zeit CSS Datein erstellen?


Das hatte ich im Netz gefunden.

Würde das gehen?

Zitat

<head>
  <link rel="stylesheet" id="noScriptCss" href="main.css" />
  <script type="text/javascript">
// Aktuelles Datum mit Uhrzeit
var datum = new Date();
var stunden = datum.getHours();
// No Script Variante des CSS entfernen
var noScriptCss = document.getElementById("noScriptCss");
noScriptCss.parentNode.removeChild(noScriptCss);
if(hours >= 7 && hours < 22) {
  document.write("<link rel='stylesheet' href='tag.css' />"); 
} else {
  document.write("<link rel='stylesheet' href='nacht.css' />");
}
  </script>
</head>
 

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #1 am: 20 März 2017, 00:38:31 »
werde ich auf die ToDo Liste setzen ...
Gefällt mir Gefällt mir x 3 Liste anzeigen

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #2 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.

Bei mir steht das Tablet unter dem Fernseher und fungiert wie eine Wetterstation mit permanenter Anzeige der Zeit und ein paar Wetterdaten. Über ein Button oben rechts plane ich den Absprung zu weiteren Seiten, die ich jedoch noch nicht fertig habe.

Für die verschiedenen Tageszeiten habe ich jeweils eine css-Datei aus der fhem-tablet-ui-user.css generiert und dort das Hintergrundbild und die Schriftfarbe angepasst. Im Header der index.html habe ich etwas Javascript untergebracht.
<!-- # Anfang Funktion zum Wechseln der CSS-Klasse  -->
<script language="javascript">
function UserClass(){
var datum = new Date()
var stunde = datum.getHours()
if (stunde < 6) {
document.write("<link rel='stylesheet' href='/fhem/tablet/css/fhem-tablet-ui-user-deepnight.css' >");
} else if (stunde < 17) {
document.write("<link rel='stylesheet' href='/fhem/tablet/css/fhem-tablet-ui-user.css' >");
} else if (stunde < 20) {
document.write("<link rel='stylesheet' href='/fhem/tablet/css/fhem-tablet-ui-user-dusk.css' >");
} else if (stunde < 23) {
document.write("<link rel='stylesheet' href='/fhem/tablet/css/fhem-tablet-ui-user-night.css' >");
} else {
document.write("<link rel='stylesheet' href='/fhem/tablet/css/fhem-tablet-ui-user-deepnight.css' >");
}
}
</script>
<script language="javascript">
UserClass()
</script>

<!-- # Ende Funktion zum Wechseln der CSS-Klasse  -->

Damit die CSS gewechselt wird, muss sich die Seite natürlich reloaden. Der folgende Eintrag im Header lässt die Seite alle halbe Stunde neu aufbauen.
<meta http-equiv="refresh" content="1800; URL=http://192.168.3.17:8083/fhem/ftui/">

Jetzt kommt meine Frage: Wie kann ich aus Fhem heraus die FTUI-Seite reloaden? Kann Fhem die CSS-Klassen setzen bzw. wechseln? Ich würde gern in Abhängigkeit der Dunkelheit die Tag/Nacht-Anzeige umschalten lassen. Leider bin icht kein Experte in html/css etc. Der Fhem-Befehl "trigger WEB.* JS:location.reload(true)" geht leider nicht.

Ich würde mich freuen wenn mir jemand auf die Sprünge helfen würde.

Grüße

Kehemann

Gefällt mir Gefällt mir x 5 Liste anzeigen

Offline sinus61

  • Sr. Member
  • ****
  • Beiträge: 652
Antw:Tag / Nacht css
« Antwort #3 am: 13 Januar 2018, 12:36:07 »
Wenn du Fully als Browser nutzt könntest du das Fully Modul nehmen um den reload aus Fhem anzustoßen
https://forum.fhem.de/index.php/topic,78977.0.html

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #4 am: 13 Januar 2018, 12:56:56 »
Von nesges gab es mal ein reload Plugin. Das könnte man aktualisieren, wenn es nicht schon jemand gemacht hat. Ein CSS Umschalter Plugin wäre auch machbar.

Offline sinus61

  • Sr. Member
  • ****
  • Beiträge: 652
Antw:Tag / Nacht css
« Antwort #5 am: 13 Januar 2018, 13:04:04 »
Die CSS aus Fhem wechseln zu können wäre natürlich auch nett, dann könnte man sowas per Twilight o.ä. lösen.

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #6 am: 13 Januar 2018, 15:06:25 »
Danke für Eure Hinweise. Der Fully Browser geht leider bei mir nicht, da ich ein Apfel habe. Das reload-plugin von nesges konnte ich hier und im GitHub nicht finden. Aktuell ist für mich aber meine Lösung ok.

Die CSS aus Fhem wechseln zu können wäre wirklich richtig gut  ;D

By the way, ein riesiges Danke an alle hier!



 

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #7 am: 13 Januar 2018, 23:21:06 »
War recht easy. Neues Widget Theme ist im Update.
So kann man die Files im <Head> definieren

    <link rel="stylesheet" href="css/day.css" data-type="theme"
          data-device="ftui1" data-get="theme" data-get-on="day" data-get-off="!day" />
    <link rel="stylesheet" href="css/night.css" data-type="theme"
          data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #8 am: 14 Januar 2018, 10:47:06 »
Hallo setstate,

vielen Dank dafür! Genial, ich bin begeistert.

Ich freu mich....  :D

Nur zur Sicherheit wie ich es verstehe:

href="Pfad und Name der angepassten css-Datei"
data-device="FHEM-Device, dessen Reading gelesen wird"
data-get-on="Wert für on, welcher aus dem Reading gelesen wird"
data-get-off="Wert für off, abhängig vom Reading"

Webpage reloaded sich durch das widget

Bei mir wird jedoch nur der zweite Stylesheet, also night ausgelöst. Das device Tageszeit ist ein dummy und und hat als state day. Umschalten auf night im dummy bringt nix. Nur wenn ich href="/fhem/tablet/css/fhem-tablet-ui-user-night.css" in href="/fhem/tablet/css/fhem-tablet-ui-user.css" im zweiten Teil ändere schaltet er um, aber wieder unabhängig vom Inhalt des dummy.

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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #9 am: 14 Januar 2018, 11:18:25 »
nein, Reload will ich vermeiden.
Es ist so gedacht, dass entweder das eine aktiv ist oder das andere. Wenn der get-on-Wert nicht erfüllt ist, wird das CSS auf disabled gesetzt.

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3952
  • Online
Antw:Tag / Nacht css
« Antwort #10 am: 14 Januar 2018, 12:50:49 »
@Kehemann
Gefällt mir sehr..!!!!  ;)
Super schickes sehr übersichtliches Design, hast du das mit FTUI Flexbox gemacht.?
Die Unterseiten rufst du dann oben rechts auf.?
Intel-NUC i3: FHEM-Server 5.9 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #11 am: 14 Januar 2018, 13:02:54 »
@moonsorrox
Danke sehr.
Ich habe alles über sheets gelöst, für Profis wahrscheinlich etwas zusammengepfuscht  ;)
Den Hintergrund mit den Linien und helleren Flächen habe ich mit Photoshop erstellt. Die Unterseiten kommen über den kleinen Button oben rechts. Dazu noch eine Anrufsignalisierung als popup.

index.html mal als Datei anbei. Gern auch mehr, muss ich nur zusammensuchen....

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #12 am: 14 Januar 2018, 16:20:15 »
@setstate
Funktioniert jetzt 1A!!! Alles ohne reload, nur über das Umschalten des fhem-device.

Perfekt, nochmals Danke  :), alle Daumen hoch!

Kehemann


Offline MarcoE

  • Full Member
  • ***
  • Beiträge: 105
Antw:Tag / Nacht css
« Antwort #13 am: 16 Januar 2018, 15:33:13 »
Hallo,
ich habe gerade mal das Widget Theme getestet und habe noch ein Problem. Verwende ich das Standard css oder das bright-mint css ohne das Widget funktioniert alles. Schalte ich dagegen mit dem widget um ist die Tagesansicht völlig zerstört.
Mein Coding sieht so aus:
<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" />
Sobald ich das ftui1 dummy ändere wird umgeschaltet- aber leider nicht ganz so wie ich es gerne hätte.
Was mache ich falsch?

Danke und viele Grüsse,
Marco

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #14 am: 16 Januar 2018, 18:33:05 »
1. Man darf die css/fhem-tablet-ui.css nicht disablen. Die muss immer anbleiben.
2. Die Angaben in css/ftui-bright-mint-ui.css werden nur teilweise unterstützt. Das habe ich noch als ToDo stehen.
    Die Art und Weise, wie dort die Farben für die Buttons und Symbols hinterlegt sind, funktionieren nur beim ersten initialisieren.
    Da muss ich mir noch was überlegen :-(

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #15 am: 16 Januar 2018, 20:19:37 »
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

Offline MarcoE

  • Full Member
  • ***
  • Beiträge: 105
Antw:Tag / Nacht css
« Antwort #16 am: 16 Januar 2018, 22:58:10 »
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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #17 am: 16 Januar 2018, 23:22:04 »
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.

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 386
Antw:Tag / Nacht css
« Antwort #18 am: 14 Juli 2018, 17:15:48 »
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.
« Letzte Änderung: 14 Juli 2018, 22:18:35 von Ulm32b »
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4312
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Tag / Nacht css
« Antwort #19 am: 14 Juli 2018, 23:20:49 »
Sehr schön, danke.

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 386
Antw:Tag / Nacht css
« Antwort #20 am: 05 September 2018, 16:19:15 »
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

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2068
  • und es werden immer mehr...
Antw:Tag / Nacht css
« Antwort #21 am: 16 September 2018, 17:09:08 »
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...

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 386
Antw:Tag / Nacht css
« Antwort #22 am: 16 September 2018, 22:40:22 »

<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

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2068
  • und es werden immer mehr...
Antw:Tag / Nacht css
« Antwort #23 am: 17 September 2018, 08:30:10 »
Hi Ulm

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.

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...

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 386
Antw:Tag / Nacht css
« Antwort #24 am: 17 September 2018, 09:54:19 »
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" />.

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2068
  • und es werden immer mehr...
Antw:Tag / Nacht css
« Antwort #25 am: 17 September 2018, 12:18:44 »
Hi Ulm

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...

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 386
Antw:Tag / Nacht css
« Antwort #26 am: 17 September 2018, 13:56:25 »
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".

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2068
  • und es werden immer mehr...
Antw:Tag / Nacht css
« Antwort #27 am: 18 September 2018, 08:02:55 »
Hi Ulm

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...

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 386
Antw:Tag / Nacht css
« Antwort #28 am: 18 September 2018, 09:39:46 »
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.
« Letzte Änderung: 18 September 2018, 09:46:10 von Ulm32b »

Online CQuadrat

  • Sr. Member
  • ****
  • Beiträge: 693
Antw:Tag / Nacht css
« Antwort #29 am: 19 September 2018, 09:06:24 »
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

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2068
  • und es werden immer mehr...
Antw:Tag / Nacht css
« Antwort #30 am: 20 September 2018, 21:12:36 »
Hallo Ulm

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.

Tja trivial.. Habe anstatt Firefox den Chrome (Version 69.0.3497.100 - Offizieller Build - 64-Bit) benutzt und - und was soll ich sagen - es funktioniert!

Parallel der Firefox (62.0 64-Bit) aber nicht.

Das muss also am Firefox bzw. an den Einstellungen des Firefox liegen.

Zumindest liegt es nicht an meier fhem Konfiguration

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

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3952
  • Online
Antw:Tag / Nacht css
« Antwort #31 am: 20 September 2018, 23:49:22 »
am Firefox wurde in der letzten Zeit sehr viel geschraubt und geändert, meistens ist alles noch da und eben nicht in der about:config eingeschaltet - alles auf Sicherheit bedacht.
Man muss nur wissen was gebraucht wird und das ist schwierig heraus zu finden...!
Ich denke das beste ist im FF Forum danach zu fragen, die haben evtl. Antworten.
Intel-NUC i3: FHEM-Server 5.9 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline Sailor

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2068
  • und es werden immer mehr...
Antw:Tag / Nacht css
« Antwort #32 am: 21 September 2018, 07:47:58 »
Hi Moonsorrox

am Firefox wurde in der letzten Zeit sehr viel geschraubt und geändert, meistens ist alles noch da und eben nicht in der about:config eingeschaltet - alles auf Sicherheit bedacht.
Man muss nur wissen was gebraucht wird und das ist schwierig heraus zu finden...!
Ich denke das beste ist im FF Forum danach zu fragen, die haben evtl. Antworten.

Immer diese Schrauber...

Das letzte Mal haben die mir die VLC-Plugins abgewürgt mit denen ich meine IP-Kameras via rstp:// in fhem eingebunden hatte.
Danach konnte ich mir neue Kameras kaufen weil die Alten keinen MJPG Stream via html5 ermöglicht haben und iFrames auf andere IPS ebenfalls nicht mehr möghlich sind!  >:(

Ich schau mal nach!

Ich habe das Wiki um eine Tabelle für bekannte Probleme erweitert.

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

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 3952
  • Online
Antw:Tag / Nacht css
« Antwort #33 am: 21 September 2018, 08:05:08 »
ich hatte auch ein Problem - konnte bei YouTube keine Kommentare mehr schreiben, mal ging es und dann bei einer weitere Antwort und nem erneuten FF Update ging gar nicht mehr... mir wurde dann geschrieben das kann alles nicht sein es muss an meinem System liegen...

Ein netter User aus dem FF Camp schrieb mir dann das er das Problem nachstellen konnte und siehe da prompt gab es eine Einstellung in der About.config, frag mich aber nicht mehr welche das war... ;) usw. usw.
So sieht das aus, der FF läuft seitdem die Komplett-Änderung kam auch nicht besser nur das alle geliebten Plugin's nicht mehr funktionieren...
Ich vermute ähnliches bei dir  ;)
Intel-NUC i3: FHEM-Server 5.9 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline Det20

  • Sr. Member
  • ****
  • Beiträge: 762
Antw:Tag / Nacht css
« Antwort #34 am: 27 Januar 2020, 11:28:24 »
Hallo,

irgendwie bekomme ich das nicht ins Laufen. In der INDEX habe ich es so definiert:

    <script src="js/fhem-tablet-ui.min.js" defer></script>
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-custom.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-custom-dark.css" data-type="theme" data-device="Pad_DarkMode" />

Die Custom sieht so aus:

body {
background:#000000 url(../images/bg.jpg) 0 0 no-repeat
}
 
.semitransparent {
    background: rgba(0, 0, 0, 0.7) !important;
}

Die Custom-Dark testhalber so:

body {
background:#FFFFFF
}

Egal was ich mache, der Hintergrund ist weiß, also basierend auf dem "-dark" CSS. Und das, obwohl der Dummy "Pad_DarkMode" auf false gesetzt ist. Getestet unter IE, FF, Chrome ... Ich habe auch schon "!important" hinter die BG Farbe gesetzt, ändert aber nix. Hat jemand einen Tipp, was ich falsch gemacht habe?

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #35 am: 02 April 2020, 22:13:09 »
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

Hallo Christoph,

jetzt erst bemerkt, dass hier eine Frage gestellt wurde.  :-[ Na ja, ich würde mal sagen nicht verfrüht bemerkt  ;)

Im Device RM_yest ist eine qualitative Mengenangabe als Status hinterlegt. Bei mir ist dies RM00 für nix, RM05 für 5l/qm, RM10 für 10l/qm usw. Das Device wird über ein notify gefüttert. Dazu habe ich die Dateien RM00.png, RM05.png usw. unter "...www/images/default" abgelegt. Die png enthält Balken mit verschiedenen Höhen. Ich habe sie mal mit drangehängt.

Viele Grüße

Kehemann

PS: Das Widget funktioniert immer noch tiptop. Super WAF!

Offline TimoD

  • Full Member
  • ***
  • Beiträge: 159
Antw:Tag / Nacht css
« Antwort #36 am: 04 Oktober 2021, 13:08:35 »
Hallo,

ich finde die Ansichten im Forumsbeitrag https://wiki.fhem.de/wiki/FTUI_Widget_Theme sowie die Hintergründe / Style schön.

Gibt es denn die Hintergründe / die css bzw. kann die jemand posten?

z.B.
fhem-tablet-ui-user-deepnight.css

Vorab vielen Dank,

grüße Timo

Offline Kehemann

  • New Member
  • *
  • Beiträge: 12
Antw:Tag / Nacht css
« Antwort #37 am: 04 Oktober 2021, 20:32:19 »
Hallo Timo,

hier die gewünschten Hintergrundbilder, angepasst auf die Größe eines iPad mit 1.024x768 Pixeln. Das Ganze habe ich aus frei verfügbaren Hintergrundbildern und semitransparenten Rechtecken in Photoshop gebastelt. Die Texte und Bilder sind alles Widgets. 

In der index.html habe ich im <head> folgenden Code eingefügt. Die Umschaltung zwischen den verschiedenen Stylesheets erfolgt mit Hilfe des Dummys "Tageszeit".

    <!-- # Anfang Funktion zum Wechseln der CSS-Klasse (Widget Theme) --> 
    <link rel="stylesheet" href="css/fhem-tablet-ui-user-dusk.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="down" data-get-off="!down" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="day" data-get-off="!day" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user_day_winter.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="winter" data-get-off="!winter" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user_day_autum.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="autum" data-get-off="!autum" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user_day_spring.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="spring" data-get-off="!spring" />
<link rel="stylesheet" href="css/fhem-tablet-ui-user-dusk.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="dusk" data-get-off="!dusk" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user-night.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="night" data-get-off="!night" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user-deepnight.css" data-type="theme"
          data-device="Tageszeit" data-get="state" data-get-on="deepnight" data-get-off="!deepnight" />
    <!-- # Ende Funktion zum Wechseln der CSS-Klasse  -->

Viel Erfolg!

Grüße Kehemann
Gefällt mir Gefällt mir x 1 Liste anzeigen

 

decade-submarginal