Umstellung der Icons auf SVGs

[ivande]

Danke!! Funktioniert :-)
'icon0' : 'icon1' waren vertauscht..

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

[kex]

OK... habs ausprobiert, so klappts doch nicht, aber damit sollte es gehen:

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

[loeserman]

Hallo zusammen,
ich habe auch auf die v2.8 umgestellt und nutze die svg Dateien. Das klappt auch sehr gut. Allerdings habe ich festgestellt, dass sich die icons zwischen aktiv und inaktiv leicht nach unten verschieben. Das ist in meinem Design leider nicht sehr schön und war bei den png Icons davor nicht der Fall. Daher wollte ich mal fragen, ob ich vielleicht etwas falsch mache. Anbei mal zwei Bilder die es verdeutlichen sollen.

Links die inaktiven Icons und rechts die aktiven. Im zweiten Bild habe ich mal versucht mit ein paar Linien zu verdeutlichen, was ich meine. Bei der Steckdose ist das nicht so schlimm, aber der Kompressor zum Beispiel verschiebt mir sogar den Text, den ich darunter geschrieben habe und vergrößert die Zeile um ein paar Pixel.

verschiebung_übersicht.jpg

verschiebung_detail.jpg


Das sind die Codezeilen zu den Bildern

{{ basic.symbol(uid~'icon_on', 'R03.STECKDOSE.KOMPRESSOR', '', 'sani_domestic_waterworks.svg', 1, '', 'icon1') }}
{{ basic.symbol(uid~'icon_off', 'R03.STECKDOSE.KOMPRESSOR', '', 'sani_domestic_waterworks.svg', 0) }}
<br>
{{ basic.text(uid~'text', 'R03.STECKDOSE.KOMPRESSOR', 'An', 'Aus') }}
<br>
Kompressor

...

{{ basic.switch('uid1410072054_r16_overview4a', 'R16.STECKDOSE.GLASSCHRANK', 'message_socket.svg', 'message_socket.svg', 1, 0) }}
<br>
{{ basic.text('uid1410072054_r16_overview4b', 'R16.STECKDOSE.GLASSCHRANK', 'An', 'Aus') }}
<br>
Glasschrank

Vielleicht mache ich ja einen Fehler. Tritt das bei anderen nicht auf?

Vielen Dank

Mit freundlichen Grüßen
loeserman

[ivande]

Hallo loeserman,

versuch doch mal für die beiden Zustände 0 und 1 den gleichen Text zu verwenden. (statt An und Aus - An und An) um zu testen ob nicht der Text der Verursacher der Verschiebung ist.
Gruß Ivan

[loeserman]

Hi zusammen,
ja mit dem gleichen Text habe ich es auch probiert. Aber leider der gleiche Effekt. Ich verstehe nicht, wo das Problem liegt, da es eigentlich alles richtig aussieht. Duch das "hide" müsste ja der ganze <span> Tag versteckt werden.

Nun habe ich mir ein Symbol mit zwei Zuständen gebaut und damit funktioniert es. Es verschiebt sich zwar immer noch ein Stück, wie bei der Steckdose auch, aber der Text bleibt an der gleichen Stelle. Damit komme ich erstmal zurecht. Wobei die Frage bleibt, warum das "hide" diese Verschiebung verursacht.

Hier meine Lösung. Sie ist so ein Zwitter aus basic.symbol und basic.switch:

Code des eigenen Widgets in der widget_my.html

