Hello,
with the use of the bodymiscale component i made something to present it on lovelace UI.
3 Likes
It’s great work! Could you share the code, please?
1 Like
Ok, sure.
Just a note:
I am not an code expert so the code may have some extra card mod style that may not be doing no thing 
i use custom bar card, and i mimic the settings ( severity in the card) in the mi fit app.
type: custom:bar-card
entity_row: true
align: split
positions:
title: 'off'
minmax: 'off'
value: inside
indicator: outside
icon: outside
style: |-
bar-card-value, bar-card-minvalue, bar-card-maxvalue {
color: #cccccc;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-title {
color: var(--secondary-text-color)
font-weight: bold;
}
ha-card:before {
content: " ";
background: url('/local/images/miscale.jpg');
background-size: cover;
opacity: 0.7;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;
}
entities:
- entity: bodymiscale.ricardo
attribute: bmi
min: '0'
max: '45'
target: '22'
severity:
- from: '0'
to: '18.5'
color: blue
- from: '18.5'
to: '25'
color: green
- from: '25'
color: yellow
to: '28'
- from: '28'
to: '32'
color: orange
- from: '32'
to: '45'
color: red
name: BMI
positions:
minmax: 'off'
indicator: outside
height: 50%
width: 120%
icon: mdi:human-handsup
- entity: bodymiscale.ricardo
attribute: Body fat
min: '0'
max: '45'
target: '22'
severity:
- from: '0'
to: '12'
color: aqua
- from: '12'
to: '18'
color: blue
- from: '18'
color: green
to: '23'
- from: '23'
to: '28'
color: darkkhaki
- from: '28'
to: '45'
color: orange
name: Gordura
height: 50%
width: 120%
- entity: bodymiscale.ricardo
attribute: water
min: '0'
max: '100'
target: '63'
severity:
- from: '0'
to: '55'
color: orange
- from: '55'
to: '65'
color: green
- from: '65'
color: lime
to: '100'
name: Água
width: ' 120%'
height: ' 50%'
icon: mdi:water-alert
- entity: bodymiscale.ricardo
attribute: basal_metabolism
min: '0'
max: '3800'
target: '2000'
severity:
- from: '0'
to: '1851'
color: orange
- from: '1851'
to: '3800'
color: green
name: Meta. Basal
width: ' 120%'
height: 50%
icon: mdi:run
- entity: bodymiscale.ricardo
attribute: visceral_fat
min: '0'
max: '30'
target: '9'
severity:
- from: '0'
to: '10'
color: green
- from: '10'
to: '15'
color: orange
- from: '15'
color: darkkhaki
to: '23'
- from: '23'
to: '28'
color: red
- from: '28'
to: '45'
color: orange
name: Gordura Visc.
width: ' 120%'
height: 50%
icon: mdi:hamburger
- entity: bodymiscale.ricardo
attribute: muscle_mass
min: '0'
max: '80'
target: '55'
severity:
- from: '-2'
color: orange
to: '49.4'
- color: green
from: '49.4'
to: '59.5'
- color: lime
to: '80'
from: '59.5'
name: Músculo
width: ' 120%'
height: 50%
icon: mdi:weight-lifter
- entity: bodymiscale.ricardo
attribute: protein
min: '0'
max: '40'
target: '20'
severity:
- from: '0'
to: '16'
color: orange
- from: '16'
to: '20'
color: green
- from: '20'
color: lime
to: '40'
name: Proteína
width: ' 120%'
height: 50%
icon: mdi:food-steak
- entity: bodymiscale.ricardo
attribute: bone_mass
min: '0'
max: '10'
target: '3'
severity:
- from: '0'
to: '2'
color: orange
- from: '2'
color: green
to: '4.20'
- color: lime
to: '10'
from: '4.20'
name: Massa óssea
height: 50%
width: ' 120%'
icon: mdi:bone
- entity: bodymiscale.ricardo
attribute: weight
name: Peso
min: '40'
max: '110'
target: '77'
severity:
- from: '40'
color: aqua
to: '57.3'
- from: '57.3'
to: '77.4'
color: green
- from: '77.4'
to: '86.7'
color: darkkhaki
- from: '86.7'
to: '99.1'
color: orange
- from: '99.1'
to: '110'
color: red
width: ' 120%'
height: 50%
icon: mdi:weight-kilogram
title: Ricardo
columns: '2'
animation:
state: 'on'
speed: '15'
decimal: '1'
6 Likes
Thanks for sharing, it’s working so far.
However, there is one problem when you restart the core. This causes the template sensors to lose their state and have to recreate it since they are not persistent. However, this only works for one person, the one who weighed himself last.
An example with the values from your template: First a person weighs himself with 70 kg. This is assigned to user1. Then a person weighs himself with 65 kg, this is assigned to user2. Now the core is restarted. Both sensors are unavailable at first. The last state of sensor.xiaomi_mi_scale_weight is 65, so this is correctly assigned to user2 again. User1 is assigned sensor.weight_name_user1 instead, which is unavailable. This will not be corrected until user1 weighs itself again.
Do you have any idea how to solve this?
1 Like
Hello, at the beginning I was part in this direction then my wife and I we have a weight too close. So I went with this solution. In addition it keeps the data well after a restart.
I am also working on a map. I have some difficulty being a novice. But you will also find a manual card which works very well.
1 Like
Yes i saw that card earlier, but wanted something to show how far i was from the ideal value of some attributes. Althow the ideal is to store this value for long time anda make some kind of a chart with it.
with 4 load cell weight sensors, esp32 and esphome I have built a cheap scale which can be used with HA. you can use it for example with your bed so your weight is tracked while you are sleeping (or not).
See also Load Cell Amplifier HX711 Breakout Hookup Guide - learn.sparkfun.com
Hi Ricardo,
first a big thank you cause it worked like shown and I like it.
FOR ALL BEGINNERS: you first will need harcs installed cause this offers an automated installation of the custom type bar-card (or you have to do it following the manual way via github)
Here is a list of terms a lot of you wanna translate from portuguese, luckily google does a good trick and the variables are declared in english, so for an easy localisation search for all the “name” items which are here portuguese.
BMI = BMI = BMI
Gordura = fat = Fett
Aqua = water = Wasser
Basal metabolism = basal metabolism = Grundumsatz
Visceral fat = visceral fat = Bauchfett
Músculo = muscles mass = Muskelmasse
Proteína = protein = Protein
Massa óssea = bone mass = Knochenmasse
Peso = weight = Gewicht
Finally you have to replace ricardo with your name at the last line with yours and then everywhere else with the name of your scale sensor. Easiest way to find out your scale’s sensor name is developer tools and then in the header of the table type ‘scale’ … and check the bodymiscale.* one cause that is the sensor’s name you have to put as replacement for this ‘bodymiscale.ricardo’
Only point I have an issue with is the following line
background: url(‘/local/img/miscale2.jpg’);
Usually “/local” means /$config path/www/ and therefore the scale should work if it finds in my /home-assistant/www/img path a file called miscale2.jpg, cause /config stays always for /$config path/www/
I can open my miscale2.jpg manualy just to see if it is a picture and not corrupted.
Therefore a huge thankyou to Ricardo for his achievement.
As I had said it “works” and that means a lot these days cause usually it takes a lot of time to see an idea and to implement it into your HA installation depending on which installation you have and how good the variables are named or not.
Ricardo, yours worked fine for me, but might be usefull to add a few comment lines for all the beginners like me (1 week into).
Can you please check this background image line
background: url(‘/local/img/miscale2.jpg’);
And beyond the background picture question I have another one: regarding font colour
We would like black font instead of white one but I could not find “white” in your script or font colour.
Ricardo, thanks a lot for sharing.
Hello thanks for your words. I Will try to solve your issue when i have the time. You must have custom card mod installed.
1 Like
Hi,
I have 4 questions:
- I do not get any figures in the bars on the right, no 16,4 or 90,5 and so on.
- I do not get the background jpg working. What might be missing ?
- How can I change the white text colour in the bars into black text for readability ?
- How do I get the symbols white and rid of the blue ones ?
Hope you have an idea cause currently I see nothing except coloured bars.
thx
As of version 0.0.6 the attribute names changed, I updated the card to support it. About the background image, I wasn’t successful with it either.
type: custom:bar-card
entity_row: true
align: split
positions:
title: 'off'
minmax: 'off'
value: inside
indicator: outside
icon: outside
style: |-
bar-card-value, bar-card-minvalue, bar-card-maxvalue {
color: #cccccc;
font-weight: bold;
text-shadow: 1px 1px #0005;
}
bar-card-title {
color: var(--secondary-text-color)
font-weight: bold;
}
ha-card:before {
content: " ";
background: url('/local/images/miscale.jpg');
background-size: cover;
opacity: 0.7;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;
}
entities:
- entity: bodymiscale.hudsonbrendon
attribute: bmi
min: '0'
max: '45'
target: '22'
severity:
- from: '0'
to: '18.5'
color: blue
- from: '18.5'
to: '25'
color: green
- from: '25'
color: yellow
to: '28'
- from: '28'
to: '32'
color: orange
- from: '32'
to: '45'
color: red
name: BMI
positions:
minmax: 'off'
indicator: outside
height: 50%
width: 120%
icon: mdi:human-handsup
- entity: bodymiscale.hudsonbrendon
attribute: body_fat
min: '0'
max: '45'
target: '22'
severity:
- from: '0'
to: '12'
color: aqua
- from: '12'
to: '18'
color: blue
- from: '18'
color: green
to: '23'
- from: '23'
to: '28'
color: darkkhaki
- from: '28'
to: '45'
color: orange
name: Gordura
height: 50%
width: 120%
- entity: bodymiscale.hudsonbrendon
attribute: water
min: '0'
max: '100'
target: '63'
severity:
- from: '0'
to: '55'
color: orange
- from: '55'
to: '65'
color: green
- from: '65'
color: lime
to: '100'
name: Água
width: ' 120%'
height: ' 50%'
icon: mdi:water-alert
- entity: bodymiscale.hudsonbrendon
attribute: basal_metabolism
min: '0'
max: '3800'
target: '2000'
severity:
- from: '0'
to: '1851'
color: orange
- from: '1851'
to: '3800'
color: green
name: Meta Basal
width: ' 120%'
height: 50%
icon: mdi:run
- entity: bodymiscale.hudsonbrendon
attribute: visceral_fat
min: '0'
max: '30'
target: '9'
severity:
- from: '0'
to: '10'
color: green
- from: '10'
to: '15'
color: orange
- from: '15'
color: red
to: '30'
- from: '23'
to: '28'
color: darkkhaki
- from: '28'
to: '45'
color: orange
name: Gordura Visceral
width: ' 120%'
height: 50%
icon: mdi:hamburger
- entity: bodymiscale.hudsonbrendon
attribute: muscle_mass
min: '0'
max: '80'
target: '55'
severity:
- from: '-2'
color: orange
to: '49.4'
- color: green
from: '49.4'
to: '59.5'
- color: lime
to: '80'
from: '59.5'
name: Músculo
width: ' 120%'
height: 50%
icon: mdi:weight-lifter
- entity: bodymiscale.hudsonbrendon
attribute: protein
min: '0'
max: '40'
target: '20'
severity:
- from: '0'
to: '16'
color: orange
- from: '16'
to: '20'
color: green
- from: '20'
color: lime
to: '40'
name: Proteína
width: ' 120%'
height: 50%
icon: mdi:food-steak
- entity: bodymiscale.hudsonbrendon
attribute: bone_mass
min: '0'
max: '10'
target: '3'
severity:
- from: '0'
to: '2'
color: orange
- from: '2'
color: green
to: '4.20'
- color: lime
to: '10'
from: '4.20'
name: Massa óssea
height: 50%
width: ' 120%'
icon: mdi:bone
- entity: bodymiscale.hudsonbrendon
attribute: weight
name: Peso
min: '40'
max: '110'
target: '77'
severity:
- from: '40'
color: aqua
to: '57.3'
- from: '57.3'
to: '77.4'
color: green
- from: '77.4'
to: '86.7'
color: darkkhaki
- from: '86.7'
to: '99.1'
color: orange
- from: '99.1'
to: '110'
color: red
width: ' 120%'
height: 50%
icon: mdi:weight-kilogram
title: Hudson Brendon
columns: '2'
animation:
state: 'on'
speed: '15'
decimal: '1'
2 Likes
Meanwhile I found out that the underlaying MiScale script is not working cause the data for the “aurelien sensor” are not there.
Regarding background image I also had checked different ways like ‘local/image/miscale.jpg’ without the url cause that was working images.
The blue colour of the icon is part of the basic configuration in the primary / accent colour selection.
With the update of bodymiscale the attributtes name changed, @hudsonbrendon post the new names. About question 3 and 4 y can,t either change it, i discover that mine icons appear white because of the theme i,m using, so i guess that changing theme settings will do that.
About the background image, it is strange that it don,t show up for so many of you, let me say all i have about it :
That is the image i have :
and i put it in this folder /config/www/image/miscale.jpg
Hi Ricardo,
I have meanwhile fixed the bodymiscale points out: it was the sensor name cause I did not know that ‘sensor.weigh_aurelien’ was referring to the original sensor.ble_weight_mi_scale2’
It must start like this:
[boymiscale.yaml]
wolf:
sensors:
weight: ‘sensor.ble_weight_mi_scale2’
Then I got the data from the scale and saw them in the bodymiscale.wolf sensor but your code still did not show any value caused by the attributes you had used partially with uppercase letters and also ’ ’ and not ‘_’ .
After I had changed your attribute lines it worked. I mean lines like this
attribute: Visceral fat changed to that attribute: ‘visceral_fat’
Then I found another typo or point that should be fixed
- entity: 'bodymiscale.wolf'
attribute: 'visceral_fat'
name: 'BAUCHFETT'
min: '0'
max: '30'
target: '9'
severity:
- from: '0'
to: '10'
color: 'green'
- from: '10'
to: '15'
color: 'darkgreen'
- from: '15'
color: 'orange'
to: '30'
- from: '23'
to: '28'
In the third last lane you had a limt set to 30 but the from value in the next 2 lines 23 and 28 are smaller so this segment will be jumped over or ignored.
the last 5 lines should be changed from 30 to 23
- from: '15'
color: 'orange'
to: '23'
- from: '23'
to: '28'
I have a 181D so I checked al the severity sections for that “smaller” model but of cause not those features mine does not support. I guess it might be worth to check the missing ones, in particular
- water
- body_fat
- muscle_ma
- bone_mass
- protein
Then please do the attribute exchange of space with “-” and lowercases only cause it would be nice if you replace your previously posted code above too.
That will avoid others from falling into the pitfall I had fallin in.
Regarding background picture: which installation are you running?
- DOCKER HA
- DOCKER HASSIO
- HASSIO image
I have tried and tried with
background
background-image
image
and from
(/home/pi/HomeAssistant/www/img/miscale.jpg)
over
(/local/img/miscale.jpg)
to all those variants with ‘’ or “”
Nothing has worked out so far, even thought others had used similiar code that had worked.
Ok thanks for your corrections, i just updated my code of the card in my previous code. The attribute issue was an breaking change of the component, it was working before.
For the image , i am running Home assistant in an vm of virtual box , with home assistant core and superviser, you could try change the last value z-index: 0; with z-index: 1; or z-index: -1; to see if it changes something.
Don,t forget you have to have card-mod.
OK,
that was the pitfall for all those who had to struggle with the background image
I guess it would be good if you add that to your first code too.
ATTENTION: after the installation background image did work, but only after saving.
Usually the visual editor or code editor updates the preview instantly but not in this case.
Here it needs to be saved to show the updated result afterwards.
I also noticed recently that a restart is not enough and that it needs a stop and start.
I then tried the z-index: variants where
0 means grafic in background and
1 in foreground
-1 means grafic will be on the mars, cause it does no longer appear.
I also tried the transparent png advice I had found somewhere else.
Did work like jpg.
UPDATE:
New issue caused by the background: a title is no longer visible
One workaround is to use a transparent png cause then the title will be there.
You simply need to install the card-mod and then the background image will appear when you have saved the code.
Changes in the code editor itself will not appear in the preview ! They will only appear when you had saved.