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.
<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>
Keiner eine Idee ?
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
data-background-icon="fa-circle-thin" data-off-background-color="green"
Man kann auch den gesamten Hintergrund in grün haben
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 ...
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)
Habe das gleiche Problem..konntest du eine Lösung finden?
Zitat von: ulli am 13 März 2016, 17:36:33
Habe das gleiche Problem..konntest du eine Lösung finden?
Bisher leider nicht, hatte hier sehr auf setstate gehofft ;).....
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
Hi Jo,
Zitatkannst 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 !
<!-- 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 (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI) Icon-Konfiguration
Danke! Schaue ich mir nochmal an ::)
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
Zitat von: Andy89 am 29 Mai 2016, 19:44:54
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 8)
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
Das Circlemenu "zieht" die Hintergrundfarbe von der fhem-tablet-ui.css
.gridster ul li {
background-color:#2A2A2A;
overflow: hidden;
}
Das ist gar nicht soo richtig. Besser wäre das zu ändern in:
.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
.menu li {
background-color:#DE2A2A;
}
Zitat von: setstate am 29 Mai 2016, 21:57:11
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!
Und wenn im eingeklapptenZustand sowohl Icon und Hintergrund transparent und somit die versteckten Icons "unsichtbar" geschaltet werden?
Gruß Eberhard
Zitat von: FHEm2005 am 29 Mai 2016, 22:15:24
Und wenn im eingeklapptenZustand sowohl Icon und Hintergrund transparent und somit die versteckten Icons "unsichtbar" geschaltet werden?
Gruß Eberhard
das müsste machbar sein. Und zwar in der Methode, wo die Icons sonst hervorgerufen werden... :)
Servus,
hab heute solange rumgespielt, bis ich es hinbekommen habe. Die einzige Datei, die verändert muss, ist die jquery.circlemenu.js
Im Anhang habe ich sie mal angehängt ;)
Es gibt nur 4 kleine Änderungen, der Rest ist so gelieben wie er war:
- Alle Skalierungen nach einem Klicken oder Wegklicken sind auf 0 gesetzt, dadurch sind die "anderen" Symbole unsichtbar.
Zeile 192, 221, 269. Beispiel Zeile 269
vendorPrefixes(self.menu_items, 'transform', 'scale(0)');- Das erste Element bekommt einen durchsichtigen Hintergrund.
Zeile 260:
self.element.children('li:first-child').css({'z-index': 1000-self.options.depth, 'background-color':'transparent' });Viel Spaß damit und dem schönerem UI :) ;D
Beste Grüße
Andy
edit: Anhang vergessen :o
Das Standardverhalten/Aussehen bleibt aber trotzdem gleich? Das wäre perfekt.
Ich sehe bei mir bis jetzt keinen Unterschied an der Stelle, wo Transparenz keine Rolle spielt.
wo Transparenz keine Rolle spielt ist es auch egal. Aber wo Transparenz wichtig ist, sieht man es schön. Bisher habe ich kein anderes Verhalten festgestellt. Dürfte meiner Meinung aber auch nicht, da die Symbole nur noch kleiner werden und das erste Element einen durchsichtigen Hintergrund hat.
Unten sind nun 3 Bilder.
- zugeklappt
- aufgeklappt
- aufgeklappt und angewählt
das Problem mit dem z-index, dass es hinter dem halb-transparenten li ist, ist seit dem letzten Update vorhanden. Hier wurde es auch schon angesprochen:
Zitat von: Skusi am 14 August 2016, 20:50:08
Wenn ich eines der Menues links antippe, klappen sie immer aus dem kleinen Icon oben links auf, und nicht aus ihrer Position. Außerdem habe ich festgestellt das das kleine Icon oben links eine Überlagerung aller letzten Icons aus den Circlemenue´s ist. Die ausgeklappten Icons werden ausserdem nun hinter dem semitransparenten Swiper mit dem Wetter angezeigt, lassen sich aber nicht antippen.
aber ich hatte keine Lust gestern zu suchen, welcher z-index dafür zuständig ist :o Aber das sollte nicht mehr so schwer werden ;D
Mit dem Verdecken ist es bestimmt ähnlich, wie bei diesem Thema:
https://forum.fhem.de/index.php/topic,48272.msg400018.html#msg400018
noshade ist schon dauerhaft gesetzt und bringt leider nicht :-\