Neuer Installer und neuer Fixer: übersichtliche Oberfläche und `iob docker`

[icebear]

Ich hab jetzt auch mal den Aura Adapter installiert und mich daran versucht.

Zum Testen wollte ich ein 'html-widget' erstellen, aber irgendwie klappt das nich so richtig, siehe:

Und der zugehörige html-code:

<div style="position: relative; width: 100%; height: 100%; min-width: 150px; min-height: 150px; box-sizing: border-box; text-align: center; font-family: Roboto, sans-serif;">
  
  <svg viewBox="0 0 100 100" style="width: 100%; height: 100%;">
    <!-- Definition des Farbverlaufs (Gradient) -->
    <defs>
      <linearGradient id="horseshoeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#f68709" />
        <stop offset="100%" stop-color="#fef3e6" />
      </linearGradient>
    </defs>

    <!-- Bogen Hintergrund & Vordergrund (Rotiert um 135 Grad) -->
    <g transform="rotate(135 50 50)">
      <circle cx="50" cy="50" r="40" 
              fill="none" 
              stroke="#575f59" 
              stroke-width="7" 
              stroke-dasharray="188.5 251.3" 
              stroke-linecap="round" />
      
      <!-- Bogen Vordergrund mit Gradient & dynamischem Füllstand -->
      <circle cx="50" cy="50" r="40" 
              fill="none" 
              stroke="url(#horseshoeGradient)" 
              stroke-width="7" 
              stroke-dasharray="188.5 251.3" 
              stroke-dashoffset="{{ 188.5 - (188.5 * Math.min(Math.max(senec.0.ENERGY.GUI_INVERTER_POWER || 0, 0), 5000) / 5000) }}" 
              stroke-linecap="round"
              style="transition: stroke-dashoffset 0.5s ease-in-out;" />
    </g>

    <!-- Horizontale Trennlinie (2pt) in der Mitte -->
    <line x1="22" y1="50" x2="78" y2="50" 
          stroke="#ffffff" 
          stroke-width="1.67" 
          stroke-linecap="round" />

    <!-- Vertikale Trennlinie (2pt) unterhalb der Mitte -->
    <line x1="52.33" y1="51" x2="52.33" y2="78" 
          stroke="#ffffff" 
          stroke-width="1.67" 
          stroke-linecap="round" />
  </svg>

  <!-- Titel / Label oben -->
  <div style="position: absolute; top: 20%; left: 0; right: 0; font-size: 1.9em; color: #ffffff; text-transform: uppercase; letter-spacing: 1px;">
    SOLAR
  </div>

  <!-- Hauptwert oberhalb der Trennlinie -->
  <div style="position: absolute; top: 35%; left: 0; right: 0; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 6px;">
    <!-- Inline SVG Icon -->
    <svg style="width: 1.4em; height: 1.4em; fill: #ea8109;" viewBox="0 0 24 24">
      <path d="M3.33 16H11V13H4L3.33 16M13 16H20.67L20 13H13V16M21.11 18H13V22H22L21.11 18M2 22H11V18H2.89L2 22M11 8H13V11H11V8M15.76 7.21L17.18 5.79L19.3 7.91L17.89 9.33L15.76 7.21M4.71 7.91L6.83 5.79L8.24 7.21L6.12 9.33L4.71 7.91M3 2H6V4H3V2M18 2H21V4H18V2M12 7C14.76 7 17 4.76 17 2H7C7 4.76 9.24 7 12 7Z" />
    </svg>

    <!-- Hauptwert -->
    <span style="font-size: 2.1em; font-weight: bold; color: #ffffff;">
      {{ senec.0.ENERGY.GUI_INVERTER_POWER | round(0) }}
    </span>

    <!-- Einheit -->
    <span style="font-size: 1.1em; color: #808080; font-weight: 600;">W</span>
  </div>

  <!-- Linker Bereich (Grid) -->
  <div style="position: absolute; top: 56%; left: 12%; width: 37%; text-align: right; line-height: 1.1;">
    <div style="font-size: 1.0em; color: #8a9ba8; text-transform: uppercase;">Grid</div>
    
    <!-- Hauptwert mit dynamischem Farbwechsel -->
    <span style="font-size: 1.3em; font-weight: bold; color: {{ senec.0.ENERGY.GUI_GRID_POW < 0 ? '#00ff00' : '#ff2c0a' }};">
      {{ senec.0.ENERGY.GUI_GRID_POW | round(0) }}
    </span>
    
    <span style="font-size: 0.85em; color: #808080; font-weight: 600; margin-left: 2px;">W</span>
  </div>

  <!-- Rechter Bereich (Total) -->
  <div style="position: absolute; top: 56%; left: 55%; width: 24%; text-align: right; line-height: 1.1;">
    <div style="font-size: 1.0em; color: #8a9ba8; text-transform: uppercase;">Total</div>
    <span style="font-size: 1.3em; font-weight: bold; color: #cde700;">
      {{ 0_userdata.0.Energie.Senec.Tageswerte.pv_kwh | round(1) }}
    </span>
    <span style="font-size: 0.85em; color: #808080; font-weight: 600; margin-left: 2px;">kWh</span>
  </div>
  
  <!-- Unterer Bereich (Hausverbrauch) -->
  <div style="position: absolute; top: 85%; left: 0; right: 0; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 6px;">
    <!-- Inline SVG Icon -->
    <svg style="width: 1.6em; height: 1.6em; fill: #ea8105;" viewBox="0 0 24 24">
      <path d="M12 3L2 12H5V20H19V12H22L12 3M11.5 9.5H14.5L12.5 13.5H14.5L10.5 18.5V14.5H8.5L11.5 9.5Z" />
    </svg>

    <!-- Hauptwert -->
    <span style="font-size: 1.8em; font-weight: bold; color: #ffffff;">
      {{ senec.0.ENERGY.GUI_HOUSE_POW | round(0) }}
    </span>

    <!-- Einheit -->
    <span style="font-size: 0.85em; color: #808080; font-weight: 600;">W</span>
  </div>

</div>

was mache ich falsch, das die Werte nicht angezeigt werden? Hab es mit einer { Klammer versucht und mit {{ Klammern, aber die Werte wollen nicht erscheinen.

[Andreas Podlich]

Hi, ich nutze bisher auch Jarvis und habe mein Premium dort nun gekündigt.
Aura kommt hier am besten an das heran, was Jarvis geboten hat.

Ich hätte ein dickes featurerequest:
Einen Import der Daten aus Jarvis. Im Jarvis kann man ja eine json exportieren mit allen Geräten.
Das würde einen Umstieg wirklich vereinfachen.

Ich habe schon KI genutzt um deinen Adapter zu analysieren und gefragt wie einfach so ein Import der Exportieren Jarvis Daten wäre... Naja, ginge wohl.
Werde mich aber demnächst mal an ein Test-Dashboard wagen.

Danke für die Arbeit!

[lesiflo]

@Andreas-Podlich Schau dir mal dazu die Posts #73 - #75 an. Da gibt es schon was, ist aber nicht fertig.

[Agrippinenser]

@icebear auch einfache Bindings wie

Zeile 1 {dp}
Zeile 2 {0_userdata.0.test.testval4}

ziehen nicht. Getestet mit V0.48.1

[dering]

@ioT4db super, dass das noch geklappt hat. Hoffentlich passiert es nicht mehr.
Es geht nichts über Backups :)

[dering]

@icebear Ich glaube tatsächlich hatte bisher keiner danach gefragt, dass Variablen auch in html funktionieren. Das ist aber überhaupt kein Problem.
Erstelle dazu gerne im github ein Feature-Request https://github.com/hdering/ioBroker.aura/issues, dann baue ich das gerne ein.

[dering]

@Andreas-Podlich @mcu ist da drin. Er hat vor kurzem geschrieben, es wird erst Ende September werden.

[dering]

@Agrippinenser in 0.48.4 enthalten

[icebear]

@dering sagte:

Erstelle dazu gerne im github ein Feature-Request https://github.com/hdering/ioBroker.aura/issues, dann baue ich das gerne ein.

Issue ist erstellt.

Issue: Feature Request

[Agrippinenser]

@dering beeindruckende Entwicklungsgeschwindigkeit. vielen Dank !

[Agrippinenser]

@dering

ich habe die 0.48.3 (2026-08-22) versucht. Die Werte kommen nun.
CSS Variablen color:var(--accent); werden aber nicht umgesetzt oder mache ich das falsch ?

<table style="text-align:left; line-height:1.2; border-collapse:collapse; font-family:sans-serif;">
  <!-- Schlafzimmer -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Schlafzimmer:</td>
    <td style="font-size:18px; padding-right:20px; color:var(--accent);"><b>{alias.0.Temperatur-Luftfeuchte.Schlafzimmer_Temperatur.ACTUAL}</b> °</td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;"><b>{alias.0.Temperatur-Luftfeuchte.Schlafzimmer_Temperatur.SECOND}</b> %</td>
  </tr>
  
  <!-- Nord -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Nord:</td>
    <td style="font-size:18px; padding-right:20px; color var(--accent);"><b>{alias.0.Temperatur-Luftfeuchte.OG_Nord_Temperatur.ACTUAL}</b> °</td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;"><b>{alias.0.Temperatur-Luftfeuchte.OG_Nord_Temperatur.SECOND}</b> %</td>
  </tr>

  <!-- Süd -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Süd:</td>
    <td style="font-size:18px; padding-right:20px; color:#ff00ff;"><b>{alias.0.Temperatur-Luftfeuchte.OG_SuedTemperatur.ACTUAL}</b> °</td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;"><b>{alias.0.Temperatur-Luftfeuchte.OG_SuedTemperatur.SECOND}</b> %</td>
  </tr>

  <!-- Bad -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Bad:</td>
    <td style="font-size:18px; padding-right:20px;"><b>{alias.0.Temperatur-Luftfeuchte.Bad_Temperatur.ACTUAL}</b> °</td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;"><b>{alias.0.Temperatur-Luftfeuchte.Bad_Temperatur.SECOND}</b> %</td>
  </tr>
</table>

[JoJo58]

@Agrippinenser

Ist es nicht einfacher, das im Werte Widget zu machen?

<table style="text-align:left; line-height:1.2; border-collapse:collapse; font-family:sans-serif;">

  <!-- Schlafzimmer -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Schlafzimmer:</td>
    <td style="font-size:18px; padding-right:20px; color:var(--accent);">
      <b>{alias.0.Temperatur-Luftfeuchte.Schlafzimmer_Temperatur.ACTUAL}</b> °
    </td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;">
      <b>{alias.0.Temperatur-Luftfeuchte.Schlafzimmer_Temperatur.SECOND}</b> %
    </td>
  </tr>

  <!-- Nord -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Nord:</td>
    <td style="font-size:18px; padding-right:20px; color:var(--accent);">
      <b>{alias.0.Temperatur-Luftfeuchte.OG_Nord_Temperatur.ACTUAL}</b> °
    </td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;">
      <b>{alias.0.Temperatur-Luftfeuchte.OG_Nord_Temperatur.SECOND}</b> %
    </td>
  </tr>

  <!-- Süd -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Süd:</td>
    <td style="font-size:18px; padding-right:20px; color:#ff00ff;">
      <b>{alias.0.Temperatur-Luftfeuchte.OG_SuedTemperatur.ACTUAL}</b> °
    </td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;">
      <b>{alias.0.Temperatur-Luftfeuchte.OG_SuedTemperatur.SECOND}</b> %
    </td>
  </tr>

  <!-- Bad -->
  <tr>
    <td style="font-size:14px; padding-right:15px;">🌡 Bad:</td>
    <td style="font-size:18px; padding-right:20px;">
      <b>{alias.0.Temperatur-Luftfeuchte.Bad_Temperatur.ACTUAL}</b> °
    </td>
    <td style="font-size:14px; padding-right:10px;">💧:</td>
    <td style="font-size:18px;">
      <b>{alias.0.Temperatur-Luftfeuchte.Bad_Temperatur.SECOND}</b> %
    </td>
  </tr>

</table>

Gruß, Johannes

[Andreas Podlich]

@dering Super. Das klingt echt gut!!
Danke.

[Agrippinenser]

@JoJo58 sagte:

Ist es nicht einfacher, das im Werte Widget zu machen?

oh ja, ich bin nicht auf die Idee gekommen das mit dem Werte Widget zu machen. So kommt das eine zum anderen :-)

lg

[icebear]

Hallo, ich verstehe das Diagramm/Verteilung Widget nich so ganz. Ich habe die Daten sowohl in influxdb als auch in der history gespeichert, aber die Werte die da bei 6h oder 1h oder 24h angezeigt werden, die stimmen überhaupt nicht, egal was ich bei Aggregation einstelle. 

Wie müssen den die Daten in history oder influxdb gespeichert werden damit er mir bei den einzelnen auswahlpunkten (1h, 6h, 24h) die Werte anzeigt, die auch tatsächlich entstanden sind?

[lesiflo]

@icebear

So sieht mit influxdb bei mir aus:

Aggregation: "Letzter Wert"

[lesiflo]

@icebear
Das Widget Diagramm (Verteilung) eignet sich am besten um sie sich aktuellen Tageswerte anzuschauen. Für die Historie
solltest du das Diagramm (Erweitert) mit Balken und als Stapel nehmen.

z.B.

Für den Verbrauch:

[icebear]

@lesiflo
Danke für deine Erklärung, jetzt habs ichs kapiert und funktioniert jetzt auch.

[icebear]

@dering sagte:

Erstelle dazu gerne im github ein Feature-Request https://github.com/hdering/ioBroker.aura/issues, dann baue ich das gerne ein.

Perfekt, vielen Dank für die schnelle Umsetzung, es funktioniert jetzt.

[dering]

Hallo zusammen,

ich melde mich mal wieder mit neuen Features, die seit dem letzten Update dazu gekommen sind.

🤖 KI-Assistent für Dashboards (Beta)
Das größte Stück: Aura bringt jetzt einen eingebauten MCP-Server mit. Damit kann man sein Dashboard von einer KI bauen und umbauen lassen – „leg mir einen Tab Wohnzimmer an mit Licht, Rollladen und Temperatur", „mach die Kacheln schmaler", „kopier den Tab fürs Schlafzimmer". Widgets, Tabs, Bereiche, Popups, Gruppen und wiederverwendbare Vorlagen sind alle ansprechbar. Ein Schalter und ein Token in den Instanz-Einstellungen, fertig. Noch Beta, aber schon erstaunlich brauchbar.

🔒 PIN-Schutz
Bereiche und Tabs lassen sich mit einem Code schützen – egal ob man über das Menü, die Tab-Leiste, eine Klick-Aktion oder ein Lesezeichen dorthin kommt. Praktisch für das Wandtablet im Flur.

🎨 Bedingungen (Conditions) deutlich ausgebaut
Regeln färben nicht mehr nur die ganze Kachel: Titel, Icon und Wert lassen sich einzeln steuern – Text, Farbe, Icon, Größe, Sichtbarkeit. Dazu ein pulsierender Rahmen statt der blinkenden Karte, Randstärke/Radius/Transparenz – und eine Regel kann jetzt auch eine Meldung verschicken, bei Listen sogar eine pro auslösender Zeile.

📋 Listen sind erwachsen geworden
Die Zeilen-Darstellungen können jetzt alles, was die einzelnen Widgets können: Schalter, Schieberegler, Rollladen (inkl. Lamellen), Tasten, Datumsfeld und neu ein Auswahlfeld – jeweils mit dem kompletten Optionssatz. Dazu Icons pro Zeile oder listenweit, Trennlinien, ein Sortier-Dialog mit Kriterien-Kette, bessere Filter und Bedingungen pro Zeile. Eine dynamische Liste ersetzt damit oft ein halbes Dashboard.

📊 Diagramme
Gestapelte Flächen, Werte direkt an den Datenpunkten, gemischte Serien aus History und JSON auf einer Zeitachse (z. B. Messwerte + PV-Prognose), Zahlenformat pro Serie, Datumsfeld in der Tagesnavigation – und etliche Fixes rund um Verbrauchsbalken, zurücksetzende Zähler und Achsen.

🧩 Platzhalter, die rechnen
Im HTML- und Wert-Widget gibt es jetzt vis-kompatible Bindings inklusive Rechnungen und Zeitstempeln: {id;round(1)}, {a:id1;b:id2;a * b}, {id.lc;date(HH:mm)}.

Und quer durch die Widgets
Thermostat mit runder Skala, Mediaplayer erkennt jetzt jeden Adapter mit Standard-Media-Rollen (Yamaha, Denon, Volumio …), Bild-Widget zeigt rohes SVG (z. B. Gäste-WLAN-QR-Code), Karussell mit Beschriftung pro Zustand, Verteilung/Füllstand mit Referenz aus einem Datenpunkt und Warnfarbe, Statusübersicht erkennt Drehgriffkontakte.

Meldungen selbst haben auch noch nachgelegt: HTML in Titel und Text, Sendezeit auf der Karte, sendTo-Beispiele im Admin und [[dp]]-Platzhalter, die beim Auslösen eingefroren werden – das Archiv zeigt also den Wert von damals, nicht den von jetzt.

Installation und Doku: https://github.com/hdering/ioBroker.aura – Feedback und Issues sehr willkommen, die meisten der oben genannten Punkte kamen genau von dort.