A different take on designing a Lovelace UI

Same here. Did you find a solution?

Hi,

first of all, a huge thank you for this dashboard, it’s amazing! I’m learning a lot with it and I’m trying to make a notification center that turns on the tablet screen.

To do it, I rely on an automatization script, but I’m stuck on a detail: how can we open a popup in this automation script whose content is already in a yaml file identical to footer files etc…?

Automation script:

alias: Notifications onscreen
description: Système de notification onscreen basé sur l'event
trigger:
  - platform: mqtt
    topic: home/notif/onscreen
condition: []
action:
  - service: switch.turn_on
    data: {}
    target:
      entity_id: switch.galaxy_tab_a_screen
  - service: browser_mod.navigate
    data: !include popup/footer_popup.yaml
mode: single

YAML popup:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Popup
    timeout: 500000
    size: fullscreen
    content:
      type: grid
      columns: 2
      square: false
      cards:

        - type: custom:home-feed-card
          show_empty: false
          show_notification_title: true
          more_info_on_tap: true
          state_color: true
          remove_repeats: false
          entities:
            - entity: sensor.notifications
              name: Notifications
              include_history: true
              max_history: 10

the screen turns on well when an event is produced, but no popup :confused:

Thanks

this is more of a browser mod question than a dashboard question, you might get more help if you ask on 🔹 Browser_mod - turn your browser into a controllable device, and a media_player

looks like this is what you are after

the service you want to call is browser_mod.popup not browser_mod.navigate, you will need to pass the browser id, I don’t think you can pass in the full popup yaml to the automation, just copy and past the content section into the automation

Hi all,

I installed the dashboard about 2 days ago and I am really happy with the looks.
But currently I am struggling with some borders around cards in popups:

As seen in the picture there are borders around Akku and Memory/Disk.
I already checked earlier posts, but the solutions provided are not helping.

Cards effected: Vertical-Stack & Custom:bar-card.
Can provide footer_tablet.yaml if needed.

Maybe someone can point me in the right direction?

BR Adrian

Hi Mattias,

I am not able to find:

  • browser_mod_icon.js,
  • card-mod-more-info in themes.yaml

were they named different?

BR Adrian

browser_mod_icon.js

it in the WWW folder, www/browser_mod_icon.js

card-mod-more-info

This should be located at the end of the themes file

1 Like

Oh, found it. Sorry for the inconveniences!

Had to create browser_mod_icon.js myself.
Was not aware that I am able to open this for a more specific instruction:
image

Hi all, quick question: the styling of my sidebar is not always applied (see pictures below). It looks like a random issue, sometimes it is loaded. Sometimes it is not. Looking in the CSS I notice that the car-mod is not loaded when the sidebar is not styled. So I suspect the card-mod?

I do load it in the recommended mode (configuration.yaml):

frontend:
  extra_module_url:
    /hacsfiles/lovelace-card-mod/card-mod.js

Example of correctly styled sidebar:

Example of incorrectly styled sidebar:

Anyone else facing this random loading of sidebar styling? Can anyone pinpoint me in the right direction, already tried a lot of thing without any success.

Thanks in advance!
Wouter

the sidebar should be custom:button-card for this exact reason. it’s faster and you can write both js and jinja templates

there’s a history of issues styling markdown card Markdown and themes - style doesn't stick · Issue #130 · thomasloven/lovelace-card-mod · GitHub

1 Like

is it possible to add extra theme, if i want to use a different theme and a dashboard on my mobile.

when i try to move theme.yaml in themes folder and rename it to tablet and change frontend in config.yaml

frontend: 
  themes: !include_dir_named themes
template: !include sidebar.yaml

it complains about the

extra_module_url:

  - /hacsfiles/lovelace-card-mod/card-mod.js

When i want to cast this dashboard to my nest hub mini i receive the message.
Set Theme to tablet in profile.

On my laptop everything is fine also try to set the theme default for all instances.
call service → Home Assistant Frontend: Set Theme
Set the dark theme from dropdown, to Dark
execute

But still the same message on the nest hub

you have to choose tablet theme in your profile settings theme

hello

perhaps some can help, its a little bit complicated but i try to explain, i have the standard light card with a extra card for my icon from my input_boolean.

When i now click the icon the light changes to ON and the boolean to ON.
the states are

Boolean = from OFF to ON
Light = from OFF to ON

or when i turn of the light

Boolean = from ON to OFF
Light = from ON to OFF

this here is the standard behaviour

gif

than everything works fine, BUT when my Motion sensor triggers the light the boolean doesnt change the states are now for example

Boolean = OFF
Light = from OFF to ON
or
from ON to OFF

than the icon with the motion sensor still stands in the circle with the brightness.

Unbenannt

my theory is that this happened because the state and card of the light changes from say ON to OFF but the second card with the icon remains unchanged since the boolean does not change its status

maybe someone of the pros here has an idea?
here is my card code

- type: custom:button-card
                    triggers_update:
                      - input_boolean.helper_wled_kueche_unterschraenke
                    show_state: false
                    tap_action:
                      !include popup/ledstripe_kitchen_top.yaml
                    entity: light.wled_kitchen_top_2
                    name: Oben
                    template:
                      - light
                      - icon_ledstripe  
                    variables:
                      helper_always_on: input_boolean.helper_wled_kueche_oberschraenke
                    custom_fields:
                      bm:
                        card:
                          type: custom:button-card
                          variables:
                            original_entity: light.wled_kitchen_top_2
                          hold_action: 
                            action: none
                          tap_action: 
                            action: call-service
                            service: light.toggle
                            service_data:
                              entity_id: light.wled_kitchen_top_2
                          triggers_update:
                            - input_boolean.helper_wled_kueche_oberschraenke
                          entity: input_boolean.helper_wled_kueche_oberschraenke
                          layout: vertical
                          name: []
                          state:
                            - value: 'on'
                              icon: mdi:motion-sensor-off
                              styles:
                                card:
                                  - margin: 45% -20% 0 0
                                  - border: 0px
                                icon: 
                                  - margin: 45% -20% 0 0
                                  - color: gray
                                  - width: 45%
                                  
                            - value: 'off'
                              icon: mdi:motion-sensor
                              styles:
                                card:
                                  - margin: 8% -20% 0 0
                                icon:
                                  #- display: none
                                   - margin: 8% -20% 0 0
                                   - width: 45%
                          
                      helper_circle: |
                        [[[
                          if (variables.state === 'off' ) {
                            let input = variables.helper_always_on,
                              radius = 9,
                              circumference = radius * 2 * Math.PI;
                            return `
                              <svg viewBox="0 0 50 50">
                                <style>
                                  circle {
                                    transform: rotate(-90deg);
                                    transform-origin: 50% 50%;
                                    stroke-dasharray: ${circumference};
                                    stroke-dashoffset: ${circumference * 2};
                                  }
                                  tspan {
                                    font-size: 10px;
                                  }
                                </style>
                                <circle cx="25" cy="25" r="${radius}" fill="rgba(255,255,255,0.04)" stroke="#313638" stroke-width="0.6"  />
                                <text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle"><tspan font-size="10"></tspan></text>
                              </svg>
                            `;
                          }
                          
                        
                         
                        ]]]
#  Werte fuer circle zeile 677    <text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${states[variables.helper_always_on].state}<tspan font-size="10"></tspan></text>
                               
                    styles:
                     custom_fields:
                        helper_circle:
                          - position: absolute
                          - width: 100%
                          - height: 100%
                          - margin: -31% -30% 0 0
                          - display: initial
                          - opacity: 1
                          - justify-self: end     
                              
                        bm:
                          - position: absolute
                          - width: 50%
                          - height: 50%
                          - display: initial
                          - opacity: 1
                          - justify-self: end 

@Mattias_Persson perhaps?

1 Like

that is complicated,

Can you explain why you need the input boolean at all?
Why not use the on off state of the light to control the position of the motion-sensor icon?

The other option is to use an automation to keep the boolean and light state the same, or have the automation that is triggered by the Motion sensor also toggle the input boolean. however, if the input boolean is only for the icon position I would remove it

hello @masoncrawford1994,

yes of course, i need the input_boolean for the option to set my motion sensor automation off or dont turn my light off.
For example, the code i posted is for my kitchen Wled Stripe under my kitchen, the stripe is motion controlled by a motion sensor, when i now want to have the light ON and not got switched off by the motion sensor i need this helper (input_boolean).

but sometimes when guests are here or i want to cook for a longer time i want the light always on. And thats what the helper does.

thats why i cant toogle the boolean with the Motion sensor Automation.

hmm there must be a way to solve the whole thing, right? At least I hope so
somehow link the status of the button card with the icon with the entity of the light or something

when i use the light entity as a variable in the icon button card? and than add a condition that when
light entity changed to ON && Boolean == OFF ?

i tried something like this

- value: 'off'
                              icon: mdi:motion-sensor
                              styles:
                                card: 
                                  
                                  - margin: >
                                        [[[
                                          if (variables.state === 'off') 
                                            {
                                              return `8% -20% 0 0`;   
                                            }
                                          if (variables.state === 'off' && variables.original_entity === 'on') 
                                            {
                                              return `45% -20% 0 0`;   
                                            } 
                                        ]]]
                                  
                                icon:
                                  #- display: none
                                   - margin: >
                                        [[[
                                          if (variables.state === 'off') 
                                            {
                                              return `8% -20% 0 0`;   
                                            } 
                                          if (variables.state === 'off' && variables.original_entity === 'on') 
                                            {
                                              return `45% -20% 0 0`;   
                                            } 
                                        ]]]
                                   - width: 45%
                                   - color: gray
                                  
                     

here the variable for the if condition : variables: original_entity: light.wled_kitchen_top_2
but this wont work, when the light turns on and the boolean is still OFF he makes nothing. because the boolean changes not the state

perhaps over a animation? he must only slide the icon to the bottom, but when there is no boolean trigger it wont work or?

This is essentially what I’ve done, but I renamed this theme to button-dashboard.yaml

in configuration.yaml

lovelace:
  mode: yaml
  resources: !include resources.yaml
  dashboards:
    button-dashboard:
      mode: yaml
      filename: button-dashboard.yaml
      title: Button Dashboard
      icon: mdi:tools
      show_in_sidebar: false

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

template: !include sidebar.yaml

in themes.yaml comment out or delete these lines

#extra_module_url:
#  - /hacsfiles/lovelace-card-mod/card-mod.js

#themes:

perhaps you @Mattias_Persson have a idea?

im trying to recreate what you have in my test environment so I can have a go at helping you out,

one thing im confused by is line 3 of the code you provided, you have input_boolean.helper_wled_kueche_unterschraenke set to triggers_update for what looks to be the button for oberschraenke not unterschraenke

is that just an error? if not, why is this the case?

I think I got it, this is the main changes.

        icon: > 
          [[[
            return states[variables.helper_always_on].state === "off" ? "mdi:motion-sensor-off" : "mdi:motion-sensor"
          ]]]
        styles:
          card:
            - margin: > 
                [[[
                  return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
                ]]]
            - border: 0px
          icon: 
            - margin: > 
                [[[
                  return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
                ]]]
            - color: gray
            - width: 45% 

this is the fix applied to the code you provided.

- type: custom:button-card
  triggers_update:
    - input_boolean.helper_wled_kueche_unterschraenke
  show_state: false
  tap_action:
    !include popup/ledstripe_kitchen_top.yaml
  entity: light.wled_kitchen_top_2
  name: Oben
  template:
    - light
    - icon_ledstripe  
  variables:
    helper_always_on: input_boolean.helper_wled_kueche_oberschraenke
  custom_fields:
    bm:
      card:
        type: custom:button-card
        variables:
          original_entity: light.wled_kitchen_top_2
        hold_action: 
          action: none
        tap_action: 
          action: call-service
          service: light.toggle
          service_data:
            entity_id: light.wled_kitchen_top_2
        triggers_update:
          - input_boolean.helper_wled_kueche_oberschraenke
        entity: input_boolean.helper_wled_kueche_oberschraenke
        layout: vertical
        name: []
        icon: > 
          [[[
            return states[variables.helper_always_on].state === "off" ? "mdi:motion-sensor-off" : "mdi:motion-sensor"
          ]]]
        styles:
          card:
            - margin: > 
                [[[
                  return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
                ]]]
            - border: 0px
          icon: 
            - margin: > 
                [[[
                  return variables.state === 'on' ? '45% -20% 0 0' : ' 8% -20% 0 0'
                ]]]
            - color: gray
            - width: 45%  
    helper_circle: |
      [[[
        if (variables.state === 'off' ) {
          let input = variables.helper_always_on,
            radius = 9,
            circumference = radius * 2 * Math.PI;
          return `
            <svg viewBox="0 0 50 50">
              <style>
                circle {
                  transform: rotate(-90deg);
                  transform-origin: 50% 50%;
                  stroke-dasharray: ${circumference};
                  stroke-dashoffset: ${circumference * 2};
                }
                tspan {
                  font-size: 10px;
                }
              </style>
              <circle cx="25" cy="25" r="${radius}" fill="rgba(255,255,255,0.04)" stroke="#313638" stroke-width="0.6"  />
              <text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle"><tspan font-size="10"></tspan></text>
            </svg>
          `;
        }
      ]]]
#  Werte fuer circle zeile 677    <text x="50%" y="52%" fill="#8d8e90" font-size="12" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${states[variables.helper_always_on].state}<tspan font-size="10"></tspan></text>
              
  styles:
    custom_fields:
      helper_circle:
        - position: absolute
        - width: 100%
        - height: 100%
        - margin: -31% -30% 0 0
        - display: initial
        - opacity: 1
        - justify-self: end     
      bm:
        - position: absolute
        - width: 50%
        - height: 50%
        - display: initial
        - opacity: 1
        - justify-self: end
1 Like

I saw you made this. Mind sharing?