Beautiful!
Can you tell us more about the tablet you use?
would you mind sharing your code? How was the music thing done? That’s awesome!
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
3 Likes
This is my 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)
2 Likes
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
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:
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)
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!
17 Likes
Impressive!
1 Like
Well done!
This is terrific work!
1 Like
Can this be done for the FordPass aswell ?
The volume-sliders… what card (and how) are you doing that?
It’s this card: DBuit/media_player-popup-card (github.com)
But I decided to not use it as a popup card, but just as a regular card. The sliders are inside a horizontal-stack.
2 Likes
Hi ASNNetworks,
Great work, can you please share your code?
Thanks.
Sorry, I can’t. It was extremely advanced to make it all work with automations, scripts and custom cards I edited. In order to share all code, it would take me a few days to combine all code properly so it’s usable (I work 50-60 hours a week with having a job and freelance gigs on the side). This is not something you can just copy/paste and expect to work in all honesty.
But that’s not the main reason: I have switched to Logitech Media Server (via PiCoreplayer/Max2Play) for multiroom. I use the interface of LMS, instead of this projecy. So I don’t use this anymore, nor do I have the code.
My goal was initially to show off what was possible using picture-elements and to think outside the box of how Lovelace views usually look like. It was meant as an experiment and concept, in which it was succesful. So I’m sorry I can’t help you, but I do hope you (and others) get inspirations based off this ofcourse 
!
UPDATE: I got it working. Thanks for sharing!
Hi,
I can’t seem to figure out how to get the person tracker working. All sensors have been created and are showing up in dev tools. I’m using the GUI to add the cards, so I’m just plugging the YAML into a manual card. Two things happen, I either get a blank screen or a swirling blue circle. I have 3 people but for now I’m only using myself to troubleshoot.
cards:
- card:
cards:
- elements:
- entity: '${''device_tracker.life360_'' + vars[0]}'
image: >-
"${states['sensor.' + vars[0]
+'_status'].attributes['entity_picture']}"
style:
left: 50%
top: 50%
width: 100%
type: image
- entity: '${''sensor.'' + vars[0] +''_battery''}'
style:
'--paper-item-icon-color': >-
${'hsl(' + (states['sensor.' + vars[0]
+'_battery'].state*1.1 )*((states['sensor.' + vars[0]
+'_battery'].state/100)) + ',90%,40%)'}
left: 4.5%
top: 3.5%
transform: 'scale(1.2,1.2)'
type: state-icon
- entity: '${''sensor.'' + vars[0] +''_wifi''}'
style:
'--paper-item-icon-color': '#2b9af9'
left: 80.5%
top: 3.5%
transform: 'scale(1.2,1.2)'
type: state-icon
image: '${''/local/img/person/blank_frame.png''}'
type: 'custom:hui-picture-elements-card'
- color_type: icon
entity: '${''sensor.'' + vars[0] +''_status''}'
show_icon: false
show_name: false
show_state: true
styles:
card:
- height: '${states[''sensor.'' + vars[0] +''_height''].state}'
state:
- padding-top: '${vars[2]}'
- padding-left: 14px
- padding-right: 14px
- white-space: '${vars[1]}'
- text-overflow: '${vars[1]}'
- word-break: break-word
- font-family: var(--primary-font-family)
tap_action:
action: url
url_path: '${states[''sensor.'' + vars[0]].attributes[''map_link'']}'
type: 'custom:button-card'
- card:
color_type: icon
entity: '${''sensor.'' + vars[0] +''_at_loc_since''}'
show_icon: false
show_name: false
show_state: true
styles:
card:
- height: 30px
state:
- font-family: var(--primary-font-family)
- padding-bottom: 14px
- font-size: 12px
tap_action:
action: url
url_path: '${states[''sensor.'' + vars[0]].attributes[''map_link'']}'
type: 'custom:button-card'
conditions:
- entity: '${''binary_sensor.'' + vars[0] + ''_moving''}'
state: 'off'
type: conditional
type: 'custom:vertical-stack-in-card'
entities:
- '${''device_tracker.life360_'' + vars[0]}'
type: 'custom:config-template-card'
variables:
- '''mike'''
- >-
{if (states['sensor.' + vars[0] +'_height'].state ===
'70px')'unset';else 'nowrap'}
- >-
{if (states['sensor.' + vars[0] +'_height'].state ===
'70px')'4px';else '14px'}
type: horizontal-stack
I have the same issue can you please tell me how you fixed it? and or share your card code I use the GUI also but get only a empty card
The issue i had was because of this bit of code here:
tap_action:
action: url
url: '${states[''sensor.'' + vars[0]].attributes[''map_link'']}'
It’s pointing to a sensor that I didn’t have setup. Once I had this setup everything started working, no need to change the frontend code provided by hoffdad. I found using the browser’s dev tool (F12) was very helpful in tracking down UI errors.
Thanx mate, I never toucht the solution was so simple, thanks again for ponting me the right direction.
Great example and very inspiring @ASNNetworks. I’m building something similar to what you’ve done here and can’t get the right styling on the popup media player card. Would you mind sharing the styling you used on that card, or the classes you’ve changed?
I want to help you, but I’m currently moving to a new home. I don’t have access to my HA instance to copy/paste codes currently. I expect to be able to setup my electronics (and HA) in around 2 weeks. (
) I you haven’t found a solution let me know in 2 weeks, I’ll be happy to help.
1 Like
I was able to almost replicate your dashboard, I love it and it’s perfect for my multiroom audio solution with Snapcast. Could you tell me how you were able to hide the scrollbar in the iframe for the Media Browser? I tried with overflow: hidden in multiple places but somehow none of them worked.