/**
* A symbol display with two icons, selectable color
*
* @param unique id for this widget
* @param a item
* @param the pic for the 'on' state (optional, default control_on_off.svg)
* @param the pic for the 'off' state (optional, default control_on_off.svg)
* @param value for the 'on' state (optional, default 1)
* @param value for the 'off' state (optional, default 0)
* @param the color  for the 'on' state 'icon0' or e. g. '#f00' for red (default 'icon1' of the design)
* @param the color  for the 'off' state 'icon1' or e. g. '#f00' for red (default 'icon0' of the design)
*/
{% macro lsymbol(id, item, pic_on, pic_off, val_on, val_off, color_on, color_off) %}
    {% set uid = uid(page, id) %}

    <span id="{{ uid }}" data-widget="basic.lsymbol" 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">
        {% if color_off is empty  %}
            <img id="{{ uid }}-off" class="icon" src="{{ pic_off|deficon('control_on_off.svg') }}" />
        {% elseif color_off == 'icon1' %}
            <img id="{{ uid }}-off" class="icon icon1" src="{{ pic_off|deficon('control_on_off.svg') }}" />
        {% else %}
            <img id="{{ uid }}-off" class="icon icon1" style="stroke:{{ color_off }}; fill:{{ color_off }};"  src="{{ pic_off|deficon('control_on_off.svg') }}" />
        {% endif %}
        {% if color_on is empty  %}
            <img id="{{ uid }}-on" class="icon icon1 hide" src="{{ pic_on|deficon('control_on_off.svg') }}" />
        {% elseif color_on == 'icon0' %}
            <img id="{{ uid }}-on" class="icon hide" src="{{ pic_on|deficon('control_on_off.svg') }}" />
        {% else %}
            <img id="{{ uid }}-on" class="icon icon1 hide" style="stroke:{{ color_on }}; fill:{{ color_on }};"  src="{{ pic_on|deficon('control_on_off.svg') }}" />
        {% endif %}
    </span>

{% endmacro %}

Zugehöriger Code in der eigenen visu.js

$(document).delegate('span[data-widget="basic.lsymbol"]', {
    'update': function (event, response) {
        $(this).val(response);
        $(this).trigger('draw');
    },
    
    'draw': function(event) {
        if($(this).val() == $(this).attr('data-val-on')) {
            $('#' + this.id + '-off').hide();
            $('#' + this.id + '-on').show();
        }
        else {
            $('#' + this.id + '-on').hide();
            $('#' + this.id + '-off').show();
        }    
    },
});

Anschließend kann es wie bekannt aufgrufen werden:
Standard

{{ widget_my.lsymbol('test', 'R92.WASSER.FREIGABE', 'sani_water_tap.svg', 'sani_water_tap.svg') }}

Invertiert (Möglichkeit 1)

{{ widget_my.lsymbol('test4', 'R92.WASSER.FREIGABE', 'sani_water_tap.svg', 'sani_water_tap.svg', 0, 1) }}

Invertiert (Möglichkeit 2)

{{ widget_my.lsymbol('test3', 'R92.WASSER.FREIGABE', 'sani_water_tap.svg', 'sani_water_tap.svg',1,0,'icon0','icon1') }}

Mit frei definierten Farben (bei 1:rot und bei 0:grün)

{{ widget_my.lsymbol('test2', 'R92.WASSER.FREIGABE', 'sani_water_tap.svg', 'sani_water_tap.svg',1,0,'#ff0000','#00ff00') }}

Vielleicht hilft es ja dem ein oder anderen.

Schöne Grüße
loeserman

[cmalo]

Hallo,

ich stelle die Visu(master branch) auch auf .svg um und habe zur Zeit ein Problem mit basic.switch.

Meine Einträge in der Seite sehen so aus.

{{ basic.switch('oggastlicht', 'og.gast.licht', 'light_ceiling_light.svg', 'light_ceiling_light.svg') }}

Damit wird das Symbol richtig angezeigt, aber sobald ich das Licht über die Visu einschalte, was auch funktioniert, ändert sich die Farbe nicht und was schlimmer ist, ich kann die Licht nicht mehr über einen erneuten Klick ausschalten.

Was aber funktioniert ist:

{{ basic.switch('oggastlicht', 'og.gast.licht', 'light_ceiling_light.svg') }}

Dabei wechselt das Icon auf das Dafault-Icon aber nicht die Farbe, ein- und auschalten geht dafür.

Hat jemand nen Tipp für mich?

Danke und Grüße
Christian

[aschwith]

Auch dafür gibt es schon einen Pull Request, der es leider noch nicht in das Smartvisu Repository geschafft hat:
https://github.com/Martin-Gleiss/sma.../pull/55/files

Gruß
Alex

[Onkelandy]

In Zeile 372 des basic widget pull requests fehlt aber wohl noch ein "o"..

