A different take on designing a Lovelace UI

did you copy the themes.yaml to your root directory?

Yes, thank you. Sidebar appeared, there was an error in the folder name. But it appeared empty. In which file to look for sidebar settings?

1 Like

Hello guys,
I don’t use Plex at the moment and I don’t see any use for it so far.
Nevertheless, I find the idea of upcoming movies or new episodes of favorite series on Netflix interesting.
Is there a way to show them in the “Media” card?
I currently use the following streaming providers: Neflix, Prime, Disney+.


1 Like

When someone makes a integration of course.
You can parse the website and save the infos and fill the sensors.

But I don’t know a integration

Hi, maybe you need this - Upcoming Media Card

Hi Mattias, this looks great, thank you very much for sharing it.
I am trying to adopt it to my setup and I am bit new to HA.

Can you help me find out how I can change the language in the sidebar ?

I also have a Unifi Dream Machine but for some reason the Unifi Network Integration is not creating the memory, cpu entities for it. any pointers would be really great

you need to adjust your template.yaml

1 Like

Like @Br3b said edit the templates

and test your templates before restarting

Open your Home Assistant instance and show your template developer tools.

The integrations doesn’t UniFi Network - Home Assistant

I grab the sensor data from the unifi api hass-config/include/sensor.yaml at ab7abfc34d53437d53dd8a19464e0f8e0406ccd1 · matt8707/hass-config · GitHub

Explanation Cookie login to get value for sensor - #9 by Mattias_Persson

1 Like


Used to have issues with synology “native plex”, but switched to “docker plex” and haven’t had an issue since.

1 Like

Thank you very much Mattias.
I have followed the above and working well so far.

For the Dream Machine though, I added the sensor yamel, added the secret to secrets file but still not reading any data.

Any pointers on how I can debug ? not sure what logs I should be looking at if any


i try to show me the number of the active players in the notify badge, i tried it with this code, but something is wrong. Perhaps you can look?

notify: >
                  let player1 = states['media_player.plex_firetv_kueche'],
                      player2 = states['media_player.plex_shield'],
                      player3 = states['media_player.plex_firetv_schlafzimmer'];
                  if (player1) {
                     let player1_count = player1.state === 'playing' ? 1 : 0;
                      return player1_count;
                  if (player1 && player2) {
                     let player2_count = player2.state === 'playing' ? 2 : 0;
                      return player2_count;
                  if (player1 && player2 && player3) {
                     let player3_count = player3.state === 'playing' ? 3 : 0;
                      return player3_count;

okay this works

notify: >
                  let player1 = states['media_player.plex_firetv_kueche'],
                      player2 = states['media_player.plex_shield'],
                      player3 = states['media_player.plex_firetv_schlafzimmer'],
                      player4 = states['media_player.plex_galaxy_s21'],
                      player5 = states['media_player.plex_karschiller_googlemail_com_plex_for_android_tv_aftt'],
                      player6 = states['media_player.plex_plexamp_iphone_von_marc'],
                      player7 = states['media_player.plex_iphone'];
                  if (player1 && player2 && player3 && player4 && player5 && player6 && player7) {
                    let player1_count = player1.state === 'playing';
                    let player2_count = player2.state === 'playing';
                    let player3_count = player3.state === 'playing';
                    let player4_count = player4.state === 'playing';
                    let player5_count = player5.state === 'playing';
                    let player6_count = player6.state === 'playing';
                    let player7_count = player7.state === 'playing';
                    return player1_count + player2_count + player3_count + player4_count + player5_count + player6_count + player7_count;


perhaps you can help, my echos have not entity_picture, they only have entity_picture_local

i tried to make a if condition in the else tag :

butn he shows me no picture

- background-image: &media_background_image >
              if (entity) {
                return entity.attributes.data !== undefined
                  ? `url("${entity.attributes.data[variables.i].fanart}"), url("${entity.attributes.data[variables.i].poster}")`
                  :  if (variables.entity_picture === undefined)
                     return `url("${variables.entity_picture_local}")`
                     else return `url("${variables.entity_picture}")`;

is it not possible to add a if condition there?

i tried this too, but no luck

- background-image: &media_background_image >
              if (entity) {
                return entity.attributes.data !== undefined
                  ? `url("${entity.attributes.data[variables.i].fanart}"), url("${entity.attributes.data[variables.i].poster}")`
                  : `url("${variables.entity_picture}")`;
              if (entity) {
                return entity.attributes.data === undefined
                  ? `url("${entity.attributes.entity_picture_local}")`;   
                  : `url("${variables.entity_picture}")`;   

okay i have a entity_picture atrribute and a entity_picture_local but its a url , and it dont works with your basic code, he shows no picture when a echo is playing,.


but under the meida_players cards it works, there is a image, only at the conditional_media it dont work


Hi André

Thanks for the automation.

Do you maybe have an idea how I can close the popup automatically after x seconds.

I dont get any further :slight_smile:

WOW very nice!

@Mattias_Persson - Question regarding your default grid layout, how do you get the grid to fit your screen size perfectly based on your screenshots?

I have created a grid layout as below:

margin: 0
grid-gap: 5px
grid-template-columns: 250px repeat(2, 1fr) 250px
grid-template-rows: 0fr repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
  ".  badges badges ."
  ".  main1  main2 ."
  ".  media  main4 ."
  ".  footer footer ."

I use custom button cards with aspect ratio 1/1 like yourself but for some reason the buttons appear huge on my desktop monitor and even on the samsung tab i have to scroll the dashboard rather than it being nicely setup within the viewport of the browser.

The grid is tablet first. I can make the layout scroll too if I fullscreen on desktop. Use css media queries and avoid px units.

I think it’s because you’re trying to load https url over http

Try something like this

if (entity) {
  let entity_picture = entity.attributes.entity_picture !== undefined
    ? entity.attributes.entity_picture
    : entity.attributes.entity_picture_local !== undefined
      ? entity.attributes.entity_picture_local
      : null;
  return entity.attributes.data !== undefined
    ? `url("${entity.attributes.data[variables.i].fanart}"), url("${entity.attributes.data[variables.i].poster}")`
    : `url("${entity_picture}")`;

You can loop your media players that are playing and count that

  let count = 0,
  media_players = [
  for (var i = 0; i < media_players.length; i++) {
    if (media_players[i] !== undefined && media_players[i].state === 'playing') {
      count += 1;
  return count;

You can test it in terminal. If I copy this command I get 401% as a response and if I enter the correct credentials it spits out json.

data='{"username":"user","password":"pass"}'; ip=''; c=$(curl -H 'Content-Type: application/json' -d $data -ksc - $ip/api/auth/login -o /dev/null); echo "${c}" | curl -ksb - $ip/proxy/network/api/s/default/stat/device/