Habpanel – Benomatic

Widgets für Habpanel

.pulse-active {
animation: pulse-effect 2s infinite !important;
border: 2px solid #4cd964 !important;
}
</style>

<!– Header –>
<div style=“height: 20px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; opacity: 0.4; text-transform: uppercase;“>
Zendure System Kontrolle
</div>

<!– SVG Animationen –>
<svg viewBox=“0 0 100 100″ preserveAspectRatio=“none“
style=“position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;“>

<!– PFADE: Deine angepassten Koordinaten –>
<path id=“pathHub“ d=“M 25,35 Q 37,25 50,45″ fill=“none“ stroke=“rgba(255, 204, 0, 0.1)“ stroke-width=“0.5″ />
<path id=“pathSouth“ d=“M 25,60 Q 37,70 50,45″ fill=“none“ stroke=“rgba(255, 221, 85, 0.1)“ stroke-width=“0.5″ />
<path id=“pathBattOut“ d=“M 75,35 Q 62,25 50,45″ fill=“none“ stroke=“rgba(76, 217, 100, 0.1)“ stroke-width=“0.5″ />
<path id=“pathHouse“ d=“M 50,45 Q 62,70 75,60″ fill=“none“ stroke=“rgba(0, 122, 255, 0.1)“ stroke-width=“0.5″ />

<!– Animationen (Punkte) –>
<!– Solar O/W –>
<circle ng-if=“itemValue(config.itemSolarHub).split(‚ ‚)[0]*1 > 1″ r=“1.2″ fill=“#FFCC00″>
<animateMotion dur=“3s“ repeatCount=“indefinite“><mpath xlink:href=“#pathHub“ /></animateMotion>
</circle>
<!– Solar Süd –>
<circle ng-if=“itemValue(config.itemSolarSouth).split(‚ ‚)[0]*1 > 1″ r=“1.2″ fill=“#FFDD55″>
<animateMotion dur=“3s“ repeatCount=“indefinite“><mpath xlink:href=“#pathSouth“ /></animateMotion>
</circle>
<!– Entladung (Batterie -> Mitte) –>
<circle ng-if=“itemValue(config.itemBatteryDischarge).split(‚ ‚)[0]*1 > 1″ r=“1.2″ fill=“#4cd964″>
<animateMotion dur=“3s“ repeatCount=“indefinite“><mpath xlink:href=“#pathBattOut“ /></animateMotion>
</circle>
<!– Ladung (Mitte -> Batterie) –>
<circle ng-if=“itemValue(config.itemBatteryCharge).split(‚ ‚)[0]*1 > 1″ r=“1.2″ fill=“#4cd964″>
<animateMotion dur=“3s“ repeatCount=“indefinite“ keyPoints=“1;0″ keyTimes=“0;1″ calcMode=“linear“><mpath xlink:href=“#pathBattOut“ /></animateMotion>
</circle>
<!– Hausverbrauch –>
<circle ng-if=“itemValue(config.itemHouseConsumption).split(‚ ‚)[0]*1 > 1″ r=“1.2″ fill=“#007AFF“>
<animateMotion dur=“2s“ repeatCount=“indefinite“><mpath xlink:href=“#pathHouse“ /></animateMotion>
</circle>
</svg>

<!– Content Grid –>
<div style=“flex-grow: 1; display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 2;“>

<!– Links: Solar –>
<div style=“text-align: center; width: 30%;“>
<div style=“margin-bottom: 20%;“>
<img ng-src=“/icon/solarplant?format=svg“ style=“width: 40px; height: 40px;“ />
<div style=“font-size: 1.2vw; font-weight: 700;“>{{ (itemValue(config.itemSolarHub).split(“ „)[0] | number:0) }} W</div>
<div style=“font-size: 0.7vw; opacity: 0.4;“>O/W PANELE</div>
</div>
<div>
<img ng-src=“/icon/solarplant?format=svg“ style=“width: 40px; height: 40px;“ />
<div style=“font-size: 1.2vw; font-weight: 700;“>{{ (itemValue(config.itemSolarSouth).split(“ „)[0] | number:0) }} W</div>
<div style=“font-size: 0.7vw; opacity: 0.4;“>SÜD PANEL</div>
</div>
</div>

