Umstellung der Icons auf SVGs

[Apollo]

Und: poste mal nen Screenshot

[Shai]

Screenshot vom aktuellen Update-Stand?
Der schaut so aus:
smartVISU .png


Hatte ja schon gesehen das mein letzter Pull noch nicht die Anpassung von Dir mit dem "basic.symbol" drin hatte, das hat sich dann durch einen weiteren Merge und die Erweiterung meiner Seiten mit Fenstern um "icon1" erledigt.

Ansonsten sieht es inzwischen mit dem Trunk langsam wieder ziemlich brauchbar aus. - Werde aber noch mal ein paar Tage warten bis ich das auf mein Produktiv-System spiele - vermutlich kommen ja noch ein paar Release-Changes dabei.


OT:
Probleme hatte ich noch mit den Plots für "period" und "rtr", hier stand in der "plot.html" jeweils "default('0')" anstelle von "default('now')", bzw. beim "rtr" halt inline beim Item. Das hat dann zusammen mit dem Count-Patch dafür gesorgt das nichts mehr angezeigt wurde - das musste ich dann bei mir lokal wieder patchen. - Sollte das mit dem Count nicht Bestandteil des Releases werden?

[Apollo]

Plot hab ich bereinigt. was meinst du mit "inline beim rtr"?

[Shai]

Meinte die feste 0 ohne "default" (im implode).

Bei mir stand in Zeile 110 noch:

<div id="{{ uid(page, id) }}" data-widget="plot.rtr" data-item="{{ implode([item_actual, item_set, item_state], ['avg', '1d', '0', count|default(100)]) }}" 

Das haste aber auch erwischt

[Shai]

Moin,

ich hab jetzt brauchbare SVGs (in schwarz und weiß) aus den beiden "fts_shutter"-PNGs extrahiert.
Erstes verwende ich zum Ein-/ Ausschalten der automatischen Beschattung und das zweite für die generelle Tag-/Nacht-Automatik

fts_shutter_auto (sw).pngfts_shutter_daynight_auto (sw).png

Falls noch mal jemand Interesse dran hat sind diese nun im ZIP-Anhang zu finden. Müssen nur in den passenden "icons"-Ordner (ws / sw) geschoben werden bzw. die schwarze Version noch korrekt benannt werden.

Grüße,

Lars

[aschwith]

Hallo zusammen,

das Umstellen auf SVGs hat gut funktioniert.

@ Apollo: Könnten wir die "Color" Option auch für den basic.switch ins Release übernehmen? Ich würde gerne an verschiedenen Stellen vom generellen Design der Aktivfarbe abweichen.

Gruß
Alex

/**
* A switch, build of two pics
*
* @param unique id for this widget
* @param a item
* @param the pic for the 'on' state (optional)
* @param the pic for the 'off' state (optional)
* @param value send for the 'on' state (optional, default 1)
* @param value send for the 'off' state (optional, default 0)
* [USER][/USER] param the color 'icon1' or e. g. '#f00' for red (default 'icon1' of the design)
*/
{% macro switch(id, item, pic_on, pic_off, val_on, val_off, color) %}
    {% set uid = uid(page, id) %}

    {% if not pic_on or pic_on|slice(-4, 4) == '.svg' %}
        <span id="{{ uid }}" data-widget="basic.switch" data-item="{{ item }}"
            data-val-on="{{ val_on|default('1') }}" data-val-off="{{ val_off|default('0') }}"
            data-pic-on="{{ pic_on|deficon('control_on_off.svg') }}" data-pic-off="{{ pic_off|deficon('control_on_off.svg') }}"
            class="switch icon">
                <a>
                    <img id="{{ uid }}-off" class="icon" src="{{ pic_off|deficon('control_on_off.svg') }}" />
                    {% if color is empty  %}
                        <img id="{{ uid }}-on" class="icon icon1 hide" src="{{ pic_on|deficon('control_on_off.svg') }}" />
                    {% elseif color == 'icon1' %}
                    <img id="{{ uid }}-on" class="icon icon1 hide" src="{{ pic_on|deficon('control_on_off.svg') }}" />
                    {% else %}
                    <img id="{{ uid }}-on" class="icon icon1 hide" style="stroke:{{ color }}; fill:{{ color }};" src="{{ pic_on|deficon('control_on_off.svg') }}" />
                    {% endif %}
                    
                </a>
        </span>
    {% else %}
        <span id="{{ uid }}" data-widget="basic.switch.v1" data-item="{{ item }}"
            data-val-on="{{ val_on|default('1') }}" data-val-off="{{ val_off|default('0') }}"
            data-pic-on="{{ pic_on|default(icon1~'control_on_off.png') }}" data-pic-off="{{ pic_off|default(icon0~'control_on_off.png') }}"
            class="switch"><a><img class="icon" src="{{ pic_off|default(icon0~'control_on_off.png') }}" /></a>
        </span>
    {% endif %}

{% endmacro %}

[Apollo]

Wäre zu überlegen

[aschwith]

Nice!

[dev0]

@ Apollo: Könnten wir die "Color" Option auch für den basic.switch ins Release übernehmen? Ich würde gerne an verschiedenen Stellen vom generellen Design der Aktivfarbe abweichen.

