device.dimmer mit Button Option

[schuma]

wvhn
Können wir den Dimmer noch um eine Option erweitern, so das man das Einschaltsymbol auch als Button darstellen kann?
Mein Vorschlag:

/**
* Standard dimmer with switching and dimming function
*
* @param {id=} unique id for this widget (optional)
* @param {text=} name of the dimmer
* @param {item(bool,num)} an item for switching
* @param {item(num)} an item for dimming
* @param {value=0} the minimum value if the slider is moved to total left (optional, default: 0)
* @param {value=255} the maximum value if the slider is moved to total right (optional, default: 255)
* @param {value=5} step between two values (optional, default: 5)
* @param {image=light_light} the pic for the 'on' state (optional)
* @param {image=light_light} the pic for the 'off' state (optional)
* @param {color(icon0to5)=icon1} the color for the 'on' state (optional)
* @param {color(icon0to5)=icon0} the color for the 'off' state (optional)
* @param {text(input,handle,both,none)=none} how should the value be shown; possible options: 'input', 'handle', 'both', 'none' (optional, default 'none')
* @param {value=} the minimum value to display if the slider is moved to total left if this should differ from sent/received value (optional, default like min)
* @param {value=} the maximum value to display if the slider is moved to total right if this should differ from sent/received value (optional, default like max)
* @param {text(left,right)=left} position of the switch: left (default) or right
* @param {value=1} 'live mode': if enabled, values will be sent during sliding. '0' sends values only when sliding is stopped, after click into track or if value is edited in input field. (optional, default = 1)
* @param {value='micro', 'mini', 'midi', 'icon'} 'type': (optional, default = ‚icon‘)
*/

{% macro dimmer(id, txt, item_switch, item_value, min, max, step, pic_on, pic_off, color_on, color_off, value_display, min_display, max_display, picpos, live, type) %}
    {% import "@widgets/basic.html" as basic %}

        {% if picpos is empty or picpos=='left' %}<div class="dimmer-left" {% else %} <div class="dimmer-right" {% endif %}
        data-widget="device.dimmer"{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %}>
            {{ basic.stateswitch('', item_switch, [type|default('icon')​], '', [ pic_off|default('light_light.svg'), pic_on|default('light_light.svg') ], '', [ color_off , color_on|default('icon1') ]) }}
            <p>{{ txt|e }}</p>
            {{ basic.slider('', item_value, min, max, step, 'horizontal', value_display|default('none'), min_display, max_display, live) }}
        </div>
{% endmacro %}​

Nur wird der Button dann nicht mehr neben dem Slider dargestellt…

Grüße, Marc

[wvhn]

Hallo Marc,

der Code passt schon so. Allerdings müssen die CSS-Definitionen noch erweitert werden.

In der ./pages/base/base.css stehen irgendwo um die Zeile 1275 Definitionen für ".dimmer-left .switch" und ".dimmer-right .switch". Wenn Du diese Abschnitte in Deine visu.css kopierst und dort jeweils ".switch" durch die Klasse für Deine Button-Größe ersetzt, dann passt es. Beispiel:

.dimmer-left .ui-mini {
  float: left;
  padding-left: 0;
  margin-right: 12px;
}​

Ich übernehme das in den nächsten Tagen in den develop branch.

Gruß
Wolfram

[schuma]

Hallo Wolfram, gerade getestet und das funktioniert soweit.
Vielen Dank schon einmal für die Änderung.
Der Button wird aber wohl oben ausgerichtet, was optisch nicht ganz so schön ist. Oder ich hab schon einen Knick in der Optik;-)
image.png
Können wir das auch in der Höhe in die Mitte schieben (Center)?

Grüße, Marc

[wvhn]

Die Höhe des Blocks wird durch die Beschriftung und den Slider definiert. Zu diesem
Maß richtet sich der Button vertikal mittig aus. Wenn Du den Button mittig zum Slider anzeigen möchtest, kannst Du das mit einem zusätzlichen „margin-top: 10px“ erreichen. Die dabei anzugebende Anzahl px ist von der Button-Größe abhängig und davon, ob eine Beschriftung festgelegt ist. Diese Anpassung muss dann weiterhin in der visu.css gemacht werden, da sich dies vermutlich nicht allgemeingültig lösen lässt.

Alternativ kannst Du die Beschriftung im Widget weglassen und diese separat im html-Body angeben. Dabei dürfte aber die genaue Platzierung etwas fummelig werden.

Gruß
Wolfram

[schuma]

Ok, ich teste damit mal etwas rum…
Vielen Dank, Marc

[wvhn]

Die Erweiterung ist jetzt im develop branch verfügbar. Dabei habe ich auch die vertikale Zentrierung angepasst. Wenn ein Text vorhanden ist, wird der Button zu Text und Slider zentriert. Ist kein Text vorhanden, wird der Button zum Slider zentriert.

Hier die Varianten von oben nach unten: 'icon', 'midi', 'mini', 'micro' jeweils rechts/links mit Text und links ohne Text:

grafik.png

Gruß
Wolfram

[schuma]

Perfekt! Vielen Dank!

[schuma]

wvhn Wolfram, eine Sache ist mir jetzt noch aufgefallen….
Die Beschriftung (hier Wandlampen) hat nun eine andere Schriftart ist kleiner und könnte etwas nach unten geschoben werden. Im Gegensatz zu vorher.

Edit: Die Schriftart ist wohl die selbe wie vorher nur kleiner.

Ist das so absicht, oder ist hier was verrutscht?

IMG_5950.jpg

[wvhn]

Danke für den Hinweis. Da spuckt eine globale Definition von jQuery mobile dazwischen, die ich nicht auf dem Schirm hatte.
Die Änderung mache ich morgen.

Gruß
Wolfram

[wvhn]

Der Fix ist jetzt im develop branch.

Leider ist der Text des Dimmers mittig angeordnet, wenn der Dimmer innerhalb eines Blocks verwendet wird, aber ohne Block erscheint der Text links. Das ist schon "immer" so und ich kann das nicht ändern, ohne vielen Anwendern ihr Layout zu zerschießen. Falls Du den Text links angeordnet haben möchtest, kannst Du dies in der visu.css mit folgendem Code erreichen:

.block .dimmer-left p {
    text-align: left;
}

EDIT: Sorry. Du verwendest den Dimmer mit dem Schalter rechts. Dann heißt der Selektor „.block .dimmer-right p“.

Gruß
Wolfram

[schuma]

OK, vielen Dank für den Fix.
Habe ich gerade getestet, und ist eigentlich perfekt...

Den CSS Teil für den Text rechts/links könnte man doch mit in die Doku nehmen oder?

Grüße, Marc

[wvhn]