Im unteren Beispiel ändere ich die Helligkeit einer HUEGroup in eine von 4 vorgegebenen Stufen. Die push Widgets sind folgendermaßen definiert:
<div
data-type="push"
data-device="HUEGroup0"
data-background-icon=""
data-off-color="Orange"
data-on-color="Orange"
data-set-on="pct 100"
data-icon="fa-lightbulb-o"
class="normal">
</div>
Die Farbe des Icons zeigt mir die gewünschte Helligkeit an.
Gibt es die Möglichkeit statt des farbigen Icons auf dem grauen Kreis ein graues Icon auf einem farbigen Quadrat (ohne den dahinter liegenden Kreis) anzuzeigen ?
hmm ... hat niemand eine Idee ?
Entsprechend background Icon und background Color ändern, sollte helfen
Müsste man ausprobieren ... (Habe ich bestimmt bis heute Abend wieder vergessen )
Ich hab' mal data-background-icon des circlemenu und data-background-color der push widgets geändert - ohne Erfolg. Die Quadrate bleiben grau und die Kreise dahinter sind auch noch da:
<div
data-type="circlemenu"
class="circlemenu inline"
data-direction="full"
data-circle-radius=50
data-backgound-icon="-">
<ul>
<li>
<div
data-type="symbol"
data-device="HUEDevice2"
data-get="pct"
data-icons='["fa-spinner","fa-spinner","fa-spinner","fa-spinner"]'
data-background-icons='["fa-square","fa-square","fa-square","fa-square"]'
data-states='["0","5","50","100"]'
data-colors='["#2a2a2a","#2a2a2a","#2a2a2a","#2a2a2a"]'
data-background-colors='["#505050","#8b5a00","#cd8500","Orange"]'
class="cell small">
</div>
</li>
<li>
<div
data-type="push"
data-device="HUEGroup0"
data-background-icon="fa-square"
data-on-color="#505050"
data-off-color="#505050"
data-background-color="#505050"
data-set-on="pct 0"
data-icon="fa-lightbulb-o"
class="normal">
</div>
</li>
<li>
<div
data-type="push"
data-device="HUEGroup0"
data-background-icon="fa-square"
data-on-color="#8b5a00"
data-off-color="#8b5a00"
data-background-color="#8b5a00"
data-set-on="pct 5"
data-icon="fa-lightbulb-o"
class="normal">
</div>
</li>
<li>
<div
data-type="push"
data-device="HUEGroup0"
data-background-icon="fa-square"
data-on-color="#cd8500"
data-off-color="#cd8500"
data-background-color="#cd8500"
data-set-on="pct 50"
data-icon="fa-lightbulb-o"
class="normal">
</div>
</li>
<li>
<div
data-type="push"
data-device="HUEGroup0"
data-background-icon="fa-square"
data-off-color="Orange"
data-on-color="Orange"
data-background-color="Orange"
data-set-on="pct 100"
data-icon="fa-lightbulb-o"
class="normal">
</div>
</li>
</ul>
</div>
Zudem sind die push widgets etwas verschoben
Muss das nicht data-off-background-color heißen?
Die runden Boxen gehören zum Circlemenu. Man könnte versuchen, mir der Item Größe zu spielen, um sie kleiner zu bekommen. Oder man sagt: class="noshade" um das Abdunkeln wegzulassen. Dann sieht man den Effekt nicht so sehr. Mit CSS könnte man bestimmt auch noch was drehen. Hatte ich nicht mal Circlemenu Demos mit eckigen Buttons irgendwo... ?
sieht schon deutlich besser aus :)
class noshade hat nur noch den kleinen Teilkreis über dem oberen und unter dem unteren Button als Schöheitsfehler. Die Item Größe bringt nicht viel, da sie vom oberen linken Rand ausgeht...
wenn ich den Kreisdurchmesser anpasse sieht es schon ok aus