circlemenu - Farbe und Form der push Widgets ändern

[dt2510]

Im unteren Beispiel ändere ich die Helligkeit einer HUEGroup in eine von 4 vorgegebenen Stufen. Die push Widgets sind folgendermaßen definiert:

Code Auswählen Erweitern

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

[dt2510]

hmm ... hat niemand eine Idee ?

[setstate]

Entsprechend background Icon und background Color ändern, sollte helfen

Müsste man ausprobieren ... (Habe ich bestimmt bis heute Abend wieder vergessen )

[dt2510]

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:

Code Auswählen Erweitern

            <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

[setstate]

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

[dt2510]

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

[dt2510]

wenn ich den Kreisdurchmesser anpasse sieht es schon ok aus