🏠 HaCasa - A new modern dashboard

something I’m doing wrong, but I think I followed the installation steps, have all the HACS required resources (even the recommended). Added the lines to the configuration.yaml and restarted HA.

Result: Mutliple ButtonCardJSTemplateError, so no luck for me…

Please help

Hi @NoClaim,

Can you post the full error? Its possible that it is asking for a sensor which is not available because I created it myself.

Sorry for the late reply… I was a cache issue… seems to be solved

image

if anyone interested, I made a lock card based on the security card.

Template:

---
custom_card_lock:
  type: custom:button-card
  show_state: false
  show_icon: true
  icon: |
    [[[ 
      if (entity.state === "locked") return "fas:lock";
      if (entity.state === "unlocked") return "fas:lock-open";
      if (entity.state === "jammed") return "mdi:lock-alert";
      return "mdi:lock-question";
    ]]]
  show_name: true
  show_last_changed: true
  show_label: true
  styles:
    grid:
      - grid-template-areas: |
          "icon icon"      
          "n action_card"
          "l action_card"
      - grid-template-rows: auto min-content 1fr
    card:
      - overflow: hidden
      - padding: 10px
    name:
      - justify-self: start
      - font-size: 1.2rem
      - font-weight: bold
      - font-family: montserrat
    label:
      - justify-self: start
      - align-self: start
      - font-family: montserrat
      - font-size: 0.9rem
      - font-weight: 500
      - color: var(--color-dark-gray)
    img_cell:
      - position: absolute
      - top: 40%
      - right: 40%
      - overflow: visible
    icon:
      - position: relative
      - width: 10rem
      - justify-self: center
      - align-self: center
      - opacity: 30%
      - color: var(--color-gold)

  state:
    - value: locked
      name: Locked
    - value: unlocked
      name: Unlocked
    - value: jammed
      name: Jammed
    - value: unknown
      name: Unknown
      styles:
        name:
          - color: var(--color-dark-gray)
  custom_fields:
    action_card:
      card:
        type: custom:button-card
        styles:
          grid:
            - grid-template-areas: '"item1" "item2"'
            - row-gap: 8px
          card:
            - padding: 5px
            - border-radius: 20px
            - background: var(--contrast-background)
        custom_fields:
          item1:
            card:
              type: custom:button-card
              entity: "[[[ return entity.entity_id ]]]"
              show_name: false
              show_state: false
              icon: fas:lock
              styles:
                icon:
                  - width: 30px # Increased icon width
                  - height: 30px # Increased icon height
                  - color: var(--text)
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - box-shadow: none
              state:
                - value: locked
                  styles:
                    card:
                      - background: var(--navbar-icon-color)
                    icon:
                      - color: var(--color-white)
                      - animation: rotate 4s linear infinite
              extra_styles: |
                @keyframes rotate {
                  from {transform: rotateY(-deg);}
                  to {transform: rotateY(360deg);}
                }
              tap_action:
                action: call-service
                service: lock.lock
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item2:
            card:
              type: custom:button-card
              entity: "[[[ return entity.entity_id ]]]"
              show_name: false
              show_state: false
              icon: fas:lock-open
              styles:
                icon:
                  - width: 30px # Increased icon width
                  - height: 30px # Increased icon height
                  - color: var(--text)
                card:
                  - padding: 10px
                  - border-radius: 500px
                  - box-shadow: none
              state:
                - value: unlocked
                  styles:
                    card:
                      - background: var(--color-red)
                      - box-shadow: none
                    icon:
                      - color: var(--color-white)
                      - animation: rotate 4s linear infinite
                - value: arming
                  styles:
                    icon:
                      - animation: rotate 4s linear infinite
                    card:
                      - background: var(--color-orange)
                      - animation: flash 2s linear infinite
                      - box-shadow: none
              extra_styles: |
                @keyframes rotate {
                  from {transform: rotateY(-deg);}
                  to {transform: rotateY(360deg);}
                }
                @keyframes flash {
                  0% {opacity: 100%;}
                  50% {opacity: 0%;}
                  100% {opacity: 100%;}
                }
              tap_action:
                action: call-service
                service: lock.unlock
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"

View:

- type: custom:button-card
  template:
    - custom_card_lock
  entity: lock.front_door
  name: Front Door
2 Likes

Same HERE !

Here’s cover card I created for my use…only thing I can’t make it work is that arrow-up icon to change when cover is closed to arrow-down.

