Icons in der Raumliste

[Michi240281]

Hi,

wie kann ich in der Raumliste rechts Icons zuordnen? Bei Everyting ist ja die Weltkugel und mein Raum "Haus" hat wohl standardmäßig ein Icon gehabt. Wie ordne ich die Icons dort zu?

Vielen Dank!!

[justme1968]

attribut roomIcons

gruss
  andre

[Michi240281]

Hast du ein Beispiel?

Wo muss/kann ich das Attribut anwählen? Bei den Geräten, die dem Room "Garage" zugeordnet sind, gibt es das Attribut nicht.

[UliM]

Ruf einfach diese Seite auf : http://fhem.de/commandref.html
und benutz die Suchfunktion
Gruß, Uli

[schka17]

hier ein Beispiel

Code Auswählen Erweitern

attr WEB roomIcons Haus:control_building_empty Verbrauch:measure_power 3_Wohnzimmer:scene_livingroom unused:message_garbage 91_WG_Steuerung:status_automatic CUL_HM:hm_lan CUL_WS:cul_868 Dachgeschoss:control_building_modern_s_og Erdgeschoss:control_building_modern_s_eg Events:status_automatic FHT:cul_868 FS20:cul_868 Heizung:sani_heating Keller:control_building_modern_s_kg Netzwerk:it_network Outdoor:scene_day Plots:time_graph System:it_server TRX_LIGHT:light_light TRX_WEATHER:temperature_humidity Test:unknown Unsorted:edit_sort Webcams:it_camera Wintergarten:scene_terrace ZWave:usb_stick development:edit_paste logfiles:edit_copy Howto:unknown

schaut dann etwa so aus

[Michi240281]

hier ein Beispiel

Code Auswählen Erweitern

attr WEB roomIcons Haus:control_building_empty Verbrauch:measure_power 3_Wohnzimmer:scene_livingroom unused:message_garbage 91_WG_Steuerung:status_automatic CUL_HM:hm_lan CUL_WS:cul_868 Dachgeschoss:control_building_modern_s_og Erdgeschoss:control_building_modern_s_eg Events:status_automatic FHT:cul_868 FS20:cul_868 Heizung:sani_heating Keller:control_building_modern_s_kg Netzwerk:it_network Outdoor:scene_day Plots:time_graph System:it_server TRX_LIGHT:light_light TRX_WEATHER:temperature_humidity Test:unknown Unsorted:edit_sort Webcams:it_camera Wintergarten:scene_terrace ZWave:usb_stick development:edit_paste logfiles:edit_copy Howto:unknown

schaut dann etwa so aus

Jo vielen Dank!
Habs inzwischen hinbekommen!

Leider kann man in der commandref nicht wirklich ausmachen, dass man die mit ":" zuordnen muss. Habs dann durch rumprobieren rausbekommen!

Darf ich dich was fragen? Ich sehe in deinem Screenshot, dass du bei deiner Heizung bei den Sensoren und bei den Schaltern nicht das Problem habe, das ich habe (s. Anhang). Kannst du mir sagen, wie man das löst? Also dass bei den RT die schwarzen und grauen Hintergründe nicht bis ganz nach rechts durchgehen.....

[schka17]

hmmm, nicht konkret, ich hab so viel in der css datei herumgebastelt (im wahrsten Sinne des Wortes), ich kann jetzt nicht sagen welche Änderungen das bewirkt hat.

ich poste dir einfach meine css und du kannst dann die unterschiede heraussuchen

Code Auswählen Erweitern

@import url("dashboard_darkstyle.css");

/* Author: Till */
body     { background-color: #444444; background-image:url(../images/default/Background_01.png); background-repeat:repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#logo    { position:absolute; top:8px; left:3px; width:155px; visibility:hidden; }
#menu    { position:absolute; top:5px;left:3px; width:165px; }
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#hdr     { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
#connect_err { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:50px; z-index: 10; }

a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }

