šŸŒ» Lovelace UI ā€¢ Minimalist

Hi there,
Hope somebody can help me with a custom button card with the card_generic_swap template.
I have a card with the count of devices on my guest WiFi.
I would like to give the icon a green colour when there are one or more devices connected, and the default grey colour when no device is connected. Tried several options I found in the documentation of the custom button card, and on the home assistant community, but cannot get it to work. Itā€™s probably something small and simple. My current code (without the change of colour) is:

    - type: 'custom:button-card'
      template: card_generic_swap
      entity: sensor.guest_wifi
      variables:
        ulm_card_generic_swap_icon: mdi:wifi
        ulm_card_generic_swap_name: '# Apparaten'

I cant seem to get the Scenes Card to accept less then 5 entities, it just goes blank when I have four and works just find when I have fiveā€¦

button-card.js?hacstag=1461943254121:426 ButtonCardJSTemplateError: TypeError: Cannot read properties of null (reading 'substr') in 'let domain = variables.entity_5.entity_id.substr(0, variables.entity_5.entity_id.indexOf("."));
  ...'
    at Ti.eval (eval at _evalTemplate (button-card.js?hacstag=1461943254121:434:2161), <anonymous>:4:45)
    at Ti._evalTemplate (button-card.js?hacstag=1461943254121:434:2257)
    at Ti._getTemplateOrValue (button-card.js?hacstag=1461943254121:434:2877)
    at button-card.js?hacstag=1461943254121:434:2770
    at Array.forEach (<anonymous>)
    at Ti._getTemplateOrValue (button-card.js?hacstag=1461943254121:434:2747)
    at button-card.js?hacstag=1461943254121:434:2770
    at Array.forEach (<anonymous>)
    at Ti._getTemplateOrValue (button-card.js?hacstag=1461943254121:434:2747)
    at Ti._objectEvalTemplate (button-card.js?hacstag=1461943254121:434:2586)
render @ button-card.js?hacstag=1461943254121:426
update @ button-card.js?hacstag=1461943254121:1
performUpdate @ button-card.js?hacstag=1461943254121:1
scheduleUpdate @ button-card.js?hacstag=1461943254121:1
_$Ej @ button-card.js?hacstag=1461943254121:1
await in _$Ej (async)
requestUpdate @ button-card.js?hacstag=1461943254121:1
u @ button-card.js?hacstag=1461943254121:1
g @ button-card.js?hacstag=1461943254121:1
nt @ button-card.js?hacstag=1461943254121:1
Ti @ button-card.js?hacstag=1461943254121:426
C @ scoped-custom-element-registry.js:385
t @ scoped-custom-element-registry.js:236
r @ create-element-base.ts:93
(anonymous) @ create-element-base.ts:111
h @ create-element-base.ts:215
c @ create-element-base.ts:172
w @ create-card-element.ts:100
value @ hui-stack-card.ts:102
(anonymous) @ hui-stack-card.ts:47
value @ hui-stack-card.ts:46
r @ create-element-base.ts:97
(anonymous) @ create-element-base.ts:140
h @ create-element-base.ts:238
c @ create-element-base.ts:172
w @ create-card-element.ts:100
value @ hui-view.ts:65
(anonymous) @ hui-view.ts:289
value @ hui-view.ts:288
value @ hui-view.ts:217
value @ hui-view.ts:131
performUpdate @ reactive-element.ts:1329
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
u @ reactive-element.ts:948
_ @ reactive-element.ts:931
i @ hui-view.ts:44
C @ scoped-custom-element-registry.js:385
t @ scoped-custom-element-registry.js:236
value @ hui-root.ts:926
(anonymous) @ hui-root.ts:670
setTimeout (async)
(anonymous) @ render-status.ts:2
requestAnimationFrame (async)
o @ render-status.ts:2
value @ hui-root.ts:670
_$AE @ reactive-element.ts:1380
performUpdate @ reactive-element.ts:1345
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
j @ lit-html.ts:1883
_$AI @ lit-html.ts:1825
v @ lit-html.ts:1192
g @ lit-html.ts:1540
_$AI @ lit-html.ts:1384
G @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
value @ ha-panel-lovelace.ts:320
value @ ha-panel-lovelace.ts:294
await in value (async)
value @ ha-panel-lovelace.ts:216
handleEvent @ lit-html.ts:2018
o @ fire_event.ts:76
value @ hui-root.ts:705
handleEvent @ lit-html.ts:2018
fireRequestSelected @ mwc-list-item-base.ts:247
(anonymous) @ mwc-list-item-base.ts:92
(anonymous) @ observer.ts:49
t.updated @ observer.ts:42
_$AE @ reactive-element.ts:1380
performUpdate @ reactive-element.ts:1345
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
setSelectedStateForElementIndex @ mwc-list-base.ts:444
setSingleSelectionAtIndex_ @ mwc-list-foundation.ts:401
setSelectedIndexOnAction_ @ mwc-list-foundation.ts:565
handleSingleSelection @ mwc-list-foundation.ts:307
onRequestSelected @ mwc-list-base.ts:331
handleEvent @ lit-html.ts:2018
fireRequestSelected @ mwc-list-item-base.ts:247
onClick @ mwc-list-item-base.ts:225
cb @ mwc-list-item-base.ts:117
button-card.js?hacstag=1461943254121:426 Uncaught (in promise) TypeError: e.setConfig is not a function
    at Ti.render (button-card.js?hacstag=1461943254121:426:19646)
    at Ti.update (button-card.js?hacstag=1461943254121:1:14818)
    at Ti.performUpdate (button-card.js?hacstag=1461943254121:1:6145)
    at Ti.scheduleUpdate (button-card.js?hacstag=1461943254121:1:5792)

