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
@allanak
Copy link

allanak commented Jun 23, 2018

Loving this new stuff. I've been migrating my old UI stuff over and I'm finding a limitation around media-control.

I'm attempting to only show media player controls filtering where state=(playing|paused|on) so the control is hidden if the player is off. When you have several media player devices, this clogs up the UI quickly. Hiding them with an entity-filter alone works but results in the loss of one-touch media controls.

In the old UI, the workaround for this was to create a group with one entity for each media player, using automations to hide/show the entity by triggering group.set_visibility based on the media player state. I attempted to use the group entity in the media-control card and it errors out wanting a media_player entity, so I can't accomplish that same trick anymore.

One more suggestion: When there are no matching entities based on a filter, the UI just shows a card with a title only. If the card can be hidden when the entity count is zero, that'd be a little cleaner.

I will +1 the "name" vs "title" arguments being a little confusing. I also agree that the text on the glance cards are too small. I can't see more than one and a half words in about 15 of them.

Thanks and keep up the good work!

@ciotlosm
Copy link
Author

@nk553 the current setup is still experimental. It just got usable and will still undergo changes. Your suggestions are great, but it would be best to post them to the repo so more people can review and discuss potential implications.

My thoughts:

  • Adding two rows of text above the icon would make the 'glance' card a bit too big and will start to lose it's value of being a compact card
  • Agree with justify, if you have knowledge on this please have a look at creating a PR, I'm sure the guys would be more than happy to get help
  • I think column setup is still either not implemented, or not in a stable state. Best to raise an issue on this
  • I'm sure templates will come in the near future, but everyone has been working hard to get current version in a usable state for feedback
  • I'm not sure why name vs title, but this you can raise on https://github.com/home-assistant/ui-schema

@ciotlosm
Copy link
Author

@allanak would be best to write feedback to the team for media player. I think the card is being reused so enhancements are possible as long as feedback arrives in the right spot.

  • I totally agree with hiding a card when entity count is zero, I'll raise this as well
  • As I noted before, please raise an item in https://github.com/home-assistant/ui-schema for name vs title. I'm sure some things will change name in next iteration to align more things
  • I'm still thinking myself what the best way to display glance text. I love the fact that glance stays so small and offers this compact view.

@nk553 @allanak I will pass this feedback to the guys as well.

@xAPPO
Copy link

xAPPO commented Jun 24, 2018

Picture Glance: It would be great to enhance that to allow entities to have an x,y position set individually, and relative to the image e.g. (0.5,0.7). Instant room/floor plan capability

@vMeph
Copy link

vMeph commented Jun 24, 2018

is there a way to get image from local other then html something like /local/img/test.png

- type: picture-glance
        image: http://jobbind.com/wp-content/uploads/
        title: Living
        entities:
          - switch.living_room

@nickleman
Copy link

@ciotlosm yes I believe @SupahNoob would like to add controls to the bottom of a camera view. I know I would like to.
I would also love to see a glance view (or just an option to the view) to enable just toggling of entities on click instead of opening the details pane.

@Snipercaine
Copy link

Snipercaine commented Jun 24, 2018

Thanks for doing this!
It's really cool and so much easier to modify than the "old" way.

What are the options for "images".
I tried dropbox and /local/ without success. Getting a recent image from the cameras in a room would be ideal.

@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