Show off your picture-elements uses

[ASNNetworks]

Reply to my own post for an update. Full write up, explanation and code is shared here: Fully loaded media player card (picture-elements project)

@Frank_Hagenbuch @jimz011

[exus85]

This is my new home assistant interface
it’s specifically designed for tablet in kiosk mode

I recorded a small video

My 2020 Home assistant interface (beta)

This is my config

GitHub - exus85/Home-assistant-config: My Home Assistant Config Tablet Kiosk...

[SeLLeRoNe (Andrea Iannucci)]

Very nice

[cdopp (Christopher Dopp)]

You did an amazing job with your setup. I’m sure that you will be soon be inundated with many questions about it. I’ll start…

• How did you accomplish the drag on your floorplan to rotate to a different floor? (at ~ 1:17 in the video) Is that specific to kiosk mode? The rotation animation and transition is really nice.

[ASNNetworks]

Judging by the animation and the pagination bullets at the top, I believe this is swiper card with effect: cube as parameter.

[scstraus]

You win Home Assistant.

[cdopp (Christopher Dopp)]

Thanks. I wasn’t aware of that card.

[MrJelly17]

Hi, great job, can I ask you how did you manage to get this cool pop up ?

[exus85]

Thank you guys
@cdopp as ASNNetworks said the home section is a swipe card with cube effect. each floor is a picture elements card inside the swipe card
@MrJelly17 I don’t know if you are talking to me and which popup you are referring to, btw, each popup window is made using browser_mod.popup service

[NiMa008 (nick)]

Great work! any chance of seeing some code? I’m also interested in how you added the ‘now playing’ in your setup. Looks great!

[Leandro (Leandro A)]

Beautiful!

Can you tell us more about the tablet you use?

[thundergreen]

would you mind sharing your code? How was the music thing done? That’s awesome!

[ObiKaiKenobi]

Hi all,

Just a small ideaI picked up here and made it pretty.

Element code:

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.twitter_follower
    style:
      top: 50%
      left: 40%
  - type: state-badge
    entity: sensor.twitter_folge_ich
    style:
      top: 50%
      left: 60%
  - type: state-badge
    entity: sensor.tweets
    style:
      top: 50%
      left: 80%
image: /local/LovalaceUI/twitter-banner.png

Sensor examples:

- platform: scrape
  resource: https://www.instagram.com/YOURINSTA
  name: Instagram Abonnenten
  select: 'meta[name="description"]'
  attribute: content
  value_template: '{{ value.split(" ")[0] }}'
  unit_of_measurement: Abonnenten

- platform: scrape
  resource: https://socialblade.com/twitter/user/YOURTWITTER
  name: Twitter Follower
  select: '#YouTubeUserTopInfoBlock div:nth-child(2) span:nth-child(3)'
  unit_of_measurement: Follower
  headers:
    User-Agent: Mozilla/5.0

Have fun!

PS: added banner for personal use

[exus85]

This is my config

exus85/Home-assistant-config

@Leandro I designed it for my Huawei matepad tablet

keep in mind than I just have basic coding skill and most of my work follows the “trial and error” tactic
a lot of things stil need to be improved (css) and implemented (functions and some missing sections)

[thundergreen]

I am at the same position…no coding skills bit a lot of try and fail thanks a lot I’ll have a look and will try to understand and maybe implemented it to my dashboard. Thanks a lot so far dude

[ASNNetworks]

After I created my own take on a media player card some other UI elements of mine started to come together, which gave me the idea of a new project. It’s something I wanted to do down the road because I am interested in PiCoreplayer for multiroom audio. Currently I use different Google Cast speakers in different groups. So I decided to just create it since I had a few ideas how I could achieve it. And it could be usefull as a ‘concept’ when I decide to ditch all my Google Home speakers and get multiroom through PiCoreplayer.

Anyway, here’s a (work in progress) of my take on how to use multiroom audio (with multiple sources). I have a button card on my main dashboard that goes to this tab. I added a button card on this tab ad well (back arrow button) which takes me back to my main dashboard. Wrote the code so it would autoswitch day and night mode based on my theme.yaml like rest of my UI. Below the Dark mode.

The videos below are slightly older, the image above has been added later here (the original image was same as video).

And some videos in action:

[Work in progress] Multiroom

Swipe card to change to different active mediaplayers (which only show when playing) In this case Spotify and SoundCloud live playing on different Google Cast speakers. Inside the Swipe card is a heavily modified version of my own previous project. Underneath a row of media_player-popup cards inside a stack-in-card (horizontal)

[Work in progress] Multiroom 2

Starting Spotify stream by using an input_select entity in combination with Spotcast. Then changing music yu using the Media Browser inside an iframe card. Both cards wrapped inside a stack-in-card) (vertical).

I’ll try to release the code later on, but chances are I won’t be able to. Currently it’s still work in progress and stuff gets changed alot. I have split it in multilevel yaml files and requires different stuff to be setup on the backend as well, which makes sharing the code hard right now (due to time restrictions). Feel free to use this as creative input!

[stban1983]

Impressive!

[pppaulie_s (Paul)]

Well done!
This is terrific work!

[denperss]

Can this be done for the FordPass aswell ?

[riro (Rikard Ronnkvist)]

The volume-sliders… what card (and how) are you doing that?