Updated 25.07.2025
Hi all
first of all, I have really no knowledge in widget development. But my goal was to visualize the BMS from my battery pack in OH
So I use parts from other code I found here
My Solarsystem is based on Victron and use the Victron Venus OS with MQTT broker
(Image Large)
This widget displays the values for up to a 16 Cell battery pack
But here is my first try (My battery pack have the name of my former dog “Ruby”)
Have a try and yes, pls. give me a feedback how to opitmize the code
Have fun
// I don’t know how to add a yaml-, thing- and itemfile in this post.
The data of the JKBMS are collected with the github project Sissi ESPHome JKBMS
The widget diesplays several data of the JKBMS
It shows up to 16 cells, the amount of cells are collected from the jkbms and highlight the upper und lower cell in a different colour.
You can choose if the Balancing, Charging and Discharging if you allowed to be turned on / off within OH
Parameters are Thing Name, your name for the battery pack and if the buttons are enabled or not
Below are the Thing-File, the Item-File and the YAML Code for the Widget
If you have more than one battery pack, just give the battery pack in the thing file another name
In the item file replace “Batterypack_1” with your own naming.
The widget completed the itemname with the parameter
e.g. “Batterypack_1” + “_Cellcount”
The thing-File
[details="Summary"]
Bridge mqtt:broker:batterypack "MQTT Battery Broker" [
host="192.168.1.25",
port=1883,
clientID="BatteryPacks"
] {
Thing topic Batterypack_1 "PV Battery Pack Ruby" {
Channels:
Type number : cell1 "Cell 1 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_1/state" ]
Type number : cell2 "Cell 2 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_2/state" ]
Type number : cell3 "Cell 3 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_3/state" ]
Type number : cell4 "Cell 4 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_4/state" ]
Type number : cell5 "Cell 5 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_5/state" ]
Type number : cell6 "Cell 6 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_6/state" ]
Type number : cell7 "Cell 7 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_7/state" ]
Type number : cell8 "Cell 8 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_8/state" ]
Type number : cell9 "Cell 9 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_9/state" ]
Type number : cell10 "Cell 10 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_10/state" ]
Type number : cell11 "Cell 11 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_11/state" ]
Type number : cell12 "Cell 12 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_12/state" ]
Type number : cell13 "Cell 13 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_13/state" ]
Type number : cell14 "Cell 14 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_14/state" ]
Type number : cell15 "Cell 15 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_15/state" ]
Type number : cell16 "Cell 16 Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_cell_voltage_16/state" ]
Type number : Mosfet "Mosfet Temperature" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_power_tube_temperature/state" ]
Type number : Cell_Diff "Cell Difference" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_delta_cell_voltage/state" ]
Type number : BatVoltage "Cell Voltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_total_voltage/state" ]
Type number : Cellcount "Cell Count" [ stateTopic="jk-bms-ruby/number/jk-bms-ruby_cell_count/state" ]
Type string : CellLow "Cell ID Low" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_min_voltage_cell/state" ]
Type string : CellHigh "Cell ID High" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_max_voltage_cell/state" ]
Type number : Capacity "Capacity" [ stateTopic="jk-bms-ruby/number/jk-bms-ruby_total_battery_capacity/state" ]
Type number : BatTemperature "MaxCellTemperature" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_temperature_sensor_1/state" ]
Type number : MinCellVoltage "MinCellVoltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_min_cell_voltage/state" ]
Type number : MaxCellVoltage "MaxCellVoltage" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_max_cell_voltage/state" ]
Type number : Balancing "Balancing" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_balancing/state" ]
Type number : InstalledCapacity "InstalledCapacity" [ stateTopic="jk-bms-ruby/number/jk-bms-ruby_total_battery_capacity/state" ]
Type number : Balancing "Balancing" [ stateTopic="jk-bms-ruby/binary_sensor/jk-bms-ruby_balancing/state" ]
Type number : SoC "State of Charge" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_state_of_charge/state" ]
Type number : Current "Current A" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_current/state" ]
Type number : Power "Power in W" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_power/state" ]
Type switch : AllowToCharge "AllowToCharge" [ commandTopic="jk-bms-ruby/switch/jk-bms-ruby_charging/state", stateTopic="jk-bms-ruby/switch/jk-bms-ruby_charging/state" ]
Type switch : AllowToDischarge "AllowToDischarge" [ commandTopic="jk-bms-ruby/switch/jk-bms-ruby_discharging/state", stateTopic="jk-bms-ruby/switch/jk-bms-ruby_discharging/state" ]
Type switch : AllowToBalance "AllowToBalance" [ commandTopic="jk-bms-ruby/switch/jk-bms-ruby_balancer/state", stateTopic="jk-bms-ruby/switch/jk-bms-ruby_balancer/state" ]
Type number : CapacityRemaining "Capacity Remaining" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_capacity_remaining/state" ]
Type number : ChargingPower "Charging Power" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_charging_power/state" ]
Type number : DischargingPower "Discharging Power" [ stateTopic="jk-bms-ruby/sensor/jk-bms-ruby_discharging_power/state" ]
}
}
[/details]
The item-File
Number Batterypack_1_C1 "Zelle 1 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell1" }
Number Batterypack_1_C2 "Zelle 2 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell2" }
Number Batterypack_1_C3 "Zelle 3 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell3" }
Number Batterypack_1_C4 "Zelle 4 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell4" }
Number Batterypack_1_C5 "Zelle 5 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell5" }
Number Batterypack_1_C6 "Zelle 6 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell6" }
Number Batterypack_1_C7 "Zelle 7 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell7" }
Number Batterypack_1_C8 "Zelle 8 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell8" }
Number Batterypack_1_C9 "Zelle 9 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell9" }
Number Batterypack_1_C10 "Zelle 10 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell10" }
Number Batterypack_1_C11 "Zelle 11 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell11" }
Number Batterypack_1_C12 "Zelle 12 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell12" }
Number Batterypack_1_C13 "Zelle 13 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell13" }
Number Batterypack_1_C14 "Zelle 14 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell14" }
Number Batterypack_1_C15 "Zelle 15 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell15" }
Number Batterypack_1_C16 "Zelle 16 [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:cell16" }
Number Batterypack_1_Voltage "Voltage [%.2f V]" { channel="mqtt:topic:batterypack:Batterypack_1:BatVoltage" }
Number Batterypack_1_Mosfet "Mosfet Temperature [%.1f °C]" { channel="mqtt:topic:batterypack:Batterypack_1:Mosfet" }
Number Batterypack_1_CelDiff "Cell Difference [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:Cell_Diff" }
Number Batterypack_1_Cellcount "NrOfCellsPerBattery" { channel="mqtt:topic:batterypack:Batterypack_1:Cellcount" }
Number Batterypack_1_BatTemperature "Battery Temperature [%.1f °C]" { channel="mqtt:topic:batterypack:Batterypack_1:BatTemperature" }
String Batterypack_1_CellLow "Cell ID Low" { channel="mqtt:topic:batterypack:Batterypack_1:CellLow" }
String Batterypack_1_CellHigh "Cell ID High" { channel="mqtt:topic:batterypack:Batterypack_1:CellHigh", transformationPattern="CellIDHighlight.js" }
Number Batterypack_1_Capacity "Capacity [%.2f Ah]" { channel="mqtt:topic:batterypack:Batterypack_1:Capacity" }
Number Batterypack_1_MaxCellVoltage "Voltage [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:MaxCellVoltage" }
Number Batterypack_1_MinCellVoltage "Voltage [%.3f V]" { channel="mqtt:topic:batterypack:Batterypack_1:MinCellVoltage" }
String Batterypack_1_CustomeName "CustomName" { channel="mqtt:topic:batterypack:Batterypack_1:CustomName" }
Number Batterypack_1_installedCapacity "Capacity" { channel="mqtt:topic:batterypack:Batterypack_1:InstalledCapacity" }
Number Batterypack_1_Balancing "Balancing" { channel="mqtt:topic:batterypack:Batterypack_1:Balancing" }
Switch Batterypack_1_AllowToCharge "AllowToCharge" { channel="mqtt:topic:batterypack:Batterypack_1:AllowToCharge" }
Switch Batterypack_1_AllowToDischarge "AllowToDischarge" { channel="mqtt:topic:batterypack:Batterypack_1:AllowToDischarge" }
Switch Batterypack_1_AllowToBalance "AllowToBalance" { channel="mqtt:topic:batterypack:Batterypack_1:AllowToBalance" }
Number Batterypack_1_SoC "State of Charge [%.1f %%]" { channel="mqtt:topic:batterypack:Batterypack_1:SoC" }
Number Batterypack_1_Current "Current [%.2f A]" { channel="mqtt:topic:batterypack:Batterypack_1:Current" }
Number Batterypack_1_Power "Power [%.1f W]" { channel="mqtt:topic:batterypack:Batterypack_1:Power" }
Number Batterypack_1_CapacityRemaining "Remaining [%.2f Ah]" { channel="mqtt:topic:batterypack:Batterypack_1:CapacityRemaining" }
Number Batterypack_1_ChargingPower "Power [%.1f W]" { channel="mqtt:topic:batterypack:Batterypack_1:ChargingPower" }
Number Batterypack_1_DischargingPower "Discharging Power [%.1f W]" { channel="mqtt:topic:batterypack:Batterypack_1:DischargingPower" }
Switch Batterypack_1_Balancing "Balancing" { channel="mqtt:topic:batterpack:Batterypack_1:Balancing" }
and the widget
uid: JKBMS_V3
tags:
- JKBMS
- VenusOS
props:
parameters:
- description: First part of the Battery Items (e.g. Battery_1)
label: Batterypack Item
name: battery
required: true
type: TEXT
- description: Name of the battery pack
label: Batterypack Name
name: batterypackname
required: true
type: TEXT
- description: manageable via OH
label: allow to edit the JKBMS, true or false. Default is false (lower case)
name: batterymanageable
required: true
parameterGroups: []
timestamp: Jul 25, 2025, 3:17:36 PM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
hideStatusbarOnOpen: true
class:
- card-expandable-animate-width
- card-outline
style:
height: =((Number.parseInt(items[props.battery+"_Cellcount"].state) / 4 *
62)+285) +'px'
width: auto
margin-left: 0px
margin-right: 0px
margin-top: 0px
margin-bottom: -25px
--f7-card-outline-border-color: "'gray' : ''"
background-color: rgba(18,18,18,0.75)
//box-shadow: var(--f7-card-expandable-box-shadow)
slots:
default:
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: f7-row
config:
style:
width: 100%
height: 0px
class:
- display-flex
- flex-direction-row
- justify-content-flex-end
- align-items-baseline
- component: f7-block
config:
style:
margin-top: -12px
height: 100px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- align-items-center
- justify-content-space-between
- card-prevent-open
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =props.batterypackname
margin-top: -9px
style:
font-size: 23px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Battery Pack
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-row
config:
visible: '=props.batterymanageable === "true"? true : false'
class:
- display-flex
- align-items-center
- justify-content-space-between
- card-prevent-open
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: oh-button
config:
text: =items[props.battery+"_AllowToBalance"].state
margin-top: -9px
outline: true
fill: '=items[props.battery+"_AllowToBalance"].state === "ON" ? true : false'
action: toggle
actionItem: =[props.battery+"_AllowToBalance"]
actionCommand: ON
actionCommandAlt: OFF
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Balance
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: oh-button
config:
text: =items[props.battery+"_AllowToCharge"].state
outline: true
fill: '=items[props.battery+"_AllowToCharge"].state === "ON" ? true : false'
action: toggle
actionItem: =[props.battery+"_AllowToCharge"]
actionCommand: ON
actionCommandAlt: OFF
margin-top: -9px
style:
font-size: 17px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Charge
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: oh-button
config:
text: =items[props.battery+"_AllowToDischarge"].state
margin-top: -9px
outline: true
fill: '=items[props.battery+"_AllowToDischarge"].state === "ON" ? true : false'
action: toggle
actionItem: =[props.battery+"_AllowToDischarge"]
actionCommand: ON
actionCommandAlt: OFF
style:
font-size: 17px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Discharge
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_Mosfet"].displayState
margin-top: -9px
style:
font-size: 17px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Mosfet
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-row
config:
visible: '=props.batterymanageable === "true"? false : true'
class:
- display-flex
- align-items-center
- justify-content-space-between
- card-prevent-open
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_AllowToBalance"].state
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Balance
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_AllowToCharge"].state
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Charge
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_AllowToDischarge"].state
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Discharge
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_Mosfet"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Mosfet
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-row
config:
class:
- display-flex
- align-items-center
- justify-content-space-between
- card-prevent-open
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_Power"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Power
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_Current"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Current
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_Balancing"].state
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Balancing
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_CapacityRemaining"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Capacity
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_BatTemperature"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Battery
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-row
config:
class:
- display-flex
- align-items-center
- justify-content-space-between
- card-prevent-open
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_Voltage"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Voltage
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_MinCellVoltage"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: '= "Min: " + items[props.battery+"_CellLow"].state'
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_CelDiff"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: Diff
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_MaxCellVoltage"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: "= 'Max: ' + items.Battery_CellHigh.state"
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_SoC"].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: lime
class:
- text-align-center
- component: Label
config:
text: SoC
style:
font-size: 12px
font-weight: 600
color: lime
- component: f7-row
config:
visible: "=items.Battery_Cellcount.state >= 4 ? true : false"
style:
height: 60px
width: 100%
class:
- display-flex
- flex-direction-row
- justify-content-space-around
- card-prevent-open
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+"_C1"].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '1' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'1') ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 1
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '1' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'1' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C2'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '2') ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'2') ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 2
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '2') ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'2') ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C3'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '3') ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'3') ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 3
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '3') ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'3') ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C4'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '4' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'4') ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 4
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '4' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'4') ? 'red' : 'lime'"
- component: f7-row
config:
visible: "=items[props.battery+'_Cellcount'].state >= 8 ? true : false"
style:
height: 60px
width: 100%
class:
- display-flex
- flex-direction-row
- justify-content-space-around
- card-prevent-open
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C5'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '5' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'5' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 5
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '5' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'5' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C6'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '6' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'6' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 6
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '6' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'6' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C7'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '7' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'7' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 7
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '7' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'7' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C8'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '8' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'8' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 8
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '8' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'8' ) ? 'red' : 'lime'"
- component: f7-row
config:
visible: "=items[props.battery+'_Cellcount'].state >= 12 ? true : false"
style:
height: 60px
width: 100%
class:
- display-flex
- flex-direction-row
- justify-content-space-around
- card-prevent-open
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C9'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '9' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'9' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 9
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '9' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'9' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C10'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '10' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'10' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 10
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '10' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'10' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items.Battery_C11.displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '11' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'11' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 11
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '11' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'11' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C12'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '12' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'12' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 12
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '12' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'12' ) ? 'red' : 'lime'"
- component: f7-row
config:
visible: "=items[props.battery+'_Cellcount'].state >= 16 ? true : false"
style:
height: 100px
width: 100%
class:
- display-flex
- flex-direction-row
- justify-content-space-around
- card-prevent-open
slots:
default:
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C13'].displayState
margin-top: -9px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '13' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'13' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 13
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '13' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'13' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C14'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 400
color: "=(items[props.battery+'_CellHigh'].state === '14' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'14' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 14
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '14' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'14' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C15'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '15' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'15' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 15
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '15' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'15' ) ? 'red' : 'lime'"
- component: f7-col
config:
style:
margin-top: -9px
class:
- display-flex
- flex-direction-column
- text-align-center
slots:
default:
- component: Label
config:
text: =items[props.battery+'_C16'].displayState
margin-top: px
style:
font-size: 18px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '16' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'16' ) ? 'red' : 'lime'"
class:
- text-align-center
- component: Label
config:
text: Cell 16
style:
font-size: 12px
font-weight: 600
color: "=(items[props.battery+'_CellHigh'].state === '16' ) ? '#8bbcf7' :
(items[props.battery+'_CellLow'].state ===
'16' ) ? 'red' : 'lime'"
