🌻 Lovelace UI • Minimalist

It works, but is not available yet, as HACS only reads the default branch (currently main). But we are close to merging the dev branch to main. Mainly working on the documentation.

In case you want to test it. You could fork the repo and set dev branch as your default. And add that one to HACS custom repos.

Guide: Installation - UI Lovelace Minimalist

2 Likes

Hello,
I’ve question, how can I translate or change person localization state?
I mean home and not_home
image
Its looks kinda bad unlike to other texts.

1 Like

Should be in next release: Make state of person card translatable by pierrecle · Pull Request #186 · UI-Lovelace-Minimalist/UI (github.com)

1 Like

Thank you! :slight_smile:
I am using a FritzBox 7490. The Home Assistant integration for it seems to provide all the values.
Speed values are working fine out of the box.
For the daily usage i’ve created utility meters, as FritzBox only provides overall amounts for these values. I have to wait until tomorrow to see if the utility meter works.

Thank You for suggestion but I’m ending with center-aligned 1 column like below:


Instead of that result I want to use full width like here (if it’s possible)

I think I seen mentioned that an update to change that is coming, not sure when though.

Also, its quite small, is there a way to make these bigger slightly?

For a quick workaround:

plus Abeksis’ link: 🌻 Lovelace UI • Minimalist - #1197 by Abeksis

Hello,
i’m trying to create a custom media player card with volume control, but i still have this kind of errors :


i created a folder “custom_media_player_with_controls” and a file “custom_media_player_with_controls.yaml”

here is the code :

custom_card_media_player_with_controls:
  variables:
    ulm_card_media_player_with_controls_name: "No name set"
  triggers_update:
    - "[[[ ulm_card_media_player_with_controls_entity ]]]"
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content  min-content
      - row-gap: 12px
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        template:
          - ulm_language_variables
          - card_media_player
        tap_action:
          action: more-info
        entity: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
        name: '[[[ return variables.ulm_card_media_player_with_controls_name ]]]'
        styles:
          card:
            - box-shadow: none
            - padding: 0px
    item2:
      card:
        type: 'custom:button-card'
        template: custom_list_items
        custom_fields:
          item1:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: media_player.toggle
                service_data:
                  entity_id: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
              icon: 'mdi:power'
          item2:
            card:
              type: 'custom:button-card'
              template: widget_icon
              entity: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
              tap_action:
                action: call-service
                service: media_player.media_play_pause
                service_data:
                  entity_id: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
              icon: 'mdi:pause'
              state:
                - value: paused
                  icon: 'mdi:play'
                - value: 'off'
                  icon: 'mdi:play'
          item3:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: media_player.media_next_track
                service_data:
                  entity_id: '[[[ return entity.ulm_card_media_player_with_controls_entity ]]]'
              icon: 'mdi:skip-next'
          item4:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: media_player.volume_down
                service_data:
                  entity_id: '[[[ return entity.ulm_card_media_player_with_controls_entity ]]]'
              icon: 'mdi:volume-minus'
          item5:
            card:
              type: 'custom:button-card'
              template: widget_icon
              tap_action:
                action: call-service
                service: media_player.volume_up
                service_data:
                  entity_id: '[[[ return entity.ulm_card_media_player_with_controls_entity ]]]'
              icon: 'mdi:volume-plus'                            

I also created a custom_list_item.yaml, with 2 news items.

1 Like

Where is your button-card code? Obviously variable ulm_card_media_player_with_controls_entity (= media_player.YOUR_MP) is missing.

This works perfectly, as a suggestion I would like to so that the creating a new dashboard and put it in the sidebar is optional.

Here is my organisation :

config/minimalist-templates
└── button_card_templates.yaml
└── custom_card_media_player_with_controls
   └── custom_card_media_player_with_controls.yaml
└── custom_list_item
   └── custom_list_item.yaml

No, please post your button-card for the mediaplayer in frontend.

here is the code of my view :

title: Media
path: media
icon: mdi:cast-audio
type: custom:horizontal-layout
layout:
#  width: 400
  max_cols: 3
cards: 

## COLONNE 1 
  - type: grid
    columns: 1
    square: false 
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: chip_back
            variables:
              ulm_chip_back_path: /ui-lovelace-minimalist/home
          - type: custom:button-card
            template: edge

      - type: grid
        columns: 2
        square: false 
        cards:

          - type: custom:button-card
            template: custom_card_container
            color: Grey
            name: Ch Parents
            custom_fields:
              buttons:
                card:
                  type: grid
                  columns: 1
                  square: false
                  cards:          
                    - type: custom:button-card
                      template: custom_card_media_player_with_controls
                      variables:
                        ulm_card_media_player_with_controls_name: "Ch Parents"
                        ulm_card_media_player_with_controls_entity: media_player.reveil_guims

The same code works fine with

template: car_media_player_with_controls

instead of

template: custom_card_media_player_with_controls

I got the same problem a couple of days ago. I think the problem is variable (var energy = ...). In code, (it hurts to say this but) try not assigning anything to any variable and do the calculation straight in the return.

chip_power_consumption_cm000n:
  template:
    - chips
  triggers_update:
    - "[[[ variables.ulm_chip_electric_energy ]]]"
    - "[[[ variables.ulm_chip_electric_power ]]]"
  label: |
    [[[
      if ((states[variables.ulm_chip_electric_power].state) > 0) {
        return '⚡ ' + parseFloat(states[variables.ulm_chip_electric_energy].state).toFixed(1) + ' kWh / ' + parseFloat(states[variables.ulm_chip_electric_power].state).toFixed(1) + ' W';
      } else {
        return '⚡ ' + parseFloat(states[variables.ulm_chip_electric_energy].state).toFixed(1) + ' kWh';
      }
    ]]]

I don’t know why but it should work. Hope this help!!!

Yeah I can agree on that. Could you open an issue for this? So we won’t forget.

Fixed it in this PR: Add option to enable/disable side panel entry by stokkie90 · Pull Request #279 · UI-Lovelace-Minimalist/UI · GitHub

1 Like

The frontend card definitely needs a hardcoded entity, because the template depends on the card_media_player template. Also there’s an error in triggers_update, return is missing. Plus an additional custom template named custom_list_items From where is that custom media template??

The cleaned code would be


type: custom:button-card
entity: media_player. reveil_guims
template: custom_card_media_player_with_controls
variables:
  ulm_card_media_player_with_controls_entity: media_player. reveil_guims
  ulm_card_media_player_with_controls_name: Ch Parents

triggers_update: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'


here is the code of custom_list_5_items.yaml :

custom_list_5_items:
  styles:
    grid:
      - grid-template-areas: '"item1 item2 item3 item4 item5"'
      - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
      - grid-template-rows: min-content
      - column-gap: 5px
    card:
      - box-shadow: none
      - padding: 0px

here is the modified code of my view :

title: Media
path: media
icon: mdi:cast-audio
type: custom:horizontal-layout
layout:
#  width: 400
  max_cols: 3
cards: 

## COLONNE 1 
  - type: grid
    columns: 1
    square: false 
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: chip_back
            variables:
              ulm_chip_back_path: /ui-lovelace-minimalist/home
          - type: custom:button-card
            template: edge

      - type: grid
        columns: 2
        square: false 
        cards:

          - type: custom:button-card
            template: custom_card_container
            color: Grey
            name: Ch Parents
            custom_fields:
              buttons:
                card:
                  type: grid
                  columns: 1
                  square: false
                  cards:          
                    - type: custom:button-card
                      entity: media_player.reveil_guims
                      template: custom_card_media_player_with_controls
                      variables:
                        ulm_card_media_player_with_controls_name: "Ch Parents"
                        ulm_card_media_player_with_controls_entity: media_player.reveil_guims
                      triggers_update: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'

here is the result :

With this code :


          - type: custom:button-card
            template: custom_card_container
            color: Grey
            name: Ch Parents
            custom_fields:
              buttons:
                card:
                  type: grid
                  columns: 1
                  square: false
                  cards:          
                    - type: custom:button-card
                      entity: media_player.reveil_guims
                      template: custom_card_media_player_with_controls
                      variables:
                        ulm_card_media_player_with_controls_name: "Ch Parents"
                        ulm_card_media_player_with_controls_entity: media_player.reveil_guims

and this custom_card :

custom_card_media_player_with_controls:
  variables:
    ulm_card_media_player_with_controls_name: "No name set"
    ulm_card_media_player_with_controls_entity:
  triggers_update:
    - "[[[ ulm_card_media_player_with_controls_entity ]]]"

i get this result :

Seems like you have defined your entity twice. You can try to only define it in de variables and see if it makes a difference.