FHEM Forum

FHEM => Frontends => Thema gestartet von: Michi240281 am 25 Januar 2014, 21:55:05

Titel: Icons in der Raumliste
Beitrag von: Michi240281 am 25 Januar 2014, 21:55:05
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!!
Titel: Antw:Icons in der Raumliste
Beitrag von: justme1968 am 25 Januar 2014, 22:06:29
attribut roomIcons

gruss
  andre
Titel: Antw:Icons in der Raumliste
Beitrag von: Michi240281 am 25 Januar 2014, 22:19:47
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.
Titel: Antw:Icons in der Raumliste
Beitrag von: UliM am 26 Januar 2014, 09:09:55
Ruf einfach diese Seite auf : http://fhem.de/commandref.html
und benutz die Suchfunktion :)
Gruß, Uli
Titel: Antw:Icons in der Raumliste
Beitrag von: schka17 am 26 Januar 2014, 19:40:12
hier ein Beispiel

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

Titel: Antw:Icons in der Raumliste
Beitrag von: Michi240281 am 26 Januar 2014, 20:28:54
Zitat von: schka17 am 26 Januar 2014, 19:40:12
hier ein Beispiel

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

Titel: Antw:Icons in der Raumliste
Beitrag von: schka17 am 26 Januar 2014, 20:59:17
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
@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; }
Titel: Antw:Icons in der Raumliste
Beitrag von: Michi240281 am 26 Januar 2014, 21:50:20
Zitat von: schka17 am 26 Januar 2014, 20:59:17
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
@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.
Titel: Antw:Icons in der Raumliste
Beitrag von: schka17 am 26 Januar 2014, 22:12:56
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
Titel: Antw:Icons in der Raumliste
Beitrag von: chris1284 am 27 Januar 2014, 19:17:04
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
Titel: Antw:Icons in der Raumliste
Beitrag von: Hans Franz am 27 Januar 2014, 22:32:44
table.room { font-size:0px; }

Gruß
Hans