Home Assistant Lovelace UI cards #230
Replies: 71 comments 64 replies
-
|
Good job! Could you try to convert your Lovelace configuration into a blueprint? |
Beta Was this translation helpful? Give feedback.
-
|
My experience with blueprints end at just using them. Never created one, but as far as I know they can be used in Automations, could they be used to create UI content ? |
Beta Was this translation helpful? Give feedback.
-
|
I'm unhappy about the hardcoded entity ids. It's hard to explain how to adjust your example. At blueprints variables are available and entities can be assigned "easily". I must admit I don't have much experience with blueprints too. If there are no low hanging fruits let's merge your example as it is. |
Beta Was this translation helpful? Give feedback.
-
|
Difference in entity naming is that your example has "substitutions: name: jk-bms" while I used "substitutions: name: bms-bt-monitor". Have not modified anything else. I know it would have been easier to choose entity names in UI, have not found a way to style the interface same as jkbms one without using this markdown card with custom code (part JS part HTML). Not that familiar with card-mod yet and CSS styling. |
Beta Was this translation helpful? Give feedback.
-
|
This is great and I'm using, thanks for sharing @dr3amr |
Beta Was this translation helpful? Give feedback.
-
|
@austin202220 Thanks. Had all information there and enjoying that I can add all information in HA, but had no proper interface to present all data from BMS, and thought of doing the UI for myself, and if other can benefit from my ~3h work ... why not. |
Beta Was this translation helpful? Give feedback.
-
|
Your contribution is mentioned at the Goodie section now! :-) Thanks for your support! https://github.com/syssi/esphome-jk-bms/tree/add-googie-section#goodies |
Beta Was this translation helpful? Give feedback.
-
|
Hi @syssi , saw the notification. Hope it is a useful contribution. Thank you for your work also. |
Beta Was this translation helpful? Give feedback.
-
|
It's pretty helpful because every now and then a user asks about "how to visualize the balancing". |
Beta Was this translation helpful? Give feedback.
-
|
Hi! I tweaked the code so it works by default with your naming @syssi Top card Stats card Cells card Control card |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for these contributions everyone! Here's my version with the following changes:
a bit unfortunate that home assistant uglyfies the formatting when you save the configuration, but works and looks nice:
|
Beta Was this translation helpful? Give feedback.
-
|
hi @dominikandreas,
|
Beta Was this translation helpful? Give feedback.
-
|
After installing the card via hacs, you need to add the JavaScript module as a dashboard resource. Go to settings -> dashboards -> menu top right -> resources -> add resource. Then use "/local/stack-in-card.js" as the url and select "JavaScript Module" as the type. |
Beta Was this translation helpful? Give feedback.
-
|
Perfect. |
Beta Was this translation helpful? Give feedback.
-
|
thank you for the more efficient cells code ;) upgraded to your version, should have gone with for instead of if ... else in the first place 👍 . Converted mΩ to int from float though the zecimal only takes more space, there is no further data added. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing! Here's the final fixed version:
|
Beta Was this translation helpful? Give feedback.
-
|
I want a code with 7 cells, can you make it? |
Beta Was this translation helpful? Give feedback.
-
|
Danke für deine Arbeit und für das teilen des Dashboards. Habe das Dashboard nun doch zum laufen gebracht doch ich bekomme einen Fehler das die Schalter Entitäten nicht verfügbar sind. habe ich das am dashboard was falsch eingetragen oder kommt der fehler vom ESP Yaml? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, please write in english or translate.
|
Beta Was this translation helpful? Give feedback.
-
|
I apologize, I am heartbroken because the text was in German, I thought you could write German. I apologize. I use Google translate now. Edit:28.01.24-18:30 now after 3 hours of waiting the Charge and discharge entity is in system and the balancer must renamed this is now working. thank you |
Beta Was this translation helpful? Give feedback.
-
|
The fonts of the general parameters of the left column are larger than the right ones. For the rest I made an adjustment on the decimals of the capabilities that went to terms on smartphones. Thanks for the personalization work, very nice. |
Beta Was this translation helpful? Give feedback.
-
|
how to get the background to be black? |
Beta Was this translation helpful? Give feedback.
-
|
I can't understand how this .yaml language works |
Beta Was this translation helpful? Give feedback.
-
|
if you refer to the markdown it is part javascript part html, not yaml. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, |
Beta Was this translation helpful? Give feedback.
-
|
Seems you are running a modified version. Try the code from first post.
…On Fri, Mar 1, 2024, 06:04 Đặng Đình Ngọc ***@***.***> wrote:
Hi,
I dont know why, your scripts failed to run "{% for idx in range(1, 5" the
display only show the upper part of the lovelace (image)
The part relating to cells does not show up.
image.png (view on web)
<https://github.com/syssi/esphome-jk-bms/assets/8839597/38f888d6-87a8-412c-baef-043c90826a18>
Can you advice. I can manually list cell entities but the scripts can be
fine if it work!
Please help
Best,
—
Reply to this email directly, view it on GitHub
<#230 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABJGIGYFWKIM3VQTLBMP6V3YV7443AVCNFSM6AAAAAATRVZQA6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DMMZYGEZDO>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot works perfectly |
Beta Was this translation helpful? Give feedback.
-
|
Hello guys, can someone tell me why it doesn't change the colors to minimum and maximum on my cell
I don't know where I went wrong:
|
Beta Was this translation helpful? Give feedback.
-
|
@przybora try the optimized code version from @dominikandreas, less text (equivalent for your above code), although the issue most certainly is with sensor naming: |
Beta Was this translation helpful? Give feedback.
-
|
but no :( it works |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it works well now, I think
|
Beta Was this translation helpful? Give feedback.
-
|
dr3amr Could you see my code? I don't know why but I always have one goal number 3 in blue and it doesn't change. Minimum in red color jumps on all targets but not blue max
|
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
The max blue light doesn't work properly for me, I still have 3 targets highlighted in blue |
Beta Was this translation helpful? Give feedback.
-
|
@przybora you need to check the sensor names as in last photo you have 14 cells with same voltage, this is highly unlikely. |
Beta Was this translation helpful? Give feedback.
-
|
It now works properly, I entered the wrong values Thank you very much |
Beta Was this translation helpful? Give feedback.
-
|
hello guys, I recently bought a new BMS model JK_PB2A16S20P Hardware Ver 15.XA and Software Ver. V15.10 everything works as it should
|
Beta Was this translation helpful? Give feedback.
-
|
can you share your code? |
Beta Was this translation helpful? Give feedback.
-
|
Can you please show where to add round(1) ? i am not an expert and I just copy and paste from OP
|
Beta Was this translation helpful? Give feedback.
-
|
i have done e remake of the code after ter update yesterday now i have 3 digits fix on each cell voltage
i hate UPDATES |
Beta Was this translation helpful? Give feedback.
-
|
thanks |
Beta Was this translation helpful? Give feedback.
-
|
Before |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Hello
|
Beta Was this translation helpful? Give feedback.
-
|
thanks |
Beta Was this translation helpful? Give feedback.
-
|
I (beginner)'m also struggling with the color option. The color change of the font for the min and max voltage cells. Piece of code: 01. {% if The sensor names are checked already. They are (copy and paste, no typo's): 
Any suggestion why it is not working? |
Beta Was this translation helpful? Give feedback.
-
|
try it |
Beta Was this translation helpful? Give feedback.
-
|
Excellent, thanks @x3emal444 . This code is working! 
|
Beta Was this translation helpful? Give feedback.
-
|
The colour changes on min/max cells have stopped working for me too since I modified the yaml code with round(x). Any ideas on how to fix this? |
Beta Was this translation helpful? Give feedback.
-
|
For testing purposes, I removed the round(3) statement in de code to see if that solves the problem, but it does NOT, unfortunately. Still looking for a solution. |
Beta Was this translation helpful? Give feedback.
-
|
I also corrected the code after the update. |
Beta Was this translation helpful? Give feedback.
-
|
`type: custom:stack-in-card
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Today I had some time - I corrected my table. 
Part of the code:
|
Beta Was this translation helpful? Give feedback.
-
|
Hello, can you share the full code? |
Beta Was this translation helpful? Give feedback.
-
|
states('sensor.jk_bms_jk_bms_max_voltage_cell') replace to states('sensor.jk_bms_jk_bms_max_voltage_cell',2) |
Beta Was this translation helpful? Give feedback.
-
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: markdown
content: >-
<center><b><font color=#41CD52 size=6>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_total_voltage') | float) }}
V</font></b><br> Battery Power: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_power') | float) }}
W</font><br> Battery Capacity: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_total_battery_capacity_setting')
| float) }} Ah</font><br> Cycle Capacity: <font
color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_total_charging_cycle_capacity')
| float) }} Ah</font><br> Ave. Cell Vol.: <font
color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_average_cell_voltage') |
float) }} V</font><br> Balance Cur.: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_balancing_current') |
float) }} A</font><br> Battery T1: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_temperature_sensor_1') |
float) }} °C</font>
- type: markdown
content: >-
<center><b><font color=#41CD52 size=6>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_current') | float) }}
A</font></b><br> <span style="white-space: nowrap;">SOC: <font
color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_state_of_charge') | float)
}} %</font></span><br> <span style="white-space: nowrap;">Remain Cap.:
<font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_capacity_remaining') |
float) }} Ah</font></span><br> <span style="white-space:
nowrap;">Cycles: <font color=#41CD52>{{
states('sensor.jk_bms_bms0_charging_cycles') }}</font></span><br>
<span style="white-space: nowrap;">Δ Cell V: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_delta_cell_voltage') |
float) }} V</font></span><br> <span style="white-space: nowrap;">MOS
Temp.: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_power_tube_temperature') |
float) }} °C</font></span><br> <span style="white-space: nowrap;">Batt
T2: <font color=#41CD52>{{
'{:.2f}'.format(states('sensor.jk_bms_bms0_temperature_sensor_2') |
float) }} °C</font></span> |
Beta Was this translation helpful? Give feedback.
-
|
Can someone help me make this card display well on mobile, so that it fits? |
Beta Was this translation helpful? Give feedback.
-
the entire code is below type: vertical-stack
|
Beta Was this translation helpful? Give feedback.
-
|
I have 6 packs; 3 packs per 1 ESP32 S3 module. Here is the code for packs 1,2,3. Replace your BMS mac and delete the code if you have less then 3 batteries. s3-1.yaml.txt
|
Beta Was this translation helpful? Give feedback.
-
|
@shaman1010's solution is simpler and works better than float in many cases. 
|
Beta Was this translation helpful? Give feedback.
-
|
BTW, now we also have this
|
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Note: I will be updating this post if there are modifications to the cards along the way.
Note2: @syssi's example has "substitutions: name: jk-bms" while I used "substitutions: name: bms-bt-monitor" (for sensor names), so in order to use the cards, one needs to do a replace-all from "bms-bt-monitor" to own used substitution name.
Hi all and @syssi
@syssi if you want you can embed the code to README.md
Just sharing my work on adding similar jkbms app graphics to HA:
Code bellow, requires Stack In Card by @RomRider => https://github.com/custom-cards/stack-in-card + markdown card (included with HA)
Top card:
Stats card:
Cells card:
Control card:
Beta Was this translation helpful? Give feedback.
All reactions