Weihnachtsangebot 2025! 🎄

[skvarel]

@Cyberraph

Da liegt ein 'Style' drauf, der deine Einstellungen überschreibt.

Ich würde bei einer Anzeige eher auf ein HMTL Widget mit Binding gehen.

Beispiel:

[
  {
    "tpl": "tplHtml",
    "data": {
      "bindings": [],
      "html": "Aussentemperatur<br>{alias.0.Aussenbereich.Teichtechnik.Teichtemperatur} °C",
      "refreshInterval": null,
      "g_common": true,
      "g_css_border": true,
      "g_css_background": true,
      "g_css_font_text": true
    },
    "style": {
      "bindings": [],
      "left": "757.9499969482422px",
      "top": "329px",
      "width": "280",
      "height": "71",
      "border-width": "1",
      "border-style": "solid",
      "border-color": "rgba(32,222,43,1)",
      "border-radius": null,
      "background": null,
      "background-color": "rgba(127,226,39,0.19)",
      "background-image": null,
      "background-repeat": null,
      "background-attachment": null,
      "background-position": null,
      "background-size": null,
      "background-clip": null,
      "background-origin": null,
      "color": "rgba(54,23,212,1)",
      "text-align": null,
      "text-shadow": null,
      "font-family": null,
      "font-style": null,
      "font-variant": null,
      "font-weight": null,
      "font-size": null,
      "line-height": null,
      "letter-spacing": null,
      "word-spacing": null
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]

[skvarel]

Die Größe der Schrift lässt sich natürlich noch anpassen

Die Abstände vom Text zum Rand, stellst du hier ein:

Widget Export:

[
  {
    "tpl": "tplHtml",
    "data": {
      "bindings": [],
      "html": "Aussentemperatur<br><font size=5px>{alias.0.Aussenbereich.Teichtechnik.Teichtemperatur} °C",
      "refreshInterval": null,
      "g_common": true,
      "g_css_border": true,
      "g_css_background": true,
      "g_css_font_text": true,
      "g_css_shadow_padding": true
    },
    "style": {
      "bindings": [],
      "left": 824,
      "top": 365,
      "width": "280",
      "height": "71",
      "border-width": "1",
      "border-style": "solid",
      "border-color": "rgba(32,222,43,1)",
      "background-color": "rgba(127,226,39,0.19)",
      "color": "rgba(54,23,212,1)",
      "padding": "",
      "padding-left": "10",
      "padding-top": "5"
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]

[skvarel]

@sigi234 sagte in VIS2 Basic Eigegebener Wert Widget:

@cyberraph

Was willst du mit dem Widget?

Nur Anzeige oder einen Wert setzen?

.. er möchte nur lesen:

[sigi234]

@skvarel sagte in VIS2 Basic Eigegebener Wert Widget:

.. er möchte nur lesen:

Jupp, habe ich gesehen. Daher die Frage.Wäre ja dann das falsche Widget was er nimmt.

[Cyberraph]

@sigi234 @skvarel
Danke für euren Input - und für den kurzen Crashkurs von dir skvarel :-).

Ich dachte auch, dass ich global einen Wert vorgegeben habe für den Schrift-Style.

Ich werde demnächst ein anderes Widget verwenden für "nur lesen" bzw. nur den Wert anzuzeigen.
Bzw. so wie du es hier zeigst.
War auch einer meiner ersten Versuche im ioBroker vor gut einem halben Jahr,
daher dieses "willkürliche Widget" für das Anzeigen meines Temperaturwertes.

Dennoch ist mir das Verhalten ein Rätsel, warum es mir beim Schrift-Style hier keine Änderung anzieht.
Jetzt hätte ich es mit einem komplett frischen Projekt versucht.

Ohne, dass im globalen Seite - Schrift Style etwas vorgegeben wird.

Dennoch übernimmt er mir beim Eingegebener Wert Widget
keines der verschiedenen Attribute wie Schriftfarbe oder Text mittig angeordnet.
Sehr komisch.

Siehe new project nachfolgende Bilder bzw. ZIP Export des Projektes.

2025-08-08-New project.zip

Ich wüsste nicht wo ich bis auf bei "Seite" sonst noch wo eine globale Style Einstellung machen könnte.

PS:
Ich muss meinen ersten Post korrigieren.
Der Standard Schriftfarbe Style dürfte Schwarz sein (nicht Weiß, wie ich schrieb).

Ich hatte nämlich eigentlich bei "Seite" in all meinen Projekten
überall eine "fast Weiß" Schriftfarbe gesetzt, damit bei all meinen Geräten (die schwarzen Hintergrund haben),
die Schriftfarbe Weiß dargestellt wird. Und nicht in Schwarz wie es im Standard der Fall ist ohne Schriftfarbe-Style.

Siehe Bilder.

[Cyberraph]

Noch ein Verhalten, das bei mir auftritt.

Stelle ich im Editor die Oberfläche auf helle Darstellung wird in der Runtime die Schriftfarbe Schwarz.

Stelle ich im Editor die Oberfläche auf dunkle Darstellung wir in der Runtime die Schriftfarbe Weiß.

Schriftfarbe ... dort wo ich im Style keine eigene Schriftfarbe eingestellt habe.

Runtime ... nicht im Editor sondern eingenständig im Browser geladen (das im Bild zu sehen ist).

Ist das bei euch auch so?

Es scheint aber so, dass dies hier etwas mit dem Firefox Browser bei mir am PC zu tun hat.

Am Android Handy mit der ioBroker Visu App bleibt die Schriftfarbe immer Schwarz.

Sehr komisch das ganze.

[skvarel]

Ich kann da leider nur bedingt helfen.

Ich bin zwar seit rund 8 Jahren beim ioBroker und der VIS, allerdings beschäftige ich mich nur mit unseren inventwo Widgets.

Bei Fragen zu anderen Widgets, bin ich der falsche Ansprechpartner.

[Fenris]

Hallo zusammen,

ich möchte das Thema nochmal eröffnen und ein Problem darstellen, welches ich seid dem Vis 2 Update 2.13.4 habe.
Ich nutze das Widget "Basic - Eingegebener Wert" schon sehr lange erfolgreich in meiner gewünschten Darstellung (ohne Ränder).

Seid dem Update bekomme ich entweder einen Rand oder einen Strich unterhalb der Zahl (Bilder anbei).
Ich habe über die Ränder Einstellungen schon so ziemlich alles versucht, ohne Erfolg.

Weiterhin kann ich die Schriftfarbe nicht mehr einstellen. Die waren bisher bei mir immer weiß. Jetzt kann ich vorgeben was ich möchte, sie bleibt immer schwarz.

Evtl. habt Ihr ja eine Lösung für das Problem.
Im Voraus besten Dank

Gruß Willi

[Cyberraph]

@Fenris
Soweit meine Anfängererfahrung jetzt vorangeschritten ist...

Das mit einem Unterstrich oder einer Outline hat bei dem "Basic - Eingegebener Wert"
oder auch zum Beispiel beim "Gestylt - Zustände steuern" Widget
mit dem Eingabefeld "Variante" unter dem Allgemein Bereich zu tun.

Das bekommt man bei diesen Widgets meiner Ansicht nach nicht anders.
Je nachdem was man machen möchte / erzeugen möchte,
dann ist das "Basic - HTML" Widget das vielseitigste, das keine wirklichen Defaultwerte oder Stylings hinterlegt hat, das dazwischenfunken könnte.
So meine Erfahrung. Weil mit dem kann man wirklich sehr frei Ränder, Farben ect. bestimmen.

Zu der Frage mit der weißen oder schwarzen Schriftfarbe...
Mir ist auch schon aufgefallen, dass es auch viel ausmacht was für
ein Gerät und daraus auch was für einen Browser man verwendet, der die VIS anzeigt.
Oft spielt auch z.B. am Handy oder generell . . . der Darkmode einen Streiche.
Sodass im Editor zwar Farben eingegeben wurden als CSS Vorgabe, es aber durch Browser oder Darkmode anders umgesetzt wird.

Großer Tipp, zumindest hat mir das Augen geöffnet, als ich noch gar keinen Dunst von der Materie hatte, da ich kaum Erfahrung in HTML, CSS, Javaskript oder dergleichen hatte und mir das alles spanisch vorkam.
Schmöcker bezüglich CSS Styling beispielsweise auf https://www.w3schools.com/ herum.

[Fenris]

@Cyberraph
Vielen Dank für deine schnelle Rückmeldung.

Ja mit dem Widget "Eingegebener Wert" bin ich wie gesagt bisher gut gefahren. Ich gebe damit Werte an eine Siemens S7 weiter.
Hast Du mit dem HTML Widget mal Sollwerte vorgegeben? Oder habe ich das falsch verstanden?
Die Sache ist ja die, das die Werte auch aus der S7 Beispielsweise nach Neuanlauf wieder in die Vis geschrieben werden sollen.
Also das Widget muss lesend und schreibend verfügbar sein.

Ich werde mich mal mit dem HTML Widget befassen diesbezüglich.

Gruß Willi

[Cyberraph]

@Fenris
Wie gesagt ich bin selbst noch relativ ein Anfänger.

Für eine kleine Eingabeoberfläche für die Eingabe von true oder false auf einen eigenen Boolean Datenpunkt,
der dann einem Skript sagt schalte dich ein oder aus -> Automatikbetrieb über PV Überschuss für einen Plug, der ein/ausschaltet.
... habe ich ein Basic HTML State Widget genommen in meinem Fall.

Aber ich denke nochmal flexibler geht es mit den Inventwo Widgets.
https://github.com/inventwo/ioBroker.vis-2-widgets-inventwo
Da bin ich aber selbst noch am Herumprobieren. Hierzu findet sich im Forum auch einiges. Einfach mal suchen.

Nachfolgend meine "Buttons" per "Basic HTML State" Widget

Hier das Widget von PV-lim Button

Spoiler

[
  {
    "tpl": "tplBasicState",
    "data": {
      "bindings": [
        "class",
        "html",
        "value"
      ],
      "oid": "alias.0.Smarthome-Raphael.03-Obergeschoss.02-Zimmer-Raphael.Heizungssteuerung-E-Heizer-400-800-1200W.Begrenzung-PV",
      "html": "{button:alias.0.Smarthome-Raphael.03-Obergeschoss.02-Zimmer-Raphael.Heizungssteuerung-E-Heizer-400-800-1200W.Begrenzung-PV;button?\"PV-lim an\":\"PV-lim aus\"}",
      "name": null,
      "comment": null,
      "class": "{button:alias.0.Smarthome-Raphael.03-Obergeschoss.02-Zimmer-Raphael.Heizungssteuerung-E-Heizer-400-800-1200W.Begrenzung-PV;button?\"button1 button3\":\"button button3\"}",
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true,
      "g_css_border": true,
      "g_css_font_text": true,
      "value": "{button:alias.0.Smarthome-Raphael.03-Obergeschoss.02-Zimmer-Raphael.Heizungssteuerung-E-Heizer-400-800-1200W.Begrenzung-PV;button?\"false\":\"true\"}"
    },
    "style": {
      "bindings": [
        "background-color"
      ],
      "left": 82,
      "top": 175,
      "width": "100",
      "height": "60",
      "border-width": "3px",
      "border-style": "solid",
      "border-color": "rgba(241,10,10,1)",
      "border-radius": "30px",
      "color": "rgba(0,0,0,1)",
      "text-align": "center",
      "font-family": "StalinistOne-Regular",
      "font-size": "13px",
      "line-height": "2.2",
      "z-index": "5"
    },
    "widgetSet": "basic"
  }
]

Und hier das CSS dazu:

Spoiler

ï