[gelöst] cmdIcon-Größe von nur einem Device ändern

Begonnen von dan1180, 26 April 2017, 17:19:47

Vorheriges Thema - Nächstes Thema

dan1180

Hallo zusammen,

ich steh glaube ich voll auf dem Schlauch. Ich habe in einem Floorplan das gleiche SVG-Icon für verschiedene Aufgaben verendet. Jeder Raum hat ein "structure" für alle Rolladen darin. Zusätzlich gibt es ein weiteres "structure" für das gesamte Stockwerk. Ich habe für jedes das Attribut
off:shutter_closed on:shutter_open
vergeben.

Nun möchte ich gerne, dass die Icons in den Räumen "Standardgröße" haben und die Icons für das Stockwerk deutlich größer sind. Folgende Befehle habe ich in meiner css-Datei schon versucht:
#rol_ug.devicestate img{height:135px; width:135px; }
#rol_ug.devicestate svg{height:135px; width:135px; }
#rol_ug {height:135px; width:135px; }
rol_ug.devicestate img{height:135px; width:135px; }
#rol_ug
   .devicestate img{height:135px; width:135px; }

rol_ug.shutter_open    { height:125px; width:125px; }
...

Mir brennen bereits die Augen vom Artikel lesen und ich finde einfach keine Lösung. Alle Icons mit dem Namen "shutter_open" und "shutter_closed" ist kein Problem
.shutter_open    { height:125px; width:125px; }
.shutter_closed  { height:125px; width:125px; }

aber ich will ja nur den einen Schalter für das gesamte Stockwerk...

Vielen Dank für jede Hilfe!

Gruß
Dan
FHEM 6.2 auf RPi4B
Raspberrymatic 3.X auf RPI3B

1xDS2408 und 6xDS18B20 an GPIO über Modul RPI_1Wire
>50 Homematic-Geräte

the ratman

#1
#LS_Umschalten svg { height:190px; width:190px; }#LS_Umschalten steht dabei für den "internal NAME" des devices. z.b. also "NAME   LS_Umschalten"
funzt zumindest bei mir so ...
→do↑p!dnʇs↓shit←

dan1180

Also bei mir irgendwie nicht...

Mein css-File
body     { background-color: #F0F0F0;
           font-family:Arial, sans-serif;
           font-size:9px;
           background-repeat:no-repeat;  }

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

#logo    { position:absolute; top: 100px; left: 10px;
           width:64px;  height:67px; background-image:url(../icons/fhem_smallscreen); }
