🌻 Lovelace UI • Minimalist

Here is the code of the template:

card_battery_with_charging_notification:
  template:
    - icon_info_bg_battery
  triggers_update: all
  hold_action:
    action: more-info
  styles:
    icon:
      - color: 'rgba(var(--color-theme),0.9)'
    label:
      - align-self: end
      - justify-self: start
      - font-weight: bold
      - font-size: 14px
      - margin-left: 12px
      - filter: opacity(100%)
    name:
      - justify-self: start
      - align-self: start
      - font-weight: bolder
      - font-size: 12px
      - filter: opacity(40%)
      - margin-left: 12px
    grid:
      - grid-template-areas: '"i l" "i n"'
      - grid-template-columns: min-content auto
      - grid-template-rows: min-content min-content
  icon: |
    [[[
      var icon = "mdi:help-circle-outline";
      var battery = variables.ulm_card_battery_attribute !== null
        ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
        : states[entity.entity_id].state;

      if (battery == 100) {
        icon = "mdi:battery";
      } else if (battery >= 90) {
        icon = "mdi:battery-90";
      } else if (battery >= 80) {
        icon = "mdi:battery-80";
      } else if (battery >= 70) {
        icon = "mdi:battery-70";
      } else if (battery >= 60) {
        icon = "mdi:battery-60";
      } else if (battery >= 50) {
        icon = "mdi:battery-50";
      } else if (battery >= 40) {
        icon = "mdi:battery-40";
      } else if (battery >= 30) {
        icon = "mdi:battery-30";
      } else if (battery >= 20) {
        icon = "mdi:battery-20";
      } else if (battery >= 10) {
      icon = "mdi:battery-10";
      } else {
        icon = "mdi:battery-outline";
      }

      return icon;
    ]]]
  label: |
    [[[
      var battery = variables.ulm_card_battery_attribute !== null
        ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
        : states[entity.entity_id].state;
      return battery + "%";
    ]]]  

card_battery_with_alert:
  template:
    - icon_info_bg
  tap_action:
    action: more-info
  variables:
    ulm_card_battery_attribute:
  state:
    - value: '[[[return variables.ulm_card_battery_threshold]]]'
      operator: '<='
      styles:
        custom_fields:
          notification:
            - border-radius: 50%
            - position: absolute
            - left: 38px
            - top: 8px
            - height: 16px
            - width: 16px
            - border: 2px solid var(--card-background-color)
            - font-size: 12px
            - line-height: 14px
            - background-color: >
                [[[
                  return "rgba(var(--color-red),1)";
                ]]]    
  icon: |
    [[[
      var icon = "mdi:help-circle-outline";
      var battery = variables.ulm_card_battery_attribute !== null
        ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
        : states[entity.entity_id].state;

      if (battery == 100) {
        icon = "mdi:battery";
      } else if (battery >= 90) {
        icon = "mdi:battery-90";
      } else if (battery >= 80) {
        icon = "mdi:battery-80";
      } else if (battery >= 70) {
        icon = "mdi:battery-70";
      } else if (battery >= 60) {
        icon = "mdi:battery-60";
      } else if (battery >= 50) {
        icon = "mdi:battery-50";
      } else if (battery >= 40) {
        icon = "mdi:battery-40";
      } else if (battery >= 30) {
        icon = "mdi:battery-30";
      } else if (battery >= 20) {
        icon = "mdi:battery-20";
      } else if (battery >= 10) {
        icon = "mdi:battery-10";
      } else {
        icon = "mdi:battery-outline";
      }

      return icon;
    ]]]
  label: |
    [[[
      var battery = variables.ulm_card_battery_attribute !== null
        ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
        : states[entity.entity_id].state;
      return battery + "%";
    ]]]
  name: |
    [[[
      return states[entity.entity_id].attributes.friendly_name;
    ]]]
  styles:
    icon:
      - color: 'rgba(var(--color-theme),0.9)'
    label:
      - align-self: end
      - justify-self: start
      - font-weight: bold
      - font-size: 14px
      - margin-left: 12px
      - filter: opacity(100%)
    name:
      - justify-self: start
      - align-self: start
      - text-align: start
      - font-weight: bolder
      - font-size: 12px
      - filter: opacity(40%)
      - margin-left: 12px
    grid:
      - grid-template-areas: '"i l" "i n"'
      - grid-template-columns: min-content auto
      - grid-template-rows: min-content min-content
  custom_fields:
    notification: >
      [[[
        if (entity.state <= variables.ulm_card_battery_threshold){
          return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
        }
      ]]]      