table.block { border:1px solid #ffffff; width: 100%;
              background: #333333; box-shadow:5px 5px 5px #000;}
table.block tr.odd { background: #111111; }
table.block tr.sel { background: red; }
table { border-radius:8px; border-spacing: 0px;
       padding-bottom: 6px; padding-top: 6px; }
table.column { border-spacing: 5px; }

table.room { background: #111111; width: 165px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
table.room a { color: #CCCCCC; text-decoration: none; }
table.room a:hover { color: #ffffff; }       
table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input {outline:none; background-color: #111111;
       border: 1px solid #ffffff; color: #cccccc; padding:5px;
       margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
input:focus {border: 1px solid red;}
input:disabled {color: #808080; }
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }

textarea {min-width:1000px; background-color: #111111;
          border: 1px solid #ffffff; color: #cccccc;
          padding:5px; margin-left: 10px;
          border-radius:8px; box-shadow: 5px 5px 5px #000000;}

/*
next lines are for commandref and faq
*/
#left  { position:absolute; top:140px; left:60px; width:165px; }
#right { position:absolute; top:20px; left:200px; bottom:20px;
right:10px; }
body>div#left { position:fixed; }
div#block { border:1px solid gray; background: #101010; padding:0.7em; }
div#dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em; font-family:Verdana; }

a img { border-style:none; }
.col2 { text-align:center; }
tr.column td { padding:0; vertical-align:top;}

/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
             margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; vertical-align:middle; }

select {  margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:250px; height:26px; }
.get .slider,.set .slider,.attr .slider {
        background:#101010; border-radius:8px; }

/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.slider { margin-left:10px; float:left; width:250px; height:26px;
          border-style:solid; border-width:2px; border-color:#555555 }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px;
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:2px solid; color:white; text-align:center; }
.downText,.makeSelect select { margin:0.7em; }


svg { height:26px; width:26px; fill:#ffff00; }
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; }

.changed { color:red; }

[Michi240281]

hmmm, nicht konkret, ich hab so viel in der css datei herumgebastelt (im wahrsten Sinne des Wortes), ich kann jetzt nicht sagen welche Änderungen das bewirkt hat.

ich poste dir einfach meine css und du kannst dann die unterschiede heraussuchen

Code Auswählen Erweitern

@import url("dashboard_darkstyle.css");

/* Author: Till */
body     { background-color: #444444; background-image:url(../images/default/Background_01.png); background-repeat:repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#logo    { position:absolute; top:8px; left:3px; width:155px; visibility:hidden; }
#menu    { position:absolute; top:5px;left:3px; width:165px; }
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#hdr     { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
#connect_err { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:50px; z-index: 10; }

a { color: #CCCCCC; text-decoration: none;}
a:hover { color: #ffffff; }
.wide { width:100%; }

table.block { border:1px solid #ffffff; width: 100%;
              background: #333333; box-shadow:5px 5px 5px #000;}
table.block tr.odd { background: #111111; }
table.block tr.sel { background: red; }
table { border-radius:8px; border-spacing: 0px;
       padding-bottom: 6px; padding-top: 6px; }
table.column { border-spacing: 5px; }

table.room { background: #111111; width: 165px; border:1px solid #CCCCCC; box-shadow:5px 5px 5px #000;}
table.room a { color: #CCCCCC; text-decoration: none; }
table.room a:hover { color: #ffffff; }       
table.room tr.sel { background: red; }
th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input {outline:none; background-color: #111111;
       border: 1px solid #ffffff; color: #cccccc; padding:5px;
       margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
input:focus {border: 1px solid red;}
input:disabled {color: #808080; }
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }

textarea {min-width:1000px; background-color: #111111;
          border: 1px solid #ffffff; color: #cccccc;
          padding:5px; margin-left: 10px;
          border-radius:8px; box-shadow: 5px 5px 5px #000000;}

/*
next lines are for commandref and faq
*/
#left  { position:absolute; top:140px; left:60px; width:165px; }
#right { position:absolute; top:20px; left:200px; bottom:20px;
right:10px; }
body>div#left { position:fixed; }
div#block { border:1px solid gray; background: #101010; padding:0.7em; }
div#dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em; font-family:Verdana; }

a img { border-style:none; }
.col2 { text-align:center; }
tr.column td { padding:0; vertical-align:top;}

/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
             margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; vertical-align:middle; }

select {  margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { margin-left:10px; float:left; width:250px; height:26px; }
.get .slider,.set .slider,.attr .slider {
        background:#101010; border-radius:8px; }

/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.slider { margin-left:10px; float:left; width:250px; height:26px;
          border-style:solid; border-width:2px; border-color:#555555 }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px;
          -webkit-user-select:none; -moz-user-select:none; -user-select:none;
          border:2px solid; color:white; text-align:center; }
.downText,.makeSelect select { margin:0.7em; }


svg { height:26px; width:26px; fill:#ffff00; }
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; }

.changed { color:red; }

Ok, vielen Dank! Schau ich mir mal an!
Weißt du zufällig auswändig, wie/wo man die Hintergrundfarben der einzelnen Zeilen ändert? Also standardmäßig sind die ja schwarz und grau! Da man aber u.a. bei dem Wettermodul schwarze Schrift hat, würde ich das schwarz/grau gerne in dunkelgrau/hellgrau ändern.

[schka17]

Sorry, nein. Aber es gibt da ein paar zeilen mit background 111111 oder cccccc, ich nehme an das sind die farben. Am besten kannst du das mit firebug (addon zum firefox) analysieren, da sieht man welche elemente in der css für die darstellung verantwortlich sind. Schwarz ist jedenfalls 000000 und weiss ist ffffff, jeweils zwei zeichen für die farbwerte rot, grün und blau.


Sent from my iPad using Tapatalk

[chris1284]

Häng mich mal dran...

Kann man die Namen der Räume ausblenden lassen. Ich würde gerne nur die Icons der Räume haben ohne Text

[Hans Franz]

Code Auswählen Erweitern

table.room { font-size:0px; }

Gruß
Hans