Aura – Modernes Dashboard für ioBroker (Beta-Tester gesucht)
-
Kann man beim HTML-Adapter die Rest-API bespielen?
Ich spontan gesagt, ja. Du musst nur die URL dafür wissen.
Hast du eine Möglichkeit eines Auswahlfeldes für ein Datum angedacht?
Du meinst eine Art Widget bei dem man ein Datumsfeld setzen kann, was dann z.B. in einem Datenpunkt geschrieben wird?
@dering sagte:
Ich spontan gesagt, ja. Du musst nur die URL dafür wissen.Es funktioniert nicht. Ich würde gerne folgenden Code dort einfügen. Es ist ein Pulldown Menü mit Auswahlmöglichkeiten, die in einen Datenpunkt geschrieben werden. Ein wenig Skript ist enthalten - vielleicht ist das der Grund?
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Monatsauswahl</title> <script> var options; // PostMessage senden function sendPostMessage(command, stateId, value) { window.parent.postMessage({ command: command, stateId: stateId, value: value }, "*"); } // Optionen abrufen function getOptions() { sendPostMessage("getOptions"); } // Nachrichten empfangen window.addEventListener("message", function(event) { if (!event.data || !event.data.command) return; if (event.data.command === "getOptions" && event.data.value) { options = event.data.value; } }); // Auswahl geändert function zeitraumAuswahl() { var wert = document.getElementById("zeitraumAuswahl").value; sendPostMessage( "setState", "0_userdata.0.Solar.Energiefluss.Energiefluss-aktiver-Zeitraum", wert ); } // Beim Laden Optionen holen window.onload = function() { getOptions(); }; </script> </head> <body> <select id="zeitraumAuswahl" onchange="zeitraumAuswahl()"> <option value="Tag" selected>Tag</option> <option value="Monat">Monat</option> <option value="Jahr">Jahr</option> <option value="Filter">Zeitraum</option> </select> </body> </html>Du meinst eine Art Widget bei dem man ein Datumsfeld setzen kann, was dann z.B. in einem Datenpunkt geschrieben wird?
100%ig! Genau an so etwas habe ich gedacht.
Wenn man sich vergegenwärtigt, wie alt der Adapter ist: Chapeau!
-
@dering sagte:
Ich spontan gesagt, ja. Du musst nur die URL dafür wissen.Es funktioniert nicht. Ich würde gerne folgenden Code dort einfügen. Es ist ein Pulldown Menü mit Auswahlmöglichkeiten, die in einen Datenpunkt geschrieben werden. Ein wenig Skript ist enthalten - vielleicht ist das der Grund?
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Monatsauswahl</title> <script> var options; // PostMessage senden function sendPostMessage(command, stateId, value) { window.parent.postMessage({ command: command, stateId: stateId, value: value }, "*"); } // Optionen abrufen function getOptions() { sendPostMessage("getOptions"); } // Nachrichten empfangen window.addEventListener("message", function(event) { if (!event.data || !event.data.command) return; if (event.data.command === "getOptions" && event.data.value) { options = event.data.value; } }); // Auswahl geändert function zeitraumAuswahl() { var wert = document.getElementById("zeitraumAuswahl").value; sendPostMessage( "setState", "0_userdata.0.Solar.Energiefluss.Energiefluss-aktiver-Zeitraum", wert ); } // Beim Laden Optionen holen window.onload = function() { getOptions(); }; </script> </head> <body> <select id="zeitraumAuswahl" onchange="zeitraumAuswahl()"> <option value="Tag" selected>Tag</option> <option value="Monat">Monat</option> <option value="Jahr">Jahr</option> <option value="Filter">Zeitraum</option> </select> </body> </html>Du meinst eine Art Widget bei dem man ein Datumsfeld setzen kann, was dann z.B. in einem Datenpunkt geschrieben wird?
100%ig! Genau an so etwas habe ich gedacht.
Wenn man sich vergegenwärtigt, wie alt der Adapter ist: Chapeau!
-
Moin, komme hier leider nicht weiter. Ich kann nur den jeweils ganz linken TAB greifen und verschieben, bei den anderen erscheint nur das Hand-Symbol über den Punkten. Ein verschieben der einzelnen TAB geht bei mir aber nicht, getestet mit Firefox, Chrome und Edge. Mache ich hier etwas falsch? Issue hierzu anlegen?
Danke!
-
Moin, komme hier leider nicht weiter. Ich kann nur den jeweils ganz linken TAB greifen und verschieben, bei den anderen erscheint nur das Hand-Symbol über den Punkten. Ein verschieben der einzelnen TAB geht bei mir aber nicht, getestet mit Firefox, Chrome und Edge. Mache ich hier etwas falsch? Issue hierzu anlegen?
Danke!
@flkontakt Öffne Mal die Konsole (F12) und schau ob in diesem Moment ein Fehler angezeigt wird
-
Hallo zusammen,
ich möchte euch heute mein neues Projekt vorstellen: Aura – ein modernes Visualisierungs-Dashboard für ioBroker.
Warum ein neues Dashboard?Ich war treuer Nutzer von Jarvis, jedoch wird Jarvis scheinbar nicht mehr aktiv weiterentwickelt, und die klassische VIS ist mir persönlich zu statisch und zu aufwändig in der Konfiguration. Ich wollte etwas, das schnell eingerichtet ist, modern aussieht und auf dem Tablet genauso gut funktioniert wie im Browser.
Aura ist komplett neu entwickelt – KI-gestützt mit Claude von Anthropic. Das hat die Entwicklungsgeschwindigkeit deutlich erhöht, aber natürlich steckt das Projekt noch in den Kinderschuhen.
Was kann Aura?
- Flexibles Grid-Layout mit Drag & Drop
- Mehrere Tabs / Seiten
- Dark Mode, Light Mode und diverse Themes (inkl. Catppuccin, Apple Liquid Glass)
- Widgets:
- Schalter, Dimmer, Thermostat
- Gauge, Füllstandsanzeige (Tank/Wasser/Gas)
- Diagramm (EChart, Linien/Balken/Pie)
- Kalender (iCal/Google Calendar)
- Wetter
- Uhr
- Kamera / iFrame
- EVCC (Wallbox / Solar)
- Müllabfuhr-Anzeige
- Gruppe (verschachtelte Widgets)
- und weitere...
- Widget-Konfiguration direkt im Browser, kein YAML, kein JSON-Editieren
- Admin-Interface für Layouts, Themes und Einstellungen
Installation
Noch nicht im offiziellen ioBroker-Repository. Manuell über die URL im ioBroker Admin:
Admin → Adapter → Von URL installieren (GitHub-Icon oben rechts) → folgende URL eingeben:
https://github.com/hdering/iobroker.aura
Updates
Da Aura von einer externen URL installiert wird und nicht im offiziellen ioBroker-Repository ist, werden Updates nicht automatisch eingespielt. Um auf die neueste Version zu aktualisieren, bitte folgenden Befehl auf dem ioBroker-Server ausführen.
Per SSH oder direkt auf dem Server ins ioBroker-Verzeichnis wechseln (meist /opt/iobroker) und dann:
npm install iobroker.aura@latest --force && iobroker upload aura && iobroker restart aura
Den aktuellen Stand und alle Änderungen findet ihr hier:
👉 https://github.com/hdering/iobroker.aura/releases
Was ich suche
Beta-Tester, die das Dashboard ausprobieren und Feedback geben. Speziell interessiert mich:
- Welche Widgets fehlen euch?
- Was funktioniert nicht wie erwartet?
- Wie verhält es sich auf euren Geräten (Tablet, Smartphone, PC)?
Bugs und Feature-Wünsche bitte hier melden:
👉 https://github.com/hdering/iobroker.aura/issues
Gerne direkt als GitHub Issue – so kann ich alles strukturiert nachverfolgen. Wer keinen GitHub-Account hat, kann auch hier im Thread antworten.
Hinweis
Das Projekt ist ein Hobby-Projekt im frühen Stadium. Es kann noch zu Fehlern kommen, und die Konfigurationsstruktur kann sich noch ändern. Produktiver Einsatz auf eigene Verantwortung.
Über jedes Feedback freue ich mich!
Viele Grüße,
hderingEin paar Screenshots:
Frontend
Backend:
-
-
Dateimanager wäre natürlich besser.
NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken. -
-
Hallo zusammen,
ich möchte euch heute mein neues Projekt vorstellen: Aura – ein modernes Visualisierungs-Dashboard für ioBroker.
Warum ein neues Dashboard?Ich war treuer Nutzer von Jarvis, jedoch wird Jarvis scheinbar nicht mehr aktiv weiterentwickelt, und die klassische VIS ist mir persönlich zu statisch und zu aufwändig in der Konfiguration. Ich wollte etwas, das schnell eingerichtet ist, modern aussieht und auf dem Tablet genauso gut funktioniert wie im Browser.
Aura ist komplett neu entwickelt – KI-gestützt mit Claude von Anthropic. Das hat die Entwicklungsgeschwindigkeit deutlich erhöht, aber natürlich steckt das Projekt noch in den Kinderschuhen.
Was kann Aura?
- Flexibles Grid-Layout mit Drag & Drop
- Mehrere Tabs / Seiten
- Dark Mode, Light Mode und diverse Themes (inkl. Catppuccin, Apple Liquid Glass)
- Widgets:
- Schalter, Dimmer, Thermostat
- Gauge, Füllstandsanzeige (Tank/Wasser/Gas)
- Diagramm (EChart, Linien/Balken/Pie)
- Kalender (iCal/Google Calendar)
- Wetter
- Uhr
- Kamera / iFrame
- EVCC (Wallbox / Solar)
- Müllabfuhr-Anzeige
- Gruppe (verschachtelte Widgets)
- und weitere...
- Widget-Konfiguration direkt im Browser, kein YAML, kein JSON-Editieren
- Admin-Interface für Layouts, Themes und Einstellungen
Installation
Noch nicht im offiziellen ioBroker-Repository. Manuell über die URL im ioBroker Admin:
Admin → Adapter → Von URL installieren (GitHub-Icon oben rechts) → folgende URL eingeben:
https://github.com/hdering/iobroker.aura
Updates
Da Aura von einer externen URL installiert wird und nicht im offiziellen ioBroker-Repository ist, werden Updates nicht automatisch eingespielt. Um auf die neueste Version zu aktualisieren, bitte folgenden Befehl auf dem ioBroker-Server ausführen.
Per SSH oder direkt auf dem Server ins ioBroker-Verzeichnis wechseln (meist /opt/iobroker) und dann:
npm install iobroker.aura@latest --force && iobroker upload aura && iobroker restart aura
Den aktuellen Stand und alle Änderungen findet ihr hier:
👉 https://github.com/hdering/iobroker.aura/releases
Was ich suche
Beta-Tester, die das Dashboard ausprobieren und Feedback geben. Speziell interessiert mich:
- Welche Widgets fehlen euch?
- Was funktioniert nicht wie erwartet?
- Wie verhält es sich auf euren Geräten (Tablet, Smartphone, PC)?
Bugs und Feature-Wünsche bitte hier melden:
👉 https://github.com/hdering/iobroker.aura/issues
Gerne direkt als GitHub Issue – so kann ich alles strukturiert nachverfolgen. Wer keinen GitHub-Account hat, kann auch hier im Thread antworten.
Hinweis
Das Projekt ist ein Hobby-Projekt im frühen Stadium. Es kann noch zu Fehlern kommen, und die Konfigurationsstruktur kann sich noch ändern. Produktiver Einsatz auf eigene Verantwortung.
Über jedes Feedback freue ich mich!
Viele Grüße,
hderingEin paar Screenshots:
Frontend
Backend:
Hallo,
kann ich beim Widget Füllstandanzeige (Batterie) das Icon in der Größe ändern?
Ja es ist schmal eingestellt, aber ich möchte es so.
-
Hallo,
kann ich beim Widget Füllstandanzeige (Batterie) das Icon in der Größe ändern?
Ja es ist schmal eingestellt, aber ich möchte es so. -
Frage in die Runde, welche Funktion haben die Werte Schnellwahl (komkagetrennt) im Thermostat-Widget?
@flkontakt Dort ist normalerweise der DP für Soll Temperatur drin und dann kann man die Wunschtemperaturen dort festlegen und im Frontend schnell auswählen.
NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken. -
@flkontakt Dort ist normalerweise der DP für Soll Temperatur drin und dann kann man die Wunschtemperaturen dort festlegen und im Frontend schnell auswählen.
@flkontakt Dort ist normalerweise der DP für Soll Temperatur drin und dann kann man die Wunschtemperaturen dort festlegen und im Frontend schnell auswählen.
So hatte ich mir das schon gedacht, finde die Werte aber keiner der Widget Darstellungen (Standard, Kompakt usw.). Bug? Dann würde ich ein Issue anlegen. Wäre für viele andere Widgets sicherlich auch hilfreich/wünschenswert, z.B. Jalousie mit Schnellwahl der Höhen usw. Danke!
-
@flkontakt Dort ist normalerweise der DP für Soll Temperatur drin und dann kann man die Wunschtemperaturen dort festlegen und im Frontend schnell auswählen.
So hatte ich mir das schon gedacht, finde die Werte aber keiner der Widget Darstellungen (Standard, Kompakt usw.). Bug? Dann würde ich ein Issue anlegen. Wäre für viele andere Widgets sicherlich auch hilfreich/wünschenswert, z.B. Jalousie mit Schnellwahl der Höhen usw. Danke!
@flkontakt bug, popup ist verschwunden. imPopup konnte man die Vorauswahl-Werte auswählen.
https://github.com/hdering/ioBroker.aura/issues/131 -
Hallo,
kann ich beim Widget Füllstandanzeige (Batterie) das Icon in der Größe ändern?
Ja es ist schmal eingestellt, aber ich möchte es so.@sigi234 Beispiel
.aura-widget-fill-1776378310602 .flex-1 > div { height: 100% !important; }Du musst bei Dir die WidgetId fill-xxxxxxx holen und die dann nach
aura-widget-fill-eintragen.
NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken. -
@sigi234 Beispiel
.aura-widget-fill-1776378310602 .flex-1 > div { height: 100% !important; }Du musst bei Dir die WidgetId fill-xxxxxxx holen und die dann nach
aura-widget-fill-eintragen.
-
@sigi234 Stell mal bitte die Widgets-Einstellungen rein. Danke.
NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken. -
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren AnmeldenSupport us
292
Online32.8k
Benutzer82.8k
Themen1.3m
Beiträge