[COLOR=#333333][FONT=Consolas][SIZE=12px]if color_ff is empty[/SIZE][/FONT][/COLOR]

Alle Widgets und svgs umzustellen ist schon sehr mühsam by the way, ich spar mir das vorerst.

[JanT]

Hallo Onkelandy,

Alle Widgets und svgs umzustellen ist schon sehr mühsam by the way, ich spar mir das vorerst.

Kann ich verstehen - ich habe eine gefühlte Ewigkeit dafür gebraucht. Leider bringt es an Ladegeschwindigkeit nichts - eher im Gegenteil. der Flaschenhals liegt in den Clients bei der Verarbeitung der Javascripts und Rendern, bei mir schlägt das mit mehr als 90% der Ladezeit zur Buche. Mit Core 2 Duo 3.0GHz als Backend und iPad Air als Client liege ich bei 8 Sekunden Ladezeit. Erst ab i7 als Client gehts Flott - leider habe davon keinen an der Wand hängen...

Viele Grüße,

Jan

[Tom Bombadil]

Hallo Jan,

kann ich bestätigen - ich nehme an, Cache ist bei Dir auch deaktiviert, da Produktiv- und Entwicklungsplattform gleich sind? Die Ladezeiten sind hier ähnlich. Wobei ich mich frage, was mehr Rechenleistung verbrät - das doch recht komplexe JS oder das Rendering. Das Interpretieren von SVG oder das Skalieren von PNG sollten aber nach meinem (laienhaften) Verständnis beim Rendering von den paar Icons nicht wirklich einen Unterschied machen ...

/tom

[aschwith]

Besten Dank @Onkelandy. Habe gerade das "Color_ff" im entsprechenden Pull-Request gefixt.

Gruß
Alex

[awknx]

Ich frag jetzt auch mal ganz blöd, wo ich die css o.ä. anpassen muss. Ich bau ja grad meine Visu erst auf. Dort sehe ich das normale Icon, beim Klick findet er aber das andere dann nicht (kann er auch nicht, wenn ich mir den Pfad im Quelltext anschaue:

            <div data-role="collapsible" data-collapsed="false">
                <h3>Beleuchtung</h3>
                <p>{{ basic.switch('Kueche_Leuchten_Deckenspot', 'Kueche.Leuchten.Deckenspot', icon1~'light_light.svg', icon0~'light_light.svg') }} Deckenspot</p>
            </div>

Im erzeugten Quelltext siehts dann so aus:

<div data-role="collapsible" data-collapsed="false">
    <h3>Beleuchtung</h3>
    <p>    
        <span id="raum_kueche-Kueche_Leuchten_Deckenspot" data-widget="basic.switch" data-item="Kueche.Leuchten.Deckenspot" data-val-on="1" data-val-off="0" data-pic-on="icons/bl/light_light.svg" data-pic-off="icons/sw/light_light.svg"    class="switch icon">
            <a>
                <img id="raum_kueche-Kueche_Leuchten_Deckenspot-off" class="icon" src="icons/sw/light_light.svg" />
                <img id="raum_kueche-Kueche_Leuchten_Deckenspot-on" class="icon icon1 hide" src="icons/bl/light_light.svg" />
            </a>
        </span>
        Deckenspot
    </p>
</div>

Oder bin ich da jetzt einfach zu früh dran (v 2.8)? Und noch eine Frage - könnte ich das Ganze auch umstellen, dass die html-Endungen stattdessen php-Endungen sind oder ist das ein größerer Aufwand?

Danke und viele Grüße
Andi

[awknx]

Jetzt habe ich rausbekommen, wo das Problem mit den farbigen svg entsteht - in der index.php (im smartVisu root) steht noch drin:

    if (config_design == 'ice')
    {
        $twig->addGlobal('icon1', 'icons/[COLOR=#FF0000]bl[/COLOR]/');
        $twig->addGlobal('icon0', 'icons/sw/');
    }
...

und müsste m.E. lauten:

    if (config_design == 'ice')
    {
        $twig->addGlobal('icon1', 'icons/[COLOR=#FF0000]sw[/COLOR]/');
        $twig->addGlobal('icon0', 'icons/sw/');
    }

Zumindest läufts dann bei mir richtig. Gilt dann auch für die anderen Designs.