<!– Mitte: GEFÜLLTER KREIS (Mit Puls-Logik) –>
<div ng-class=“{‚pulse-active‘: itemValue(config.itemSolarHub).split(‚ ‚)[0]*1 > 1 || itemValue(config.itemBatteryDischarge).split(‚ ‚)[0]*1 > 1}“
style=“width: 8vw; height: 8vw; max-width: 80px; max-height: 80px; border-radius: 50%; background: #1a3320; border: 2px solid #4cd964; display: flex; justify-content: center; align-items: center;“>
<img ng-src=“/icon/movecontrol?format=svg“ style=“width: 50%; height: 50%;“ />
</div>

<!– Rechts: Batterie & Haus –>
<div style=“text-align: center; width: 30%;“>
<div style=“margin-bottom: 20%;“>
<img ng-src=“/icon/battery?state={{itemValue(config.itemBattery)}}&format=svg“ style=“width: 40px; height: 40px;“ />
<div style=“font-size: 1.2vw; font-weight: 700;“>{{ (itemValue(config.itemBattery).split(“ „)[0] | number:0) }} %</div>

<!– Lade-Leistung (Grün) –>
<div ng-if=“itemValue(config.itemBatteryCharge).split(‚ ‚)[0]*1 > 0.5″ style=“font-size: 0.9vw; font-weight: 600; color: #4cd964;“>
+ {{ (itemValue(config.itemBatteryCharge).split(“ „)[0] | number:0) }} W
</div>
<!– Entlade-Leistung (Orange) –>
<div ng-if=“itemValue(config.itemBatteryDischarge).split(‚ ‚)[0]*1 > 0.5″ style=“font-size: 0.9vw; font-weight: 600; color: #ff9500;“>
– {{ (itemValue(config.itemBatteryDischarge).split(“ „)[0] | number:0) }} W
</div>

<div style=“font-size: 0.7vw; opacity: 0.4;“>BATTERIE</div>
</div>
<div>
<img ng-src=“/icon/group?format=svg“ style=“width: 40px; height: 40px;“ />
<div style=“font-size: 1.2vw; font-weight: 700; color: #007AFF;“>{{ (itemValue(config.itemHouseConsumption).split(“ „)[0] | number:0) }} W</div>
<div style=“font-size: 0.7vw; opacity: 0.4;“>HAUS VERBRAUCH</div>
</div>
</div>
</div>

<!– Footer –>
<div style=“height: 60px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; padding: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 2;“>
<div style=“display: flex; align-items: center;“>
<img ng-src=“/icon/sun_clouds?format=svg“ style=“width: 30px; height: 30px; margin-right: 10px;“ />
<div>
<div style=“font-size: 0.7vw; opacity: 0.5;“>SOLAR TOTAL</div>
<div style=“color: #FF9500; font-size: 1.3vw; font-weight: 700;“>{{ (1*itemValue(config.itemSolarHub).split(“ „)[0] + 1*itemValue(config.itemSolarSouth).split(“ „)[0]) | number:0 }} W</div>
</div>
</div>
<div style=“text-align: right; display: flex; align-items: center;“>
<div style=“margin-right: 10px;“>
<div style=“font-size: 0.7vw; opacity: 0.5;“>NETZBEZUG</div>
<div ng-style=“{‚color‘: (itemValue(config.itemGrid).split(‚ ‚)[0]*1 > 0) ? ‚#ff3b30‘ : ‚#4cd964‘}“ style=“font-size: 1.3vw; font-weight: 700;“>
{{ (itemValue(config.itemGrid).split(“ „)[0] | number:0) }} W
</div>
</div>
<img ng-src=“/icon/energy?format=svg“ style=“width: 30px; height: 30px;“ />
</div>
</div>
</div>

Schlagwort: Habpanel

Openhab HABPanel Widget Solar/Akku