---
custom_card_cover:
  entity: "[[[ return entity.entity_id ]]]"
  name: |
    [[[ 
      var position = entity.attributes.current_position;
      var state;
      if (entity.state === 'open') state = 'Open';
      else if (entity.state === 'closed') state = 'Closed';
      else if (entity.state === 'opening') state = 'Opening';
      else if (entity.state === 'closing') state = 'Closing';
      else state = 'Unknown';

      return `${state} | ${position !== undefined ? position + '%' : 'Unknown'}`;
    ]]]

  show_name: true
  show_icon: true
  show_label: true
  show_state: false
  styles:
    grid:
      - grid-template-areas: |
          "i switch"
          "n n"
          "l l"
          "slider slider"
      - grid-template-rows: 3rem 1fr min-content min-content
      - grid-template-columns: 1fr 1fr
    card:
      - height: 100%
      - padding: 10px
    img_cell:
      - justify-self: start
      - align-self: start
      - width: 20px
      - height: 20px
      - overflow: visible
    icon:
      - justify-self: start
      - align-self: start
      - width: 18px
      - height: 18px
      - overflow: visible
    name:
      - text-align: left
      - font-size: "var(--fs-400)"
      - font-family: Montserrat
      - font-weight: 700
      - justify-self: start
      - align-self: end
      - overflow: visible
      - font-size: 1.2rem
    label:
      - text-align: left
      - font-size: "var(--fs-300)"
      - font-family: Montserrat
      - font-weight: 500
      - justify-self: start
      - align-self: center
      - color: var(--color-dark-gray)
      - overflow: visible
      - padding-bottom: 10px
    custom_fields:
      switch:
        - width: 25px
        - justify-self: end
        - align-self: start
        - color: var(--color-dark-gray)
        - margin-top: -4px
  state:
    - value: "closed"
      icon: mdi:curtains-closed
      styles:
        icon:
          - color: var(--color-dark-gray)
        custom_fields:
          switch:
            - color: var(--color-light-gray-nav)
            - transform: rotate(180deg)
    - value: "open"
      icon: mdi:curtains
      styles:
        card:
          - background: "#A3D5D3"
        name:
          - color: "var(--color-white)"
        label:
          - color: "var(--color-white)"
        icon:
          - color: "var(--color-white)"
        custom_fields:
          switch:
            - color: "var(--color-white)"
    - value: "unavailable"
      name: "?"
      icon: mdi:window-shutter-alert
      styles:
        icon:
          - color: var(--color-dark-gray)
  custom_fields:
    slider:
      card:
        type: custom:my-slider-v2
        entity: "[[[ return entity.entity_id ]]]"
        mode: position
        vertical: false
        styles:
          card:
            - height: 30px
          container:
            - border-radius: 8px
            - width: 100%
          progress:
            - height: 100%
            - background: white
          track:
            - background: "#EEEEEE"
          thumb:
            - height: 30%
            - background: var(--color-blue)
            - position: absolute
            - right: 7px
            - top: 11px
            - width: 3px
            - border-radius: 500px

    switch: >
      [[[ 
        if (entity.state == "open") {
          return '<ha-icon icon="mdi:arrow-up"></ha-icon>';
        } else if (entity.state == "closed") {
          return '<ha-icon icon="mdi:arrow-down"></ha-icon>';
        } else if (entity.state == "opening") {
          return '<ha-icon icon=mdi:window-shutter-alert"></ha-icon>';
        } else if (entity.state == "closing") {
          return '<ha-icon icon="mdi:window-shutter-alert"></ha-icon>';
        } else {
          return '<ha-icon icon="mdi:alert"></ha-icon>';
        }
      ]]]
  hold_action:
    action: more-info

hi chintito,
I used this code and the icon does change here

---
custom_card_cover:
  entity: "[[[ return entity.entity_id ]]]"
  name: |
    [[[ 
      var position = entity.attributes.current_position;
      var state;
      if (entity.state === 'open') state = 'Open';
      else if (entity.state === 'closed') state = 'Closed';
      else if (entity.state === 'opening') state = 'Opening';
      else if (entity.state === 'closing') state = 'Closing';
      else state = 'Unknown';
      return `${state} | ${position !== undefined ? position + '%' : 'Unknown'}`;
    ]]]
  
  show_name: true
  show_icon: true
  show_label: true
  show_state: false
  styles:
    grid:
      - grid-template-areas: |
          "i switch"
          "n n"
          "l l"
          "slider slider"
      - grid-template-rows: 3rem 1fr min-content min-content
      - grid-template-columns: 1fr 1fr
    card:
      - height: 100%
      - padding: 10px
    img_cell:
      - justify-self: start
      - align-self: start
      - width: 20px
      - height: 20px
      - overflow: visible
    icon:
      - justify-self: start
      - align-self: start
      - width: 18px
      - height: 18px
      - overflow: visible
    name:
      - text-align: left
      - font-size: "var(--fs-400)"
      - font-family: Montserrat
      - font-weight: 700
      - justify-self: start
      - align-self: end
      - overflow: visible
      - font-size: 1.2rem
    label:
      - text-align: left
      - font-size: "var(--fs-300)"
      - font-family: Montserrat
      - font-weight: 500
      - justify-self: start
      - align-self: center
      - color: var(--color-dark-gray)
      - overflow: visible
      - padding-bottom: 10px
    custom_fields:
      switch:
        - width: 25px
        - justify-self: end
        - align-self: start
        - color: var(--color-dark-gray)
        - margin-top: -4px
  state:
    - value: "closed"
      icon: mdi:curtains-closed
      styles:
        icon:
          - color: var(--color-dark-gray)
        custom_fields:
          switch:
            - color: var(--color-dark-gray)
    - value: "open"
      icon: mdi:curtains
      styles:
        card:
          - background: "#A3D5D3"
        name:
          - color: "var(--color-white)"
        label:
          - color: "var(--color-white)"
        icon:
          - color: "var(--color-white)"
        custom_fields:
          switch:
            - color: "var(--color-white)"
    - value: "unavailable"
      name: "?"
      icon: mdi:window-shutter-alert
      styles:
        icon:
          - color: var(--color-dark-gray)
  custom_fields:
    slider:
      card:
        type: custom:my-slider-v2
        entity: "[[[ return entity.entity_id ]]]"
        mode: position
        vertical: false
        styles:
          card:
            - height: 30px
          container:
            - border-radius: 8px
            - width: 100%
          progress:
            - height: 100%
            - background: white
          track:
            - background: "#EEEEEE"
          thumb:
            - height: 30%
            - background: var(--color-blue)
            - position: absolute
            - right: 7px
            - top: 11px
            - width: 3px
            - border-radius: 500px
    switch: >
      [[[ 
        if (entity.state == "open") {
          return '<ha-icon icon="mdi:arrow-up"></ha-icon>';
        } else if (entity.state == "closed") {
          return '<ha-icon icon="mdi:arrow-down"></ha-icon>';
        } else if (entity.state == "opening") {
          return '<ha-icon icon=mdi:window-shutter-alert"></ha-icon>';
        } else if (entity.state == "closing") {
          return '<ha-icon icon="mdi:window-shutter-alert"></ha-icon>';
        } else {
          return '<ha-icon icon="mdi:alert"></ha-icon>';
        }
      ]]]
  hold_action:
    action: more-infotype or paste code here
