Problem with card yaml code

Hi there.

I’m using this code in order to use a card that shows me informations about my modem and my internet connection.
The issue is that sometimes it works (until I reload the webpage, or reload HA), but usually it gives me this error:

I don’t understand what i’m missing: the hui-element is installed (I’ve already tried to install it twice), and the same we can say for Vertical Stack In Card component from HACS.

Someone could give me a hint?

Here’s the code, thanks:

id: statistiche
type: custom:config-template-card
align_state: center
show:
  extrema: true
  labels: true
  points: true
entities:
  - sensor.sensor.speedtest_download
  - sensor.sensor.speedtest_upload
  - sensor.sensor.speedtest_ping
card:
  type: entities
  style: |
    .card-header {
      padding: 0px 0px 0px 0px !important;
    }
  entities:
    - type: section
      label: ${ ' Modem Tim Hub ' }
    - type: custom:hui-vertical-stack-card
      cards:
        - type: horizontal-stack
          cards:
            - type: picture
              style: |
                ha-card { 
                    --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                    --ha-card-background: "rgba(0, 0, 0, 0.0)";
                    --ha-card-box-shadow: 'none';
                }
              image: /local/modem.png
            - type: vertical-stack
              cards:
                - type: custom:button-card
                  layout: icon_name_state2nd
                  entity: sensor.speedtest_download
                  name: SpidTest
                  show_icon: true
                  show_state: true
                  icon: mdi:clock-outline
                  styles:
                    grid:
                      - grid-template-columns: 50px auto
                    icon:
                      - padding: 0px 0px
                      - height: 30px
                      - width: 30px
                    card:
                      - '--ha-card-background': rgba(0, 0, 0, 0.0)
                      - '--ha-card-box-shadow': none
                    state:
                      - padding: 0px 10px
                      - justify-self: start
                      - font-family: Roboto, sans-serif
                      - font-size: 15px
                    name:
                      - padding: 0px 10px
                      - justify-self: start
                      - color: var(--primary-text-color)
                - type: custom:button-card
                  layout: icon_name_state2nd
                  entity: sensor.calcioscacchi_duckdns_org
                  name: IP Locale
                  show_icon: true
                  show_state: true
                  state_color: true
                  icon: mdi:lan
                  styles:
                    grid:
                      - grid-template-columns: 50px auto
                    icon:
                      - padding: 0px 0px
                      - height: 30px
                      - width: 30px
                    card:
                      - '--ha-card-background': rgba(0, 0, 0, 0.0)
                      - '--ha-card-box-shadow': none
                    state:
                      - padding: 0px 10px
                      - justify-self: start
                      - font-family: Roboto, sans-serif
                      - font-size: 15px
                    name:
                      - padding: 0px 10px
                      - justify-self: start
                      - color: var(--primary-text-color)
        - type: custom:bar-card
          show_icon: true
          align: split
          columns: 1
          max: 1000
          positions:
            icon: inside
            indicator: inside
            name: inside
            value: inside
          unit_of_measurement: ''
          severity:
            - color: '#1e90ff'
              from: 0
              to: 49
            - color: orange
              from: 50
              to: 80
            - color: red
              from: 81
              to: 100
          style: |
            ha-card { 
                --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                --ha-card-background: "rgba(0, 0, 0, 0.0)";
                --paper-item-icon-color: 'var(--text-primary-color';
                --ha-card-box-shadow: 'none';
            }
          entities:
            - entity: sensor.speedtest_download
          name: ${ 'Download' }
          entity_row: true
        - type: horizontal-stack
          cards:
            - type: custom:bar-card
              show_icon: true
              align: split
              columns: 1
              max: 200
              positions:
                icon: inside
                indicator: inside
                name: inside
                value: inside
              unit_of_measurement: ''
              severity:
                - color: '#1e90ff'
                  from: 0
                  to: 49
                - color: Orange
                  from: 50
                  to: 80
                - color: red
                  from: 81
                  to: 100
              style: |
                ha-card { 
                  --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                  --ha-card-background: "rgba(0, 0, 0, 0.0)";
                  --paper-item-icon-color: 'var(--text-primary-color';
                  --ha-card-box-shadow: 'none';
                }
              entity: sensor.speedtest_upload
              name: Upload
              entity_row: true
            - type: custom:bar-card
              show_icon: true
              align: split
              columns: 1
              max: 10
              positions:
                icon: inside
                indicator: inside
                name: inside
                value: inside
              unit_of_measurement: ''
              severity:
                - color: '#1e90ff'
                  from: 0
                  to: 49
                - color: Orange
                  from: 50
                  to: 80
                - color: red
                  from: 81
                  to: 100
              style: |
                ha-card { 
                  --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                  --ha-card-background: "rgba(0, 0, 0, 0.0)";
                  --paper-item-icon-color: 'var(--text-primary-color';
                  --ha-card-box-shadow: 'none';
                }
              entity: sensor.speedtest_ping
              name: Ping
              entity_row: true
        - type: custom:mini-graph-card
          height: 50
          line_width: 3
          font_size: 70
          hours_to_show: 48
          points_per_hour: 1
          show:
            extrema: true
            fill: true
          style: |
            ha-card { 
              --ha-card-background: "rgba(0, 0, 0, 0.0)";
              --ha-card-box-shadow: 'none';
              border-radius: 6px;
            }
            .info.flex {
              font-size: 12px !important;
            }
          entities:
            - sensor.speedtest_download
          name: "Velocità\_ Modem Tim"
          color_thresholds:
            - value: 30
              color: '#1e90ff'
            - value: 60
              color: '#ff4500'
            - value: 80
              color: "#ff0000\t"

This is an old name which is not supported anymore. Check docs for hui-element card.

Code for different cards is mixed.

Also, a code snippet with more than 200 lines - is too much.

Unfortunately this is a code that i’ve found on the web. What should I use instead of custom:hui-vertical-stack-card?

Instead of hui-vertical-stack-card you should use a custom:hui-element card with card_type: vertical-stack option.

It is bad that you have to use an unknown code.
The code may be outdated and not 100%-applicable to your needs.
Also, the code may be just wrong.
Check again my remark here - this code is a mix of different cards:

  • config-template-card does not have the align_state: center & id: xxx options;
  • the show options belong to mini-graph-card, not to config-template-card.
1 Like