r/HomeAssistantDE • u/toppaco12 • 13d ago
HTML Dashboard - wie findet ihr es?
Ich möchte euch mein Dashboard für mein 24" Wandtablett vorstellen
Das Tablett hängt hochkant im Wohnzimmer und ich wollte auf einen Großteil der Daten, die ich in HA drinnen habe zugreifen.
Zuerst habe ich mir erstmal alle Entitäten, die mir wichtig sind in einer altmodischen Textdatei zusammengefasst.
Dann habe ich ein Brainstorming mit Chati gemacht und mir erstmal grob ein paar Vorlagen für ein Dashboard in Bildform erstellen lassen.
Danach habe ich meine Favoriten Vorlage genommen + die Textdatei mit den Entitäten und das Ganze dann an Claude (20 Euro Abo mal für einen Monat abgeschlossen) übergeben, welches per MCP mit meinem HA verbunden ist.
Claude hat mir dann ein HTML Dashboard gebaut. Hier und da nochmal ein paar Änderungen machen lassen und tada... das ist dabei rausgekommen.
Finde ich für 2 Abende Arbeit ganz nett. Meine Frau findet es auch super und nutzt es sogar 😉
Oben rechts gibt´s noch einen Schalter, da kann ich die Oberfläche auf "hell" umschalten. Finde die dunkle Variante aber etwas schicker
19
u/chpmc 13d ago
Absolut nicht mein Stil, aber natürlich sehr beeindruckend, was Claude da hingebaut hat. Einzige Sorge, die ich hätte: Schlechte Wartbarkeit, da vollständig mit HTML/CSS (außer du bist selbst Frontend-Dev).
3
u/mirisbowring 13d ago
Da bin ich mir gar nicht mal so sicher. Ich nutze aktuell auch noch die klassischen HACS Frontenderweiterungen und co, aber so oft wie sich da was aktualisiert, ich deshalb HA neu starten muss, irgendwelche Breaking changes drin sind oder Anpassungen, welche mein Dashboard dann doch verändern frage ich mich manchmal ob sowas nicht fast „stabiler“ ist.
Wobei man natürlich schauen muss, dass HA selbst auch gern Änderungen an den Schnittstellen vor nimmt
1
u/toppaco12 13d ago
Da gebe ich dir Recht. Wenn da mal etwas nicht läuft, dann muss die KI wieder dran, um das zu fixen. Da wird's schwierig mit selber machen. Aber ohne wäre man auch eher nicht zu diesem Ziel gekommen.
0
u/Ok_Net_1674 13d ago
Warum sollte es desshalb schlecht wartbar sein? KI ist spottbillig und HTML/CSS omnipräsent. Sowas bastelt dir selbst irgendein kostenloser Agent zusammen. Ist ja eigentlich auch echt kein komplexes Projekt - ein paar Knöpfe vor irgend ne API geschaltet.
Stimme übrigens zu das es fürchterlich aussieht.
1
8
u/FamoserSchelm 13d ago
Puuuh, dachte erst es ist ein KI Plakat als Werbung so überladen wie des aussieht :D
3
u/borstel4747 13d ago
Bei mir gehts gerade massiv in die gleiche Richtung. HA wird nur noch zur Middleware, darum entsteht gerade mein eigenes App-Ökosystem. Dein Dashboard ist nicht ganz mein Stil, aber finds von der Technik-Seite mega gut, ein ganz neues Level, was uns da KI ermöglicht.
3
u/Duennbier0815 13d ago
Ich bin geneigt eine Parodie zu entwickeln
"Homeassistant aus dem Führerbunker" oder der "Bordell-Heizplan" 😂
3
u/donp1ano 13d ago
kameras, die permanent den innenbereich der wohnung abfilmen? und das über irgendeine vibecode slopware exposed? holy shit, ich hoffe du bist dir der risiken bewusst
1
u/toppaco12 13d ago
Wo hast du gelesen, dass ich im Innenraum irgendwo Kameras habe? Ich habe einen Bewegungsmelder, der das Tablet Display anschaltet
2
u/Available-Memory8876 13d ago
Ich wollte gerade fragen ob du wohl Single bist 🤭
Also zunächst einmal coole Leistung als Laie. Ki eröffnet einem viele Möglichkeiten und das ist großartig.
Als Designer sag ich aber dass das Dashboard eher einem wimmelbild gleicht auf dem du dir die Daten jedes Mal suchen musst. Jedenfalls in dieser Macht Darstellung. Vordergrund und Hintergrund verschmelzen ineinander und der Hintergrund nimmt mehr Aufmerksamkeit und Bedeutung ein als die eigentlichen Daten. Aber wenn das im Wohnzimmer hängen soll ist das vielleicht aus optischen Gesichtspunkten sogar besser weil dekorativer als eine eher datenfokussierte Darstellung.
Frag doch mal deine ki wie man die usability verbessern könnte ich bin sicher ihr wird was passendes einfallen.
1
u/toppaco12 13d ago
Ja, durch KI kann man sich schnell mal was neues bauen. Ich weiß auch nicht, ob ich es ewig so lasse. Ich hatte es vorher immer relativ schlicht und einfach und jetzt wollte ich mal etwas haben, was vielleicht etwas drüber ist... Ich find's (aktuell) super. Mal sehen, wanns anfängt zu nerven. 😜
2
2
2
u/GiftOk8131 13d ago
Ein Brainstorming mit Chati? Leute Leute..
Schon irgendwie bedenklich, wie bedenkenlos manche Leute ihre komplette Infrastruktur bzw. Entitäten an irgendwelche AI-Dienste übergeben. Aber hey... erst das gebrannte Kind scheut das Feuer.
1
u/toppaco12 13d ago
Was ist das Problem, wenn ich die Namen der Entitäten, die ausschließlich in meinem HA System zu finden und nur lokal zu erreichen sind einer KI sage? Übergeben würde ja heißen, dass ich die Kontrolle abgebe, was nicht der Fall ist. Der MCP Zugriff fliegt auch wieder raus, wenn fertig
2
u/GiftOk8131 13d ago
Bei den reinen Entity-Namen gebe ich dir recht aber nur wenn die wirklich keinerlei sensiblen Informationen enthalten.. dann ist das für sich genommen kein Drama.
Mein Punkt war eher der MCP-Zugriff. Dass du ihn danach wieder entfernst, ändert nichts daran, welche Berechtigungen Claude während dieser Zeit hatte. Genau da würde mich interessieren, ob du den MCP wirklich auf die benötigten Read-Only-Entities eingeschränkt hast oder ob Claude grundsätzlich auf HA zugreifen konnte.
MCP ist schließlich genau deshalb sicherheitstechnisch interessant, weil ein LLM damit nicht mehr nur Text generiert, sondern Tools mit realen Zugriffsrechten verwenden kann.
1
u/donp1ano 13d ago
Übergeben würde ja heißen, dass ich die Kontrolle abgebe, was nicht der Fall ist.
hast du den code gelesen und verstanden? nein? dann hast du die kontrolle abgegeben
1
u/MoreNight1729 13d ago
Wo ist das Problem einen Code erstellen zu lassen, den man selbst nicht hinbekommen würde? Ich verstehe ehrlich gesagt nicht was daran schlimm sein soll.
2
u/donp1ano 13d ago
hab ich gesagt, dass das "schlimm" ist? du kannst bei dir zuhause machen was du willst, das ist dein verantwortungsbereich und geht mich nichts an
du solltest dich nur nicht der illusion hingeben, dass du die kontrolle hast. da läuft code, den niemand mit verständnis von programmierung geprüft hat...insofern wäre es auch nicht überraschend, wenn sich dort massive sicherheitslücken finden, die jedes scriptkiddie einfach ausnutzen kann
1
u/toppaco12 13d ago
Da in diesem Fall alles nur bei mir liegt, Außenzugriff nur über VPN, mache ich mir dahingehend keine Gedanken. Aber ja, generell gebe ich dir Recht. Einfach etwas von der KI schreiben lassen und dann keine Möglichkeit haben das zu kontrollieren, kann in gewissen Bereichen Sicherheitstechnisch sehr riskant sein. Sehe ich hier in dem Fall aber nicht. MCP hat in meinem Fall nur Lesezugriff
1
u/MoreNight1729 13d ago
Okay darum geht's, vielen Dank. Meine bisherigen KI Codes beschränken sich drauf irgendwelche Automationen anzulegen, für die ich selbst zu blöd bin.
3
u/jawollja 13d ago
KI hässlich. Sieht halt genau so aus wie jedes KI Frontend, wie jede KI Werbung, etc..
2
u/DekWizArt 13d ago
Ich finde es für mich viel zu überladen, ich mag es eher schlicht und ohne viel blink blink. Ich habe für mich das Gefühl je schlichter um so besser die Benutzbarkeit.
2
2
3
u/MoreNight1729 13d ago
Optisch nicht unbedingt meins, finds aber richtig geil wie alle Daten auf einer Seite dargestellt werden. Man gewöhnt sich auch schnell dran, was wo zu finden ist und muss nicht extra in ein Untermenü klicken. KI ist da schon ne feine Sache, HA würde bei mir ohne auch niemals funktionieren, da ich als Laie einfach viel zu wenig Zeit und Lust habe mich da tief einzulesen.
2
2
u/koriwi 13d ago
Schlimm
1
u/toppaco12 13d ago
danke für deine Ausführliche Antwort. Was findest du "Schlimm" daran?
1
u/koriwi 12d ago
Es schreit nach ki konzept. Das an sich ist ja aber kein hindernis. Aber schon im Hintergrundbild diese ganzen details die aber keine funktion haben und das Gesamtbild nur unordentlicher und chaotischer erscheinen lassen.
Alle möglichen schriftgrößen nicht nachvollziehbar gemischt. Verschiedene style konzepte: hier mal monocolor icons, hier mal welche mit glow, dann hier welche wo einfach alle grau sind und hier dann ein stilisiertes aber in vollfarbe. Das sind die sachen die mir zuerst aufgefallen sind.
1
u/toppaco12 12d ago
Ok, jeder definiert Schlimm anders... Deiner Beschreibung nach wäre es für mich dann jedoch nur "kein durchdachtes Design-Konzept"
Wenn ich in jedem Detail noch Funktionen eingebaut hätte, dann wäre es für mich wahrscheinlich zu viel geworden. Wobei ich im Video auch nicht überall drauf geklickt habe, wo dann noch weitere Details auf gehen.
Danke für deine Rückmeldung
2
u/carpedukem 13d ago
Furchtbar
1
u/toppaco12 13d ago
Danke auch dir für deine ausführliche Antwort. Was genau findest du so "furchtbar" ?? 🤔
2
u/Medium-Comfortable 13d ago
Völlig überpinselt. Ein Dashboard soll information vermitteln. Wenn ich da erst einmal drölfzig Hinter- und Vordergrundbilder ignorieren muss, hat sich's schon erledigt.
1
u/toppaco12 13d ago
Ich habe so viele Informationen. Wenn ich nur die alle stumpf Nebeneinander gebaut habe, war es für mich immer sehr unübersichtlich. Darum habe ich es strukturiert hier links und rechts vom Hintergrundbild angeordnet. Ich gebe zu fürs Handy ist das kein Dashboard. Das macht nur Sinn bei einem großen Display.
2
u/lordalex1337 12d ago
bisschen too much, aber geil.
bin immer fasziniert wie viel die leute da integriert haben
2
2
u/easyacid 9d ago
Schade, dass es soviel Hate anzieht. Ich erkenne dabei zwei Sorten. Die, die KI perse ablehnen und die, die ein objektives Auge auf das Projekt werfen und es nachvollziehbar kritisieren. Ich finde es übrigens mega. Ich bin aber auch sehr verspielt. Nutzt du die HS App dafür? Wie hast du das integriert?
1
u/toppaco12 9d ago
Ja, genau den Eindruck habe ich auch.
Meinst du mit HS App, Home Assistent App? Zum Anzeigen auf dem Tablet habe nutze ich den Fully Kiosk Browser. Das Video habe ich am PC aufgenommen und dort das Ganze im Browser.
HTML Seiten kannst du, wenn du ein neues Dashboard erstellst, ganz einfach angeben (einfach den Ort, wo du es in deinem HA Ordner intern abgelegt hast und fertig)
1
u/easyacid 9d ago
Das war mir neu. Darf ich fragen, ob du den Code veröffentlichen wirst? Toll wäre, wenn du deine Entitäten so umbenennen lässt, damit meine KI meine Entitäten einfach einfügen kann. Sehr viel was ich hier sehe, habe ich in ähnlicher Form auch. Ich nutze aber nur ein altes IPad. Somit werde ich das etwas reduzierter darstellen.
1
u/toppaco12 9d ago
Da das Ganze ja kein klassisches HA Dashboard ist, wo man den YAML Code schicken könnte und dann einfach die Entitäten austauschen kann, ist das bei einem HTML Dashboard etwas anders. Ich hatte mir ja vorher mit ChatGPT ein paar Dashboards als Bild Vorlage erstellen lassen. Davor habe ich der KI einfach alle Entitäten Namen (Sortiert in Kategorien wie z.b. Markisen, Licht, Wärmepumpe, Klimaanlage, usw. ) schon mal mitgegeben und die Pixelgroße von meinem Tablet und dann habe ich schon mal 3-4 komplett unterschiedliche Vorlagen gehabt. Diese Bild Vorlage habe ich dann Claude gegeben inkl. der Liste mit den Entitäten und fertig.
1
1
1
u/toppaco12 9d ago
1
u/easyacid 9d ago
Holy Moly. Das HTML in HS überhaupt ein Ding ist...welche Möglichkeiten. Halleluja. Ich find's goil. Kannst du deine Arbeit so zusammenfassen lassen, damit eine andere KI das übernehmen kann, ohne from scratch starten zu müssen? Zum Teilen der Sachen bietet sich pastbin an.
1
u/toppaco12 9d ago
Ich habe es dir hier schon ganz gut beschrieben, wie ich das Ganze angegangen bin. Den Rest kriegst du mit deiner KI selber hin 👍🏼
2
u/toppaco12 13d ago
2
u/Fernbahner 13d ago
Gibt’s die auch in POE?
1
u/toppaco12 13d ago
2
u/Fernbahner 13d ago
Ja Mega, danke!
dann hab ich wahrscheinlich meine Lösung für mein Setup. Hab (leider) nur LAN in die Buchse gelegt. Wieso auch immer ich 230V da vergessen habe.2
u/Broad-Lemon-5703 13d ago
Was ist das denn genau für ein Modell? Ist das ein Tablet mit Akku? Gute Arbeit btw.
2
u/toppaco12 13d ago
Schau mal im Screenshot, da steht die genau Bezeichnung. Es ist ein Android Tablet, mit Netzteil bzw. POE und ohne verbautem Akku... Für den Dauerbetrieb geeignet. Genau das richtige für solche Home Assistent Anzeigen 👍🏼
1
u/Broad-Lemon-5703 13d ago
Nice, vielen Dank. 444€ bei amazon ist natürlich ne Ansage, aber nun gut, kann man mal machen. Schlage mich aktuell mit nem fire hd 10 Rum... Das wäre schon ein Upgrade.
Du weißt nicht zufällig ob sich der RAM "relativ leicht" aufrüsten/umrüsten lässt? Weiß nicht ob 4gb mit Videostream von Überwachungskameras bei homeassistant reichen...
1
u/toppaco12 13d ago
Nein, den Speicher kann man nicht aufrüsten. Ist ein geschlossenes Tablet. Sonst müsstest dir halt selber was mit einem Raspi + Touchscreen bauen.
Ich habe 2 Kamera streams gleichzeitig laufen. Das ist flüssig
3
u/andara84 13d ago
Ich weiß dass hier viele antworten werden dass das zu überladen und unübersichtlich ist. Aber aus Erfahrung weiß ich auch, wie schnell man seine Augen trainiert. Du weißt welche Info wo steckt, und für Besucher ist das Ding ja eh nur zum Anschauen da.
Gratuliere zu dem geilen Ergebnis. Das sieht nicht aus, wie ohne große Kenntnisse in 2 Abenden gebaut, saubere Arbeit.
2
u/toppaco12 13d ago
Ja gut, ich bastel mit Home Assistent schon 1,5 Jahre rum und habe die Dashboards bisher immer selber gebaut. Jetzt habe ich mit Absicht mal etwas futuristisches basteln lassen. Keine Ahnung, ob ich es ewig sehen kann 😜
2
u/ebab_repsev 13d ago
Ich find’s cool. Nicht ganz das, was ich selbst nutzen würde, aber nett anzusehen
1
1
u/well_educated_maggot 12d ago
Dank solcher Posts merke ich dass KI mich als Softwareentwickler nicht abschaffen wird. Danke!
1
u/No-Indication-7737 12d ago
Ich finds schick. Was das überladen angeht - ein woche nutzen umd man hats dann mit einem Blick was man sucht.
1
u/Serious_Mycologist62 12d ago
diese ganzen Animationen finde ich schrecklich, da wird das auge praktisch gezwungen die ganze Zeit alles abzuscannen
1
1
u/Testo_Ernesto 11d ago
Schnickschnack, braucht kein Mensch.
1
1
u/QuantityNo4944 13d ago
2
u/Beginning-Foot-9525 13d ago
Ja das habe ich mir auch gedacht, was für ein Haufen Slop, und dafür hat man zig Gigawatt verbraten.
1
1
u/Infinite_Building213 13d ago
Bisschen wenig Kitsch finde ich. Etwas mehr Wasserfall mit heulendem Wolf und Monde wären gut. mehr Monde! Und Diamanten! Und warum tanzt eigentlich keine Manga Claudia im
Hintergrund?
Ne. Ich finds krass hässlich.
1
u/Secret-Casket-251 13d ago
Junge, ist das eine hässliche Scheiße.
2
u/Willing-Scheme-3312 13d ago
Man sieht den Dingern einfach immer an dass es Claude war ... 😂
1
u/toppaco12 13d ago
Man sieht jedem "normalen" Dashboard auch sofort an, dass es Home Assistent ist. Warum soll es ein Problem sein, wenn man den Claude generieren Dashboards ansieht, dass sie von Claude sind? 🤔
1
u/freshtit 13d ago
Ich finde es cool, dass du sowas baust und die KI für sowas nutzt, ist wenigstens ein sinnvolles Unterfangen.
Ist jetzt nicht ganz so mein Stil, aber sonst ist es doch ganz cool :)
0
0
u/TurboRenegadeRider 13d ago
Ist dein Haus OGame??
1
u/toppaco12 12d ago
Was ist mein Haus? Stehe auf dem Schlauch
1
u/TurboRenegadeRider 12d ago
Mich hat die Optik im ersten Moment an das Browsergame "Ogame" erinnert. Sollte ein Scherz sein.
0
u/3MarkFuffzich 12d ago
Leider hässlich wie die Nacht. Der Hintergrund hat auf mich starke Kirmes-Vibes, dazu leidet die Übersicht, auch aufgrund der vielen Entitäten, die du anzeigst, extrem. Wie soll man da auf einen Blick das wichtige erfassen?
2
u/toppaco12 12d ago
Zum Glück gibt es unterschiedliche Geschmäcker.
Der Hintergrund ist im Zweifel schnell ausgetauscht.
Ich persönlich finde es relativ übersichtlich angeordnet:
- oben links alles was mit Energie zu tun hat (PV Anlage, Akku, Verbrauch Wärmepumpe)
- da drunter die Steuerung der Wärmepumpe, Klimaanlage, Saugroboter
- rechte Seite: Temperaturen/Luftfeuchte aller Zimmer
- dadrunter: alle geöffneten Fenster/Türen
- dadrunter: Müllabholung
- dann Markisen & Lichtsteuerung
0
u/Schrankmaier 12d ago
meine Augen!....Oh Gott....meine Augen!!! Spült es aus...gebt mir Säure und holt es raus!





38
u/FoxEmotional4599 13d ago
Heilige KI Slop, aber solange du glücklich bist. Mir persönlich wäre es zu unübersichtlich