#backimg {position:absolute; top:0px; left:0px;}
#menu    { position:absolute; top:20px; left:20px; min-width:60px; }
#menu.floorplan   { position:absolute; top:20px; left:20px; min-width:80px; font-size:14px; line-height:22px; }
#fpmenu.fp_arrange   { position:absolute; bottom:20px; left:20px; min-width:310px; font-size:9px; border:1px solid gray;}
#startcontent {position:absolute; top:20px; left:180px; text-align:left; font-size: 16px; }
table a:hover {font-weight:bold;}
#hdr     { position:absolute; top:10px; left:180px; border:1px solid gray; }
#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:center}
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; z-index: 10; }
a { color: #278727; }
img {  border-style: none; }
table { -moz-border-radius:8px; border-radius:8px; }

.fp_Grundriss   {border:0px solid gray;}

      .devicename     {font-size:10px; text-align:center; }
      .devicestate    {color:black; font-size:20px; text-align:center; }
      .devicecommands {font-size:10px; text-align:center; }
      .devicetimestamp{font-size:10px; text-align:center; }

#ug_rol svg { height:125px; width:125px; }

#sz_Rollo.devicename     {font-size:14px;}
#sz_Rollo.devicecommands {font-size:12px; text-align:center; }
#ez_Aussensensor.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_Grundriss       {font-size:14px; width:100px; }
#Home.fp_Media           {font-size:14px; text-align:left; }
#Media                   {font-size:14px; }
#Grundriss               {font-size:14px; text-align:left; }
.fp_tempvalue            {color:red; font-size:20px; }
.fp_humvalue             {color:blue; font-size:20px; }

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


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

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

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

/* next lines are for remotecontrol */
.rc_body              { border-style: solid; border-color: gray; border-width: 2px;
                        padding: 5px; background: #C8C8B0; 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; }


Das "structure" (oder heißt es die structure  ;) )
Internals:
   ATTR       UG
   CFGFN
   DEF        UG bu.wn.rol
   NAME       ug_rol
   NR         1753
   NTFY_ORDER 50-ug.rol
   STATE      on
   TYPE       structure
   Content:
     bu.wn.rol  1
   Readings:
     2017-04-26 16:53:23   LastDevice      bu.wn.rol
     2017-04-26 16:53:23   LastDevice_Abs  bu.wn.rol
     2017-04-26 16:53:23   state           on
Attributes:
   cmdIcon    off:shutter_closed on:shutter_open
   fp_Untergeschoss 915,535,7,ug_rol
   group      Rollladen
   room       Controller
   sortby     4
   webCmd     on:off


und der Floorplan
Internals:
   NAME       Untergeschoss
   NR         39
   STATE      Defined
   TYPE       FLOORPLAN
Attributes:
   fp_arrange 0
   fp_noMenu  1
   group      Floorplans
   room       Floorplans
   stylesheet Untergeschoss.css


Lässt sich da mein Fehler finden?
FHEM 6.2 auf RPi4B
Raspberrymatic 3.X auf RPI3B

1xDS2408 und 6xDS18B20 an GPIO über Modul RPI_1Wire
>50 Homematic-Geräte

rudolfkoenig

Achtung: es ght hier um FLOORPLAN!

Ich schlage
div#rol_ug img.shutter_open {height:135px; width:135px; }
vor. Evtl. funktioniert mein Vorschlag nicht, wenn ein anderes Floorplan Stil ausgesucht wurde.
Solche Regel kann man z.Bsp. im Chrome auch dynamisch testen, indem man auf dem Element rechte Maustaste, Inspect waehlt, und dann im neuen Fenster rechts im Styles Tab einen der angezeigten Regeln aendert.

Es lohnt sich aber auch eine kurze Einfuehrung ueber die Arbeitsweise der CSS Selektoren zu lesen :)

dan1180

