zusätzliches Stylesheet

Begonnen von frankbeckers, 01 April 2014, 22:00:40

Vorheriges Thema - Nächstes Thema

svenson08

Hallo Rudi

mit dem folgenden JavaScript kann eine CSS Datei "nachträglich" geladen werden. Das habe ich vorgesehen um die CSS Dateien vom Dashboard zu nutzen ohne das @import in die anderen CSS Dateien einzufügen. Das hatte ich dir gegenüber kurz in Karlsruhe erwähnt. Evtl. hilft das dir hier weiter.

function LoadCSSFile(cssLocation){
if(document.createStyleSheet) { document.createStyleSheet(cssLocation); }
else {
var objStyle = document.createElement("style");
var objText = document.createTextNode("\@import url("+cssLocation+") screen;");
objStyle.appendChild(objText);
document.getElementsByTagName("body")[0].appendChild(objStyle);
}
}


Gruß Svenson

rudolfkoenig

@Svenson: ich sehe im Moment nicht, wie das helfen soll (kann aber auch sein, dass ich heute einfach nur langsam bin :) )

Eine Datei an sich koennen wir auch heute laden (siehe @import), das Problem ist, dass FHEMWEB eine automatische Ersetzung "style.css" -> dein-aktuell-gesetztes-style.css macht. Wenn also frankbeckers in seinem mystyle.css ein @import("style.css") reinschreibt, dann kriegt er statt style.css wieder mystyle.css von FHEMWEB ausgeliefert.

betateilchen

Zitat von: rudolfkoenig am 03 April 2014, 14:05:44Wenn also frankbeckers in seinem mystyle.css ein @import("style.css") reinschreibt, dann kriegt er statt style.css wieder mystyle.css von FHEMWEB ausgeliefert.

Dann sollte FHEMWEB einfach prüfen, ob das Ergebnis der Ersetzung identisch mit dem aktuell ersetzten style.css ist und falls ja, keine Ersetzung vornehmen.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

rudolfkoenig

FHEMWEB kriegt "GET ... style.css".
Auszuliefern ist: beim ersten Aufruf mystyle.css, beim zweiten style.css

Wie genau ist jetzt dein Algorithmus?

moonsorrox

Zitat von: rudolfkoenig am 02 April 2014, 18:59:43
SVG-Faerberei benoetigt noch XXXsvg_defs.svg und XXXsvg_style.css

puuh jetzt wird es für mich kompliziert...
ich weiß jetzt überhaupt nicht mehr was ich für xxxxx.css nutzen soll. mich stört ja nicht so das gelbe an den Plots sondern eher die schwarze Schrift auf dem schwarzen Untergrund.
Ich habe versucht die obigen XXXsvg nachzuladen aber das funktioniert nicht.
Intel-NUC i5: FHEM-Server 6.1 :: 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

betateilchen

So tief habe ich mich mit dem Mechanismus in FHEMWEB noch nicht befaßt, ich hatte nur vorhin Deine "Problem-"Beschreibung gelesen.

Was müsste FHEMWEB denn beim [3..n]. Aufruf bekommen?
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

betateilchen

Zitat von: moonsorrox am 03 April 2014, 14:48:03mich stört ja nicht so das gelbe an den Plots sondern eher die schwarze Schrift auf dem schwarzen Untergrund.

ja, früher war die Schrift auf grauem Hintergrund, das fand ich auch besser lesbar.
-----------------------
Formuliere die Aufgabe möglichst einfach und
setze die Lösung richtig um - dann wird es auch funktionieren.
-----------------------
Lesen gefährdet die Unwissenheit!

moonsorrox

kann ich das nicht so machen das ich die darkstyle.css lade und da ich das Dashboard nutze die @import url("dashboard_darkstyle.css"); und meine Änderungen mit  @import url("mydarkstyle.css"); nachladen..?
Oder lädt er nur eine xxxx.css nach..? Klar muss ich dann immer bei Update der darkstyle das oben wieder einfügen, also meine Änderung..

Ich habe nun erst einmal wieder die darkstyle.css in Betrieb und habe hier meine Änderungen eingefügt, anders wird das nix hier bei mir.
Intel-NUC i5: FHEM-Server 6.1 :: 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

frankbeckers

Vielleicht vergesse ich bei meinem Vorschlag einige "Ecken", aber ich versuche es trotzdem einmal:


  • Der Browser fordert eine Seite vom Webserver an
  • Der Webserver liefert die Seite zurück
  • Der Browser fordert weitere "includete" Dateien vom Webserver an
  • Der Webserver liefert die Dateien zurück

Im Falle von FHEMWEB passiert aus meiner Sicht aber folgendes:


  • Der Browser fordert eine Seite von FHEMWEB
  • FHEMWEB liefert eine HTML Seite zurück in welcher "hardcoded" immer das Ergebnis FW_pO "<link href=\"$FW_ME/pgm2/style.css\" rel=\"stylesheet\"/>"; (Auszug aus 01_FEHMWEB.pm Zeile 608) enthalten ist
  • Der Browser fordert die entsprechende css Datei (hier also IMMEER style.css) von FHEMWEB an
  • FHEMWEB liefert bei eingeschaltetem stylesheetPrefix jetzt den INHALT von [prefix]style.css zurück

Der Browser denkt er hat style.css bekommen... hat er aber nicht. Der @import(style.css) wird vom Browser aufgelöst, da die style.css aber schon geholt wurde, wird keine neuen GET Anforderung gestellt.


