🏠 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