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:
<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
Das basic.symbol Widget kennt von Haus aus nur eine Größe. Du kannst die Größe aber über CSS verändern.
#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.
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 sudo grep -r 'span#' ./ hat mir im smartvisu Verzeichnis nichts ausgeworfen.
Hast Du noch ein paar Infos für mich?
visu.css in deinem Projektordner selbst anlegen (wenn noch nicht vorhanden) und die entsprechenden css statements hinzufügen.
ok, danke :)
letzte, wahrscheinlich doofe frage:
was ist denn meine ID? - woher kann ich die ermitteln?
span#widget_basic_symbol-<DEINE-ID>.symbol.hide img.icon {
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.
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:
<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 :-(
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.
Vielleicht sagen Bilder mehr als Worte ;)
Den css path kann man auch auf ein Minimum eingekürzen. In diesem Fall
von
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
span#widget_basic_symbol-s1.symbol.hide img.icon
klasse, danke - das probiere ich heute Abend direkt aus :-)