Dem Feature Request möchte ich mich für basic.dual und device.dimmer (incl. wählbarer Icons) anschliessen. Ich finde diese kleinen Erweiterungen recht praktisch.

/**
* A switch with to states displayed as a button
*
* @param unique id for this widget
* @param a item
* @param the pic for the 'on' state (optional)
* @param the pic for the 'off' state (optional)
* @param value send for the 'on' state (optional, default 1)
* @param value send for the 'off' state (optional, default 0)
* @param type: 'micro', 'mini', 'midi' (optional, default: mini)
* @param color: 'color' for on state e.g. '#f00' for red (optional, default: 'icon1' of design)
*/
{% macro dual(id, item, pic_on, pic_off, val_on, val_off, type, color) %}
    {% set uid = uid(page, id) %}

    <a id="{{ uid(page, id) }}" data-widget="basic.dual" data-item="{{ item }}"
        data-val-on="{{ val_on|default('1') }}" data-val-off="{{ val_off|default('0') }}"
        data-pic-on="{{ pic_on|deficon('control_on_off.svg') }}" data-pic-off="{{ pic_off|deficon('control_on_off.svg') }}"
        class="ui-{{ type|default('mini') }}" data-role="button" data-inline="true" data-iconpos="center">

        <img id="{{ uid }}-off" class="icon" src="{{ pic_off|deficon('control_on_off.svg') }}" />
        {% if color is empty  %}
            <img id="{{ uid }}-on" class="icon icon1 hide" src="{{ pic_on|deficon('control_on_off.svg') }}" />
        {% else %}
            <img id="{{ uid }}-on" class="icon icon1 hide" style="stroke:{{ color }}; fill:{{ color }};" src="{{ pic_on|deficon('control_on_off.svg') }}" />
        {% endif %}
    </a>

{% endmacro %}

/**
* Standard dimmer with switching and dimming function
*
* @param unique id for this widget
* @param name of the dimmer
* @param a item for switching
* @param a item for dimming
* @param the minimum value if the slider is moved to total left (optional, default 0)
* @param the maximum value if the slider is moved to total right (optional, default 255)
* @param step between two values (optional, default 5)
* @param pic_on: icon for on state (optional, default: light_light.svg)
* @param pic_off: icon for off state (optional, default: light_light.svg)
* @param color: 'color' for pic_on e.g. '#f00' for red (optional, default: 'icon1' of design)
*/
{% macro dimmer(id, txt, item_switch, item_value, min, max, step, pic_on, pic_off, color) %}
    {% import "basic.html" as basic %}

    <div class="dimmer">
        {{ basic.switch(id~'switch', item_switch, pic_on|default('light_light.svg'), pic_off|default('light_light.svg'), '', '', color) }}
        <p>{{ txt|e }}</p>
        {{ basic.slider(id~'slider', item_value, min, max, step) }}
    </div>

{% endmacro %}

/Uli

[DerSeppel]

Hm ... hat noch jemand den Effekt, dass der basic.switch mit PNGs nicht mehr funktioniert? Es wird keine Aktion ausgelöst. PNGs sind da und werden angezeigt. Es tut sich nur nichts beim click. Sobald ich die svg nehme geht es.

[DerSeppel]

Hab nochmal versucht das einzugrenzen. Es scheint wirklich an den PNGs zu liegen.
Sobald ich einen basic.switch mit PNG anlege, funktioniert der switch nicht. Erst wenn SVGs referenziert sind.

Ich habe mal den Patch von aschwith übernommen. Leider wird die Farbe nicht im SVG übernommen. Auch wenn ich per Chrome Debugger hart ein style="stroke: #f00" dran hänge.

[Onkelandy]

Bei mir klappt das mit dem Ändern der Farbe der SVGs leider auch gar nicht.. angeblich muss das img ja in ein svg Element umgewandelt werden, damit das funktioniert.... keine Ahnung woran es sonst liegen könnte. Hatte die gleichen Versuche wie Seppel mit dem aktuellsten Download von Github.

Mit dem Quad Design hab ich leider auch noch einen Haufen Probleme.. vorerst bleib ich dann wohl auf 2.7

[whe]

Gibt es eine neue Doku, vor allem zu den geänderten Widgets.
habe jetzt auch mal eine smatvisu28 parallel zur 2.7 aufgesetzt und angefangen die Pages anzupassen.
die plots fehlen überwiegend, da suche ich noch nach der Ursache. ( temprose geht z.B.)

[ivande]

Hallo,
weiss jemand wie ich die .svg im Menu umstelle? Bei aktiver Index-Seite sollte das Iocon Farbig dargestellt sein,..

<div id="menu" class="menu">

<a id="menu-rooms" data-ajax="false" href="index.php">
        <img class="icon" src="{{ page == 'index' ? icon1 : icon0 }}control_building_empty.svg"/></a>

Gruß Ivan

[kex]

Sollte so funktionieren

<img class="icon {{ page == 'index' ? 'icon0' : 'icon1' }}" src="{{ pic|deficon('scene_dinner.svg') }}" />