Ankündigung

Einklappen
Keine Ankündigung bisher.

Basic.symbol - icon vergrößern

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Basic.symbol - icon vergrößern

    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 ?

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

    Code:
    <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.

    Kommentar


      #3
      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 

      Kommentar


        #4
        Ich habe das direkt auf der Seite gelöst:

        Code:
        <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

        Kommentar


          #5
          Zitat von schuma Beitrag anzeigen
          Ich habe das direkt auf der Seite gelöst:

          Code:
          <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!)

          Kommentar


            #6
            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.

            Kommentar


              #7
              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:
              Code:
              {{ basic.symbol('','avm.devices.fritzbox_7490.iPhoneWil', '', 'pics/whe2.jpg') }}

              Kommentar


                #8
                sorry, kriege es doch nicht hin.

                ich habe jetzt in meiner visu.css (in meinem page Verzeichnis) folgendes ergänzt:
                Code:
                .gross svg.fx-icon, .gross .icon {
                 vertical-align: middle;
                 width: 96px;
                 height: 96px;
                }
                dann auf meiner Seite die class an drei Stellen getestet:
                Code:
                <div class="block gross">
                 <div class="set-2 gross" data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true" data-iconpos="right">
                
                  <div class="gross" 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).

                Kommentar


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

                  Kommentar


                    #10
                    selbstverständlich.

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

                    Kommentar


                      #11
                      Zitat von whe Beitrag anzeigen
                      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.

                      Zitat von whe Beitrag anzeigen
                      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.

                      Kommentar


                        #12
                        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 )

                        Kommentar


                          #13
                          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.

                          Kommentar


                            #14
                            Ist nicht ganz mein Fachgebiet.
                            Was meines Wissens geht, ist zusätzlichen HTML-Code in sv_widget anzugeben, etwa:
                            Code:
                            sv_widget: "<div class=\"gross\">{{ basic.symbol('', 'EG.Wohnen.Steckdose.reachable', 'nicht erreichbar ', 'it_wifi.svg', '0', '', 'red') }}</div>"

                            Kommentar


                              #15
                              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.

                              Kommentar

                              Lädt...
                              X