1 Like

hi everyone,

i edited the climate card so i can turn it on and off from the card
Schermafbeelding 2024-12-19 191329

this is my code

custom_card_climate_auto:
  show_label: true
  show_state: true
  state_display: >
    [[[ return "Currently " +
    states[entity.entity_id].attributes.current_temperature + '<p
    style="font-size:10px;display:inline;vertical-align:text-top">°C</p>' ]]]
  label: |
    [[[
      return states[entity.entity_id].attributes.temperature + '<sup style="font-size: 40px;">°C</sup>'
    ]]]
  show_icon: false
  styles:
    grid:
      - grid-template-areas: |
          'l auto buttons'
          'n auto buttons'
          's auto buttons'
      - grid-template-rows: min-content min-content
    card:
      - padding: 20px
    name:
      - justify-self: start
      - align-self: start
      - font-family: montserrat
      - font-weight: 500
    label:
      - font-size: 5em
      - justify-self: start
      - align-self: start
      - font-weight: 700
      - font-family: montserrat
    state:
      - justify-self: start
      - color: var(--color-dark-gray)
      - font-size: 12px
      - font-family: montserrat
  custom_fields:
    buttons:
      card:
        type: custom:button-card
        styles:
          grid:
            - grid-template-areas: |
                'item_3 item_1'
                'item_4 item_2'
            - row-gap: 3rem
          card:
            - padding: 10px
            - background: var(--contrast-background)
        custom_fields:
          item_1:
            card:
              type: custom:button-card
              icon: mdi:chevron-up
              styles:
                icon:
                  - width: 40px
                card:
                  - box-shadow: none
                  - background: none
              tap_action:
                action: call-service
                service: climate.set_temperature
                data:
                  temperature: |
                    [[[
                      return states[entity.entity_id].attributes.temperature + 0.5;
                    ]]]
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item_2:
            card:
              type: custom:button-card
              icon: mdi:chevron-down
              styles:
                icon:
                  - width: 40px
                card:
                  - box-shadow: none
                  - background: none
              tap_action:
                action: call-service
                service: climate.set_temperature
                data:
                  temperature: |
                    [[[
                      return states[entity.entity_id].attributes.temperature - 0.5;
                    ]]]
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item_3:
            card:
              type: custom:button-card
              entity: "[[[ return entity.entity_id ]]]"
              show_name: false
              icon: mdi:fire
              styles:
                icon:
                  - width: 20px
                card:
                  - box-shadow: none
                  - background: none
                state:
                  - value: heat
                    styles:
                      icon:
                        - color: var(--color-red)
              tap_action:
                action: call-service
                service: climate.turn_on
                data: null
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item_4:
            card:
              type: custom:button-card
              icon: mdi:power
              styles:
                icon:
                  - width: 20px
                card:
                  - box-shadow: none
                  - background: none
              tap_action:
                action: call-service
                service: climate.turn_off
                data: null
                target:
                  entity_id: "[[[ return entity.entity_id ]]]"
1 Like

Hi, what is that kind of dock at the bottom? looks very nice!

hi,

its the dock from the theme from damiantje99,
its a very nice theme/dashboard

1 Like

Thank you so much! wish more people would contribute to this project.

There is much work ongoing in the background, so stay tuned…

1 Like

I have this as wel… were you able to get this solved?

It looks like you do not have the HaCasa theme selected.