🌻 Lovelace UI • Minimalist

I see colors. But… I hear colors also. So I guess I’m special.
image

1 Like

That is the Wiki Page @Noorbertt :wink:

I am pretty close to complete a square button design, based on your posts.

I think I’ve finished a squared button for covers.


I will try now to achieve the same for lights

Squared Light Button with Slider
Screenshot 2021-12-20 at 1.32.11 AM

These all look really nice!

I’m a Neophyte to Minimalist. My last work was with Lovelace and Grid Panels imbedded in Grid Panels… I am giving this a try and it there are a few things I cannot figure out how to accomplish or if they exist in Minimalist. Also my goal is use an Amazon Fire HD 10 Plus tablet, 10.1", in landscape as a control panel. Here is what I have this far.

Notice that the clock, weather and alarm are NOT using a Minimalist style.

Also note that I could not find a Minimalist button that looks like and works like the Lovelace button where when tapped the Alarm Panel pops open and I can Arm, Disarm, etc. and then close and the button shows the current state of the alarm. The Icon located above the current State of the alarm and both change with the state of the alarm.

Here is what I have thus far as I am just beginning and moving slowly…

Appreciate any guidance…

button_card_templates: !include_dir_merge_named minimalist-templates/
views:
  - title: Minimalist
    cards:
      - type: custom:digital-clock
      
      - type: weather-forecast
        entity: weather.our_home
          
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            template: card_input_boolean
            entity: input_boolean.home
          - type: 'custom:button-card'
            template: card_input_boolean
            entity: input_boolean.away
          - type: 'custom:button-card'
            template: card_input_boolean
            entity: input_boolean.asleep
          - type: 'custom:button-card'
            template: card_input_boolean
            entity: input_boolean.vacation

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge

          - type: button
            tap_action:
              action: more-info
            entity: alarm_control_panel.alarm
            icon_height: 30px
            icon_width: 30px
            show_name: false
            show_state: true
            show_icon: true
            
          - type: 'custom:button-card'
            name: FRONT YARD
            styles:
              name:
                - font-size: 12px
                - font-weight: bold
              label:
                - font-size: 18px
                - font-weight: bold
            template: card_light
            entity: group.frontyard_lights

          - type: 'custom:button-card'
            name: BACKYARD
            styles:
              name:
                - font-size: 12px
                - font-weight: bold
              label:
                - font-size: 18px
                - font-weight: bold
            template: card_light
            entity: group.backyard_lights
             
          - type: custom:button-card
            template: edge

I have trouble to get custom zones to work with the card_person template (1.0.0 - beta.8). I see that it have been reported as an issue but it is closed now. Still an issue for me so i guess i have some setup error.

Error:

TypeError: Cannot read properties of undefined (reading 'attributes') in 'if (states[variables.ulm_card_person_entity].state != 'home'){
    if (states[variables.ulm_card_p...'

This is my card in lovelace

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.jonny
              ulm_card_person_use_entity_picture: true
              ulm_card_person_zone1: home
              ulm_card_person_zone2: ovako_hofors

Hi @jompa68, with the last release, the specification of the zones must correspond to the respective zones in Home Assistant. Unfortunately the documentation is outdated (see the last two release notes for the reasons).

So instead of this…

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.jonny
              ulm_card_person_use_entity_picture: true
              ulm_card_person_zone1: home
              ulm_card_person_zone2: ovako_hofors

it should look like this:

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.jonny
              ulm_card_person_use_entity_picture: true
              ulm_card_person_zone1: zone.home
              ulm_card_person_zone2: zone.ovako_hofors
1 Like

Perfect, thanks for your help @CM000n

Autocorrect? :face_with_monocle:

Your cards do not have the theme because this theme is only applied to button cards. And by using one of your predefined templates like card_input_boolean.

If you want to style other cards you can do it yourself by using card_mod. Or you can open an issue in our github repository and someone might take up the challenge to create a card for you :wink:

1 Like

Another error with welcome card.
Error:

hui-error-card TypeError: n.setConfig is not a function
- type: 'custom:button-card'
  template: custom_card_paddy_welcome
  variables:
    ulm_custom_card_paddy_welcome_time: sensor.time

Seems to reported in button-card as an issue.

Any work around for this?

Wow! Looking good!
Do you think it would be possible to place the slider to the far right, and place it vertical? That way it might be possible to make it even more compact :slightly_smiling_face::laughing::v:t2:

Make sure to post the code, so the maintainers can make it a permanent part of the code base!

:+1:t2::+1:t2::coffee:

oh thanks! I’ll have a play around with it and see how I go, I might try building from yours to customise the points per hour too :slight_smile:

4 Likes

This looks awesome !

1 Like

Thnx for sharing the Figma link! This really helps with setting up the layout.

Yes, that’s why I made it in the first place

Love the splashscreens. :heart_eyes:

Done! Just need some few small adjustments and it will be ready for PR. :wink:

Room Card

17 Likes