And that’s how to use the template:

type: 'custom:button-card'
template: card_battery_with_alert
variables:
  ulm_card_battery_threshold: 40
1 Like

After updating Home assistant to latest version I get this every now and then on my android phone, my wifes iPhone and on the web gui. Sometimes it works but usually after a few refreshes.

Why? :frowning:

Did you tried to delete your cache on your devices? Nothing changed on the code for the light cards with sliders on last release.

1 Like

That did the tricks! Now it is working again! Thanks!

Hi there im fairly new to to home assistant.

Im currently in the process of designing my first dashboard to use on a pair of fire tab 8’s.

I would like to arrange these in grids of 4 but when i try to add a 3rd card it goes across the row.

What command do i use to make it drop below the 1st 2 cards??

Thanks.

image

Hi
You need to use either Grid card or a combination of vertical stack followed by horizontal stack

1 Like

Hi,
Triggers_update not work if it’s set on buttons card template. Only work at the top level of config card on the main UI dashboard.

Why ? Maybe set this on template card not work at all. If it’s the problem, we need to change this conf on the Github repo.

Thank you for your answer.

Can you please open a bug report on the repo with some example code. Thx

i figured it thanks for your pointers.

Also does anyone know if you can color the battery level/state cards??

Im trying to see if below a certain percent you can make the icon green and above a % make it green??

thanks.

He (or she) who waits, shall be rewarded.
(it is merged, and will most likely be present in the next release)

Sorry to be a pain but i have another question.

I have created the following code/page.

It will be living on a hozitonzal firetab. currently it looks very squished in the middle of the screen and the text from the buttons is cut off.

How can i increase column width to increase the width of the buttons?? or do i just need to drop them into another column??

Thanks again.

What do you guys think of my card design just need to make it (inspired by 7ahang’s work)

17 Likes

Sweeet mama!!

m8, please post the code inside

This kind of block - Preformatted text  

image

Try this;
Try fiddeling with WIDHT

button_card_templates: !include_dir_merge_named minimalist-templates/
swipe_nav:
    wrap: false
    animate: swipe
    skip_tabs:
    prevent_default: true
    swipe_amount: 30
              

views:
  - title: Telefon Start
    path: tel_start
    layout:
      width: 300
      max_cols: 1
    type: custom:masonry-layout
    badges: []
    icon: mdi:sigma
    cards:
      - type: vertical-stack
        cards:

Great idea!

Until now I’ve modified the navigation card to show the temperature of the room.

But your design also fixes the issue of showing the state of lights.

Maybe an idea to add media players as an icon when applicable?

1 Like

Almost done. :slight_smile:

PS: If you (or anyone…) interested PM me so i can send the code and we can finalize the card. I don’t have allot of time the next few weeks so will be great if anyone can help a little.

Card

10 Likes

Nice work. Could you share the code?

Can you share the code?

1 Like

What’s the easiest way to make a chip to a navigation card?
If I want to navigate to my CCTV view for example?

I did it this way

          - type: custom:button-card
            template: chip_custom_navigation
            variables:
              ulm_card_navigate_path: /lovelace-minimalist/tele_media
              ulm_card_navigate_title: ""
              ulm_card_navigate_icon: mdi:youtube-tv