Share your Tablet/Desktop Dashboards

Hi all,

Have decided to make a separate dashboard from my default dashboard as it has been built for mobile, and doesn’t utilise the full real estate of a large widescreen monitor or tablet.

Looking for some inspiration, and couldn’t find a thread where people are showing off their designs, so am keen to see what everyone’s dash looks like!

My thinking is to have a header which shows weather, presence, and common scenes like vacuuming the house, leaving the house, going to bed etc. Then split the rest of the dash below in to:

  • Lights
  • Appliances
  • Climate
  • Security (including cameras)
  • Media

But again, keen to see what others are using!

2 Likes

Here is mine :slight_smile:

It’s not the latest setup but more or less it looks like it now.

5 Likes

Very nice. Can you share how you set the pop-up window for example a thermostat?
Thank you

Thought I would share where I am at with my dashboard.

Not 100% happy or finished but getting there!

5 Likes

Looking good so far.
You don’t have a guide I can follow to get them avatars that you use for your presence?

Sure thing, here you go. I am actually trialling two versions, one with the map alongside (based on someone else’s design!) and one without. Likely will go without the map as the zoom buttons take up too much room. Codes for both below, I use decluttering templates.

image

Button code:

              - type: custom:decluttering-card
                template: person_card_tablet
                variables:
                  - entity: person.ben
                  - name: Ben
                  - battery: device_tracker.life360_ben
                  - work_sensor: sensor.ben_to_work_waze
                  - home_sensor: sensor.ben_to_home_waze
                  - work_icon: mdi:car
                  - entity_picture: /local/Ben.png
                  - show_entity_picture: true
                  - tap_action: 
                      action: more-info
                      haptic: light
              - type: custom:decluttering-card
                template: person_card_tablet_map
                variables:
                  - entity: person.jess
                  - battery: device_tracker.life360_jess
                  - work_sensor: sensor.jess_to_work
                  - home_sensor: sensor.jess_to_home
                  - work_icon: mdi:train
                  - name: Jess
                  - entity_picture: /local/jess.png
                  - show_entity_picture: true
                  - tap_action: 
                      action: more-info
                      haptic: light

decluttering templates:

person_card_tablet:
  default:
    - size: 60%
    - color: auto
    - variable: spin
    - spin: false
    - show_name: false
    - show_state: true
    - show_label: false
    - show_icon: true
    - show_last_changed: false
    - show_entity_picture: false
    - tap_action:
        action: more-info
        haptic: light
    - aspect_ratio: 2/1
    - margin-right: 20px
    - label: ' '
    - off_icon_color: gray
    - off_name_color: gray
    - off_state_color: gray
  card:
    type: custom:button-card
    battery: '[[battery]]'
    home_sensor: '[[home_sensor]]'
    work_sensor: '[[work_sensor]]'
    work_icon: '[[work_icon]]'
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    size: '[[size]]'
    color: '[[color]]'
    aspect_ratio: '[[aspect_ratio]]'
    entity: '[[entity]]'
    label: '[[label]]'
    show_name: '[[show_name]]'
    show_icon: '[[show_icon]]'
    show_state: '[[show_state]]'
    show_label: '[[show_label]]'
    show_last_changed: '[[show_last_changed]]'
    tap_action: '[[tap_action]]'
    hold_action: '[[hold_action]]'
    entity_picture: '[[entity_picture]]'
    show_entity_picture: '[[show_entity_picture]]'
    styles:
      card:
        - border-radius: 12px
        - --card-background-color: '[[background_color]]'
      icon:
        - grid-column: 1
        - grid-row: 1 / 4
      label:
        - color: gray
        - font-size: 11px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 14px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 10px
        - color: var(--primary-text-color)
      grid:
        - grid-template-areas: '"i s" "i battery" "i home" "i work"'
        - grid-template-columns: 50% 50%
        - grid-template-rows: 25% 25% 25% 25%
      img_cell:
        - align-self: start
        - text-align: start
#        - margin-right: '[[margin-right]]'
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
#        - font-family: Helvetica 
        - font-size: 13px
      entity_picture:
        - height: 80px
        - width: 80px
        - border-radius: 100%
      custom_fields:
        battery:
          - align-self: start
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
        home:
          - align-self: start
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
        work:
          - align-self: start
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
    custom_fields:
          battery: >
              [[[
                if (states['[[battery]]'].attributes.battery_charging === false)
                  return `<ha-icon
                    icon="mdi:battery"
                    style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                    </ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
                else return `<ha-icon
                  icon="mdi:battery-charging"
                  style="; --mdc-icon-size: 16px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
              ]]]
          home: >
              [[[
                return `<ha-icon
                  icon="mdi:home-import-outline"
                  style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
              ]]]
          work: >
              [[[
                return `<ha-icon
                  icon="[[work_icon]]"
                  style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
              ]]]
    state:
      - value: "not_home"
        styles:
          card:
            - opacity: 0.6
          entity_picture:
            - border: 1px solid var(--secondary-text-color)
      - value: "home"
        styles:
          entity_picture:
            - border: 1px solid var(--primary-color)
      - value: "Ben Work"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "Jess Work"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "Poppy and Lola Home"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "GPa and GMa Home"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)

