Glashaus Zuhause

Energie jetzt

SMA · 235 Netzparallel

0Batterie

0PV · kW

0Haus · kW

0Netz · kW

0Autarkie heute

0erzeugt heute

0eingespeist

Warmwasser

Solar

52,4°C oben

30 °C70 °C

Zirkulation · Betriebsart: Sonne
Nächster Lauf: –
Brenner: aus · lädt ab ≤ 41 °C

Szenen

Schalter

Antippen schaltet

Hausgeräte

Alle Geräte

Waschmaschine

–

Trockner

–

Spülmaschine

–

Meldungen

3 offen

Würfel Leo: Batterie 0 %, offlineJan.
Wallbox-Adapter aus: keine Ladedaten von Carport und Garage seit Feb. 2024heute
Steckdose Zirkulationspumpe: WLAN schwach (−81 dBm)gestern
Heizungs-ESP stabil seit Repeater-Wechselgestern
BYD-Zelle 69 (Modul 3 · Z 5) weiterhin schwächsteheute

Wetter

Demo

––

Die Hauszeichnung oben zeigt das Wetter mit. Live aus 0_userdata.0.Wetter.motiv.

Müllabfuhr

Kalender & Gebühr

In VIS 2 übernehmen · Übersicht, Projekt-CSS, Skulptur und Skyline

Widget → Datenpunkt

Widget	Datenpunkt	Hinweis
Küche Licht	`shelly.0.SHSW-25#421DC5EC0DB4#1.Relay0.Switch`	Shelly .118, nicht das Garagentor
Küche WLED	`shelly.0.SHSW-25#421DC5EC0DB4#1.Relay1.Switch`
Carport WLED	`wled.0.6fe7eba7af9e`	Preset 11 an, Preset 1 aus
Leo / Mia	`hue.0.Leo.command` `hue.0.Mia.command`	JSON `{"on":true,"bri":20}`, nicht .on + .level einzeln
Garage	`javascript.0.CurrentDoorState`	0 offen · 1 zu · 2 öffnet · 3 schließt
Lüfter	`suedwind-ambientika.0.BDB8947CAB05.*`	fanSpeed, humidity
Zirkulation	`shelly.0.SHPLG-S#068CC2#1.Relay0.Switch`	Steuerung macht das Script
Hausgeräte	siehe Ansicht Geräte
Wetter	`0_userdata.0.Wetter.motiv` · `.nacht` `.temperatur` · `.zustand` · `.tagMin` · `.tagMax` · `.regenHeute` · `.wind`	eigenes Script, z. B. DWD-Daten über Bright Sky (ohne Schlüssel); Motiv: sonne, heiter, wolken, regen, gewitter, schnee, nebel, wind
Müllabfuhr	`0_userdata.0.Muell.termine` `0_userdata.0.Muell.morgen`	JSON der nächsten 60 Tage; „morgen“ leer = keine Abfuhr
Batterie	`bydhvs.0.State.*`	SOC, Power
Skyline (Energie, Heizung)	InfluxDB `192.168.0.76:8086`	Tageswerte per `aggregateWindow(every: 1d)`

Projekt-CSS

Im VIS-2-Editor unter Projekt → CSS einfügen und bei jedem Widget im Feld CSS-Klasse gh-glass eintragen. Skulptur und Skyline liegen als eigene Skripte im Ordner vis2-glashaus/src (sculpture.js, skyline.js) und laufen in einem HTML-Widget.

/* Glashaus – VIS 2 Projekt-CSS */
.gh-page{
  background:#ebe9e5;
  color:#151514;
  font-family:"Geist",-apple-system,"Helvetica Neue",sans-serif;
}
.gh-glass{
  background:rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  border-radius:26px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 30px 60px -34px rgba(60,48,28,.2)!important;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),
    background .45s,color .45s;
}
.gh-glass:active{transform:scale(.96)}
/* Zustand „an“: Tinte statt Glas */
.gh-on{background:#151514!important;color:#ebe9e5}

.gh-serif{
  font-family:"Instrument Serif",serif;
  font-style:italic;font-weight:400;
}
.gh-rise{animation:gh-rise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes gh-rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}

.gh-spin svg{animation:gh-spin 1.4s linear infinite}
@keyframes gh-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .gh-rise,.gh-spin svg{animation:none!important}
}

Schalt-Zustand als Klasse, z. B. im Feld CSS-Klasse: gh-glass {v:shelly.0.SHSW-25#421DC5EC0DB4#1.Relay0.Switch; v ? 'gh-on' : ''}