Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Anfängerfragen VIS-2

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Anfängerfragen VIS-2

    This topic has been deleted. Only users with topic management privileges can see it.
    • U
      UlliJ last edited by UlliJ

      @io2345
      die Icons sind ein Webfont. Habe gestern damit gespielt und kriegen wir schon...
      Der Hinweis von @sigi234 bezieht sich auf die Info, das es etliche Vis1 widgets gibt, die in Vis2 nicht mehr/noch nicht funktionieren. Danke dafür😊

      Installation der MDI:
      Herunterladen des Font files (ich nutze nur die Outlined Symbole). Sollte für die anderen auch funktionieren.
      https://github.com/marella/material-symbols/blob/main/font/400/material-symbols-outlined.woff2

      Über den Dateimanager von Vis-2 Verzeichnis für die Schrift anlegen und die Datei hoch laden, so wie bei den Bildern.
      edit: screen shot eingefügt
      Screenshot 2025-07-14 091523.png
      Im Reiter CSS (für dieses Projekt) folgendes eintragen. Den Pfad in der url musst Du entsprechend anpassen.

      @font-face {
        font-family: 'Material Symbols';
        font-style: normal;
        font-weight: 400;
          src: url(/vis-2.0/fonts/material-symbols-outlined.woff2) format('woff2');
      }
      
      .material-icons {
        font-family: 'Material Symbols';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;  /* Preferred icon size */
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
      
        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
      
        /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;
      
        /* Support for IE. */
        font-feature-settings: normal;
      }
      
      

      Zusätzlich noch das ins CSS kopieren

      .mdui-mdi,
      .material-icons, 
      .mdui-icon08 {
        font-size: 0.8em;  /* Preferred icon size */
      }
      .mdui-icon10 {
        font-size: 1.0em;  /* Preferred icon size */
      }
      
      .mdui-icon12 {
        font-size: 1.2em;  /* Preferred icon size */
      }
      .mdui-icon15 {
        font-size: 1.5em;  /* Preferred icon size */
      }
      .mdui-icon18 {
        font-size: 1.8em;  /* Preferred icon size */
      }
      .mdui-icon20 {
        font-size: 2em;  /* Preferred icon size */
      }
      .mdui-icon25 {
        font-size: 2.5em;  /* Preferred icon size */
      }
      .mdui-icon50 {
        font-size: 5em;  /* Preferred icon size */
      }
      .mdui-mdi {
        font-family: "Material Symbols"; /* font-family: "Material Design Icons";*/
      }
      

      Es gibt hier im Forum viele, die sich gut mit den ganzen Dingen rund um HTML, CSS & Co gut auskennen, da gehöre ich nicht dazu. Bei mir ist das lesen, lesen, weiter lesen, meinen zu verstehen und probieren...

      Wenn alles geklappt hat kannst Du jetzt in der HTML Vorlage mit

      <span class="mdui-icon10 mdi mdi-menu-right" style="position: absolute;margin-left: -20px"> </span>
      <span class="mdui-icon10 mdi mdi-transmission-tower" style="position: absolute; margin-left: -30px"> </span>
      {v:Dein_DP;parseFloat(v).toFixed(1).replace('.',',')} kWh
      

      die Symbole sehen. Eine kleine Erklärung (laienhaftes Verständnis):
      mdui-iconxx: Schriftgröße
      mdi: Aufruf der Klasse für die Schriftart
      mdi-menu-right: das Zeichen, welches dargestellt werden soll

      die Anweisungen style="..." sind zum Positionieren der Symbole.
      Die Symbole und deren Namen findest Du hier: https://pictogrammers.com/library/mdi/. Gibt sicher noch andere Quellen.

      Berechnung in DP's geht z.B. so
      {v:DP1; w:DP2; v+w} oder andere Rechenoperationen/Runden/Json parsen etc.
      Die beiden Werte sind unterschiedlich
      "Total" ist die aktuelle PV Leistung, der "60min" Wert ist der gleitende Mittelwert an PV Leistung der letzten 60min. Der Wert kommt aus einem Skript und ist selbst gebastelt und nur zur Info

      I 1 Reply Last reply Reply Quote 0
      • I
        io2345 @UlliJ last edited by

        @ullij Langsam, langsam.

        In der HTML-Vorlage steht z.B. jetzt das drin:

        <div class="mdui-label18" >
        <span>
        {v:growatt.0.10237603.devices.0HVR80ZR21FT002C.historyLast.ctSelfPower;parseFloat(v).toFixed(1).replace('.',',')} kWh
        </span>
        </div>

        Bleibt das mit "mdui-label18" drin, oder wird das mit den beiden "mdui-icon10" Zeilen ersetzt?

        ==============
        Zweite Frage: die beiden Einträge in CSS können direkt untereinander stehen, also so?:

        CSSInhalt.png

        Der Pfad zu den fonts ist der gleiche wie bei dir

        Pfad woff2.png

        Trotzdem kommt im Bild mit dem CSS-Inhalt ein gelbes Ausrufezeichen, auch wenn ich die zwei Punkte am Anfang der URL wegmache. Ob das so passt?

        U 1 Reply Last reply Reply Quote 0
        • U
          UlliJ @io2345 last edited by

          @io2345 sagte in Anfängerfragen VIS-2:

          @ullij Langsam, langsam.

          sorry😇

          In der HTML-Vorlage steht z.B. jetzt das drin:

          <div class="mdui-label18" >
          <span>
          {v:growatt.0.10237603.devices.0HVR80ZR21FT002C.historyLast.ctSelfPower;parseFloat(v).toFixed(1).replace('.',',')} kWh
          </span>
          </div>

          Bleibt das mit "mdui-label18" drin, oder wird das mit den beiden "mdui-icon10" Zeilen ersetzt?

          Alles was mit "mdui", ausser den "mdui-iconxx", zu tun hat ist etwas anderes und kann weg. Das ist bei mir auch teilweise noch nicht einheitlich, teils von Vis1 bei der ich MDCSS@uhula verwendet habe.
          Also nur das was ich zuvor gepostet hatte und Deinen angepassten Datenpunkt.

          Also

          <span class="mdui-icon10 mdi mdi-menu-right" style="position: absolute;margin-left: -20px"> </span>
          <span class="mdui-icon10 mdi mdi-transmission-tower" style="position: absolute; margin-left: -30px"> </span>
          {v:growatt.0.10237603.devices.0HVR80ZR21FT002C.historyLast.ctSelfPower;parseFloat(v).toFixed(1).replace('.',',')} kWh
          

          Mach Dir mal eine Testseite in der Vis, wo Du probieren kannst wie sich die Widgets mit ihren Einstellungen benehmen. Und denn mal nur ein icon ohne alles weitere eintragen. Das ist auch schon im Editor zu sehen...
          33724345-c9f9-4d0e-a1d2-9b4dcee364d4-image.png

          ==============
          Zweite Frage: die beiden Einträge in CSS können direkt untereinander stehen, also so?:

          Sollte so passen. Zeilenumbruch nach der "}" sollte genügen. Zeig mal bitte einen Screenshot vom Widget mit Einstellungen

          I 1 Reply Last reply Reply Quote 0
          • I
            io2345 @UlliJ last edited by io2345

            @ullij Irgendwas passt noch nicht:

            Testicon.png

            Da wird nichts angezeigt, auch nicht wenn ich den Play-Button drücke.

            Im readme.md zu den Icons habe ich noch was gefunden. Muss man das vielleicht auch noch machen?:

            font400Usage.png

            EDIT: Wenn ich bei CSS auf das gelbe Ausrufezeichen gehe, kommt da noch Text: "@font-face declaration doesn't follow the fontspring bulletproof syntax"

            U 1 Reply Last reply Reply Quote 0
            • U
              UlliJ @io2345 last edited by

              @io2345 sagte in Anfängerfragen VIS-2:

              EDIT: Wenn ich bei CSS auf das gelbe Ausrufezeichen gehe, kommt da noch Text: "@font-face declaration doesn't follow the fontspring bulletproof syntax"

              Das können wir ignorieren. Ist für die Unterstützung von uralten Versionen des IE.

              Bin noch am suchen, kann in der Konsole das Laden der fonts nicht finden. Kann etwas dauern...

              1 Reply Last reply Reply Quote 0
              • U
                UlliJ last edited by

                @io2345
                kann sein, daß ich vor Jahren mal den Adapter "vis-material-webfont" installiert habe und das deswegen bei mir geht....
                vielleicht kann uns auch @OliverIO weiter helfen?

                OliverIO 1 Reply Last reply Reply Quote 0
                • OliverIO
                  OliverIO @UlliJ last edited by

                  @ullij

                  könntet ihr mal das aktuelle problem nochmal kurz zusammenfassen?
                  hab die posts mal durchgescannt, aber das genaue problem jetzt nicht direkt erfassen können.

                  U 1 Reply Last reply Reply Quote 0
                  • U
                    UlliJ @OliverIO last edited by

                    @oliverio
                    bei mir sind im CSS in vis-2 diverse webfonts registriert

                    @font-face {
                      font-family: 'Material Icons';
                      font-style: normal;
                      font-weight: 400;
                      src: url(/vis-2.0/RisumMW8V2/materialdesignicons-webfont.eot); /* For IE6-8 */
                      src: local('Material Icons'),
                        url(/vis-2.0/RisumMW8V2/materialdesignicons-webfont.woff2) format('woff2'),
                        url(/vis-2.0/RisumMW8V2/materialdesignicons-webfont.woff) format('woff'),
                        url(/vis-2.0/RisumMW8V2/materialdesignicons-webfont.ttf) format('truetype');
                        url(/vis-2.0/RisumMW8V2/MaterialIcons-Regular.ttf) format('truetype');
                    } 
                    

                    Zusätzlich ist der Adapter "Material Design webfont" installiert (über npm.
                    Ein HTML widget mit folgendem Inhalt

                    <span class="mdui-icon10 mdi mdi-menu-right" style="position: absolute;margin-left: -20px"> </span>
                    <span class="mdui-icon10 mdi mdi-transmission-tower" style="position: absolute; margin-left: -30px"> </span>
                    {v:0_userdata.0.4000_EnergieErzeugung.Zaehler.NetzbezugTotalTag;parseFloat(v).toFixed(1).replace('.',',')} kWh
                    

                    die erwarteten Icons an
                    928a9ed4-900c-4d43-a83d-e61f58ca25b5-image.png .

                    Bei @io234 jedoch nicht. Wie kann man webfonts für Vis-2 registrieren/einrichten und ansprechen? Bei mir funktioniert das nur durch Zufall und verstanden habe ich das auch nicht wirklich. Kannst Du uns da evtl. erleuchten? Schon mal danke für die Mühe

                    OliverIO 1 Reply Last reply Reply Quote 0
                    • OliverIO
                      OliverIO @UlliJ last edited by

                      @ullij sagte in Anfängerfragen VIS-2:

                      geht doch
                      36065cc9-f5fe-4e83-a075-b61307ce4e1b-image.png

                      allerdings sollte man nicht per copy paste html code übernehmen, den man nicht versteht. die zusätzlichen style angaben insbesondere
                      margin-left: -20px

                      schiebt das html element nach links ausserhalb des widgets. da ist es uU dann nicht mehr sichtbar.

                      evtl muss man den vis-2 adapter neu starten
                      evtl muss man im css tab auch so etwas bei einem dunklen hintergrund noch eintragen, damit die icons auch eine farbe haben. bei mir hat es ohne funktioniert

                      body {
                          color:white;
                      }
                      

                      in den developer tools im netzwerk reiter sollten die beiden folgenden dateien erscheinen und geladen werden
                      http://IP:8082/vis-2/widgets/material-webfont/css/materialdesignicons.css
                      http://IP:8082/vis-2/widgets/material-webfont/fonts/materialdesignicons-webfont.woff2?v=4.5.95

                      I 1 Reply Last reply Reply Quote 0
                      • I
                        io2345 @OliverIO last edited by

                        @oliverio Das habe ich nicht verstanden, muss ich gestehen. Ich habe auf meiner Testseite dieses HTML-Widget ohne Spezialitäten (ganz oben, W000349):

                        oliverio1.png

                        Unter CSS -> Für dieses Projekt ist drin:

                        @font-face {
                        font-family: 'Material Symbols';
                        font-style: normal;
                        font-weight: 400;
                        src: url(../vis-2.0/fonts/material-symbols-outlined.woff2) format('woff2');
                        }

                        .material-icons {
                        font-family: 'Material Symbols';
                        font-weight: normal;
                        font-style: normal;
                        font-size: 24px; /* Preferred icon size */
                        display: inline-block;
                        line-height: 1;
                        text-transform: none;
                        letter-spacing: normal;
                        word-wrap: normal;
                        white-space: nowrap;
                        direction: ltr;

                        /* Support for all WebKit browsers. /
                        -webkit-font-smoothing: antialiased;
                        /
                        Support for Safari and Chrome. */
                        text-rendering: optimizeLegibility;

                        /* Support for Firefox. */
                        -moz-osx-font-smoothing: grayscale;

                        /* Support for IE. */
                        font-feature-settings: normal;
                        }

                        .mdui-mdi,
                        .material-icons,
                        .mdui-icon08 {
                        font-size: 0.8em; /* Preferred icon size /
                        }
                        .mdui-icon10 {
                        font-size: 1.0em; /
                        Preferred icon size */
                        }

                        .mdui-icon12 {
                        font-size: 1.2em; /* Preferred icon size /
                        }
                        .mdui-icon15 {
                        font-size: 1.5em; /
                        Preferred icon size /
                        }
                        .mdui-icon18 {
                        font-size: 1.8em; /
                        Preferred icon size /
                        }
                        .mdui-icon20 {
                        font-size: 2em; /
                        Preferred icon size /
                        }
                        .mdui-icon25 {
                        font-size: 2.5em; /
                        Preferred icon size /
                        }
                        .mdui-icon50 {
                        font-size: 5em; /
                        Preferred icon size /
                        }
                        .mdui-mdi {
                        font-family: "Material Symbols"; /
                        font-family: "Material Design Icons";*/
                        }

                        Unter Dateien liegt in /vis-2.0/fonts/ die Datei "material-symbols-outlined.woff2"
                        Adapter VIS-2 habe ich neu gestartet, Seite im Browser neu geladen. Das Farbthema schalte ich mal hell, mal dunkel. Es erscheint aber kein Icon bei mir.

                        OliverIO U 2 Replies Last reply Reply Quote 0
                        • OliverIO
                          OliverIO @io2345 last edited by OliverIO

                          @io2345

                          das brauchst du doch gar nicht.
                          das wird doch alles bereits durch den adapter geladen

                          hier mal ein vis-2 projekt zum importieren, nur mit einem html widget
                          und den angaben von oben.
                          den datenpunkt hab ich mir gespart, den hab ich ja nicht, geht ja aber nur um die icons.

                          welchen punkt hast du genau nicht verstanden?
                          evtl gehts du meinen post mal der reihe nach durch?

                          optional kannst du deine testseite auch mal als projekt exportieren und ich schaue mir das an

                          U 1 Reply Last reply Reply Quote 0
                          • U
                            UlliJ @OliverIO last edited by

                            @oliverio
                            der Adapter ist bei ihm aber nicht installiert.
                            Geht es auch ohne?

                            OliverIO 1 Reply Last reply Reply Quote 0
                            • OliverIO
                              OliverIO @UlliJ last edited by OliverIO

                              @ullij

                              warum will man das wollen. dafür sind die adapter doch da?
                              das ist wie suppe mit der gabel essen.
                              wahrscheinlich geht es auch ohne, aber da muss man sich auskennen und die internen abläufe des iobrokers, des web-adapters und vis kennen.

                              mit installieren geht es ganz easy. dieser adapter schuckt ja nichtmal prozessorlast auf dem server.

                              1 Reply Last reply Reply Quote 1
                              • U
                                UlliJ @io2345 last edited by

                                @io2345
                                also Adapter MD webfont installieren oder auf die Icons verzichten...

                                4a417f7e-c808-4d0f-be50-92b9bf8ba1f6-image.png

                                OliverIO 1 Reply Last reply Reply Quote 0
                                • OliverIO
                                  OliverIO @UlliJ last edited by

                                  @ullij

                                  wo ist da das problem? theoretisch kann man sowas auch miteinander verwenden. webfont ist nix anderes wie eine schriftart. icons sind alles bildchen meist in svg oder png.

                                  U I 2 Replies Last reply Reply Quote 0
                                  • U
                                    UlliJ @OliverIO last edited by

                                    @oliverio
                                    ist kein Problem. Man kann auch die Bildchen nehmen

                                    I 1 Reply Last reply Reply Quote 0
                                    • I
                                      io2345 @OliverIO last edited by

                                      @oliverio Ist kein Problem, wenn es einen Adapter gibt, den wir brauchen, kann man den natürlich installieren. Aber ich finde den "material-webfont" Adapter gar nicht bei mir 😞
                                      Wie bekommt man den?

                                      OliverIO 1 Reply Last reply Reply Quote 0
                                      • OliverIO
                                        OliverIO @io2345 last edited by

                                        @io2345

                                        eeb45294-9cf8-4623-add6-a3b58ae80297-image.png

                                        I 1 Reply Last reply Reply Quote 0
                                        • I
                                          io2345 @OliverIO last edited by io2345

                                          @oliverio So einfach wenn's wär, hätte ich ihn vielleicht sogar von Anfang an installiert. Aber leider sieht es so aus:

                                          Adapter Webfont.png

                                          Adapter.png

                                          Thomas Braun I 2 Replies Last reply Reply Quote 0
                                          • Thomas Braun
                                            Thomas Braun Most Active @io2345 last edited by

                                            @io2345

                                            Nur im Beta-Kanal:

                                            github:	0.0.2
                                            latest:	0.0.3 for 68 months
                                            stable:	-.-.-
                                            
                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            605
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            5
                                            44
                                            641
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo