🌻 Lovelace UI • Minimalist

Share your Projects! Dashboards & Frontend
,
724

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
725

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.

264678222_3004741029787481_8042061658046960203_n
264678222_3004741029787481_8042061658046960203_n405×900 42 KB

Why? :frowning:

726

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
727

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

728

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

729

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

1 Like
730

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.

731

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

732

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.

733

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

734

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.

image
image785×490 15.9 KB

image
image792×1122 56.2 KB

735

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

card_square
card_square1776×632 69.3 KB

17 Likes
736

Sweeet mama!!

737

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:
738

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?

image
image1170×738 79.7 KB

1 Like
739

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

11 Likes
740

Nice work. Could you share the code?

741

Can you share the code?

1 Like
743

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

744

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