In 01_FEMWEB.pm ab Zeile 398:

sub
FW_serveSpecial($$$$)
{
  my ($file,$ext,$dir,$cacheable)= @_;
  $file =~ s,\.\./,,g; # little bit of security

  $file = "$FW_sp$file" if($ext eq "css" && -f "$dir/$FW_sp$file.$ext");
  $FW_RETTYPE = ext2MIMEType($ext);
  return FW_returnFileAsStream("$dir/$file.$ext", "",
                                        $FW_RETTYPE, 0, $cacheable);
}


wird der entsprechende Fake ausgeliefert. (Wenn ich das bis dahin verstanden habe ;-)



Warum nicht 01_FEHMWEB.pm auf Zeile 608

FW_pO "<link href=\"$FW_ME/pgm2/style.css\" rel=\"stylesheet\"/>";

ersten durch

FW_pO "<link href=\"$FW_ME/pgm2/\"$FW_sp\"style.css\" rel=\"stylesheet\"/>";

und danach nur noch die Inhalte der angeforderten CSS Dateien ausliefern?



Ich hoffe ich habe keine Denkfehler gemacht und schicke Euch nicht in die falsche Richtung.
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

Weil dann commandref.html und die anderen statischen Dateien nicht mit dem gewaehlten style versorgt werden.

frankbeckers

Zitat von: rudolfkoenig am 03 April 2014, 19:00:07
Weil dann commandref.html und die anderen statischen Dateien nicht mit dem gewaehlten style versorgt werden.

Aber statische Seiten können doch statisch versorgt werden. Oder verstehe ich das jetzt falsch. Kommt bei denen der Stylesheet auch aus der o.g. Zeile? Wenn ja, dann vielleicht dort nur für nicht statische ersetzen?
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

ZitatWenn ja, dann vielleicht dort nur für nicht statische ersetzen?
FHEMWEB weiss nicht, wer eine Seite abgerufen hat.

frankbeckers

Zitat von: rudolfkoenig am 03 April 2014, 19:23:13
FHEMWEB weiss nicht, wer eine Seite abgerufen hat.

...aber vielleicht an der Uri?

192.168.178.44:8083/fhem/docs/commandref.html ist doch an dem /docs nach der Basis zu erkennen, oder?
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200

rudolfkoenig

Wir haben nicht mit commandref.html das Problem, sondern mit style.css, und das ist identisch in allen Faellen.

Man muesste den ersetzten/kuenstlichen style.css anders benennen als den "echten" style.css (z.Bsp. fhem.css fuer kuenstlich von FHEMWEB generiert, style.css bleibt im filesystem so wie es ist). Man darf danach ein paar Kombinationen testen: FHEMWEB generiert fuer desktop/smallscreen/touchpad, commandref direkt aus dem Filesystem, commandref ueber FHEMWEB. Fuer commandref aus FileSystem muss man tricksen mit einem fhem.css im Fileystem, was style.css per import reinholt. Dieser taucht aber im FHEMWEB Style-Selektor nie auf, da es nicht auf style.css endet.

frankbeckers

#29
Nachdem nun klar ist, dass eine Erweiterung für eigene Modifikation ontop des Stylesheet style.css schwierig ist, bin ich nochmals auf die Suche nach einer "Umgehung" des Problems gegangen, ohne dabei in das System einzugreifen.

Gestossen bin ich dabei auf die undokumentierte Möglichkeit (zumindestens habe ich nichts dazu gefunden) eigene Javascript auf jeder Seite einzubinden. Dazu habe ich es mit folgender Ergänzung der bestehenden FHEMWEB Instanz

define WEB FHEMWEB 8083 global
attr WEB JavaScripts pgm2/jquery.min.js pgm2/modstyle.js
...


geschafft eigene Javascripte einzubinden.


  • jquery.min.js wird bei der Fhem Installation mit ausgeliefert und bietet u.a. viele vereinfachte JavaScriopt Funktionen
  • modstyle.js beinhaltet die CSS Modifikation gekapselt in Javascript

Das Resultat sieht folgendermaßen aus:

...
<script type="text/javascript" src="/fhem/pgm2/fhemweb_time.js"></script>
<script attr='' type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script attr='' type="text/javascript" src="/fhem/pgm2/modstyle.js"></script>
</head>
<body name="Home, Sweet Home" onload="FW_delayedStart()">
...


modstyle.js hat folgenden Inhalt:

$(document).ready(function() {
$("#content").css("left", "230px");
$("#hdr").css("left", "230px");
$("#menuScrollArea").css("width", "225px");
$("#menu").css("width", "220px");
$("input.maininput").css("width", "800px");
});


Hierbei werden nach erfolgreichem Laden der gesamten Seite $(document).ready(function() {...} an wenige Elementen der CSS Struktur Anpassungen $("...ident...").css("...csstype...", "...inhalt...");  vorgenommen.

Diese Variante hat z.Zt. noch keine negativen Seiteneffekte aufgezeigt.

Falls FHEMWEB demnächst eine Anpassung für eigene Stylesheets bekommt, kann diese Erweiterung auch sehrt einfach wieder zurück gebaut werden.

Grüße
Frankie

P.S. Ich werde das erste Posting um diesen Text erweitern.
FHEM 5.7 auf Raspberry Pi 2 Jessy 4.1.16-v7+
CCU2 --> hm2mqtt --> MQTT --> Fhem
ehz361z5 --> RPi --> MQTT --> Fhem
Lightify
Fritz!DECT 200