Quad Design stellt einige Symbole nach Update auf 3.3.1 sehr groß dar

[Bit-te]

Hallo an Alle,

Ich habe am Wochenende meine Smarthome/Smartvisu Installation auf das Image 1.9.5 mit Smartvisu 3.3.1 neu aufgesetzt.

Es funktioniert auch alles, aber einige Symbole werden übergroß dargestelt. Das war auf der alten Version von Smartvisu noch nicht so. Die genaue Version weiß ich nicht mehr. Glaube aber ne 2.9.x

Gibt es eine Möglichkeit die Symbole kleiner darzustellen? Ich nutze diese um offene Fenster oder Tore etc. Darzustellen.

Vielen Dank schonmal.

Gruß Wolfgang

[Bit-te]

Beim Licht ist es genau so

[wvhn]

Schau mal, ob in der visu.css im Ordner deiner eigenen Seiten Definitionen sind, die das verursachen.
Wenn nicht, poste mal den Code mit den Widgetaufrufen für die gezeigten Beispiele.

Welches Mobilgerät hast Du für die Beispiele verwendet und hast Du da den Browser-Cache gelöscht?

Gruß
Wolfram

[Bit-te]

Hallo,
meine Visu.css sieht so aus und ist vom Datum her aus 2020:

#licht_kurven-warm .highcharts-root .g.highcharts-series { /* graph */
stroke: rgba(255, 50, 54, 1);
stroke-width: 1px;
}

#licht_kurven-kalt .highcharts-root .g.highcharts-series { /* graph */
stroke: rgba(50, 50, 255, 1);
stroke-width: 1px;
}

#licht_kurven-standard .highcharts-root .g.highcharts-series { /* graph */
stroke: rgba(250, 50, 255, 1);
stroke-width: 1px;
}

#row_licht_og-licht_og_wohnen_warm, #row_licht_og-licht_og_essen_warm, #row_licht_og-licht_og_lesen_warm, #row_licht_og-licht_og_terrasse_screens_warm, #row_licht_treppe-licht_treppe_regal_rechts_warm_sa {
background-color: #DEB887;
}

#row_licht_og-licht_og_wohnen_kalt, #row_licht_og-licht_og_essen_kalt, #row_licht_og-licht_og_lesen_kalt, #row_licht_og-licht_og_terrasse_screens_kalt, #row_licht_treppe-licht_treppe_regal_rechts_kalt_sa {
background-color: #6495ED;
}

#row_licht_og-licht_og_led_barfach, #row_licht_og-licht_og_led_nische, #row_licht_og-licht_og_led_vorhang, #row_licht_og-licht_og_led_beamer {
background: -webkit-linear-gradient(left, #bb98aa, #a2aaa2, #a8b2bb); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #bb98aa, #a2aaa2, #a8b2bb); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #bb98aa, #a2aaa2, #a8b2bb); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #bb98aa, #a2aaa2, #a8b2bb); /* Standard syntax */
}

Hier der Aufruf.

/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Onkel Andy
* @copyright 2020
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/

{% extends "quad_root.html" %}

{% block content %}

/**KACHELN*/
<ul data-role="listview" data-dividertheme="c" class="quad_tiles">


/**LICHT*************/
<li data-icon="false">
<a href="index.php?page=licht">
<img class="icon" src="{{ icon0 }}light_light.svg"/><h3>Licht</h3>
<div class="ui-ri-aside">
{{ basic.symbol('', 'Zentral.Zentral_Befehle.Alles_aus.Status', '', 'light_light_dim_100.svg', '', '', 'icon0') }}
</div>
</a>
</li>

/**Rollos***************/
<li data-icon="false">
<a href="index.php?page=rollos">
<img class="icon" src="{{ icon0 }}fts_shutter_50.svg"/><h3>Rollos</h3>
<div class="ui-ri-aside">
{{ basic.symbol('', 'Zentral.Zentral_Befehle.Rollo_zentral.Status_dpt_ 1', '', 'fts_shutter_10.svg', '', '', 'icon0') }}
</div>
</a>
</li>

/**Bad*************/
<li data-icon="false">
<a href="index.php?page=eg.bad">
<img class="icon" src="{{ icon0 }}scene_shower.svg"/><h3>Bad</h3>
<div class="ui-ri-aside">
{{ basic.symbol('', 'Erdgeschoss.Bad_neu.Fensterstatus.Status', '', 'fts_window_2w_tilt_lr.svg', '', '', 'icon0') }}
{{ basic.print('', 'Temperaturen.temperaturen.Temperatur_Bad_neu', 'temp') }}
</div>
</a>
</li>

Die Screenshots waren von einem Android 14 Gerät mit Chrome Browser. Am PC mit Edge oder Chrome werden die Symbole aber auch so groß Dargestellt.

Danke für deine Hilfe
Gruß
Wolfgang

[wvhn]

Moin Wolfgang,

im Beispiel example4.quad sind die basic.symbol widgets vor und außerhalb von den <div class='ui-ri-aside'>. Das könntest Du auch mal probieren.

Alternativ in der visu.css noch folgendes aufnehmen:

/**
* workaround for small side icons on tiles in v3.3 and v3.4
*/
.quad_tiles .ui-ri-aside svg.icon {
    height: 24px;
    width: 24px;​

Ich konnte das jetzt nicht testen. Hoffe, es ist dennoch eine richtige Lösung dabei.

Gruß
Wolfram

[wvhn]

Moin Wolfgang,

jetzt konnte ich das doch testen. Die erste angebotene Lösung funktioniert nicht, aber so sieht es mit der CSS-Änderung aus:
image.png

Hintergrund: Das SVG wird ab v3.3 direkt in den html-Code eingebettet, damit es über CSS-Klassen verändert werden kann. Deshalb gibt es kein Element mit dem Selektor "img.icon" mehr an dieser Stelle.

Wenn das das gewünschte Ergebnis ist, nehme ich die Ergänzung der CSS-Definition in den develop branch.

Gruß
Wolfram

[Bit-te]

Hallo,.
vielen vielen Dank.

Jetzt siehts wieder gut aus.

Gruß Wolfgang