Leider auch nicht  :(

Das einzigen was bisher geht ist
.shutter_open   {height:125px; width:125px; }
aber eben global.

ZitatEs lohnt sich aber auch eine kurze Einfuehrung ueber die Arbeitsweise der CSS Selektoren zu lesen
Sehr gerne aber wo finde ich sowas? Auch nach HowTos oder Einführungen für css habe ich mich wundgegoogled...in der Einführung für Flooplans habe ich auch nichts gefunden...was vielleicht auch an den falschen Schlagworten lag?!

Neben Code bin ich auch dankbar für Quellen!
FHEM 6.2 auf RPi4B
Raspberrymatic 3.X auf RPI3B

1xDS2408 und 6xDS18B20 an GPIO über Modul RPI_1Wire
>50 Homematic-Geräte

the ratman

#5
sag mal:
hast du in deinem css am ende fest svg mit 32 pixel deffiniert?
damit würdest alles überschreiben, was du vorher gebastelt hast. könnte man warscheinlich aber mit nem !important (#LS_Umschalten svg { height:190px!important; width:190px!important; }) ausbessern oder in andere reihenfolge setzen. bin da aber nicht grade sattelfest.

und nur, damit du mirs glaubst *g*
im anhang jede menge svg's inklusive "#LS_Umschalten" in groß.
→do↑p!dnʇs↓shit←

rudolfkoenig

Zeig mal das Ergebnis der Inspect-Befehls, wie oben beschrieben.

dan1180

Zitathast du in deinem css am ende fest svg mit 32 pixel deffiniert?
Ja hab ich. Wenn ich das aber auskommentiere wird nur die Anzeige meiner Heizung groß, die shutter-Bilder bleiben unverändert. Sicher, dass es die svg-Einstellung ist? Das Icon das ich verwende ist eine png-Datei?!

!important... brachte auch keine Veränderung.

ZitatZeig mal das Ergebnis der Inspect-Befehls, wie oben beschrieben.
Inspect-Befehl??? ist das der "!important"-Ausdruck?

Ich habe in einem anderen Raum Icons in verschiedenen Größen im EInsatz und zwar mit
#btn_guestWlan.devicestate img{height:135px; width:135px; }
Dort sind die Bilder aber als devStateIcon im Einsatz und nicht als cmdIcon wie in meinem jetzigen Fall...

Ach ja:
Zitatund nur, damit du mirs glaubst *g*
Ich habe nie daran gezweifelt  ;)

und
ZitatEs lohnt sich aber auch eine kurze Einfuehrung ueber die Arbeitsweise der CSS Selektoren zu lesen
Gibt es da etwas?

Danke!
FHEM 6.2 auf RPi4B
Raspberrymatic 3.X auf RPI3B

1xDS2408 und 6xDS18B20 an GPIO über Modul RPI_1Wire
>50 Homematic-Geräte

rudolfkoenig

ZitatInspect-Befehl??? ist das der "!important"-Ausdruck?
Nein, das ist das, was ich vorher geschrieben habe:
Zitatauf dem Element rechte Maustaste, Inspect waehlt

ZitatGibt es da etwas?
Ich dachte, dass man heutzutage nicht explizit beschreiben muss, wie man eine Suchmaschine bedient, deswegen habe ich die Frage ueberlesen. Ich empfehle den zweiter Treffer bei Google wenn man nach css Selektoren sucht:
  http://www.webmasterpro.de/coding/article/css-referenz-selektoren.html
Den ersten Treffer empfehle ich hier gar nicht, da muss man naemlich mehr lesen.

the ratman

upps - ich verwend nur svg's und hab glatt deine infos zum gif überlesen. würd dir auch generell svg empfehlen wegen der schönen skalierbarkeit und farblichen anpassbarkeit. pixelgrafiken schaun beim skalieren immer so ... igitt ... aus, wenn mans übetreibt.
nur zur info: mit !important kannst du bei css etwas erzwingen. sicher nicht der schönste weg, aber manchesmal gemütlich *g*.

ansonsten würde ich den königlichen pfaden folgen. der herr weiß, wovon er schreibt ...
→do↑p!dnʇs↓shit←

dan1180

Es funktioniert. Erst einmal Danke an euch!

Zweitens:
ZitatIch dachte, dass man heutzutage nicht explizit beschreiben muss, wie man eine Suchmaschine bedient
Der tat weh  :-\  Ich bin (noch) nicht so bewandert in den Dingen und dachte CSS sei etwas fhem-spezifisches. Nun gib mal "fhem css" bei Google ein  ::) Mein Fehler!

Nun zur Lösung:
Mit dem Inspector (allerding Firefox) habe ich die Angaben aus dem Bild im Anhang erhalten. Zusammen mit der Information
ZitatIch schlage
Code: [Auswählen]

div#rol_ug img.shutter_open {height:135px; width:135px; }

vor.

bin ich dann auf folgenden Code gekommen:
div#div-ug_rol.fp_device_div img {height:125px; width:125px; }

Und voila...es funktioniert.

Zitatwürd dir auch generell svg empfehlen wegen der schönen skalierbarkeit und farblichen anpassbarkeit
Da hast du sicher recht. Ich finde nur in manchen Fällen die bunten Bildchen schöner und da ich mich gerne im Photoshop austobe  ;D Hab mich auch noch nicht wirklich mit dem Erstellen eigener svg Bilder befasst.

Zitatansonsten würde ich den königlichen pfaden folgen. der herr weiß, wovon er schreibt ...
Das weiß ich nicht erst seit diesem Problem  ;D

Danke nochmal euch Beiden!
FHEM 6.2 auf RPi4B
Raspberrymatic 3.X auf RPI3B

1xDS2408 und 6xDS18B20 an GPIO über Modul RPI_1Wire
>50 Homematic-Geräte