Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[io2345]

@ullij Irgendwas passt noch nicht:

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

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

[UlliJ]

@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...

[UlliJ]

@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]

@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.

[UlliJ]

@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
.

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]

@ullij sagte in Anfängerfragen VIS-2:

geht doch

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

[io2345]

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

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]

@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

[UlliJ]

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

[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.

[UlliJ]

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

[OliverIO]

@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.

[UlliJ]

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

[io2345]

@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 :disappointed:
Wie bekommt man den?

[OliverIO]

@io2345

[io2345]

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

[Thomas Braun]

@io2345

Nur im Beta-Kanal:

github:	0.0.2
latest:	0.0.3 for 68 months
stable:	-.-.-

[io2345]

Und da es hier um Anfängerfragen geht, zeige ich gleich, wie man die Beta aktiviert. Hier drücken:

und dann auf "Repositories" gehen, den Haken bei "Beta" setzen. Speichern+Schließen anwählen. Dann aktualisieren hier:

Material Webfonts installieren - Und endlich ist dann auch unser Strommast da!

[io2345]

@ullij Könnten wir uns als Nächstes an der Seite PV versuchen?
Bisher sieht das so aus bei mir:

Da ist ja bei dir ein Tortendiagramm und keine Schieberegler

[UlliJ]

@io2345
klar, können wir.

Das Tortendiagramm ist ein Flexchart (wieder ein Adapter mehr, mit Skript etc). In der ersten Variante waren das Balken je PV-Anlagenteil, das gefiel mir nicht mehr und ich wollte flexcharts ausprobieren.
Alternativ geht auch das widget "Verbrauchsvergleich" aus den Energiewidgets.

Die Schieberegler sind eigentlich auch keine, sondern 2 HTML widgets. Eins für den Hintergrund und das zweite mit Füllung für den Balken.

Spoiler

[
 {
   "tpl": "_tplGroup",
   "widgetSet": "basic",
   "data": {
     "members": [
       "i000001",
       "i000002"
     ],
     "g_objects": true,
     "bindings": []
   },
   "style": {
     "left": "calc(50% - 60px)",
     "top": "70",
     "width": "180px",
     "height": "25",
     "z-index": 20,
     "opacity": "0.8",
     "bindings": []
   },
   "_id": "f000001"
 },
 {
   "tpl": "tplMaterial2Static",
   "data": {
     "bindings": [],
     "html": "",
     "g_common": true,
     "objectFit": "fill",
     "seamless": true,
     "noSandbox": true,
     "allowUserInteractions": true,
     "refreshWithNoQuery": true,
     "doNotWantIncludeWidgets": false,
     "g_css_border": true,
     "noCard": false
   },
   "style": {
     "bindings": [],
     "left": 0,
     "top": 0,
     "width": "140",
     "height": "20",
     "position": "",
     "z-index": 15,
     "opacity": "0.8",
     "border-width": "0",
     "border-style": null,
     "border-color": null,
     "border-radius": "3"
   },
   "widgetSet": "vis-2-widgets-material",
   "grouped": true,
   "groupid": "f000001",
   "_id": "i000001"
 },
 {
   "tpl": "tplMaterial2Static",
   "data": {
     "bindings": [],
     "html": " ",
     "g_common": true,
     "objectFit": "fill",
     "seamless": true,
     "noSandbox": true,
     "allowUserInteractions": true,
     "refreshWithNoQuery": true,
     "doNotWantIncludeWidgets": false,
     "noCard": false,
     "g_css_background": true,
     "g_css_border": true
   },
   "style": {
     "bindings": [],
     "left": 0,
     "top": "0",
     "width": "{v:alias.0.4000_Energieerzeugung.PVOst.PAC;Math.round(v/5300*140)}",
     "height": "19",
     "position": "",
     "background": "linear-gradient(to right, #737B1A 30px, #406036 70px)",
     "background-color": null,
     "background-image": null,
     "background-repeat": null,
     "background-attachment": null,
     "background-position": null,
     "background-size": null,
     "background-clip": null,
     "background-origin": null,
     "border-width": "0",
     "border-style": null,
     "border-color": null,
     "border-radius": "2",
     "z-index": 20,
     "opacity": "0.8"
   },
   "widgetSet": "vis-2-widgets-material",
   "grouped": true,
   "groupid": "f000001",
   "_id": "i000002"
 }
]

Das Diagramm im Hintergrund der Karte ist ein Grafana chart mit dem Verlauf der PV Leistung über die letzten 3h.
Der i-button oben rechts ruft noch einen Dialog mit einem chart und ein paar weiteren Info's auf.

Wie sieht jetzt Deine Energieseite insgesamt aus?