A different take on designing a Lovelace UI

mobiustorr · May 24, 2022, 5:50am

Not sure if someone has tried doing this before, but I’m running into an issue when attempting to create a single button to Turn On / Shutdown my NAS depending on the NAS state. The button would change the icon, name, and script depending on the state of the NAS. I tried making the code while using the Lovelace UI to display the proper shutdown button for an NAS on state, but clicking the button doesn’t shut down the NAS. When I use the code in my NAS footer popup, the popup refuses to open.

Here’s a working static button that enables shutting down the NAS via a button press:

Here’s the attempted code with the NAS footer popup refusing to open:

          - type: custom:hui-horizontal-stack-card
            cards:  
              - type: custom:button-card
                name: Reboot
                icon: mdi:restart-alert
                tap_action:
                  confirm: >
                    [[[
                      return `[[[
                        if (window.confirm('Are you sure you want to reboot the NAS?')) {
                          hass.callService('browser_mod', 'toast', { message: 'Rebooting the NAS...', duration: 3000 });
                          hass.callService('rest_command', 'truenas_reboot');
                        }
                      ]]]`
                    ]]]
                template: icon_name
                 
              - type: custom:button-card
                state:
                  - value: 'unavailable'
                    icon: mdi:power
                    name: Turn On
                  - value: 'on'
                    icon: mdi:close-circle-outline
                    name: Shutdown
                entity: binary_sensor.truenas_freenas_boot_healthy
                tap_action:
                  confirm: >
                    [[[
                      if states{'binary_sensor.truenas_freenas_boot_healthy'] == 'on'
                        return `[[[
                          hass.callService('browser_mod', 'toast', {
                            hass.callService('browser_mod', 'toast', { message: 'Shutting down the NAS...', duration: 3000 });
                          hass.callService('rest_command', 'truenas_shutdown');
                         ]]]`
                      else
                        return `[[[
                          hass.callService('browser_mod', 'toast', {
                            hass.callService('browser_mod', 'toast', { message: 'Turning on the NAS...', duration: 3000 });
                          hass.callService('rest_command', 'truenas_turnon');
                         ]]]`
                    ]]]
                template: icon_name

Mattias_Persson · May 24, 2022, 6:35am

correct

[[[
  return `[[[
    if (states['binary_sensor.truenas_freenas_boot_healthy'].state === 'on') {
      hass.callService('browser_mod', 'toast', { message: 'Shutting down the NAS...', duration: 3000 });
      hass.callService('rest_command', 'truenas_shutdown');
    } else {
      hass.callService('browser_mod', 'toast', { message: 'Turning on the NAS...', duration: 3000 });
      hass.callService('rest_command', 'truenas_turnon');
    }
  ]]]`
]]]

if you ignore the nested brackets for a second, it’s basically just this

if (entity.state === 'on') {
  service_a;
  service_b;
} else {
  service_c;
  service_d;
}

Br3b · May 24, 2022, 12:20pm

Hey @Mattias_Persson,
somehow i cant get the update popup to work. Probably due to the new UI version-sensors and messed up names?
Even I renamed these sensors I am getting following error:

With the following sensors and values:

I would appreciate any help Thanks in advance!

Quinnod34 · May 24, 2022, 1:39pm

It seems like a plex pass subscription is required to download shows and movies, so the sensor can’t see them. I’m not sure if this is actually true.

Mattias_Persson · May 24, 2022, 3:29pm

Nope, local token Finding an authentication token / X-Plex-Token | Plex Support

Mattias_Persson · May 24, 2022, 3:39pm

You’ll also need to add marked.min.js to your configuration

github.com

matt8707/hass-config/blob/bae43df12f43b1fde8575c5d7bc288806f5c7d5f/configuration.yaml#L32-L32


      
          { url: '/local/marked.min.js?v=4.0.12',                                       type: module },

Also, I noticed that hacs updates are not listed in the popup anymore. I’ll look into why…

EDIT:

Enable experimental features https://hacs.xyz/docs/configuration/options#options

Quinnod34 · May 24, 2022, 4:48pm

I do have the x plex token obtained and typed into the sensor in the yaml file. Sensor works and says online, but there is no data… . Im pretty sure I did it correctly. This is more of a me problem now because it has nothing to do with your ui, but thanks for your help! I

Mattias_Persson · May 24, 2022, 4:55pm

Sure, this may help https://github.com/custom-cards/upcoming-media-card/blob/c0c83a12c51014303427c61f15d3aa12a44cdd8b/troubleshooting.md#plex=

Pablo_Gustavo_Fiscel · May 24, 2022, 5:04pm

In my case, in the first two options, I get an xml with info, but the last one returns a 404 error. Something must be wrong with this url. But the token I’m sure is fine.
And the first two putting the ip address

http://192.168.1.114:32400/library/metadata/147?X-Plex-Token=xxxxxx

