🌻 Lovelace UI • Minimalist

If you want to add is as a custom cards you can add it in this folder: UI/custom_cards at dev · UI-Lovelace-Minimalist/UI · GitHub

In case you want it to be added to the (Hacs) integration: UI/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates at dev · UI-Lovelace-Minimalist/UI · GitHub
And the documentation can be added here: UI/docs/usage/cards at dev · UI-Lovelace-Minimalist/UI · GitHub

A bit more info about the docs page can be found here: Docs Style Guide - UI Lovelace Minimalist

Also if you have more questions and need some quicker answers, you can always join the discord server.

1 Like

I saw examples of cards for a vacuum cleaner (🌻 Lovelace UI • Minimalist - #69 by clemalex), but I couldn’t find the code. I’ve been reading the topic from the very beginning and apparently some examples are no longer relevant, like AirCondition Card.
Thanks to everyone who developed and put efforts into this project, its super good

is hacs intergration ready ?

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 ]]]'