Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@ciotlosm
Last active June 24, 2021 20:16
Show Gist options
  • Star 37 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save ciotlosm/9508388876edf92c4c1f3579e740fbd5 to your computer and use it in GitHub Desktop.
Save ciotlosm/9508388876edf92c4c1f3579e740fbd5 to your computer and use it in GitHub Desktop.
Lovelace
@ciotlosm
Copy link
Author

ciotlosm commented Jun 25, 2018

@vMeph You can use http(s)://<your_home_assistant_url/local/myimage.jpg and just put the image in your home assistant /config/www/myimage.jpg.

@nickleman Controlling entities in glance just by clicking will be coming in a future release, probably also allowing for longer names. For camera I'm not sure as it uses an existing card that will require to be rewritten.

@Snipercaine local should work just as I mentioned above.

Note: Make sure your images are on the same protocol as your Home Assistant. If you run HA on https, you should use images from https sources.

Update

Please log issues against https://github.com/home-assistant/ui-schema/issues. Part of the items below have already been logged, I'll try to move all to that issue list.

List of items (feedback, bugs, requests, etc.)

Just to reiterate ideas that people have requested so far (in no particular order):

  • entity-filter to support exceptions (blacklist not just whitelist). Example: show this pattern but except this pattern #41
  • entity-filter to support ordering #47
  • entity-filter option to hide when empty #48
  • entities card to support divider line #43
  • entities card to support global control based on an entity #35
  • glance to support toggling of entities without opening more-info #49
  • glance card to support justify not just align left #28
  • glance card to allow hiding of values and/or title #33
  • glance card fix aspect radio for images #29
  • glance fix text [too short in 0.72.0 and overlapping in 0.72.1] #45
  • media-control to support options to hide buttons when not playing - probably to start playing when clicking the image
  • entity-picture to support different image for on/off allowing people to show pictures of their garage door opened or closed #51
  • picture-glance to support multiple images based on conditions around entities in the card
  • picture-glance to support coordinates for positioning #52
  • picture-glance to support image source from camera-preview or from media-control #39
  • picture-glance fix consistency for entities opening more info dialog #1339
  • use either title or name to avoid confusion between views and cards #54
  • cards to support templating - this probably would be very useful to Markdown cards #55
  • views fix theme to be usable as per documentation
  • Allow local card entity customisation #36

@Snipercaine
Copy link

Awesome! thanks @ciotlosm!

@JAAlperin
Copy link

JAAlperin commented Jun 25, 2018

Help, please.

I don't understand what to do with the following portion of the instructions to make Lovelace the default UI.

Information on path for lovelace.html (Hass.io example):

core-ssh:/config/www# pwd
/config/www
core-ssh:/config/www# ls 
lovelace.html

@sdomotica
Copy link

sdomotica commented Jun 25, 2018

@Snipercaine
This is my working solution

      - type: entity-picture
        image: /local/lifx2.jpg
        entity: light.soggiorno
        title: Living

I had problem without title, with title all works fine.
Bye
Sandro

@ciotlosm
Copy link
Author

@JAAlperin just find where you have your configuration.yaml. In that folder create a www folder and inside that folder create the lovelace.html file with the content specified.

@brianhanifin
Copy link

brianhanifin commented Jun 25, 2018

Great work so far! This will solve the thing that bothered me most about Home Assistant, it always bothered me that logical groups were not separated from UI "groups". Thank you.

However, I do have a bug to report. The mask for the device_tracker photos is not keeping the correct aspect ratio. It appears as an oval, and as a result just shows my forehead in certain layout situations.

Here is what it looks like if the card is too wide.
screen shot 2018-06-25 at 1 17 11 pm

Here is what is should look like.
screen shot 2018-06-25 at 1 17 26 pm

The more I think about it, the more I like the idea of my forehead becoming my profile image. Haha! :)

@ciotlosm
Copy link
Author

thanks for reporting @brianhanifin. I've added this to the list. Probably will look at this end of the week.

@sdomotica
Copy link

I updated to 0.72.1 and have this issue
immagine

@ciotlosm
Copy link
Author

ciotlosm commented Jun 26, 2018

@brianhanifin can you check if your bug was fixed? Fixed and tested
@sdomotica I think this is a new bug introduced with other fixes. I'll note this as well to check by end of the week. Already fixed in dev

Please log issues against https://github.com/home-assistant/ui-schema/issues. Part of the items below have already been logged, I'll try to move all to that issue list.

@luci-11
Copy link

luci-11 commented Jun 26, 2018

Totally agree with @SupahNoob, it would be great to see camera stream as background and sensors above as in picture glance!

EDIT: I managed to do it :)
just open the camera card, right click on it, "copy image URL".
Then use picture-glance and put as image that URL (from /api/camera_proxy_stream/....). Only problem is that token sometimes changes and link should be updated
BUT IT'S AMAZING

@boonhapus
Copy link

@ciotlosm Looks like others have cleared up the idea I was trying to express. Essentially having a camera feed with the same controls as a glance. Appears that there is an issue for this: home-assistant/ui-schema#39 and I think Paulus's idea is the way to go. Unfortunately I don't have much experience with JS. I'll watch the repo instead of this gist. (Never got a notification from here either, which is odd.)

@mrand
Copy link

mrand commented Jun 26, 2018

Looks neat!
Is there already a way to reload an image (or iframe) from the web (or even local) on a timer? I'm specifically thinking a weather map gif (the web source generates a new one every ~6 minutes).

@Snipercaine
Copy link

Loving this LoveLace thing! (kinda like saying it too, makes me feel dirty)
Can we specify different icons for specific entities just in Lovelace?
Example: I have a picture_glance of a room with all the switches in that room listed at the bottom, but all the icons look the same so I can't tell which one is which. I could assign unique icons in customize.yaml... but I don't want to :)

@ciotlosm
Copy link
Author

ciotlosm commented Jun 27, 2018

@mrand you can do timers yourself in an iframe card. You have all the freedom.
@Snipercaine Not at the moment. You can raise an issue for this in ui-schema

Docs are now moved here https://home-assistant.io/lovelace so you can get notification on issues and updates and allows contributions

@pdobrien3
Copy link

How about blank tiles to use for spacing on the glance card? My glance tile has 9 sensors. 5 on top and 4 on the bottom. Would be nice to have 2 sensors | one blank tile | 2sensors on the bottom row to even things out. Thanks for your hard work on Lovelace. It is awesome.

@ciotlosm
Copy link
Author

ciotlosm commented Jun 29, 2018

@pdobrien3 I've added your request here: https://www.home-assistant.io/lovelace/glance/
The repo moved so feel free to use the new repo

@max5962
Copy link

max5962 commented Jun 29, 2018

I could be awesome if camera-preview and picture-glance can be merge ( true PTZ interface ! :) )

@ciotlosm
Copy link
Author

ciotlosm commented Jun 29, 2018

Please remember that docs moved here: https://home-assistant.io/lovelace

@max5962 this will probably be possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment