🌻 Lovelace UI • Minimalist

KaherdinTristan · November 17, 2021, 7:38pm

Paddy, how about a vertical volume controler?
Kinda like… Turning the light slider 90 degrees…?

CM000n · November 17, 2021, 7:40pm

Has anyone of you already managed to integrate a conditional display of chips?
When I try to do this, the individual chips within conditional cards are always very far apart.
I have also found an older comment about this here:
Lovelace UI • Minimalist - Share your Projects! - Home Assistant Community (home-assistant.io)

Unfortunately, I don’t get it displayed that way and it’s probably not a very elegant solution in general.

flave · November 18, 2021, 10:10am

First of all, thanks for that wonderful “theme”. The UI is so much butter as the standard lovelace one!

As I’m starting to build up my frontend I wanted to use more chips and tried to create a “nightmode_state” chip but i keep getting errors and I really don’t know why?

thats the error:

That’s my file structure and code:

### CHIP NIGHTMODE ###
chip_nightmode_state:
  template: chip_nightmode_state
  triggers_update: 
    - "[[[ variables.ulm_chip_nightmode_entity ]]]"
  label: |
    [[[
      var icon = '';
      if (states[variables.ulm_chip_nightmode_entity].state == 'on'){
        var icon = '🌙';
      } else if(states[variables.ulm_chip_nightmode_entity].state == 'off'){
        var icon = '⚫';
      return icon;
    ]]]

and in the dashboard:

button_card_templates: !include_dir_merge_named minimalist-templates/
views:
  - title: Minimalist
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: chip_temperature
            variables:
              ulm_chip_humidity_outside: sensor.draussen_2
              ulm_chip_temperature_outside: sensor.draussen
              ulm_chip_temperature_weather: weather.weatherbit_grafelfing
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: chip_nightmode_state
            variables:
              ulm_chip_nightmode_entity: input_boolean.nightmode
          - type: custom:button-card
            template: edge

Any help would be greatly appreciated

thanks!
Flave

CM000n · November 18, 2021, 10:22am

you missed a “}” at the end of

else if(states[variables.ulm_chip_nightmode_entity].state == 'off'){
        var icon = '⚫';

Also you referenced the template chip_nightmode_state to itself

You should also use a “triggers_update: all” instead of passing a specific entity via javacripts.
See here: triggers_update doesn’t accept javascript templates · Issue #35 · UI-Lovelace-Minimalist/UI (github.com)

bms · November 18, 2021, 10:27am

@flave

You have created an infinite loop because your chip_nightmode_state depends on chip_nightmode_state

You should change the following and everything should work

chip_nightmode_state:
  template: chips   # <- here is your error
  triggers_update:
.......

Edit: the changes by @CM000n should also be fixed

bms · November 18, 2021, 10:40am

@flave

Btw, something to consider (but it is not wrong by you) is that you have created a custom card specifically for you night-mode. But you pass the night-mode entity as a variable to the card. Which is kind of redundant because I assume reuse in your HA configuration will not happen

The card could be reduced to:

### CHIP NIGHTMODE ###
chip_nightmode_state:
  template: chips
  label: |
    [[[
      var icon = '';
      if (states['input_boolean.nightmode'].state == 'on') {
        var icon = '🌙';
      } else if(states['input_boolean.nightmode'].state == 'off') {
        var icon = '⚫';
      }
      return icon;
    ]]]

And then in your dashboard:

         - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: chip_nightmode_state
          - type: custom:button-card
            template: edge

flave · November 18, 2021, 11:01am

@CM000n @bms wow that was super fast! That did the trick. Thanks!

I followed the wiki and there it says the template name should be changed (what i did). That should be fixed.

Using the variable is redundant that’s true, but that way the card can be used by other more easily.
Also building new chips is probably easier.

bms · November 18, 2021, 11:07am

Aah yes, I see where the confusion came from.

If you want to create a new card starting from the chip_temperature (for example)

paddy_chip_temperature: # <- this should be the name of your new card 
  template: chip_temperature # <- this should be name of the card you try to extend

Hope this makes things a little more clear.

flave · November 18, 2021, 11:15am

ah now i get it. Your explanation makes more sense and should be added to the wiki

Sildenafil · November 19, 2021, 8:46am

Hello to all,
Congratulations for the work, this theme is fantastic and I am slowly trying to implement it.
Has anyone thought of a custom card for the vacuum cleaner?

fastender · November 19, 2021, 12:53pm

This “AirCondition Card” could be helpful: Custom-cards list - UI-Lovelace-Minimalist

But you would have to customize it (look here: Changing template - UI-Lovelace-Minimalist

flave · November 19, 2021, 1:17pm

I’m afraid this has already been asked before but I could not find it in the thread.
How can i make the display of the chip conditional?

And two additional questions:

And is there any best practice for getting a nice desktop view (meaning one horizontal stack is really on row) other than using grid layout?
how to format the temperature chip in a way that if the temp is below zero the temp-string will be displayed “blue”?

fastender · November 19, 2021, 1:33pm

Look for some inspirations here: https://github.com/CM000n/homeassistant/blob/d2463560bd7519f84190f9cdb6532415a77d4a10/lovelace-minimalist.yaml

flave · November 19, 2021, 1:54pm

thanks - ok so will have to use the grid-layout.

asierralozano · November 22, 2021, 1:07pm

Hello!
I’m struggling with how to place the chips.
I’m currently have a number of chips (5 or 6), and I’m placing them with a horizontal-stack, but of course, it is only placing them in one row.

Do you know guys a way of placing the chips as in the example here?

Thanks!

fastender · November 22, 2021, 2:28pm

this could be interesting: GitHub - bramkragten/swipe-card: Card that allows you to swipe throught multiple cards for Home Assistant Lovelace

and here (another method): Lovelace: Swiper card

For layouting grids: https://grid.layoutit.com

Look for some inspirations here: homeassistant/lovelace-minimalist.yaml at d2463560bd7519f84190f9cdb6532415a77d4a10 · CM000n/homeassistant · GitHub

asierralozano · November 22, 2021, 4:25pm

Well, I was checking at the config that you sent me, and it seems that they are not using the layout that I was mentioning, and the Slider card is not working as expected.

I’ll have to go through a different path i guess.

Thanks!

KaherdinTristan · November 24, 2021, 5:54am

Start with a vertical stack
Then add one horizontal stack per row =]

flave · November 24, 2021, 10:29am

I’m trying to figure out how to use a conditional card in order to only show buttons when they are needed. But i always get an error. Would be happy if anyone can help.

error:

code:

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: conditional
            conditions:
              - entity: switch.eg_kuche_steckdose_spulnische_rechts_espressomaschine
                state: 'on'
                card:
                  type: 'custom:button-card'
                  template: card_power_outlet
                  variables:
                    ulm_card_power_outlet_consumption_sensor: sensor.tagesstromverbrauch_espressomaschine
                  entity: group.espresso
                  name: Espressomaschine
          - type: custom:button-card
            template: edge

Flave

basbrus · November 24, 2021, 12:22pm

‘card:’ Should be on the same vertical line as ‘conditions:’. Otherwise it thinks your are adding the card as a condition.

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: conditional
            conditions:
              - entity: switch.eg_kuche_steckdose_spulnische_rechts_espressomaschine
                state: 'on'
            card:
              type: 'custom:button-card'
              template: card_power_outlet
              variables:
                ulm_card_power_outlet_consumption_sensor: sensor.tagesstromverbrauch_espressomaschine
              entity: group.espresso
              name: Espressomaschine
          - type: custom:button-card
            template: edge