SVG's werden in Minimalgröße dargestellt

[Tom Bombadil]

Hallo Wolfram,

hat sich jüngst am Default-CSS entweder von basic.symbol oder von SVG's etwas geändert? Habe heute aktualisiert (Neuinstallation, wie immer) - soweit ich sehen kann, läuft alles, bis auf eine unschöne Sache, die sich unmittelbar auf Größe und/oder Viewport meiner eingebetteten SVG's auswirkt (so ganz bin ich noch nicht dahintergekommen, wo das herkommen könnte):

image.png

image.png

Der Code dazu (auf die relevanten Teile gekürzt):

<style type="text/css">

    @font-face {
        font-family: LCD1;
        src: url('pages/Rene/fonts/DS-DIGI.TTF');
    }
    
    #heizung_hydraulikschema {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    div#heizung_hydraulikschema img.icon {
        width: 100%;
        height:100%;
        text-align: center;
    }
    
    .heizung_hydraulikschema_popup {
        display: block;
        overflow: hidden;
        text-align:center;
        font-size: x-large;
        font-weight: bold;
        background-color: black;
        height:auto;
        width:auto;
    }

    .heizung_hydraulikschema_popup_header {
        float:center;
        height:1.6em;
        padding-top:0.3em;
        border-radius: 10px 10px 0 0;
    }

</style>

<div id="heizung_hydraulikschema">

    /** Hydraulikschema mit eingefärbter Anzeige **/
    <a href="#heizung_hydraulikschema_popup" data-rel="popup">
        {{ basic.symbol('', 'heizung.status', '',
            ['pages/Rene/pics/heizung/aus.svg',
             'pages/Rene/pics/heizung/heizbetrieb.svg',
             'pages/Rene/pics/heizung/warmwasser.svg'],
            [1,2,3])
        }}
    </a>
    
</div>

Auch im Popup, das das Hydraulikschema in groß mit einigen zusätzlichen Beschriftungen darstellt, wird das SVG im "MickyMausModus" dargestellt.

Irgendeine Idee?

/tom

[wvhn]

Moin Tom, Tom Bombadil

in der v3.3 hatte sich das icon embedding komplett geändert. Ziel war, grundsätzlich alle icons dynamisch per CSS veränderbar zu machen. Dazu werden sie automatisch direkt in den html-Code integriert und das img Element wird durch svg ersetzt. Deshalb sollte es eigentlich in den Widgets keine img.icon mehr geben, sondern nur noch svg.icon

Probiere mal, in Deiner CSS das „img.icon“ durch „svg.icon“ zu ersetzen.

Für Fälle, in denen das nicht hilft, habe ich die „noembed“-Option eingebaut. In der Doku steht dazu:

- to avoid SVG embedding, use full filename with path and extension and add "/ne" at the end, e.g. "dropins/icons/ws/myicon.svg/ne"

Gruß
Wolfram

[Tom Bombadil]

Hallo Wolfram,

danke für die schnelle Hilfestellung! Alles wieder schick. Zum Glück ist das Bild vom Regler aus lauter Einzelobjekten im PNG-Format zusammengesetzt (Hintergrund und Bedienknöpfe inkl. deren Stellung sind separate PNG-Bilder), daher wurde der Regler normal dargestellt und nur die Hydraulik darüber verkleinert angezeigt - was ein Problem mit den SVG's nahegelegt hat. Wäre der Regler auch aus SVG's zusammengesetzt, hätte ich mir vermutlich einen Wolf gesucht.

Beobachtungen:

