A different take on designing a Lovelace UI

my apologies I must have written that myself

this is the template I use for climate

#################################################
#                                               #
#                    CLIMATE                    #
#                                               #
#################################################

climate:
  template:
    - base
    - circle
  variables:
    state: >
      [[[
        if (entity) {
          return entity.attributes.hvac_action 
        }
      ]]]
    state_on: >
      [[[ 
        return ['cooling','heating'].indexOf(!entity || entity.attributes.hvac_action) !== -1; 
      ]]]
    circle_input: >
      [[[
        if (entity) {
            return entity.state === 'off'
                ? Math.round(entity.attributes.current_temperature).toString()
                : entity.attributes.hvac_action === "cooling"
                  ? Math.round(entity.attributes.target_temp_low).toString()
                  : Math.round(entity.attributes.target_temp_high).toString();
        }
      ]]]
    circle_input_unit: '°C'
  state_display: |
    [[[
        return variables.state.charAt(0).toUpperCase() + variables.state.substr(1).toLowerCase();
    ]]]
1 Like

wow super clean weather section, are the backgrounds animated or are they images?

what are the bars on the bottom of the side bar?

Simple as that!

cheers mate, worked a charm :beer:

The weather icons are all animated. Backgrounds are pictures. Those bars are the rain forecast of the next 2 hours.

EDIT:

every bar represents the rain probability in % for every 12 minutes range.

wow smart, that would be handy for me, as I have a motorbike so knowing rain is on the way would come in handy, what weather integration do you use? would you mind posing the logic for the bars for a reference?

I’m not using any integration, I’m using straight the Accuweather API. They only allow 24 calls per day in its free plan for Minutecast, so I created three tokens so I can make a request every 20 mins.

https://developer.accuweather.com/

I’m using NR to make the call but it can be done creating a rest sensor or command or whatever in HA itself. It’s a GET request and the url should look something like this:

http://dataservice.accuweather.com/forecasts/v1/minute?q=43.016666%2C%20-7.550000&apikey=YOUR_API_KEY_HERE&language=es-es

Regarding those bars, I link you to a different post where I thoroughly exlained how it works. The config is shared in posts 16 and 17 but there’s the full explanation:

1 Like

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