FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: spacecowboy.21 am 19 März 2017, 11:41:10

Titel: Tag / Nacht css
Beitrag von: spacecowboy.21 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>
 
Titel: Antw:Tag / Nacht css
Beitrag von: setstate am 20 März 2017, 00:38:31
werde ich auf die ToDo Liste setzen ...
Titel: Antw:Tag / Nacht css
Beitrag 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.

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

Titel: Antw:Tag / Nacht css
Beitrag von: sinus61 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
Titel: Antw:Tag / Nacht css
Beitrag von: setstate 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.
Titel: Antw:Tag / Nacht css
Beitrag von: sinus61 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.
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann 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!



Titel: Antw:Tag / Nacht css
Beitrag von: setstate 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" />
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann 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" />

Titel: Antw:Tag / Nacht css
Beitrag von: setstate 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.
Titel: Antw:Tag / Nacht css
Beitrag von: moonsorrox 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.?
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann 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....
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann 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

Titel: Antw:Tag / Nacht css
Beitrag von: MarcoE 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
Titel: Antw:Tag / Nacht css
Beitrag von: setstate 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 :-(
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann 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
Titel: Antw:Tag / Nacht css
Beitrag von: MarcoE 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
Titel: Antw:Tag / Nacht css
Beitrag von: setstate 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.
Titel: Antw:Tag / Nacht css
Beitrag von: Ulm32b am 14 Juli 2018, 17:15:48
Nun gibt es auch einen Wiki-Beitrag zu Theme: https://wiki.fhem.de/wiki/FTUI_Widget_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.
Titel: Antw:Tag / Nacht css
Beitrag von: setstate am 14 Juli 2018, 23:20:49
Sehr schön, danke.
Titel: Antw:Tag / Nacht css
Beitrag von: Ulm32b am 05 September 2018, 16:19:15
Nachdem ich jetzt auch den Zweck von
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 (https://wiki.fhem.de/wiki/FTUI_Widget_Theme)
Titel: Antw:Tag / Nacht css
Beitrag von: Sailor 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
Titel: Antw:Tag / Nacht css
Beitrag von: Ulm32b am 16 September 2018, 22:40:22
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
Titel: Antw:Tag / Nacht css
Beitrag von: Sailor am 17 September 2018, 08:30:10
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
Titel: Antw:Tag / Nacht css
Beitrag von: Ulm32b am 17 September 2018, 09:54:19
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" />.
Titel: Antw:Tag / Nacht css
Beitrag von: Sailor am 17 September 2018, 12:18:44
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
Titel: Antw:Tag / Nacht css
Beitrag von: Ulm32b am 17 September 2018, 13:56:25
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".
Titel: Antw:Tag / Nacht css
Beitrag von: Sailor am 18 September 2018, 08:02:55
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
Titel: Antw:Tag / Nacht css
Beitrag von: Ulm32b am 18 September 2018, 09:39:46
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.
Titel: Antw:Tag / Nacht css
Beitrag von: CQuadrat am 19 September 2018, 09:06:24
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
Titel: Antw:Tag / Nacht css
Beitrag von: Sailor am 20 September 2018, 21:12:36
Hallo Ulm

Zitat von: Ulm32b am 18 September 2018, 09:39:46
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
Titel: Antw:Tag / Nacht css
Beitrag von: moonsorrox 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.
Titel: Antw:Tag / Nacht css
Beitrag von: Sailor am 21 September 2018, 07:47:58
Hi Moonsorrox

Zitat von: moonsorrox 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.

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
Titel: Antw:Tag / Nacht css
Beitrag von: moonsorrox 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  ;)
Titel: Antw:Tag / Nacht css
Beitrag von: Det20 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?
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann am 02 April 2020, 22:13:09
Zitat von: CQuadrat am 19 September 2018, 09:06:24
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!
Titel: Antw:Tag / Nacht css
Beitrag von: TimoD am 04 Oktober 2021, 13:08:35
Hallo,

ich finde die Ansichten im Forumsbeitrag https://wiki.fhem.de/wiki/FTUI_Widget_Theme (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
Titel: Antw:Tag / Nacht css
Beitrag von: Kehemann 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