Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[OliverIO]

@topsurfer

Hast du den irgendwo anders im Internet ein Design gefunden was dir gefällt?

Unter vis2 werden die meisten Widgets mit react gemacht.
Mit ein bisschen css kann man da in Grenzen manipulieren. Ist aber nicht immer ganz so einfach.

Wenn du etwas findest zu dem du sagst, das gefällt mir, dann könnte man mal schauen wie man das nachgebildet bekommt.
Am besten Bild/link zeigen.

"Design beliebig einstellbar" ist halt eine sehr umfassende Anforderung.

Falls ein Widget nur readings sein soll, man das aber nicht einstellen kann, dann könnte man darüber ein leeres Widget legen, das alle mouse/touch Ereignisse abfängt. Dann kommt da nie ein Änderungswunsch touch/click an.

Am besten auch mal hier schauen
https://www.google.com/search?sca_esv=b7b28de9b2affd5c&rlz=1C9BKJA_enDE590DE590&hl=de&sxsrf=ANbL-n4o0j1Os5X5nUjHPUOskZ60OCzX8w:1777995469524&udm=2&fbs=ADc_l-YGrpJMQtvjQ6h14rj-dfIrOPc3KDFvbkoWSmxm37-5ZzvkNGUgcupCt7IlNUESMkkDMtkeLmLlqvNosIz1Q5dFNhX2T52oQnCG1LT89p4SSHCGIeX8RaQj2rxnr87W_pLUuoP6MiMxwPIaCAAjeZ1ZTUuvvnoOB1Yf4vBC8evtbZe5o52izz_1Ur_pz5RjnL5YzKa_7ZIkwzE4NvpurONEfGe43Q&q=react+gauge&sa=X&ved=2ahUKEwiR6v2ivaKUAxVZQfEDHWvjMq4QtKgLegQIHBAB&biw=1180&bih=688&dpr=2

[MartinP]

Kein Ausbund an Schönheit - und der sieht merkwürdigerweise nach jedem vis2 Update wieder anders aus ...

"gestylt" - "schieberegler"

Bei "nur Lesen" habe ich auch "Zeigerinstrumente" (jqplot/metergauge)

[fuzzy1955]

@topsurfer sagte:

die bereits installierten Widgets - können die so was "einfaches" nicht

Also - ich verwende vielfach diese beiden und bin sehr zufrieden damit:

Drehinstrument = Widget-Sammlung - Gauge
Schieberegler = Widget-Inventwo-Design-Schieberegler mit CSS-Klasse:

.sliderGelbRosa {
  & .MuiSlider-rail {
    background: linear-gradient(90deg,rgba(188,143,143,0.45) 0%, rgba(239,208,20,1) 100%);
    opacity: 1;
  }
  & .MuiSlider-track {
    background: none;
  }
}

[EDIT] Oder dieses Design:

Drehinstrument = Widget JQPlot - Meter-Gauge (Siehe @martinp #5)

[OliverIO]

@fuzzy1955 sagte:

.sliderGelbRosa {
  & .MuiSlider-rail {
    background: linear-gradient(90deg,rgba(188,143,143,0.45) 0%, rgba(239,208,20,1) 100%);
    opacity: 1;
  }
  & .MuiSlider-track {
    background: none;
  }
}

Genau das sind die css Anweisungen mit denen man das Design von react bzwim speziellen mui Komponenten beeinflussen kann.

Hier die Möglichkeiten der slider Komponente
https://mui.com/material-ui/api/slider/#slots

[topsurfer]

OK, scheint nicht so einfach zu sein bzw. kaum ein passendes Widget zu geben :-(

Die zwei hier gezeigten Schieberegler sind auch nicht read-only, und ein drüberlegen eines andern Widget um das verstellen zu verhindern wäre ein suboptimaler work-around.

Das "Design" des Schieberegler muss auch nicht zu sehr anpassbar sein, Farbe, dicke würde mir mittlerweile fast genügen.

Dachte nicht das so schwer ist eine "einfache" Fortschrittsanzeige im Dashboard grafisch darzustellen.
(CSS kann ich nicht bzw. kaum)

Weitere Ideen oder Widget-Vorschläge sind willkommen!

Das hier würde mir z.B. zusagen (ist Gauge, aber wäre OK):

[Homoran]

@topsurfer sagte:

Dachte nicht das so schwer ist eine "einfache" Fortschrittsanzeige im Dashboard grafisch darzustellen.

Weil deine Anforderungen nicht einfach sind

[topsurfer]

@Homoran sagte:

Weil deine Anforderungen nicht einfach sind

Echt?
Ein Schieberegler oder Gauge (wie im Bild oben), die Read-only sind?

[fuzzy1955]

@topsurfer sagte:

Gauge (wie im Bild oben), die Read-only sind?

Die Gauges SIND read-only. Und ein Schieberegler heißt nicht umsonst so. Damit kann man eben (manuell) regeln.

[OliverIO]

@topsurfer

also hier eine mögliche Lösung

Erstellt wurde es mit dem JSON widget aus dem Adapter vis-jsontemplate

folgendes muss man machen nachdem das widget platziert wurde

1. Den Datenpunkt aus dem der Wert kommen soll eintragen.
   Bitte diesen wie im Bild unter Datapoints[1] eintragen, nicht im ersten Datenpunkt feld unter Common
2. Das folgende Template mit Copy/Paste übertragen, dazu dann den Stift bei Template drücken und das Template einfügen.

<%
/* ========= Konfiguration ========= */

const dpId = "0_userdata.0.val1";

const minValue = 0;
const maxValue = 500;

/*
Balkenbreite
0 oder undefined => automatische Berechnung
*/
const barWidth = 20;

/*
Farbverlauf
*/
const startColor = "#ff0000";
const endColor = "#00ff00";

/*
Hintergrundbogen
*/
const backgroundColor = "#d7d7d7";

/*
Anzahl der Farbsegmente
Mehr = weicherer Verlauf
*/
const segments = 80;

//***************************
// Ende der Konfiguration
//***************************

/* ========= Widgetgröße aus VIS ========= */

const widgetWidth = parseInt(style.width) || 300;
const widgetHeight = parseInt(style.height) || 180;

/* ========= Hilfsfunktionen ========= */

function clamp(v, min, max) {
   v = Number(v);
   if (isNaN(v)) return min;
   return Math.max(min, Math.min(max, v));
}

function hexToRgb(hex) {
   hex = String(hex).replace("#", "");

   if (hex.length === 3) {
       hex = hex.split("").map(c => c + c).join("");
   }

   return {
       r: parseInt(hex.substring(0, 2), 16),
       g: parseInt(hex.substring(2, 4), 16),
       b: parseInt(hex.substring(4, 6), 16)
   };
}

function rgbToHex(r, g, b) {
   return "#" +
       [r, g, b]
           .map(v => {
               const s = Math.round(v).toString(16);
               return s.length === 1 ? "0" + s : s;
           })
           .join("");
}

function mixColor(c1, c2, t) {
   return rgbToHex(
       c1.r + (c2.r - c1.r) * t,
       c1.g + (c2.g - c1.g) * t,
       c1.b + (c2.b - c1.b) * t
   );
}

/* ========= Balkenbreite ========= */

const stroke =
   barWidth && barWidth > 0
       ? Number(barWidth)
       : Math.max(8, Math.round(Math.min(widgetWidth, widgetHeight) * 0.13));

/* ========= Gauge-Geometrie ========= */

const cx = widgetWidth / 2;
const cy = widgetHeight - stroke / 2;

const radius = Math.max(
   1,
   Math.min(
       widgetWidth / 2 - stroke / 2,
       widgetHeight - stroke / 2
   )
);

/* ========= Datenpunkt ========= */

const rawValue = Number(dp[dpId]?.val ?? dp[dpId] ?? 0);

const normalizedValue =
   ((rawValue - minValue) / (maxValue - minValue)) * 100;

const value = clamp(normalizedValue, 0, 100);

/* ========= Segmentberechnung ========= */

const startRgb = hexToRgb(startColor);
const endRgb = hexToRgb(endColor);

const visibleSegments = Math.round(segments * value / 100);

function pointOnArc(t) {
   /*
   t = 0 links, t = 1 rechts
   Winkel läuft von 180° nach 0°
   */
   const angle = Math.PI - t * Math.PI;

   return {
       x: cx + radius * Math.cos(angle),
       y: cy - radius * Math.sin(angle)
   };
}
%>

<style>
   .jt-gauge-<%- widgetid %> {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: hidden;
       box-sizing: border-box;
   }

   .jt-gauge-svg-<%- widgetid %> {
       width: 100%;
       height: 100%;
       display: block;
       overflow: hidden;
   }

   .jt-gauge-bg-<%- widgetid %>,
   .jt-gauge-segment-<%- widgetid %> {
       fill: none;
       stroke-width: <%- stroke %>;
       stroke-linecap: butt;
   }

   .jt-gauge-bg-<%- widgetid %> {
       stroke: <%- backgroundColor %>;
   }
</style>

<div class="jt-gauge-<%- widgetid %>">
   <svg
       class="jt-gauge-svg-<%- widgetid %>"
       viewBox="0 0 <%- widgetWidth %> <%- widgetHeight %>"
       preserveAspectRatio="xMidYMid meet"
   >

       <!-- Hintergrundbogen -->
       <path
           class="jt-gauge-bg-<%- widgetid %>"
           d="
               M <%- pointOnArc(0).x %> <%- pointOnArc(0).y %>
               A <%- radius %> <%- radius %> 0 0 1
               <%- pointOnArc(1).x %> <%- pointOnArc(1).y %>
           "
       />

       <!-- Farbsegmente -->
       <% for (let i = 0; i < visibleSegments; i++) {
           const t1 = i / segments;
           const t2 = (i + 1) / segments;
           const p1 = pointOnArc(t1);
           const p2 = pointOnArc(t2);
           const color = mixColor(startRgb, endRgb, t1);
       %>
           <path
               class="jt-gauge-segment-<%- widgetid %>"
               d="
                   M <%- p1.x %> <%- p1.y %>
                   A <%- radius %> <%- radius %> 0 0 1
                   <%- p2.x %> <%- p2.y %>
               "
               stroke="<%- color %>"
           />
       <% } %>

   </svg>
</div>

3. Das Template gemäß den Möglichkeiten am Anfang konfigurieren

• Bei dpId muss der selbe Name nochmal wiederholt werden
• min/maxValue mappt eventuelle Dezimalwerte auf Prozent
  Also wenn dein Wertebereich von 0 bis 500 geht, dann das als min/max Eintragen. Wenn du sowieso 100% hast, dann einfach 0/100 eintragen
• barWidth ist die Dicke des Balkens
• startColor und endColor ist der Farbverlauf, dieses template kann nur genau diesen einen Verlauf. Manche gauges können auch noch diverse Sektoren mit eigenen Einstellungen, aber darauf habe ich mal verzichtet, das es nicht zu kompliziert wird.
• Bei segments muss man eigentlich nichts einstellen. Der Farbverlauf wird über viele kleine Segmente dargestellt, damit der auch entlang des Verlaufs ordentlich aussieht. Höhere Werte wäre der Verlauf feiner, die Anzahl der html/svg-Elemente wird dann allerdings auch erhöht.
• backgroundcolor ist die Farbe für den Balken, der nicht aufgedeckt wird

Auf die Darstellung der Überschrift und des Wertes als Text habe ich verzichtet, da man das selbst mit den entsprechenden widgets drüber und drunter positionieren/gruppieren und formatieren kann.
wenn gewünscht kann man das auch noch einbauen.

/* ========= Konfiguration ========= */

const dpId = "0_userdata.0.val1";

const minValue = 0;
const maxValue = 500;

/*
Balkenbreite
0 oder undefined => automatische Berechnung
*/
const barWidth = 20;

/*
Farbverlauf
*/
const startColor = "#ff0000";
const endColor = "#00ff00";

/*
Hintergrundbogen
*/
const backgroundColor = "#d7d7d7";

/*
Anzahl der Farbsegmente
Mehr = weicherer Verlauf
*/
const segments = 80;

//***************************
// Ende der Konfiguration
//***************************

Anmerkung zum neugierig machen:
Obwohl ich selbst der Autor des vis-jsontemplate Adapters bin,
war ich zu faul den kompletten code selbst zu schreiben, daher habe ich mit chatgpt, einen Verweis auf die Adapterdoku + ein paar Anweisungen + ein paar Nachjustierungen mir das template direkt erzeugen lassen

das war mein Startprompt

[Homoran]

@topsurfer sagte:

@Homoran sagte:

Weil deine Anforderungen nicht einfach sind

Echt?
Ein Schieberegler oder Gauge (wie im Bild oben), die Read-only sind?

Nein Gauges sind read only, Regler natürlich nicht.
Andere Widgets haben meist eine checkbox zum umstellen dazu.

Aber deine anderen Anforderungen sind entweder zu umfassend oder zu unspezifisch.

Ein "Kriterium"

@topsurfer sagte:

Optik einstellbar

Enthält einfach alles

Ich habe hier mit vis ein paar Beispiele, womit ich solche Bereiche darstelle

Wobei die gauges bei der CCU sogar einen Verlauf haben