I also don’t know if this address should return this little information to me. But the server responds

http://192.168.1.2:32400/library/recentlyAdded?X-Plex-Token=xxxx

<MediaContainer size="0" allowSync="0" identifier="com.plexapp.plugins.library" mediaTagPrefix="/system/bundle/media/flags/" mediaTagVersion="1652162132" mixedParents="1"> </MediaContainer>

After the metadata there is a number 147 in the documentation but if it is another it returns me information from the server. Example an image with my name that is in plex
http://192.168.1.114:32400/library/metadata/1?X-Plex-Token=xxx

Mattias_Persson · May 24, 2022, 6:56pm

You just posted two different ip’s 192.168.1.114 and 192.168.1.2

You’ll get 401 Unauthorized if your token is incorrect. So the fact that you see MediaContainer shows that your token works. I get MediaContainer size="50" with lots of data.

url="http://192.168.1.241:32400"; token="xxx";
curl "$url/library/recentlyAdded?X-Plex-Token=$token";
curl "$url/library/sections/1/all?X-Plex-Token=$token";

Have you actually added anything to plex?

Se7enair · May 24, 2022, 7:19pm

I get this error on the update popup in the footer.

ButtonCardJSTemplateError: ReferenceError: marked is not defined in 'if (entity) { let links = new RegExp('<a href="([^"]+)"', "g"), installed = entity.state...'

The problem seems to be in the template ipdater_hass but I dont understand what the problem ist.

Mattias_Persson · May 24, 2022, 7:35pm

Pablo_Gustavo_Fiscel · May 24, 2022, 7:46pm

Copy paste error. The ip is 114 and the error was 404 with only one of the urls

When I access the server from a computer, does it show me everything it has? To the question you ask me, if I added something, I would believe that at least that is what I think I did. Maybe it wasn’t the right method. How should I do to add something?

I think something is left as recently added

This brought me an xml with everything I added. By the way there was nothing before
curl http://192.168.1.114:32400/library/recentlyAdded?X-Plex-Token=xxxxx

Pablo_Gustavo_Fiscel · May 24, 2022, 10:34pm

I reply to the last message I just wrote. I feel very stupid because it is something that I have been leaving the do for a year. If you hadn’t asked me the question if I added something that no one had ever asked me before, I would never have solved it. I thank you for so much patience. Thank you very much

Plex now brings data but this error that I imagine has to do with extra_styles and hue lights that you have. But I don’t understand why it affects this card

mobiustorr · May 24, 2022, 11:45pm

Thanks @Mattias_Persson! I was also able to add in a confirmation window for clicking the shutdown button and everything is working!

maverik80 · May 25, 2022, 12:15am

  - type: custom:grid-layout
    path: 0
    layout:
      #default
      margin: 0
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(5, 1fr) 0
      grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .       .       .       ."
        "sidebar  soggiorno   notte   scene   cucina  ."
        "sidebar  media       bagno   casa    sensori ."
        "sidebar  footer      footer  footer  footer  ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(6, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .        ."
            ".  sidebar     sidebar  ."
            ".  soggiorno   notte    ."
            ".  scene       bagno    ."
            ".  sensori     cucina   ."
            ".  media       casa     ."
            ".  footer      footer   ."
            ".  .           .        ."
        #portrait
        "(max-width: 1200px)":
          grid-gap: var(--custom-layout-card-padding)
          grid-template-columns: 0 repeat(4, 1fr) 0
          grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
          grid-template-areas: |
            "sidebar  .           .       .       ."
            "sidebar  soggiorno   notte   cucina  ."
            "sidebar  scene       bagno   sensori ."
            "sidebar  media       casa    .       ."
            "sidebar  footer      footer  footer  ."

hello everyone, I’m having this very annoying problem in the display of the last two groups of button cards that are larger than the others, I tried a lot but without success, I hope someone can help me

Mattias_Persson · May 25, 2022, 3:44am

I only looked at default layout. Your rows should be 4 values, 4 rows grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr but the issue at hand looks like it has something to do with swipe-card. What happens if you remove the media section and have two entertainment sections side by side?

Mattias_Persson · May 25, 2022, 3:48am

Send a private message to me with your ui-lovelace.yaml and button_card_templates.yaml in a .zip file and also attach all attributes from sensor.plex_recently_added

Mattias_Persson · May 25, 2022, 5:04am

Found your error @Pablo_Gustavo_Fiscel

In button_card_templates.yaml you’ve commented out token

media_youtube:
  variables:
    #token: !secret youtube_token

variables can’t be empty so do this

media_youtube:
  # variables:
  #   token: !secret youtube_token

maverik80 · May 25, 2022, 8:05am

hello mattias then I tried to modify the grid rows and both to remove the media and put another 4 button cards in place of the media but the problem persists, it is a defect that makes me only on default and phone in portrait, while on tablet with fully kiosk you can see well, honestly I have run out of ideas