Smartvisu icon große ändern (basic.symbol)

[Nic0205]

Hallo zusammen,

ich bin noch ganz frisch in der Welt von Smartvisu und habe folgende Herausforderung für die ich keine Lösung finde:

Ich möchte gerne den Status eines Fensters optisch darstellen. Dazu nutze ich das basic.symbol widget.
Das funktioniert auch super, allerdings ist das symbol sehr klein. Gibt es irgendwie eine Möglichkeit, dass ich die angezeigte Größe verändere?

So sieht mein Code aus:

Code Auswählen Erweitern


<p>  {{ basic.symbol('s2', 'fenster_kueche.STATE', 'auf', icon0~'fts_window_1w_open.png') }}
                                  {{ basic.symbol('s3', 'fenster_kueche.STATE', 'zu', icon1~'fts_window_1w.png', 0) }} </p>


Kann mir jemand von Euch helfen?

Grüße
Dominic

[dev0]

Das basic.symbol Widget kennt von Haus aus nur eine Größe. Du kannst die Größe aber über CSS verändern.

Code Auswählen Erweitern


#png
span#widget_basic_symbol-<DEINE-ID>.symbol.hide img.icon {
    height: 100px;
    width: 100px;
}

#svg
span#widget_basic_symbol-<DEINE-ID>.symbol.hide svg.fx-icon.icon1  {
    height: 100px;
    width: 100px;
}


Den CSS Pfad zu dem Symbol kannst Du mit Tools wie z.B. Firebug erkennen.

[Nic0205]

Vielen Dank für die schnelle Antwort.

Ich glaube ich bin einfach zu doof Ich bekomme die Datei, in der ich die CSS Anweisungen ändern kann einfach nicht
raus gefunden. in der normalen visu.css ist das ja nicht und ein

Code Auswählen Erweitern

sudo grep -r 'span#' ./ hat mir im smartvisu Verzeichnis nichts ausgeworfen.

Hast Du noch ein paar Infos für mich?

[dev0]

visu.css in deinem Projektordner selbst anlegen (wenn noch nicht vorhanden) und die entsprechenden css statements hinzufügen.

[Nic0205]

ok, danke 

letzte, wahrscheinlich doofe frage:

was ist denn meine ID? - woher kann ich die ermitteln?

Code Auswählen Erweitern

span#widget_basic_symbol-<DEINE-ID>.symbol.hide img.icon {

[dev0]

Die ID übergibst Du selbst beim Widgetaufruf. Schau Dir aber besser die Seite mit Firebug an, dort kannst Du Dir alle Pfade anzeigen lassen und direkt alle Einstellungen live ändern um zu testen. Das spart viel Zeit.

[Nic0205]

ah - jetzt wird es klarer 

nur die größe ändern bekomme ich nicht hin.

So sieht es in Firebug aus, nachdem ich geändert habe:

Code Auswählen Erweitern

<span id="fenster-s3" class="symbol hide" data-mode="or" data-val="0" data-item="fenster_kueche.STATE" data-widget="basic.symbol" style="display: inline;">
<img class="icon" src="icons/gn/fts_window_1w.png" title="Thu Jul 14 2016 21:37:29 GMT+0200 (CEST)" height: 100px; width: 100px;="">
zu
</span>

an der Größe ändert sich leider nichts

[dev0]

Nicht den html code ändern, sondern css regeln einfügen. Wie z.b. die oben gepostete, die für ein verstecktes icon zuständig ist. Den vollständigen css pfad kannst du dir in die zwischenablage kopieren, in dem du die entsprechende stelle im html code markierst und dann rechte maustaste -> css pfad kopieren.

[dev0]

Vielleicht sagen Bilder mehr als Worte
Den css path kann man auch auf ein Minimum eingekürzen. In diesem Fall
von

Code Auswählen Erweitern


html.ui-mobile body.ui-mobile-viewport.ui-overlay-a div#widget_basic_symbol.base.ui-page.ui-body-a.ui-page-header-fixed.ui-page-active div.page-bg.ui-content div.primary div.docu div.html span#widget_basic_symbol-s1.symbol.hide img.icon

auf

Code Auswählen Erweitern


span#widget_basic_symbol-s1.symbol.hide img.icon


[Nic0205]

klasse, danke - das probiere ich heute Abend direkt aus