person_card_tablet_map:
  default:
    - size: 65%
    - color: auto
    - variable: spin
    - spin: false
    - show_name: false
    - show_state: true
    - show_label: false
    - show_icon: true
    - show_last_changed: false
    - show_entity_picture: false
    - tap_action:
        action: more-info
        haptic: light
    - aspect_ratio: 2/1
    - margin-right: 20px
    - label: '&nbsp;'
    - off_icon_color: gray
    - off_name_color: gray
    - off_state_color: gray
  card:
    type: custom:button-card
    battery: '[[battery]]'
    home_sensor: '[[home_sensor]]'
    work_sensor: '[[work_sensor]]'
    work_icon: '[[work_icon]]'
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    size: '[[size]]'
    color: '[[color]]'
    aspect_ratio: '[[aspect_ratio]]'
    entity: '[[entity]]'
    label: '[[label]]'
    show_name: '[[show_name]]'
    show_icon: '[[show_icon]]'
    show_state: '[[show_state]]'
    show_label: '[[show_label]]'
    show_last_changed: '[[show_last_changed]]'
    tap_action: '[[tap_action]]'
    hold_action: '[[hold_action]]'
    entity_picture: '[[entity_picture]]'
    show_entity_picture: '[[show_entity_picture]]'
    styles:
      card:
        - border-radius: 12px
        - --card-background-color: '[[background_color]]'
      icon:
        - grid-column: 1
        - grid-row: 1 / 4
      label:
        - color: gray
        - font-size: 11px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 14px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 0px
        - color: var(--primary-text-color)
      grid:
        - grid-template-areas: '"i s map" "battery battery map" "home home map" "work work map"'
        - grid-template-columns: 25% 25% 50%
        - grid-template-rows: 40% 20% 20% 20%
      img_cell:
        - align-self: start
        - text-align: start
#        - margin-right: '[[margin-right]]'
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
#        - font-family: Helvetica 
        - font-size: 13px
      entity_picture:
#        - height: 40px
#        - width: 40px
        - border-radius: 100%
      custom_fields:
        battery:
          - align-self: start
          - justify-self: start
          - padding-top: 5px
          - font-size: 14px
          - color: var(--secondary-text-color)
        home:
          - align-self: start
          - padding-top: 5px
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
        work:
          - align-self: start
          - justify-self: start
          - padding-top: 5px
          - font-size: 14px
          - color: var(--secondary-text-color)
        map:
          - align-self: middle
          - justify-self: middle
          - border-radius-top-right: 12px
          - border-radius-bottom-right: 12px
    custom_fields:
          battery: >
              [[[
                if (states['[[battery]]'].attributes.battery_charging === false)
                  return `<ha-icon
                    icon="mdi:battery"
                    style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                    </ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
                else return `<ha-icon
                  icon="mdi:battery-charging"
                  style="; --mdc-icon-size: 16px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
              ]]]
          home: >
              [[[
                return `<ha-icon
                  icon="mdi:home-import-outline"
                  style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
              ]]]
          work: >
              [[[
                return `<ha-icon
                  icon="[[work_icon]]"
                  style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
              ]]]
          map:
            card:
              type: map
              style: |
                ha-card {
                  box-shadow: none;
                  border-radius-top-right: 12px;
                  border-radius-bottom-right: 12px;
                }
              default_zoom: 12
              entities:
                - '[[entity]]'
    state:
      - value: "not_home"
        styles:
          card:
            - opacity: 0.6
          entity_picture:
            - border: 1px solid var(--secondary-text-color)
      - value: "home"
        styles:
          entity_picture:
            - border: 1px solid var(--primary-color)
      - value: "Ben Work"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "Jess Work"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "Poppy and Lola Home"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "GPa and GMa Home"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
5 Likes

The avatars are also just from the avatars on my iPhone. Saved the images and then uploaded to HA.

Thanks for that,
I’ve never heard of the decluttering before, just been reading it trying to get my head round it as I’m still learning and not really used templates yet but will do now I have time off.

Hi Ben thanks again for the code.
I’ve just been trying to add it but am struggling what i’ve done so far.
-added the decluttering-card.js and my avatar picture into the www folder
-added the resource /local/decluttering-card.js
-restarted
-created a new “Manual” card and copied the following code into it

type: 'custom:decluttering-card'
template: person_card_tablet
variables:
  - entity: person.steve_2
  - name: Steve
  - battery: sensor.mi_a2_lite_battery_level
  - work_icon: 'mdi:car'
  - entity_picture: /local/steve.png
  - show_entity_picture: true
  - tap_action:
      action: more-info
      haptic: light

Now i’m getting a error at the top saying “Cannot read property ‘person_card_tablet’ of undefined”
I’m guessing that’s because i’ve not created a template ? i wasn’t sure if it created it itself,
I can’t see any instructions saying i should create one and if so what do i put in it.
Thanks for any help
Steve

Hey Steve,
You also need to add templates that are referenced. Here is what to do:

  1. Add this to your main Lovelace UI yaml. You will need to change the folder location to a location that makes sense for you to store a new yaml called decluttering_templates.yaml.

decluttering_templates:
  !include lovelace/decluttering_templates/decluttering_templates.yaml
  1. Create ‘decluttering_templates.yaml’ in the location you referenced above, and add the following to it. Change the states at the bottom as needed based on the locations you have created in your presence app or HA Map.
person_card_tablet:
  default:
    - size: 60%
    - color: auto
    - variable: spin
    - spin: false
    - show_name: false
    - show_state: true
    - show_label: false
    - show_icon: true
    - show_last_changed: false
    - show_entity_picture: false
    - tap_action:
        action: more-info
        haptic: light
    - aspect_ratio: 2/1
    - margin-right: 20px
    - label: '&nbsp;'
    - off_icon_color: gray
    - off_name_color: gray
    - off_state_color: gray
  card:
    type: custom:button-card
    battery: '[[battery]]'
    home_sensor: '[[home_sensor]]'
    work_sensor: '[[work_sensor]]'
    work_icon: '[[work_icon]]'
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    size: '[[size]]'
    color: '[[color]]'
    aspect_ratio: '[[aspect_ratio]]'
    entity: '[[entity]]'
    label: '[[label]]'
    show_name: '[[show_name]]'
    show_icon: '[[show_icon]]'
    show_state: '[[show_state]]'
    show_label: '[[show_label]]'
    show_last_changed: '[[show_last_changed]]'
    tap_action: '[[tap_action]]'
    hold_action: '[[hold_action]]'
    entity_picture: '[[entity_picture]]'
    show_entity_picture: '[[show_entity_picture]]'
    styles:
      card:
        - border-radius: 12px
        - --card-background-color: '[[background_color]]'
      icon:
        - grid-column: 1
        - grid-row: 1 / 4
      label:
        - color: gray
        - font-size: 11px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 14px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 10px
        - color: var(--primary-text-color)
      grid:
        - grid-template-areas: '"i s" "i battery" "i home" "i work"'
        - grid-template-columns: 50% 50%
        - grid-template-rows: 25% 25% 25% 25%
      img_cell:
        - align-self: start
        - text-align: start
#        - margin-right: '[[margin-right]]'
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
#        - font-family: Helvetica 
        - font-size: 13px
      entity_picture:
        - height: 80px
        - width: 80px
        - border-radius: 100%
      custom_fields:
        battery:
          - align-self: start
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
        home:
          - align-self: start
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
        work:
          - align-self: start
          - justify-self: start
          - font-size: 14px
          - color: var(--secondary-text-color)
    custom_fields:
          battery: >
              [[[
                if (states['[[battery]]'].attributes.battery_charging === false)
                  return `<ha-icon
                    icon="mdi:battery"
                    style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                    </ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
                else return `<ha-icon
                  icon="mdi:battery-charging"
                  style="; --mdc-icon-size: 16px; padding-left: 5px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[battery]]'].attributes.battery}%</span>`
              ]]]
          home: >
              [[[
                return `<ha-icon
                  icon="mdi:home-import-outline"
                  style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[home_sensor]]'].state}mins</span>`
              ]]]
          work: >
              [[[
                return `<ha-icon
                  icon="[[work_icon]]"
                  style="; --mdc-icon-size: 16px; padding-left: 6px; padding-right: 5px; color: var(--primary-color);">
                  </ha-icon><span>${states['[[work_sensor]]'].state}mins</span>`
              ]]]
    state:
      - value: "not_home"
        styles:
          card:
            - opacity: 0.6
          entity_picture:
            - border: 1px solid var(--secondary-text-color)
      - value: "home"
        styles:
          entity_picture:
            - border: 1px solid var(--primary-color)
      - value: "Ben Work"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "Jess Work"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "Poppy and Lola Home"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)
      - value: "GPa and GMa Home"
        styles:
          entity_picture:
            - border: 1px solid var(--secondary-color)

