Circle-Menü => transparenter Hintergrund

[kvo1]

Hallo

ich würde gern den Hintergrund des data-icon vom data-type "push" transparent haben wollen, so wie in der 1. Auswashl (bei data-type="pagetab" ), stehe wohl grade auf dem Schlauch!

Innerhalb das Pagetab hat ich das bereits.


     

Code Auswählen Erweitern

<div data-type="pagetab" data-url="room_dg.html"  data-icon="oa-control_building_modern_s_dg"  data-on-background-color="#CC7A00" class=""></div>

<!--  Obergeschoss -->
<div data-type="circlemenu" class="cell circlemenu" data-direction="right-half">
            <ul>
              <li><div data-type="push" data-icon="oa-control_building_modern_s_og" data-background-icon="-"></div></li>
              <li><div data-type="pagetab" data-url="og_detail_az.html" data-icon="oa-scene_office" data-on-background-color="#CC7A00"></div></li>
              <li><div data-type="pagetab" data-url="og_detail_kz.html" data-icon="oa-scene_childs_room" data-on-background-color="#CC7A00"></div></li>
              <li><div data-type="pagetab" data-url="og_detail_tz.html" data-icon="oa-scene_laundry_room_fem" data-on-background-color="#CC7A00"></div></li>
              <li><div data-type="pagetab" data-url="og_detail_bz.html" data-icon="oa-scene_bathroom" data-on-background-color="#CC7A00"></div></li>
            </ul>
        </div>

[kvo1]

Keiner eine Idee ?

[setstate]

Was bedeutet transparent? Gleich der Farbe des Hintergrundes? Das macht doch der gezeigte Code

Beim Push ist der Background Icon ein "fa-circle-thin"

Zur Verdeutlichung hier mal Grün für den Nichtgedrückzustand

Code Auswählen Erweitern

data-background-icon="fa-circle-thin" data-off-background-color="green"

Man kann auch den gesamten Hintergrund in grün haben

Code Auswählen Erweitern

data-background-icon="fa-circle" data-off-background-color="green"

Wenn man data-background-icon="" oder data-background-icon="-" oder data-background-icon="none" oder data-background-icon="pustekuchen" angibt, wird kein Background Icon gezeigt, weil es diese Definitionen nicht gibt. Dann sieht man nur den Hintergrund ...

[kvo1]

ahhh, habe mich vlt. etwas schlecht ausgedrückt.

>>Was bedeutet transparent? Gleich der Farbe des Hintergrundes? Das macht doch der gezeigte Code
Ja ich meine den HIntergrund der cicle-icons (Bild 1 - hier Knopf 3-6) , die sollen so wir bei knopf 1 und 2 aussehen.

Wenn ich dann drücke, soll    data-on-background-color="#CC7A00" sein und das cicle - Menü öffnet sich !
bei der  data-on-background-color der pagetab - icons passt das (bild 2)

[ulli]

Habe das gleiche Problem..konntest du eine Lösung finden?

[kvo1]

Habe das gleiche Problem..konntest du eine Lösung finden?

Bisher leider nicht, hatte hier sehr auf setstate gehofft   .....

[Jojo11]

Hallo,

kannst Du mir verraten, wie Du die smartVISU icons eingebunden hast? Hast Du die in eine icon-font umgewandelt? Sind doch die von smartVISU, oder?

Schöne Grüße
Jo

[kvo1]

Hi Jo,

kannst Du mir verraten, wie Du die smartVISU icons eingebunden hast? Hast Du die in eine icon-font umgewandelt? Sind doch die von smartVISU, oder?

die icon kommen (bei mir) aus .....\www\images\openautomation 

Dazu folgendes in der index.html  eingefügt !

Code Auswählen Erweitern

  <!-- nächsten beiden Zeilen lädt die openautomation-ICONS , angeben durch  'oa-' oder 'fs-' -->
  <!-- Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)    -->
  <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
  <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />


..siehe

http://www.fhemwiki.de/wiki/FHEM_Tablet_UI      Icon-Konfiguration

[Jojo11]

Danke! Schaue ich mir nochmal an 

[Andy89]

Servus,
hat jemand hierzu mittlerweile eine Lösung gefunden? Ich find nämlich es sieht nicht schön aus, wenn das Circlemenü, als einziges einen grauen Hintergrund hat, wogegen alle anderen "PageButtons" einen durchsichtigen Hintergrund haben.. Zur Verdeutlichung mein Menü als Anhang 

Beste Grüße
Andy

[kvo1]

Servus,
hat jemand hierzu mittlerweile eine Lösung gefunden? Ich find nämlich es sieht nicht schön aus, wenn das Circlemenü, als einziges einen grauen Hintergrund hat, wogegen alle anderen "PageButtons" einen durchsichtigen Hintergrund haben.. Zur Verdeutlichung mein Menü als Anhang 

Beste Grüße
Andy

ich leider noch nicht, "lebe" momentan damit - aber schön ist anders 
Vielleicht liest das setstate (oder wer auch immer) doch nochmal 

[FHEm2005]

Es gibt noch die Farbangabe   rgba(rot-Anteil, gruen-Anteil,blau-anteil, opacity). Dabei ist die opacity die Deckkraft, von 0 bis 1.0

rgba(255,215,0,0.5)    50% Deckkraft
rgba(255,215,0,0.2)    20% Deckkraft
rgba(255,215,0,0)    0% Deckkraft (durchsichtig)

Ich weiß aber leider nicht, ob diese Farbangabe unterstützt wird. Versucht es mal data-on-background-color="rgba(255,215,0,0.0)"
Gruß Eberhard

[setstate]

Das Circlemenu "zieht" die Hintergrundfarbe von der fhem-tablet-ui.css

Code Auswählen Erweitern


.gridster ul  li {
    background-color:#2A2A2A;
    overflow: hidden;
}


Das ist gar nicht soo richtig. Besser wäre das zu ändern in:

Code Auswählen Erweitern


.gridster > ul > li {
    background-color:#2A2A2A;
    overflow: hidden;
}


Damit hat das Circlemenu keine Hintergrundfarbe mehr. Diese wird aber gebraucht, weil sich die eingeklappten Elemente dahinter verstecken müssen. Also muss man eine Farbe fest vorgeben

Zeile 586 in der fhem-tablet-ui.css

Code Auswählen Erweitern


.menu li {
    background-color:#DE2A2A;
}


[Andy89]

Damit hat das Circlemenu keine Hintergrundfarbe mehr. Diese wird aber gebraucht, weil sich die eingeklappten Elemente dahinter verstecken müssen. Also muss man eine Farbe fest vorgeben

das haben wir wohl alle nicht bedacht.... danke für die Aufklärung!

[FHEm2005]

Und wenn im eingeklapptenZustand sowohl Icon und Hintergrund transparent und somit die versteckten Icons "unsichtbar"  geschaltet werden?
Gruß Eberhard