• /ne an den SVG-Pfad hinten anfügen ist die Lösung (zumindest in meinem Fall; vielleicht sollte man in die Doku noch an separater Stelle einen Hinweis zur Verwendung von eigenen SVG's aufnehmen),
• img.icon durch svg.icon zu ersetzen liefert zwar die korrekte Größe, wirkt sich aber auf die Objekte innerhalb des SVG's aus (siehe Screenshot),
• die Kombination der Umstellung auf svg.icon und /ne am Pfad lieferte das Bild unverändert in klein (klingt komisch und kann mir keinen Reim drauf machen, war aber so).

image.png

Einziger Wermutstropfen dieser Lösung ist, dass die Git-Kopie meiner Seite nun nur noch für sV-Versionen ab 3.3 gültig sein wird, aber dieses Git wird eh nur von Neueinsteigern mit Samson-Reglern benutzt, die vermutlich ohnehin die neueste sV verwenden werden.

Danke nochmal, 3.4.0 geht jetzt bei mir 'live'.

/tom

[wvhn]

Tom Bombadil
Moin Tom,

danke für die Beobachtungen. Hier eine kurze Erklärung:

• /ne sorgt dafür, dass das icon weiterhin mit <img src="..."> im html-DOM steht. Dadurch bleiben alle Eigenschaften innerhalb des SVG erhalten, aber SV kann dieses nicht mit Klassen einfärben. Diese Option ist besonders dann zu empfehlen, wenn innerhalb des SVG feste Farben, Schriften, weitere Objekte oder Filter vorgegeben werden bzw. die icons nicht speziell für smartVISU aufbereitet wurden. Hieran scheitert die korrekte Darstellung im letzten Bild.
• mit der Option /ne brauchst Du weiterhin die CSS-Definition img.icon, um das img-Element im DOM zu erreichen. svg.icon läuft dann ins Leere. Deshalb wird die Darstellung wieder so klein.

Die Zusammenhänge sind im Wiki erläutert. Doku schaue ich mir nochmal an.

Wenn Du die volle Kompatibilität der Git-Kopie Deiner Seite über alle sV-Versionen erhalten willst, kannst Du die SVG-Einbettung versionsabhängig abschalten:

<div id="heizung_hydraulikschema">
{% set extension = config_version_full >= "3.2.c" ? ".svg/ne" : ".svg" %}
    /** Hydraulikschema mit eingefärbter Anzeige **/
    <a href="#heizung_hydraulikschema_popup" data-rel="popup">
        {{ basic.symbol('', 'heizung.status', '',
            ['pages/Rene/pics/heizung/aus'~extension,
             'pages/Rene/pics/heizung/heizbetrieb'~extension,
             'pages/Rene/pics/heizung/warmwasser'~extension],
            [1,2,3])
        }}
    </a>
    
</div>

Am besten erledigst Du dabei auch gleich den versionsabhängigen Import von Widgets (falls nicht schon geschehen). Das fällt dem Anwender der aktuellen develop-Version sonst auf die Füße. Beispiel:

{% import config_version_full >= "3.2.c" ? "@widgets/basic.html" : "basic.html" as basic %}

Gruß
Wolfram

[Tom Bombadil]

Moin Wolfram,

danke! Das mit der dynamischen Extension ist eine gute Idee, baue ich ein. Die Widget-import-Geschichte betrifft bei mir lib, weather, phone, calendar sowie mein eigenes Helios-KWL-Widget; das hatte ich vorher schon mal schnell erledigt. Die Samson-Visualisierung war zwar mal als Widget geplant, ist aber bisher plain HTML auf einer eigenen Seite.

Hintergrund: Die ganze Seite war mal als reiner 'Proof-of-Concept' gedacht und ist damals von mir zusammengefrickelt worden, um eine sinnvolle Anzeige der Trovis zu ermöglichen. Dass man die Bedienknöpfe dynamisch nach tatsächlichem 'Drehwert' anzeigen kann, dass da eine Heizkurve reinkommt, dass das ganze komplett interaktiv gestaltet werden kann usw wusste ich am Anfang noch gar nicht. Getreu dem Motto 'mal sehen, wo die Reise hingeht' wurde das HTML Stück um Stück ergänzt. Irgendwann gab's nen Geistesblitz, und ich habe auf Basis eines Fotos den Regler und die einzelnen Knöpfe in CorelDraw/Photoshop nachgezeichnet und als dynamische Anzeige eingebaut. Die Überführung in ein Widget war zwar mal geplant, aber nie realisiert (sind einfach zu wenig Leute, die das brauchen können); auch müsste man dafür mal sauber CSS/HTML trennen, alles ein bisschen aufräumen und noch ein paar zusätzliche {% set variable = wert %} für die Lesbarkeit am Anfang einbauen, z.B. für die ellenlangen Dateinamen. Ich gebe zu - dafür war ich bis jetzt zu faul, läuft doch; Provisorien halten halt am längsten.

/tom