Problem mit Floorplan: devicecommands Farbe kann nicht geändert werden

[Michi240281]

Hallo Leute,

im Anhang seht Ihr meinen ersten Floorplan. Ein paar Geräte habe ich auch schon hinzugefügt.

Ich habe folgendes Problem:

Ich kann weder über die globale Einstellung, noch bei den Geräteeinstellungen die Farbe der "devicecommands" ändern. Es bleibt immer grau. Obwohl schon in den Standardeinstellungen eigentlich schwarz eingestellt sein sollte.
Hier ist der Code, wie es für die globalen Einstellungen schon in der Basis "darkfloorplansytle.css" drin stehen:

Code Auswählen Erweitern

.devicename     { font-size: 12px; text-align:center; color: #bb0000; }
.devicestate    { text-align:center; color: #111111; }
.devicecommands { font-size:12px; color: #bb0000; }
        .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }

#Garage_Schalten.devicecommands {font-size:24px;}


Und dann habe ich bei den Bewegungsmeldern im FhemWeb über "Select icon" ein Icon ausgewählt. Dieses wird jedoch im Floorplan nicht angezeigt, obwohl im HowTo steht, dass sich der floorplan die icons vom fhemweb "zieht", wenn keine eigenen/speziellen definiert und abgelegt sind.

Besten Dank schonmal!!

[nesges]

Schau dir mal den Quelltext des Floorplans im Browser an. So sieht's bei mir an einem MAX-Thermostat aus:

Code Auswählen Erweitern

<tr class="devicecommands" id="B_HEIZUNG-devicecommands">
    <td>
        <div class='fhemWidget' [...]

"devicecommands" ist die Klasse eines tr-Elements (Tabellenzeile). Darunter hängt ein td-Element (-zelle) und darunter ein div mit der Klasse "fhemWidget". Wahrscheinlich ist für .fhemWidget ein Style definiert, der Vorrang hat. Du müsstest dann

Code Auswählen Erweitern

.devicecommand .fhemWidget { font-size:12px [etc...] }

notieren. Ob der HTML-Code bei allen Devices gleich aussieht - ob also überall ein .fhemWidget drunter hängt - weiss ich nicht. Siehst du im eigenen Source.

[marvin78]

Hast du vor dem Selbstgespräch hier auch nur einen Blick in die commandref und vor allem ins wiki geworfen? Da gibt es sogar eine umfangreiche pdf-Anleitung. Du verschwendest nicht nur deine eigene Zeit...

[Michi240281]

Habe ich alles getan! Anleitung befolgt!

Habe es jetzt hinbekommen, bis auf 2 Probleme:

- Ich kann alles ändern bis auf die Farbe von devicecommands! Das bleibt immer grau! Verstehe ich einfach nicht!!!!! So stehts in der css:

Code Auswählen Erweitern

.devicename     { font-size: 16px; text-align:center; color: #000000; }
.devicestate    { text-align:center; color: #000000; }
.devicecommands { font-size:12px; text-align:center; color: #000000; }
        .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }

#Garage_Schalten.devicecommands {color: #000000;}

- Das Icon des BM wird im Floorplan nicht angezeigt, obwohl es im FhemWeb drin ist!

[Michi240281]

Schau dir mal den Quelltext des Floorplans im Browser an. So sieht's bei mir an einem MAX-Thermostat aus:

Code Auswählen Erweitern

<tr class="devicecommands" id="B_HEIZUNG-devicecommands">
    <td>
        <div class='fhemWidget' [...]

"devicecommands" ist die Klasse eines tr-Elements (Tabellenzeile). Darunter hängt ein td-Element (-zelle) und darunter ein div mit der Klasse "fhemWidget". Wahrscheinlich ist für .fhemWidget ein Style definiert, der Vorrang hat. Du müsstest dann

Code Auswählen Erweitern

.devicecommand .fhemWidget { font-size:12px [etc...] }

notieren. Ob der HTML-Code bei allen Devices gleich aussieht - ob also überall ein .fhemWidget drunter hängt - weiss ich nicht. Siehst du im eigenen Source.

Schade, dass darauf im HowTo überhaupt nicht eingegangen wird. Habe gestern 3 Stunden damit vergeudet, dass irgendwie hinzubekommen, vergebens. Ich schaue mir das heute nochmal an. Habe mir gestern Firebug installiert. Wie bekommt man das denn hin, dass man ein Objekt auf der Webseite markiert und dann unten den zugehörigen CSS-Code angezeigt bekommt? Wenn ich links auf diesen Pfeil klicke, um dann irgendwas zu markieren, wechselt die Ansicht im Firebug-Kasten immer zu HTML.

[nesges]

Schade, dass darauf im HowTo überhaupt nicht eingegangen wird. Habe gestern 3 Stunden damit vergeudet, dass irgendwie hinzubekommen, vergebens.

Das klingt so erwartend. Ich finde das nicht angebracht. Dein Problem ist kein FHEM-Problem, sondern ein HTML+CSS Problem. Das sind Standardtechniken, die hier voraus gesetzt werden, weil an anderer Stelle bereits Bücher damit gefüllt worden sind. Und natürlich gibt's das kostenlose Standardwerk SelfHTML (http://de.selfhtml.org/), das lohnt sich unbedingt!

Habe mir gestern Firebug installiert. Wie bekommt man das denn hin, dass man ein Objekt auf der Webseite markiert und dann unten den zugehörigen CSS-Code angezeigt bekommt? Wenn ich links auf diesen Pfeil klicke, um dann irgendwas zu markieren, wechselt die Ansicht im Firebug-Kasten immer zu HTML.

kA, nutze ich nicht. In Chrome kann man einfach ein Element markieren und im RMB-Kontextmenü auf "Element untersuchen" klicken. Oder man schaut sich einfach den HTML-Quelltext an und benutzt die Volltext-Suche.

[Michi240281]

Evtl kann mir ja hier jmd weiterhelfen. Ich poste einfach mal den gesamten Inhalt der "floorplandarkstyle1.css", die ich verwende:

Code Auswählen Erweitern

body     { background-color: #444444; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; }
body[id~=Media]     { background-color: #A5A5A5; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; }

#backimg {position:absolute; top:15px; left:190px;}
#logo    { position:absolute; top: 10px; left: 10px; width:180px;  height:600px; background-image:url(../images/default/fhemicon_dark.png); visibility:hidden;}
#fpmenu.fp_arrange   { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; }

#menu    { position:absolute; top:180px; left:30px; width:128px; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding-bottom: 6px; padding-top: 6px;}
#menu.floorplan  { position:absolute; top:180px; left:30px; width:128px; font-size:13px; border:1px solid #CCCCCC; background: #111111; box-shadow:5px 5px 5px #000; padding: 6px;}

#hdr     { position:absolute; top:15px; left:190px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; margin-bottom: 10px;}
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#startcontent {position:absolute; top:20px; left:200px; text-align:left; font-size: 16px; color:gray; }
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }

a { color:#CCCCCC; text-decoration:none;}
td {padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px;}

img { -moz-border-radius:8px; border-radius:8px;}

table { -moz-border-radius:8px; border-radius:8px; }
table tr.sel { backround: #333333;}
table a:hover {color: #ffffff;}

.devicename     { font-size: 16px; text-align:center; color: #000000; }
.devicestate    { text-align:center; color: #000000; }
.devicecommands { font-size:14px; text-align:center; color: #000000;}
        .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }

#Garage_Schalten.devicecommands {color:green;}
#Temperatur_Garage.devicestate {font-size:20px;}
#sz_Rollo.devicename     {font-size:14px;}
#sz_Rollo.devicecommands {font-size:12px; text-align:center; }
#ez_Aussentemperatur_dummy.devicestate  {color:green; font-size:30px; }
#HomeStatus.devicestate  {color:green; font-size:30px; }
#table.dummy              {min-width:100px;}
#table.FHT                {min-width:100px; }
#wakeup.devicestate      {color:green; font-size:11px; }
#ez_FHT.devicestate      {color:green; font-size:30px; }
#Home.fp_EG              {font-size:14px; width:100px; }
#Home.fp_Media           {font-size:14px; text-align:left; }
#Media                   {font-size:14px; }
#EG                      {font-size:14px; text-align:left; }
#w_MucWeather            {font-size:16px; color:#D4D4D4}
#w_WertListe1            {font-size:20px; color:gray}


h2,h3,h4 { color:#52865D; line-height:1.3; margin-top:1.5em; font-family:Verdana; }


/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#101010; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px; height:20px;
          line-height:20px; border:2px solid; color:white; text-align:center; }
.downText { margin-top:2px; }

/* next lines are for openautomation-svg */
svg { height:32px; width:32px; fill:#fff; vertical-align:middle; margin:2px 0; }
g.on { fill:red; }

/* next lines are for remotecontrol */
.rc_body              { border-style: solid; border-color: gray; border-width: 2px;
                        padding: 5px; background: #101010; font-size:6px;}
.rc_button            { padding: 5px 7px;}
.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }

@Nesges: Ich hoffe lediglich auf die Hilfe der Erfahreneren, da hier offensichtlich das HowTo zum Floorplan fehlerhaft, mindestens jedoch unvollständig ist. Denn der Absatz

Code Auswählen Erweitern

Die wichtigsten Einstelllungen sind:
.fp_<name> legt das default-Format für die gesamte Ausgabe fest.
.devicename formatiert alle Gerätenamen sofern nicht je Gerät abweichend festgelegt
.devicestate formatiert alle Gerätestatus bei Ausgabe als Text (nicht als Symbol)
.devicecommands formatiert alle Befehle, die unterhalb des Geräts/Symbols angezeigt werden
#backimg legt die Bildschirmposition Ihres Hintergrundbilds fest

funktioniert halt einfach nicht wie beschrieben/erklärt. Und ich habe wie gesagt nur eine Kopie der floorplandarkstyle.css erstellt. Am Rande bemerkt ist es auch schon in der Originalversion fehlerhaft. Hier steht ja auch

Code Auswählen Erweitern

.devicecommands { font-size:14px; text-align:center; color: #000000;}

und das funktioniert auch nicht: Die Commands werden grau dargstellt, und nicht wie die #000000 vorgibt, schwarz.

Also nochmal: Ich hoffe auf die Hilfe der User, die bereits vor dem gleichen Problem standen und dies beheben konnten.

Hab nochmal genauer geschaut, da gibts nichts von "class" etc.! Erstmal würde es mir ja genügen, wenn die globale Einstellung

Code Auswählen Erweitern

.devicecommands { font-size:14px; text-align:center; color: #000000;}

funktionieren würde. Dann wären die Commands zumindest schonmal alle lesbar!

UPDATE: Habe nochmal probiert:

Dieser fett markierte Eintrag ändert die devicecommands, leider auch die Einträge links im Menu! Wie kriege ich das denn jetzt hin, dass die Menueinträge weiterhin grau sind (#CCCCCC)?

Code Auswählen Erweitern


[b]a { color:#eb0000; text-decoration:none;}[/b]
td {padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px;}

img { -moz-border-radius:8px; border-radius:8px;}

[Michi240281]

Also diese Anweisung hier

Code Auswählen Erweitern

a { color:#eb0000; text-decoration:none;}

überschreibt die devicecommands! Wenn ich das rauslösche, wird das Menu in blau angezeigt, auch nicht optimal! Wo steckt denn jetzt da der Fehler?

[Michi240281]

Keiner ne Idee?

Hab den Ausdruck jetzt erstmal rausgelöscht, dadurch ist das Menu links (nur im Floorplan) zwar blau, aber später werde ich das eh ausblenden........

Wäre aber prima, wenn hier noch jmd weiter wüsste!!

[nesges]

Schau dir mal den Quelltext des Floorplans im Browser an. [...] Ob der HTML-Code bei allen Devices gleich aussieht - ob also überall ein .fhemWidget drunter hängt - weiss ich nicht. Siehst du im eigenen Source.

Du hast sicher geguckt. Ich nehme an, du kommst damit aber nicht klar, weil das Grundproblem "Keine Ahnung von HTML+CSS" nicht behoben ist. Dein Rumgestocher an vollkommen falschen Stellen sieht auf jeden Fall danach aus. Das geht nicht von heute auf morgen, arbeite dich mithilfe von SelfHTML o.ä. ins Thema ein, sonst wirst du wenig Freude haben.

Und jetzt zeig mal den HTML-Quellcode rund um dein devicecommand-Element.

[Michi240281]

Du hast natürlich Recht, dass ich grundsätzlich keine Ahnung davon habe. Daher habe ich halt gehofft, dass das HowTo zum Floorplan funktioniert und ich damit erstmal ein paar globale Änderungen vornehmen kann. Denn dafür reicht das Verständnis gerade so. Würde mir aber wie gesagt auch erstmal reichen, ein paar Farben zu ändern (ruhig global für alle Geräte).

Hier der gesamte Code der darkfloorplanstyle.css, wie ich sie aktuell verwende. Bzgl. der globalen Einstellungen ist alles Übernahme. Und ob ich für ein Gerät nochmal andere Einstellungen vornehme, spielt keine Rolle, da alles von

Code Auswählen Erweitern

a { color:#CCCCCC; text-decoration:none;}

überschrieben wird.

Code Auswählen Erweitern

body     { background-color: #444444; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; }
body[id~=Media]     { background-color: #A5A5A5; font-family:Arial, Helvetica, sans-serif; font-size:13px; background-image:url(../icons/Media.bak); background-repeat:no-repeat; }

#backimg {position:absolute; top:15px; left:190px;}
#logo    { position:absolute; top: 10px; left: 10px; width:180px;  height:600px; background-image:url(../images/default/fhemicon_dark.png); visibility:hidden;}
#fpmenu.fp_arrange   { position:absolute; bottom:20px; left:30px; min-width:310px; font-size:9px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; }

#menu    { position:absolute; top:180px; left:30px; width:128px; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding-bottom: 6px; padding-top: 6px;}
#menu.floorplan  { position:absolute; top:180px; left:30px; width:128px; font-size:13px; border:1px solid #CCCCCC; background: #111111; box-shadow:5px 5px 5px #000; padding: 6px;}

#hdr     { position:absolute; top:15px; left:190px; border:1px solid #CCCCCC; background: #111111; -moz-border-radius:8px; border-radius:8px; border-spacing: 6px; padding: 6px;
box-shadow:5px 5px 5px #000; margin-bottom: 10px;}
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#startcontent {position:absolute; top:20px; left:200px; text-align:left; font-size: 16px; color:gray; }
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }

a { color:#CCCCCC; text-decoration:none; }
td {padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px;}

img { -moz-border-radius:8px; border-radius:8px;}

table { -moz-border-radius:8px; border-radius:8px; }
table tr.sel { backround: #333333;}
table a:hover {color: #ffffff;}

.devicename     { font-size: 18px; text-align:center; color: #000000; }
.devicestate    { text-align:center; color: #000000; }
.devicecommands { font-size:14px; text-align:center; color: #000000; }
        .devicetimestamp{ font-size:10px; text-align:center; color: #111111; }


#Temperatur_Garage.devicestate { font-size: 18px; text-align:center; color: #000000; }

h2,h3,h4 { color:#52865D; line-height:1.3; margin-top:1.5em; font-family:Verdana; }


/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#101010; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px; height:20px;
          line-height:20px; border:2px solid; color:white; text-align:center; }
.downText { margin-top:2px; }

/* next lines are for openautomation-svg */
svg { height:32px; width:32px; fill:#fff; vertical-align:middle; margin:2px 0; }
g.on { fill:red; }

/* next lines are for remotecontrol */
.rc_body              { border-style: solid; border-color: gray; border-width: 2px;
                        padding: 5px; background: #101010; font-size:6px;}
.rc_button            { padding: 5px 7px;}
.rc_button img        { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }

[Alex330]

Hallo,

also ich hätte genau dasselbe Problem, ist hierfür mittlerweile ne Lösung gefunden worden?

Komischerweise bestand das Problem bei mir von Beginn an, seit der Installation von FHEM, also muss ja irgendeine Standardeinstellung/Befehl grundsätzlich dafür sorgen, dass die Farben vom Menü,Headings und Commands im Floorplan nicht überschrieben werden können und alle im Grau erscheinen.

Abhilfe schafft nur das Löschen von folgender Zeile:
a { color:#CCCCCC; text-decoration:none;}

Danach ist das Menü und Headings Blau ( woher auch immer diese Farbe kommt) aber die Commands sind frei konfigurierbar.

Würde mich freuen wenn jemand helfen könnte ohne das ich 1 Jahr HTML lernen muss

Dasselbe Problem besteht auch wenn ich ein anderes Stylesheet auswähle.