Michael love the setup, guess you are using BitEmoji for pics? or did you get those made somewhere?
Yep, bitmoji for the pics of my wife and I, Chief Architect for the home floorplan, and then just cleaning them all up with Photoshop.
1 Like
Hi! How did you make this picture?
I started with the photoshop doc provided by mcfrojd, removed the lower two circles, and then changed up the color to match my main theme.
Could you share how you got the entities to be used with your card? I like that card. I assume each of the png is a change in status correct?
Michael, I am following how you did your settings but a few things. First you say you have to have “places” setup but not sure what you are saying there? I have life360 setup but places is not allowed now. Second I am assuming it is a different png file for each state (home, work, etc). So you took the transparent square and added each state picture behind it? And how does it put the statuses in the other circles? Thanks
(not using the “distance to home” and “time to home” right now)
########################################################################################################################
# View - Home
########################################################################################################################
id: home
title: Home
cards:
###################################################################################################
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
#-------------------------------------------------------------------------------
- type: picture-elements
image: /local/lovelace/home/ll_matte_home1.png
elements:
- style:
top: 50%
left: 50%
width: 100%
type: image
entity: input_select.matte_home_status
state_image:
"Home": /local/lovelace/home/ll_matte_home1.png
"Just Arrived": /local/lovelace/home/ll_matte_home1.png
"Away": /local/lovelace/home/ll_matte_not_home1.png
"Just Left": /local/lovelace/home/ll_matte_not_home1.png
"Extended Away": /local/lovelace/home/ll_matte_not_home1.png
#---------------------------------------------------------------------------------------------------
# Charging icon
#---------------------------------------------------------------------------------------------------
- style:
top: 50%
left: 50%
width: 100%
type: image
entity: input_boolean.matte_charging
state_image:
"on": /local/lovelace/home/ll_status_charging.png
"off": /local/lovelace/home/ll_status_blank.png
#---------------------------------------------------------------------------------------------------
# Battery Icon (Top Left Circle)
#---------------------------------------------------------------------------------------------------
- style:
color: white
top: 9%
left: 12%
type: state-icon
entity: sensor.life360_mathias_frojd_battery
#---------------------------------------------------------------------------------------------------
# Location (Footer Center)
#---------------------------------------------------------------------------------------------------
- style:
color: white
top: 92%
left: 50%
type: state-label
entity: input_select.matte_home_status
#---------------------------------------------------------------------------------------------------
# Battery Label (Top Right Circle)
#---------------------------------------------------------------------------------------------------
- style:
color: white
top: 10%
left: 89%
type: state-label
entity: sensor.life360_mathias_frojd_battery
#---------------------------------------------------------------------------------------------------
# Distance to home (Bottom Right Circle)
#---------------------------------------------------------------------------------------------------
# - style:
# color: white
# top: 73%
# left: 88%
# type: state-label
# entity: sensor.waze_matte_distance
#---------------------------------------------------------------------------------------------------
# Time to home (Botton Left Circle)
#---------------------------------------------------------------------------------------------------
# - style:
# color: white
# top: 73%
# left: 12%
# type: state-label
# entity: sensor.waze_matte_time
####################################################################################################
6 Likes
Do you have the " ll_status_blank.png" posted somewhere? And do you have to make a PNG for each state, like home, away, etc for each person? I setup all the sensors and stuff to get the results. I am new to parts of HA can you share your “input_select” and “input_boolean” configs?
ll_status_blank.png
Image above. (blank image)
I use 2 images for the states.
Home image
Away image.
And the image for battery charging.
Ok I see now how you are doing it. Each PNG is a state of the user… Roger that, thanks
making progress, but still struggling with the main picture position:
downloaded the bitmoji (which isn’t too straightforward for someone not using snapchat…) but it might not be the correct format?
2 Likes
No it’s not. How did you do it? I ended up taking a screen capture which wasn’t ideal.
Hello,
you can use PhotoFiltre 7. Create a transparent layer in the format of your round bottom. (save in png).
With phtofiltre you can extract that image from your bimoji screenshot
You can share your card later because I do not use frontend but manual card.
well, almost forgot again… this is way too complicated.
First I created a bitmoji using the bitmoji app.
I then added the bitmoji extension to Chrome on my Mac. Doing so allows you to insert bitmoji’s in the web Gmail interface:
When you select a bitmoji in the newly composed mail, you can download that to your computer, and then move it to the HA instance…
There must be an easier way to do so though, cant imagine they want it to be so difficult.
thanks for chiming in, I have no idea what you are doing though…
I think I have a correct bitmoji, though @hoffdad says here the image should be 500X500, while mine is 398X398.
I can easily change the resolution of course, but making it bigger would enhance the issue, instead of solving it…
should I maybe change the coordinates in the card config? using this now:
style:
top: 50%
left: 50%
width: 100%
as per instructions of @mcfrojd here
edit
changed the resolution to 500x500, which doesn’t make a difference in the frontend as far as I can see now.
changed the config to
style:
top: 35%
left: 50%
width: 100%
does though, and seems to be fine:
why this is needed in my card config, while others use differente coordinates is beyond me for now, but this is only one of my first complexer picture elements cards…
The full card is way too big for my setup though, so I am looking to resize the complete config, and add a few more people to the horizontal stack. Hope it will resize automagically…
for now I am stuck with this:
To help, bitmoji has a ‘Upload to Google Photos’ option. I just used that to select which images I wanted, downloaded them to my computer, and made the background transparent in Photoshop. As for the images, icons, and such, they change based on the size of the card, so I recommend determining if you’re going to have 1,2, or 3 cards side by side first, set that up, and then determine the appropriate top, left, and width variables based on the view.
1 Like
Made some more changes using graphics to look like a TRV, but there is hell of a lot of code in the background and node red flows to get it all to work. Can share but not sure the best way. (Months of work)
9 Likes
How did you manage to display the image horizontaly?
Mine is 1000x800 but it shows in vertical way
views:
- title: Floorplan House
path: floorplan
icon: mdi:castle
theme: ravnedalenlovelace
panel: true
cards:
- type: picture-elements
image: /local/images/picture-element_house_from_top_v10.png
The floorplan image-file is 1400x725px.
Hope this helps.
1 Like