Try this and let me know how you go :slight_smile:

Hi i messaged you before about struggling with this but got past that problem now but have a issue still.
So i don’t have the Lovelace UI yaml file as i read weeks ago that was the old way and i should be adding it into the raw configuration editor so i’ve been doing everything so far that way, so then added that code you said to it

decluttering_templates:
  !include lovelace/decluttering_templates/decluttering_templates.yaml

But it wasn’t having it then i read you don’t use the !include when using that so then i added it as
decluttering_templates: lovelace/decluttering_template_folder/decluttering_templates.yaml

i created this folder
\www\lovelace\decluttering_template_folder and put the decluttering_templates.yaml file into it and restarted.
But when i create a new manual card with the code below it gives me the error in the picture saying “The template “person_card_tablet” doesn’t exist in decluttering_templates” even though i’ve named my template folder “decluttering_template_folder”
You any ideas ?
Thanks

Untitled2

Can I ask what you used for the buttons for lights etc, feel like I’ve seen them somewhere but can’t work it out? Thanks

@benm7 would you mind sharing your configuration for the Rumpus Downlights button?

Cheers, Richard

Just starting to figure out this Lovelace and Home Assistant stuff. Tinkered with it a little in the past with my zwave switches but recently got some Sonoffs I flashed with tasmota and been having a lot of fun over the Christmas break. Here’s my first dashboard after working on getting this set up over the last couple days. Making progress. Lol.

I got a Sonoff S31 tracking my washer cycles and can see exactly what stage my washer is on up to the second with automations tracking the watts. (Idle, Fill, Aggitate, Waiting for Wash Spin, Wash Spin, Rinse Fill, Rinse Aggitate, Prep for Final Spin, Final Spin, Complete)

Took me a long time but I learned a lot.

I just realized I spelled Agitate wrong thanks to this message box. I also just created my account on here. I might need help from time to time and thought it would be fun to connect with people and their cool projects.

Looking forward to joining the community. This platform is the best.

2 Likes

Yeah I definitely stole it from somewhere :slight_smile:

Here is the code for one of the lights, have used Rumpus Downlights (@RichardU) which I have modified to style the brightness ring based on the colour of the lights at the time. You can see in the below screenshot the colour of the lights is now cyan.

                  - type: custom:decluttering-card
                    template: brightness_button_card_2_rgb
                    variables:
                      - entity: light.rumpus
                      - name: Downlights
                      - icon: vanity-light
brightness_button_card_2_rgb:
  default:
    - size: 50%
    - lock: false
    - color: auto
    - variable: spin
    - spin: false
    - show_name: true
    - show_state: true
    - show_label: true
    - show_icon: true
    - show_last_changed: false
    - tap_action:
        action: toggle
        haptic: light
    - hold_action:
        action: more-info
        haptic: success
    - aspect_ratio: 1/1
    - margin-right: 10px
    - label: '&nbsp;'
    - opacity: 0.6
    - off_icon_color: gray
    - off_name_color: gray
    - off_state_color: gray
  card:
    type: custom:button-card
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    size: '[[size]]'
    color: '[[color]]'
    lock: '[[lock]]'
    aspect_ratio: '[[aspect_ratio]]'
    entity: '[[entity]]'
    label: '[[label]]'
    show_name: '[[show_name]]'
    show_icon: '[[show_icon]]'
    show_state: '[[show_state]]'
    show_label: '[[show_label]]'
    show_last_changed: '[[show_last_changed]]'
    tap_action: '[[tap_action]]'
    hold_action: '[[hold_action]]'
    entity_picture: '[[entity_picture]]'
    styles:
      card:
        - border-radius: 12px
        - --card-background-color: '[[background_color]]'
      label:
        - color: gray
        - font-size: 11px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 11px
#        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 10px
        - color: gray
      grid:
        - grid-template-areas: '"i info" "n n" "s s" "l l"'
        - grid-template-columns: 1fr 50%
#        - grid-template-areas: '"i" "n n" "s s" "l l"'
#        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
#        - position: relative
#      grid:
#        - grid-template-areas: '"i" "n" "s" "l"'
#        - grid-template-columns: 1fr
#        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
#        - justify-content: start
#        - align-items: start
        - margin-right: '[[margin-right]]'
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
#        - font-family: Helvetica 
        - font-size: 13px
      custom_fields:
        info:
        - align-self: start
