🌻 Lovelace UI • Minimalist

I already had this done. My other custom cards work just not the paddy welcome. Here is my yaml code. Nothing appears for the custom paddy welcome.

views:
  - title: "Home"
    path: home
    cards:
      - type: 'vertical-stack'
        cards:
        
        # Chips
          - type: horizontal-stack
            cards:
              # Alarm
              - type: 'custom:button-card'
                template: chip_alarm
                entity: alarm_control_panel.ring_alarm
              # Water Leaks
              - type: "custom:button-card"
                template: chip_mdi_icon_state
                variables:
                  ulm_chip_mdi_icon_state_entity: group.water
                  ulm_chip_mdi_icon_state_icon: mdi:water


          # Welcome
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                template: custom_card_paddy_welcome
                variables:
                  ulm_custom_card_paddy_welcome_time: sensor.time

I can back you up by saying I can’t seem to get it to work either. I even went back to a blank slate and tried replacing the "card_welcome_scenes" directly with "custom_card_paddy_welcome" with no dice

Heard more people regarding this issue…
You’re using iOS?

Thanks!
Yep, indeed, using IOS. However also on Windows Edge it does this.
Tried doing something with the margins, but no luck.
Hope somebody will solve it.

1 Like

I had the same problem and found that it was related to the browser cache. I had to reinstall the Companion app on my Android. On the desktop pc, clearing the browser cache was enough.

Please keep the posts in English. Use Google translate from your language to English before posting. Thanks.

Hi Marnix,

First off all your layout looks really awesome!!!

Can you please send me the dirty code? I’m also Dutch so the language won’t be any problem.

Just love the vacuum tile and the navigation bar at the bottom (and the total layout)

Hopefully you can help me out!

