Autor: skippy

uid: zendure_premium_v14
tags: []
props:
parameters:
– context: item
label: Batterie Ladestand (z.B. 50 %)
name: itemBattery
required: false
type: TEXT
– context: item
label: Batterie Ladeleistung (Watt)
name: itemBatteryCharge
required: false
type: TEXT
– context: item
label: Batterie Entladeleistung (Watt)
name: itemBatteryDischarge
required: false
type: TEXT
– context: item
label: Solar Hub O/W (Watt)
name: itemSolarHub
required: false
type: TEXT
– context: item
label: Solar Süd (Positiv = Produktion)
name: itemSolarSouth
required: false
type: TEXT
– context: item
label: Hausverbrauch Gesamt (Echtes Item)
name: itemHouseConsumption
required: false
type: TEXT
– context: item
label: Hub Ausgang (Watt zum Haus)
name: itemHubOutput
required: false
type: TEXT
– context: item
label: Netzbezug (Smart Meter)
name: itemGrid
required: false
type: TEXT
timestamp: May 2, 2026, 11:17:30 PM
component: f7-card
config:
stylesheet: >
.energy-pulse {
animation: pulse-effect 2s infinite !important;
border: 1px solid #4cd964 !important;
}

@keyframes pulse-effect {
0% { box-shadow: 0 0 10px rgba(76, 217, 100, 0.4); transform: scale(1); }
50% { box-shadow: 0 0 40px rgba(76, 217, 100, 0.8); transform: scale(1.05); }
100% { box-shadow: 0 0 10px rgba(76, 217, 100, 0.4); transform: scale(1); }
}
style:
background: „linear-gradient(160deg, #121212 0%, #1e1e1e 100%)“
border: 1px solid rgba(255,255,255,0.08)
border-radius: 28px
box-shadow: 0px 20px 40px rgba(0,0,0,0.6)
color: white
height: 380px
slots:
default:
– component: f7-card-content
slots:
default:
– component: f7-row
slots:
default:
– component: f7-col
slots:
default:
– component: Label
config:
style:
fontSize: 11px
fontWeight: „800“
letterSpacing: 1.5px
opacity: 0.4
text: ENERGY KONTROLLE
– component: f7-block
config:
style:
align-items: center
display: flex
height: 240px
justify-content: space-around
margin: 0
position: relative
slots:
default:
– component: svg
config:
preserveAspectRatio: none
style:
height: 100%
left: 0
pointer-events: none
position: absolute
top: 0
width: 100%
viewBox: 0 0 100 100
slots:
default:
– component: path
config:
d: M 20,30 Q 35,50 50,50
fill: none
id: pathHub
stroke: rgba(255, 204, 0, 0.1)
stroke-width: 0.5
– component: circle
config:
fill: „#FFCC00“
r: 1
visible: =(items[props.itemSolarHub].numericState > 0)
slots:
default:
– component: animateMotion
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
slots:
default:
– component: mpath
config:
xlink:href: „#pathHub“
– component: path
config:
d: M 20,70 Q 35,50 50,50
fill: none
id: pathSouth
stroke: rgba(255, 221, 85, 0.1)
stroke-width: 0.5
– component: circle
config:
fill: „#FFDD55“
r: 1
visible: =(items[props.itemSolarSouth].numericState > 0)
slots:
default:
– component: animateMotion
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
slots:
default:
– component: mpath
config:
xlink:href: „#pathSouth“
– component: path
config:
d: M 80,30 Q 65,50 50,50
fill: none
id: pathBattOut
stroke: rgba(76, 217, 100, 0.1)
stroke-width: 0.5
– component: circle
config:
fill: „#4cd964“
r: 1
visible: =(Math.abs(items[props.itemBatteryDischarge].numericState) > 1)
slots:
default:
– component: animateMotion
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
slots:
default:
– component: mpath
config:
xlink:href: „#pathBattOut“
– component: circle
config:
fill: „#4cd964“
r: 1
visible: =(items[props.itemBatteryCharge].numericState > 0)
slots:
default:
– component: animateMotion
config:
calcMode: linear
dur: 3s
keyPoints: 1;0
keyTimes: 0;1
repeatCount: indefinite
slots:
default:
– component: mpath
config:
xlink:href: „#pathBattOut“
– component: path
config:
d: M 50,50 Q 65,50 80,70
fill: none
id: pathHouse
stroke: rgba(0, 122, 255, 0.1)
stroke-width: 0.5
– component: circle
config:
fill: „#007AFF“
r: 1
visible: =(items[props.itemHouseConsumption].numericState > 0)
slots:
default:
– component: animateMotion
config:
calcMode: linear
dur: 2s
repeatCount: indefinite
slots:
default:
– component: mpath
config:
xlink:href: „#pathHouse“
– component: f7-col
config:
style:
textAlign: center
zIndex: 2
slots:
default:
– component: div
config:
style:
marginBottom: 40px
slots:
default:
– component: oh-icon
config:
color: „#FFCC00“
height: 28
icon: f7:sun_max_fill
– component: Label
config:
style:
fontSize: 14px
fontWeight: „700“
text: =items[props.itemSolarHub].state + ‚ W‘
– component: Label
config:
style:
fontSize: 8px
opacity: 0.4
text: O/W PANELE
– component: div
slots:
default:
– component: oh-icon
config:
color: „#FFDD55“
height: 28
icon: f7:cloud_sun_fill
– component: Label
config:
style:
fontSize: 14px
fontWeight: „700“
text: „=(items[props.itemSolarSouth].numericState > 0) ?
Math.round(items[props.itemSolarSouth].numeri\
cState) + ‚ W‘ : ‚0 W'“
– component: Label
config:
style:
fontSize: 8px
opacity: 0.4
text: SÜD PANEL
– component: div
config:
class: „=(items[props.itemSolarHub].numericState > 1 ||
Math.abs(items[props.itemBatteryDischarge].numericState) >
1) ? ‚energy-pulse‘ : ““
style:
align-items: center
background: rgba(255,255,255,0.03)
border: 1px solid rgba(76, 217, 100, 0.3)
border-radius: 50%
display: flex
height: 80px
justify-content: center
width: 80px
zIndex: 2
slots:
default:
– component: oh-icon
config:
color: „#4cd964“
height: 35
icon: f7:bolt_fill
– component: f7-col
config:
style:
textAlign: center
zIndex: 2
slots:
default:
– component: div
config:
style:
marginBottom: 40px
slots:
default:
– component: oh-icon
config:
color: „#4cd964“
height: 28
icon: „=(items[props.itemBattery].numericState > 20) ? ‚f7:battery_100‘ :
‚f7:battery_25′“
– component: Label
config:
style:
fontSize: 14px
fontWeight: „700“
text: =items[props.itemBattery].state + ‚ %‘
– component: Label
config:
style:
color: „#4cd964“
fontSize: 12px
fontWeight: „600“
marginTop: 2px
text: =‘ + ‚ + items[props.itemBatteryCharge].state + ‚ W‘
visible: =(items[props.itemBatteryCharge].numericState > 0)
– component: Label
config:
style:
color: „#ff9500“
fontSize: 12px
fontWeight: „600“
marginTop: 2px
text: =‘ – ‚ + items[props.itemBatteryDischarge].state + ‚ W‘
visible: =(Math.abs(items[props.itemBatteryDischarge].numericState) > 0.1)
– component: Label
config:
style:
fontSize: 8px
opacity: 0.4
text: BATTERIE
– component: div
slots:
default:
– component: oh-icon
config:
color: „#007AFF“
height: 28
icon: f7:house_alt_fill
– component: Label
config:
style:
color: „#007AFF“
fontSize: 14px
fontWeight: „700“
text: =items[props.itemHouseConsumption].state + ‚ W‘
– component: Label
config:
style:
fontSize: 8px
opacity: 0.4
text: HAUS VERBRAUCH
– component: f7-row
config:
style:
background: rgba(255,255,255,0.04)
border: 1px solid rgba(255,255,255,0.05)
border-radius: 20px
margin-top: 10px
padding: 15px
slots:
default:
– component: f7-col
slots:
default:
– component: Label
config:
style:
fontSize: 10px
opacity: 0.5
text: SOLAR TOTAL
– component: Label
config:
style:
color: „#FF9500“
fontSize: 15px
fontWeight: „700“
text: „=((items[props.itemSolarHub].numericState || 0) +
(items[props.itemSolarSouth].numericState > 0 ?
items[props.itemSolarSouth].numericState :
0)).toFixed(0) + ‚ W'“
– component: f7-col
config:
style:
textAlign: right
slots:
default:
– component: Label
config:
style:
fontSize: 10px
opacity: 0.5
text: NETZBEZUG
– component: Label
config:
style:
color: „=(items[props.itemGrid].numericState > 0) ? ‚#ff3b30‘ : ‚#4cd964′“
fontSize: 15px
fontWeight: „700“
text: =items[props.itemGrid].state + ‚ W‘