#        - overflow: visible
#        - position: absolute
#        - right: 40%
#        - top: 40%
#                  <text x="50%" y="54%" fill="var(--primary-text-color)" font-size="12" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="12">%</tspan>
    custom_fields:
      info: >
          [[[
            function capitalizeFirstLetter(string) {
              return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
            }
            
            const length = 34;
            const width = 3;
    
            if (entity.state === 'on' && entity.attributes.brightness) {
              const radius = length / 2;
              const brightness = Math.round(entity.attributes.brightness / 2.54);
              const circumference = radius * 2 * Math.PI;
              return `
                <svg viewBox="0 0 50 50">
                  <circle cx="25" cy="25" r="${radius}" fill="none" stroke="var(--secondary-text-color)" opacity="0.3" stroke-width="${width}" />
                  <circle style="
                      transform: rotate(-90deg);
                      transform-origin: 50% 50%;
                      stroke-dasharray: ${circumference};
                      stroke-dashoffset: ${circumference - brightness / 100 * circumference};
                    "
                    id="c_brightness" cx="25" cy="25" r="${radius}" stroke="var(--button-card-light-color)" stroke-width="${width}" fill="none" stroke-linecap="round" />
                  <text x="50%" y="54%" fill="var(--primary-text-color)" font-size="12" text-anchor="middle" alignment-baseline="middle">${brightness}%</text>
                </svg>
                `;
              }
            else if (entity.state === 'on' && entity.attributes.speed && entity.attributes.speed_list)  {
              const text = capitalizeFirstLetter(entity.attributes.speed);
              const gap = 5;
              const edge = (50 - length) / 2;
              const y = 50 - edge;
              var items = entity.attributes.speed_list;
              if (items.indexOf('off') !== -1){
                items.splice(items.indexOf('off'), 1);
              }
              const current = items.indexOf(entity.attributes.speed)
              var i;
              var x1 = edge;
              var ret = `<svg  viewBox="0 0 50 50">`;
              var l = (length - gap * (items.length - 1)) / items.length;
              for (i = 0; i < items.length; i++) {
                var x2 = x1 + l;
                var color = (i <= current) ? "var(--paper-item-icon-active-color)" : "var(--paper-item-icon-color)";
                var opacity = (i <= current) ? "1.0" : "0.5";
                ret += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${color}" stroke-width="${width}" opacity="${opacity}" stroke-linecap="round" />`;
                x1 = x2 + gap;
              }
              ret += `<text x="50%" y="54%" fill="var(--primary-text-color)" font-size="14" text-anchor="middle" alignment-baseline="middle">${text}</text></svg>`
              return ret;
            }
          ]]]
    state:
      - value: "on" 
        '[[variable]]': '[[spin]]'  
        styles:
          name:
            - color: var(--primary-text-color)
          state:
            - color: var(--secondary-text-color)
          icon:
            - color: var(--primary-color)
          card:
            - opacity: 1.0
      - value: "off"
        styles:
          card:
            - opacity: '[[opacity]]'
          icon:
            - color: '[[off_icon_color]]'
          name:
            - color: '[[off_name_color]]'
          state:
            - color: '[[off_state_color]]'
          lock:
            - color: black
      - value: "unavailable"
        styles:
          card:
            - opacity: 0.2
          icon:
            - color: gray
          state:
            - color: gray
          name:
            - color: gray

2 Likes

How did you go with this? Any luck? If not might be best just to build it without using a decluttering template and then work backwards from there!

I gave up in the end i couldn’t figure out where i was going wrong so i moved onto another version but that’s not working correctly now.
I’m still learning all this so i’m making weeks works of mistakes before i get something done lol
I did think about trying it without the decluttering but wasn’t sure how to.
Thanks
I thought

I hear you, it can be a real source of joy and frustration at the same time :slight_smile:

I’d day it’s definitely an issue referencing the decluttering templates file. I’m pretty sure it doesn’t;t work unless you put ! include in the path name. So try this:

decluttering_templates:
  !include lovelace/decluttering_template_folder/decluttering_templates.yaml

Also make sure it is the first thing in your Lovelace yaml file, above the title: line

Let me know if it still doesn’t work and I’ll try and build you one without decluttering to test out.

1 Like

Thanks Ben I’ll try it again from scratch tonight.
I think I’m trying too many different things at once and confusing myself which isn’t hard :grin:
I keep getting confused on things when they tell me to use the Lovelace-ui.yaml file as I have never needed one so then does that mean I use the raw editor.

Currently I’m developing two different design.

One is focused on a Scalable UI:


The other one is a Tablet UI only. Still developing:

IMG_0595
IMG_0596

7 Likes