A different take on designing a Lovelace UI

Figured it out! Somehow the ’ turned into ` so I replaced those and got it working :slight_smile:

Copy this in your first line:

button_card_templates:
  !include_dir_merge_named button_card_templates

In your case its “button-card-templates” instead of “button_card_templates”

On firefox it is very blurry as well here. Is there any way to "configure"this in the tilt.yaml or int he tilt JS we included? the gif is not showing the heavyness of the issue tho.

ezgif.com-gif-maker

Uh, this worked, thank you!!! I feel pretty stupid right now, but i feel i have tested that out earlier so i don’t really understand what i have done wrong. But as long as it works now. :sweat_smile:

1 Like

has perhaps some make a animated volume icon?

klingel

for on / off state?

Welcome @AlfieJ04

They are amazing.

I don’t have all of them but I did copy the Plex one with some edits to get it working for my HA set-up.

Most of the work with the popups like this is getting the data, crating the popup after that is not that bad.

Code

action: fire-dom-event
browser_mod:
  command: popup
  title: Plex
  style:
    hui-vertical-stack-card:
      $: |
        hui-horizontal-stack-card {
          padding: 0em 2em 2.3em 2em;
        }
      $hui-horizontal-stack-card$: |
        #root {
          justify-content: space-evenly;
        }
  card:
    type: vertical-stack
    cards:
      - type: entities
        state_color: true
        card_mod:
          class: content
        entities:
          - entity: switch.docker_plex
            secondary_info: last-changed
            name: Power state
            icon: mdi:power
          - type: custom:bar-card
            width: 55%
            height: 2em
            decimal: 0
            unit_of_measurement: '%'
            positions:
              icon: outside
              indicator: 'off'
              name: outside
            severity:
              - color: '#6d2525'
                from: 90
                to: 999
            entity_row: true
            entities:
              - entity: sensor.template_plex_cpu
              - entity: sensor.template_plex_mem
          - entity: sensor.template_plex_state
            name: health
            icon: mdi:heart-pulse
          - type: divider
          - entity: sensor.plex_crawfordnas
            name: Activity
            icon: mdi:progress-upload
          - entity: sensor.crawfordnas_library_audiobooks
            name: Audiobooks
          - entity: sensor.crawfordnas_library_movies
            name: Movies
          - entity: sensor.crawfordnas_library_tv_shows
            name: TV Shows
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            name: Scan Libraries
            icon: mdi:refresh
            tap_action:
              action: call-service
              service: script.plex_refresh_all
            template: icon_name
          - type: custom:button-card
            name: Scan Clients
            icon: mdi:magnify
            tap_action:
              action: call-service
              service: button.press
              service_data:
                entity_id: button.scan_clients_crawfordnas
            template: icon_name

3 Likes

Hi @masoncrawford1994, thanks for sharing.

I did manage to get something similar put together in the end;

2 Likes

nice work, I like the Movies and Tv shows displaying the usage ill need to look into if I can get that data out of Plex.

Depending on how you have your Plex instance configured, you could use SSH command-line sensors similar to mine;

movies_folder_used: ssh -q -o StrictHostKeyChecking=no -i /config/.ssh/id_rsa <yourUser>@<yourServer> du -shc <yourFolder> | awk '{print $1}' | tail -n 1 2>/dev/null
movies_folder_items: ssh -q -o StrictHostKeyChecking=no -i /config/.ssh/id_rsa <yourUser>@<yourServer> ls -1U <yourFolder> | wc -l | awk '{print $1}' | tail -n 1 2>/dev/null

My popup entry looks like this:

          - entity: sensor.movies_folder_items
            type: custom:multiple-entity-row
            name: Movies
            state_header: current
            show_state: false
            icon: "mdi:folder-play"
            #secondary_info: last-changed
            entities:
              - entity: sensor.movies_folder_items
                name: Amount
              - entity: sensor.movies_folder_used
                name: Usage
3 Likes

I cant read the text on my popups on my tablet. On mobile or browser everything works.
What could this be?

Set theme to dark

1 Like

I can’t replicate this issue so it’s incredibly hard to test, search for transform perspective blurry or translatez blurry

You have to edit the sidebar, here’s time_date

Hello, everyone,

Does anyone of you know how I can increase the distances marked in red in the photo…

I would like to add another step with buttons!

2 Likes

Hey,
could you share the code of your Weather and Calendar template ?

I’m sorry, @Mattias_Persson, I’m totally ripping you off - but I’m giving you ALL the credit.

Put up most of my config on Github. If someone is interested, it can be found here.

I’m planning on uploading the rest - including automations and scripts.

image

@sirtraskold , @Abeksis , @ohhomix , @danieljarhult , @venealis

11 Likes

thats nice, can you say where you defined the sensor “rss_search_result” ? i cant find it in your files?

I created a Dropdown Helper. That gets you an input_select entity that you can use as the ‘rss_search_list’.
The ‘rss_search_result’ sensor is in ‘hass-config/include/template.yaml’

Hi André,

which Tablet you use?

Samsung Galaxy Tab A7