Solved it by adding:

      app-toolbar {
        height: 80px !important;
2 Likes

where your placed it?

In the theme file:
image
Only need to add the height: line

1 Like

Hello all,

I have been busy with my take on room card.
this is how far I have come!

I really need some help.

  1. how can I get number of lights on in the room (how to code this?)
  2. at present I have hard coded the background image for the room card. (need help to code this ?)
  3. I have tried apply background filter: brightness (50%). it works but the brightness applies to the whole card! I would like to do that only to the background image.

please help me on ANY or ALL 3 code improvements.

custom_room_card code:

---
custom_card_room:
  template:
    - "ulm_language_variables"
  variables:
    label_use_temperature: true
    label_use_brightness: false
#    room_card_area_use_entity_picture: true
#    room_card_area_id: "your area id"
  color: "var(--google-grey-500)"
  show_icon: true
  show_name: true
  show_label: true
  size: "100%"
  aspect_ratio: "3/1"


  label: |-
    [[[
      if (variables.label_use_temperature) {
        return  '<ha-icon icon="mdi:thermometer" style="width: 16px; height: 16px;"></ha-icon>' + (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + '°C' + ' | ' 
        + '<ha-icon icon="mdi:water-percent" style="width: 18px; height: 18px;"></ha-icon>' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%' + ' | '
        + '<ha-icon icon="mdi:lightbulb-on" style="width: 16px; height: 16px;"></ha-icon>' + ' count ' + (entity.attributes.current_humidity || entity.attributes.humidity || entity.state || '-') + '%';
      } else if (variables.label_use_brightness) {
        if (entity.state){
          if (entity.state == "off"){
            return variables.ulm_off;
          } else if (entity.state == "on"){
            if (entity.attributes.brightness != null){
              var bri = Math.round(entity.attributes.brightness / 2.55);
              return (bri ? bri : "0") + "%";
            } else {
              return variables.ulm_on
            }
          }
        } else {
          return variables.ulm_unavailable;
        }
      } else if (entity.state == "on") {
          return variables.ulm_on
      } else if (entity.state == "off") {
          return variables.ulm_off
      } else {
        return entity.state
      }
    ]]]
  state:
    - styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - border: "2px solid var(--card-background-color)"
            - width: "24.5px"
            - height: "24.5px"
            - position: "absolute"
            - left: "50%"
            - top: "50%"
            - transform: "translate(-50%,-50%)"
            - margin-top: "35%"
            - margin-left: "-35%"
            - line-height: 0
            - display: "grid"
            - background-color: >
                [[[
                  return "rgba(var(--color-blue),1)";
                ]]]
      value: "unavailable"
  styles:
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - background-image: url("http://.................duckdns.org:8123/api/image/serve/eaddabda093de01eda6f2862bb52c886/512x512")
      - background-size: "cover"
      - background-repeat: "no-repeat"
      - background-position-y: "-100px"

    grid:
      - grid-template-areas: "'n n n n n n n n ' 'l l l l l l l l ' 'i1 . . i2 i3 i4 i5 i6'"
      - grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"
      - grid-template-rows: "1fr 1fr 1fr"
      - justify-items: "center"

    icon:
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - display: "none"

    name:
      - justify-self: "start"
      - align-self: "end"
      - font-weight: "bold"
      - color: "white"
      - font-size: "22px"
      - margin-left: "12px"
      - margin-bottom: "4%"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - color: "white"      
      - font-size: "12px"
#      - filter: "opacity(40%)"
      - margin-left: "6px"
      - margin-top: "-4%"
    state:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "14px"
      - filter: "opacity(40%)"
      - margin-left: "6px"
    custom_fields:
      i1:
        - border-radius: "50%"
        - width: "2.6em"
        - height: "2.6em"
        - line-height: 0
        - display: "grid"
      i2:
        - border-radius: "50%"
        - width: "2.6em"
        - height: "2.6em"
        - line-height: 0
        - display: "grid"
      i3:
        - border-radius: "50%"
        - width: "2.6em"
        - height: "2.6em"
        - line-height: 0
        - display: "grid"
      i4:
        - border-radius: "50%"
        - width: "2.6em"
        - height: "2.6em"
        - line-height: 0
        - display: "grid"
      i5:
        - border-radius: "50%"
        - width: "2.6em"
        - height: "2.6em"
        - line-height: 0
        - display: "grid"  
      i6:
        - border-radius: "50%"
        - width: "2.6em"
        - height: "2.6em"
        - line-height: 0
        - display: "grid"              
  custom_fields:
    notification: >
      [[[
        if (entity.state =='unavailable'){
          return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
        }
      ]]]
    i1:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_1?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_1.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_1; ]]]"
        entity: >
          [[[
            if (variables.entity_1.entity_id) {
              return variables.entity_1.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_1; ]]]"
            styles:
              card:
                - display: "none"

    i2:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_2?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_2.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_2; ]]]"
        entity: >
          [[[
            if (variables?.entity_2?.entity_id) {
              return variables.entity_2.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_2; ]]]"
            styles:
              card:
                - display: "none"

    i3:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_3?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_3.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_3; ]]]"
        entity: >
          [[[
            if (variables?.entity_3?.entity_id) {
              return variables.entity_3.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_3; ]]]"
            styles:
              card:
                - display: "none"
    i4:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_4?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_4.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_4; ]]]"
        entity: >
          [[[
            if (variables?.entity_4?.entity_id) {
              return variables.entity_4.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_4; ]]]"
            styles:
              card:
                - display: "none"
    i5:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_5?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_5.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_5; ]]]"
        entity: >
          [[[
            if (variables?.entity_5?.entity_id) {
              return variables.entity_5.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_5; ]]]"
            styles:
              card:
                - display: "none"
    i6:
      card:
        type: "custom:button-card"
        template: >
          [[[
            var templates = ['widget_icon_room'];
            if (variables?.entity_6?.templates?.length) {
              return ['widget_icon_room'].concat(variables.entity_6.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables.entity_6; ]]]"
        entity: >
          [[[
            if (variables?.entity_6?.entity_id) {
              return variables.entity_6.entity_id;
            }
          ]]]
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_6; ]]]"
            styles:
              card:
                - display: "none"                
