Show off your picture-elements uses

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?
ha_frame

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

Screenshot_Laptop_2019-11-01%2001_40_42
(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?

38

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:

24

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

Hi all,

Here my floorplan. Still a work in progress but hopefully, it can give someone new ideas.

Both the sprinklers and AirCon have animated gifs.

3 Likes

I’ve had some projects in my home assistant setup.

Here’s one with my chargebox, it’s a quite simple setup with the chargebox and then colour changes based on the state:

A simple one to visualise the status of my NAS and the disk temps:
image

And then quite a dynamic card for the car + chargebox.
Buttons on top to control and show statuses of the car.
Windows go red when heater is started, cable is shown when charging, red blink in the window when car is locked, horseshoe lights are on if lights are left on…

The carnet card code and images is available here:

2 Likes