Raumname als Überschrift in FHEMWEB

[KernSani]

Hallo zusammen,

da kürzlich ein Nachfrage kam... Hier ein kleiner Codeschnipsel, wie die Räume den Raumnamen als Überschrift bekommen können:
eine Javascript-Datei (z.b. heading.js) in einem Unterverzeichnis von www erstellen:

Code Auswählen Erweitern


var hdrReady=false;
function start_hdr() {
var ct = $("#content");
room = ct.attr("room");
var oc = "<div id=\"xhdr\">"+room;
oc += "</div>";
console.log("Adding "+oc);
ct.prepend(oc);
hdrReady=true;

$(start_hdr);


Die Datei über das Javascript attribut in das FHEMWEB-Device einbinden. Über eine eigene CSS-Datei sollte die "xhdr"-ID noch entsprechend formatiert werden.

Vielleicht nutzt es ja jemandem...

Edit: unnötiges FW_Widget entfernt.

Grüße,

Oli

[Risiko]

Danke.
Funktioniert prima.

FW_widgets wird aber nicht benötigt.

Risiko

[KernSani]

FW_widgets wird aber nicht benötigt.

Korrekt. Hab's entfernt.

[Spook112]

Guten Tag, ich bin neu hier und auch beim Umgang mit FHEM noch ein absoluter Anfänger.

Ich würde auch gerne Überschriften in meinen Räumen verwenden, aber leider klappt es bei mir nicht mit dem obigen Code.
Was habe ich gemacht:
Wie oben beschrieben eine Daten "heading.js" mit dem geposteten Inhalt erzeugt, diese Datei im Verzeichnis "/opt/fhem/www/pgm2" abgelegt.
Danach über die Web-Oberfläche im Device WEB vom Typ FHEMWEB das Attribut "JavaScripts" mit dem Wert "./pgm2/heading.js" erzeugt und dann die Config gesichert.
Dann in der Datei "/opt/fhem/www/pgm2/style.css" den Eintrag "#xhdr    { position:absolute; top:50px; left:235px; }" ergänzt.
Datei gespeichert und danach den FHEM service/server gestoppt und neu gestartet.

Leider kein Erfolg - keine Überschrift in den Räumen.

Hat jemand eine Idee was ich vergessen oder falsch gemacht habe?

P.S.: Beim Wert für JavaScripts hab ich es auch ohne Pfad und ohne ".js" versucht - kein Unterschied.

Wäre für jeden Tip dankbar.

[Amenophis86]

Also ich habe es jetzt auch mehrfach versucht und konnte den Raumnamen nicht erscheinen lassen. Hier meine Versuch:

JS Datei heißt: raumname.js
CSS Datei heißt: raumname.css
Beide sind im Ordner raumname im www Verzeichnis. Die niceclock, welche sich dort befindet funktioniert ohne Probleme.

JS Datei wurde von oben kopiert
CSS Datei sieht wie folgt aus (lediglich verschieden Styles zum testen, Ergebnis war ja nie sichtbar):

Code Auswählen Erweitern


/* RaumÜberschrift */
#xhdr {
   position:absolut;
   top:50px;
   left:235px;
   font-size:14px;
   color:white;
  }


Einbindung in FHEMWEB:

Code Auswählen Erweitern


CssFiles niceclocks/niceclocks.css raumname/raumname.css
JavaScripts niceclocks/fhem_niceclocks.js raumname/raumname.js



Habe auch keine Ahnung, warum der Name nicht angezeigt wird. Muss aber auch ehrlich sagen, dass ich mich erst seit heute mit der Einbindung von CSS in FHEM befasse. Vll kann KernSani seine Anleitung etwas ausführlicher machen, oder ein Fehler erkennen.

Anmerkung:
Wenn ich mir den Quelltext der HTML Seiten anschaue, kann ich sehen, dass sowohl die JS Datei, als auch die CSS Datei eingebunden ist. Aber es erscheint nirgends ein Hinweis auf den Raumname bzw xhdr.

[KernSani]

Weil nachfragen kamen - Im Anhang der auf meinem Screenshot verwendete Style. Auspacken, am Besten in ein eigenes Verzeichnis (unterhalb von www) ablegen und in der FHEMBEW-Instanz über die CssFiles und JavaScripts-Attribute einbinden. Bei mir funktionierts, aber keine Garantie (und kein Support )