Basic.symbol - icon vergrößern

[whe]

Ein einzelnes Symbol auf einem Block sieht sehr einsam aus.
gibt es eine Möglichkeit das Icon zu vergrößern.
speziell möchte ich anzeigen ob mein Kamin an oder aus ist (wegen der Lüftung).
ich benutze: scene_stove.svg
oder kann ich da ein eigenes Foto oder drgl. anzeigen ?

[Misanthrop]

Bin mit SmartVisu selbst noch ein Anfänger, aber prinzipiell ist sowas denkbar:

<img width="200px" src="lion.svg" />

Allerdings nimmst du dir damit halt die automatische Größenanpassung (responsive) weg.
Prinzipiell kannst du natürlich einfach ein eigenes Bild auf deinen Webserver (smartvisu) legen und auf dieses referenzieren. Aber wenn es kein SVG ist, weiß ich nicht wie sich das dann verhalten wird.

[smai]

Eigene Bilder müssten funktionieren, werden aber ebenfalls auf 48×48px skaliert.

Ändern kannst du die Grösse per CSS, indem du width und height von   svg.fx-icon, .icon  z.B. in einer visu.css innerhalb deiner Pages änderst.
Dami es nur in diesem Block gilt, kannst du dem Block eine CSS-Klasse geben und diese dann verwenden, etwa   .deineklasse svg.fx-icon, .deineklasse .icon 

[schuma]

Ich habe das direkt auf der Seite gelöst:

<style>
#Aussen_indego-state_offline img, #Aussen_indego-state_offline svg {
    width: 100px;
    height: 100px;
}
</style>

Aussen-indego ist der Pagename
state_offline ist die id des Basic.symbol

[Misanthrop]

Ich habe das direkt auf der Seite gelöst:

<style>
#Aussen_indego-state_offline img, #Aussen_indego-state_offline svg {
width: 100px;
height: 100px;
}
</style>

Aussen-indego ist der Pagename
state_offline ist die id des Basic.symbol

Kann man machen, ist aber definitiv nicht best practice. Z.B. Hier http://page.mi.fu-berlin.de/mbudde/c.../vorteile.html kann man nachlesen, dass style nicht direkt im HTML sondern ausgelagert in einer CSS-Datei abgelegt werden sollte, von daher würde ich dazu raten auf smais Variante zurück zu greifen. Das sieht für mich sauber aus.

(Mein Vorschlag weiter oben, ist von daher natürlich auch unsauber!)

[smai]

Speziell in der smartVISU bzw. jQuery Mobile sind style-Tags nicht ideal.
Die ID hingegen kann bedenkenlos so verwendet werden.
Ich hatte die Frage ehrlich gesagt mit einem anderen Thread verwechselt, wo es um drei Symbole in einem Block geht. Deshalb hatte ich die Klasse vorgeschlagen.

[whe]

danke, bin ein CSS Anfänger, aber mit smai's Hilfe kriege ich das jetzt hin.

zu #3:
ja das habe ich bereits an anderer Stelle getestet; man kann auch .jpg verwenden:

{{ basic.symbol('','avm.devices.fritzbox_7490.iPhoneWil', '', 'pics/whe2.jpg') }}

[whe]

sorry, kriege es doch nicht hin.

ich habe jetzt in meiner visu.css (in meinem page Verzeichnis) folgendes ergänzt:

.gross svg.fx-icon, .gross .icon {
 vertical-align: middle;
 width: 96px;
 height: 96px;
}

dann auf meiner Seite die class an drei Stellen getestet:

<div class="block [MARKIEREN]gross[/MARKIEREN]">
 <div class="set-2 [MARKIEREN]gross[/MARKIEREN]" data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true" data-iconpos="right">

  <div [MARKIEREN]class="gross"[/MARKIEREN] data-role="collapsible" data-collapsed="false">
   <h3>Steckdose</h3>
   {{ basic.stateswitch('', 'EG.Wohnen.Steckdose.AnAus', 'icon', '', 'light_wire_system_1.svg') }}<br><br>
   {{ basic.symbol('', 'EG.Wohnen.Steckdose.reachable', 'nicht erreichbar ', 'it_wifi.svg', '0', '', 'red') }}
  </div>
 </div>
</div>

keine Reaktion.
Die Syntax habe ich auch schon ge-googeled:


Beachten Sie:

• .beispiel.hinweis selektiert Elemente, die der Klasse „beispiel“ und „hinweis“ angehören;
• .beispiel, .hinweis selektiert Elemente, die der Klasse „beispiel“ oder „hinweis“ angehören (siehe von einander unabhängige Selektoren)
• .beispiel .hinweis selektiert Elemente, die der Klasse „hinweis“ innerhalb der Klasse „beispiel“ angehören. (siehe Nachfahrenkombinator).

[smai]

Also bei mir geht dieser CSS-Code.
smartVISU-Cache geleert und CTRL+F5 im Browser gedrückt?

[whe]

selbstverständlich.

und mein code in der visu.css ist ok ?
in welchem DIV setzt Du denn die Klasse ?

[smai]

und mein code in der visu.css ist ok

Ja. Ich habe das nun extra nochmal nachgebaut und sowohl dein CSS wie auch das HTML 1:1 kopiert.

in welchem DIV setzt Du denn die Klasse

Das ist egal, Cascading Style Sheets sind ja kaskadierend und gelten damit für alle Elemente darunter.

[whe]

vielen vielen Dank für Deine Geduld.

Natürlich funktioniert es jetzt auch bei mir, nachdem ich die fehlende Klammer in meiner visu.css ergänzt habe ( vor dem neuen Code )

[whe]

hast Du noch eine Idee, wie ich die Klasse dem VISU Generator in SmarthomeNH beibringen kann.
Ich bin dazu übergegangen alles in den items zu spezifizieren und nichts mehr manuell in Smartvisu zu codieren.
das habe ich schon fast geschafft. teilweise habe ich mir eigene widgets erstellt um individuelle Blöcke zu generieren.

[smai]

Ist nicht ganz mein Fachgebiet.
Was meines Wissens geht, ist zusätzlichen HTML-Code in sv_widget anzugeben, etwa:

sv_widget: "<div class=\"gross\">{{ basic.symbol('', 'EG.Wohnen.Steckdose.reachable', 'nicht erreichbar ', 'it_wifi.svg', '0', '', 'red') }}</div>"

[whe]

ja danke, das mache ich schon an manchen Stellen.
das geht sogar in den items.
ich übe mal; wenn ich eine Möglichkeit habe, poste ich sie hier.

jetzt geht's zu Karneval.