widget_icon_room:
  variables:
    tap_action:
      action: "toggle"
    hold_action:
      action: "none"
  tap_action:
    action: >
      [[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
    entity: "[[[ return variables.tap_action.entity; ]]]"
    navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
    url_path: "[[[ return variables.tap_action.url_path; ]]]"
    service: "[[[ return variables.tap_action.service; ]]]"
    service_data: "[[[ return variables.tap_action.service_data; ]]]"
  hold_action:
    action: >
      [[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
    entity: "[[[ return variables.hold_action.entity; ]]]"
    navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
    url_path: "[[[ return variables.hold_action.url_path; ]]]"
    service: "[[[ return variables.hold_action.service; ]]]"
    service_data: "[[[ return variables.hold_action.service_data; ]]]"
  show_icon: true
  show_name: false
  styles:
    grid:
      - grid-template-areas: "'i'"
    card:
      - height: "100%"
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "50%"
    icon:
      - width: "50%"
      - height: "50%"
      - line-height: "0"
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - border-radius: "50%"
      - background-color: "rgba(var(--color-theme),0.05)"
  size: "15px"
  color: "var(--google-grey)"

16 Likes

What is your ui card code? So we can have a look

sorry!
here it is!

UI card code:

title: testing room card
theme: minimalist-mobile-tapbar
type: custom:vertical-layout

cards:

###### room card bedroom 1
  - type: horizontal-stack
    cards: 
      - type: 'custom:button-card'
        template:
          - custom_card_room

        name: Bedroom 1
        entity: climate.thermostat_bedroom_1
        icon: mdi:bed-king-outline

        tap_action:
          action: navigate
          navigation_path: '/lovelace-myhome/011_bedroom_1_full'
        variables:
          label_use_temperature: true
          label_use_brightness: false
          entity_1:
            entity_id: switch.area_presence_hold_bedroom_1
            templates:
              - green_on
            tap_action:
              action: toggle

          entity_4:
            entity_id: climate.thermostat_bedroom_1
            templates:
              - red_off
              - green_on              
          entity_5:
            entity_id: light.hanging_lamp_bedroom_1
            templates:
              - yellow_on
            tap_action:
              action: toggle
            tap_action:
              action: toggle
          entity_6:
            entity_id: light.bedroom_1_lights
            templates:
              - yellow_on
            tap_action:
              action: toggle



###### room card living room 
  - type: horizontal-stack
    cards: 
      - type: 'custom:button-card'
        template:
          - custom_card_room

        name: Living room
        entity: climate.thermostat_living_room
        icon: mdi:bed-king-outline
        style: |
          ha-card {
          background-image: '/my_images/living_room.jpg'
          }  
        tap_action:
          action: navigate
          navigation_path: '/lovelace-myhome/011_bedroom_1_full'
        variables:
          label_use_temperature: true
          label_use_brightness: false       
          entity_1:
            entity_id: switch.area_presence_hold_living_room
            templates:
              - green_on
            tap_action:
              action: toggle

          entity_3:
            entity_id: climate.thermostat_living_room
            templates:
              - red_off
              - green_on
          entity_4:
            entity_id: light.hanging_lamp_living_room
            templates:
              - yellow_on
            tap_action:
              action: toggle
            tap_action:
              action: toggle
          entity_5:
            entity_id: light.standing_lamp_living_room
            templates:
              - yellow_on
            tap_action:
              action: toggle
          entity_6:
            entity_id: light.living_room_lights
            templates:
              - yellow_on
            tap_action:
              action: toggle              
1 Like

wish I could use this template for my fan that I use Broadlink Ir to control! is it possible?

Like this right? That did not solve it for me though, hmm

        app-toolbar {
          padding-right: 0px;
          padding-left: 0px;
          height: 80px !important;

no like this in the second app-toolbar part:

app-toolbar {
        height: 100px !important;
        transform: none;
        padding-top:10px !important;
        padding-bottom: 10px !important;
        @include supports-safe-area-insets {
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
        }

When I first open the app I get this, but if I switch tabs it works

1 Like

it will delete the graphic design

1 Like

This is my fix:

      app-toolbar {
        transform: none;
        padding-top:10px !important;
        padding-bottom: calc(env(safe-area-inset-bottom) + 5px);
        height: 100px !important;
      }

3 Likes

For some reason that as well clips my chips in half at the top. I’m on a iPhone 12