The docs seem to imply that less then 5 is supported, so am I doing something wrong?

Has anyone been able to switch between dark/light mode for specific items? The problem I encountered was when switching a card white once activated using dark theme. The card indeed switches to white but the iconā€™s background (img_cell) stays with the dark background. What it does is when I set the opacity under 1, the black background start to show up when Iā€™d like the white to show up.
image
This is an image of whats happening, both the icon and the img_cell are the same color but the img_cell has an opacity of 0.2.

I tried a bunch of things but wasnā€™t able to do anything about it. The weird part is I never had that problem in Mushroom. This leads me to think that the card part is defined with a hole in it when the img_cell and icon are. I tried searching where the card dimensions were but was not successful in doing so.

Thanks in advance for any help.

EDIT: Explained better the problem, canā€™t post more than 1 img as a new user.

### Card Input Boolean ###
card_input_boolean:
  template:
    - "icon_more_info_new"
    - "ulm_translation_engine"
  variables:
    ulm_card_input_boolean_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_input_boolean_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_input_boolean_color: "blue"
    ulm_card_input_boolean_force_background_color: true
  show_icon: false
  show_name: false
  show_label: false
  
  state:
    - operator: "template"
      value: "[[[ return variables.ulm_active_state ]]]"
      styles:
        card:
          - background-color: >
              [[[
                    if (variables.ulm_card_input_boolean_force_background_color) {
                      var color = variables.ulm_card_input_boolean_color;
                      return 'rgba(251,251,251,1)';
                    }

              ]]]

  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "[[[ return variables.ulm_card_input_boolean_icon ]]]"
              styles:
                icon:
                  - color: >
                      [[[
                          if (entity.state == "on") {
                            if (variables.ulm_card_input_boolean_color) {
                              var color = variables.ulm_card_input_boolean_color;
                              return 'rgba(var(--color-' + color + '),1)';
                            }
                            return 'rgba(var(--color-theme),1)';
                          }
                          return 'rgba(var(--color-theme),0.2)';
                      ]]]
                img_cell:
                  - background-color: >
                      [[[
                          if (entity.state == "on") {
                            if (variables.ulm_card_input_boolean_color) {
                              var color = variables.ulm_card_input_boolean_color;
                              return 'rgba(var(--color-' + color + '),0.2)';
                            }
                          }
                          return 'rgba(var(--color-theme),0.05)';
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return variables.ulm_card_input_boolean_name ]]]"
              state:
                - operator: "template"
                  value: "[[[ return variables.ulm_active_state ]]]"
                  styles:
                    name:
                      - color: >
                          [[[
                              if (variables.ulm_card_input_boolean_force_background_color) {
                                  return 'rgb(0,0,0)';
                              }
                          ]]]
                    label:
                      - color: >
                          [[[
                              if (variables.ulm_card_input_boolean_force_background_color) {
                                  return 'rgb(51,51,51)';
                              }
                          ]]]

EDIT: I managed to do it with the following code if anyone is interested:

card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "[[[ return variables.ulm_card_input_boolean_icon ]]]"
              styles:
                card:
                  - background: |
                          [[[
                              if(entity.state == "on"){
                                  return 'rgb(251,251,251)';
                              }
                          ]]]
                icon:
                  - color: >
                      [[[
                          if (entity.state == "on") {
                            if (variables.ulm_card_input_boolean_color) {
                              var color = variables.ulm_card_input_boolean_color;
                              return 'rgba(var(--color-' + color + '),1)';
                            }
                            return 'rgba(var(--color-theme),1)';
                          }
                          return 'rgba(var(--color-theme),0.2)';
                      ]]]
                img_cell:
                  - background-color: >
                      [[[
                          if (entity.state == "on") {
                            if (variables.ulm_card_input_boolean_color) {
                              var color = variables.ulm_card_input_boolean_color;
                              return 'rgba(var(--color-' + color + '),0.2)';
                            }
                          }
                          return 'rgba(var(--color-theme),0.05)';
                      ]]]

Is there any guide or assisting documentation how to set up a dashboard for tablets besides the mobile ones?

There are some ā€œgrid-templateā€ examples (e.g. here), but a general guide to understand how the principles work would be very beneficial.

Question in terms of general concept I currently have:

  • Can I use the same dashboard for tablet and mobile, just with adopted grid-template (assumingly this is the case) or do I need to set up two different dashboards?
  • How does the code realize, if I access the dashboard via tablet or phone? So which template to apply ?
  • Do I just add the grid-template part on top of every yaml-dashboard-file?
  • Understood I define a grid an then assign each card to previous defined ā€œcoordinatesā€. But how do I assign the desired ā€œcoordinateā€ (e.g. welcome, device 1, device 2ā€¦) to each card?

BTW: Keep sharing your tablet example layouts is also highly appreciated!
Thanks a lot!

2 Likes

Hello,
I am looking for a solution to change the icon of my sensors depending on the states (icon and color)?
(Window, French window and patio door). I think this must be happening in the card_binary_sensor but where? Should I make a specific card for each case?

Patio door closed : image

Patio door opened : image

Thanks a lot.

does anyone know if it is possible to use a global variable ?, by that i mean a variable that could be use in the main room card, and passed through to the entities template.

@andyblac Iā€™m using your modded room card and itā€™ok, thx for the great work.

I have a question: is it possible to make a popup card appear on entity with hold_action ?
thx

Hi, would you mind sharing your current config? seems the link is broken.

If you mean the 4 entities at the right it should do toggle on tap, and more-info on hold as default.
edit:
sorry I get you now, I have not use popup cards before, I would have to look into how they work, Iā€™ll add it to my list of things to look at.

@badgerhome heres the latest version, lost has changed, so look at the example.

I have changed the way sensor labels work, you now use them via sensor_label_1, sensor_label_2, sensor_label_3.

have added ulm_card_room_use_label_icons itā€™s false as default, bit if enable it looks like this (atm this only supports Temp, Humidity, Lux):

you no longer need ulm_card_room_label_use_brightness if you include a bulb as the main room entity, it will automatically pick it up, and use the brightness when the bulb is on.

and as you can see you can now put any sensor in the the sensor labels, and it will try to detect the type and report the correct label.

you can now use ulm_card_room_use_light_color: true when the light supports colour and it will use the current bulb color as the entity on colour.

as you might have seen my card uses slightly larger font for label than the original you can revert back to the original label font size by using ulm_card_room_use_small_label_font: true

in the 6 sensor iconā€™s you can use to choose the action type default is more-info

        tap_action:
          action: toggle

or

        tap_action:
          action: more-info

hereā€™s an example of my front garden

  - type: custom:button-card
    view_layout:
      grid-area: room1
    template:
      - custom_card_andyblac_room
      - green_no_state
    name: Front Garden
    icon: mdi:flower
    tap_action:
      action: navigate
      navigation_path: front-garden
    variables:
      sensor_label_1: sensor.front_garden_motion_sensor_temperature
      sensor_label_2: sensor.front_garden_soil_sensor_humidity
      sensor_label_3: sensor.front_garden_motion_sensor_illuminance_lux
      sensor_1:
        entity_id: binary_sensor.front_door
        ulm_card_room_sensor_color: green
      sensor_2:
        entity_id: binary_sensor.front_garden_motion_sensor_occupancy
        ulm_card_room_sensor_color: green
      sensor_3:
        entity_id: switch.front_garden_water_control
        ulm_card_room_sensor_color: green
        tap_action:
          action: toggle
      entity_3:
        entity_id: light.front_garden_light
        ulm_card_room_use_light_color: true

I am starting to work on animations with the main room icon and entities icons.

it starts to animate when my boiler fires for hot water (detected via OpenTherm Gateway)

I would love your feed back, I plan to start a git with this card and animation templates so it will be easier for people to keep uptodate.

OK created a git for my custom cards

I will add a wiki and a dev branch soon for beta releases,

1 Like

Very good thx for your work.

Yes, i have a group of 6 light that i want to use in a entity so with the single click I can turn them all on, but with hold I would like to be able to open a popup in which there are all 6 lights and I can change their parameters individually.

For the 4 entity and 6 sensor is it possible to define an icon?

Thx

try v1.7.1 add ability to set icon in entities and sensors. Ā· andyblac/UI-Minimalist-Custom-Cards@18c1158 Ā· GitHub

download

I have started a thread for my custom cards, anyone is welcome to help find issues, etc.

It works! Thx

Hello, you are finished and Share the code? Thanks.

Has anyone been able to extend a background further up when the bat% and time is?

If you go through the application, have you checked that you are in full screen?

I did enable full screen, it hasnā€™t changed anything but removed the time and bat indicators. Perhaps it is a setting I should change on the background image?

background-image: center / cover no-repeat url("https://9to5mac.com/wp-content/uploads/sites/6/2022/07/Home-app-iOS-16-wallpaper-2.png") fixed

EDIT: I did find this site, seems to be an ios issue. Not sure how Iā€™m supposed to implement it tho. Any ideas?

What youā€™re looking for is the layout card, just like in the example you mentioned. Specifically custom:grid-layout with the mediaquery option. Then you can define multiple layouts for different screen sizes like in the example, all in one dashboard.

In the layouts, you define grid-template-areas, e.g. ā€˜lightsā€™. Then to a card or vertical stack of cards, simply add the following:

type: vertical-stack
cards:
  - ...
view_layout:
  grid-area: lights

This will place the cards in the ā€˜lightsā€™ area, wherever it may be according to your grid-template-areas layout and mediaquery (screen size).

Sorry for maybe a duplicate issue, but have not found anything here in the channel.
Today I did an update to button card 4.1. Since that, all of my Popup have this white border (in light mode its blue). Anyone know where this comes from?