Tag / Nacht css

spacecowboy.21 · 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>

setstate · 20 März 2017, 00:38:31

werde ich auf die ToDo Liste setzen ...

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

Code Auswählen

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

Code Auswählen

<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

sinus61 · 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

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

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

Kehemann · 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

By the way, ein riesiges Danke an alle hier!

setstate · 13 Januar 2018, 23:21:06

War recht easy. Neues Widget Theme ist im Update.
So kann man die Files im <Head> definieren

Code Auswählen


    <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" />

Kehemann · 14 Januar 2018, 10:47:06

Hallo setstate,

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

Ich freu mich....

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.

Code Auswählen

<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" />

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

moonsorrox · 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.?

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

Kehemann · 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

MarcoE · 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:

Code Auswählen


	<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

setstate · 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