Lovelace UI error: circle-sensor-card.js - State is not a number

Hello,

I am trying to use the gh0s7 Hristo Atanasov’s card without any success.

ui-lovelace.yaml

title: Home
resources:
  - url: /local/card-modder.js
    type: module
  - url: /local/circle-sensor-card.js?v=2
    type: module
  - url: /local/vertical-stack-in-card.js
    type: module
views:
  - !include /config/lovelace_views/home.yaml
  - !include /config/lovelace_views/test.yaml

home.yaml

title: Home
#background: url("/local/home.png") fixed
icon: mdi:home
#badges:
#  !include /config/lovelace_views/badges.yaml
cards:
    - elements:
        - entity: sensor.purifier_filter_hours_used
          prefix: 'Used: '
          style:
            background-color: 'rgba(0, 0, 0,.0)'
            border-color: 'rgb(34, 154, 210,.0)'
            border-left-style: solid
            color: dodgerblue
            font-size: 100%
            font-weight: bold
            left: 1.5%
            opacity: 1
            pointer-events: none
            top: 5%
            transform: 'translate(0%,-50%)'
          type: state-label
        - icon: 'mdi:water-percent'
          style:
            '--iron-icon-height': 20px
            '--iron-icon-width': 20px
            color: dodgerblue
            left: 8%
            position: absolute
            top: 17%
          tap_action: none
          type: icon
        - entity: sensor.purifier_humidity
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 100
          min: 0
          show_card: null
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 25%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: '%'
        - icon: 'mdi:thermometer'
          style:
            '--iron-icon-height': 20px
            '--iron-icon-width': 20px
            color: dodgerblue
            left: 7.5%
            position: absolute
            top: 37%
          tap_action: none
          type: icon
        - entity: sensor.purifier_temperature
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 50
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 45%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: °C
        - icon: 'mdi:air-filter'
          style:
            '--iron-icon-height': 17px
            '--iron-icon-width': 17px
            color: dodgerblue
            left: 8%
            top: 56%
          tap_action: none
          type: icon
        - entity: sensor.purifier_filter_life_remaining
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 100
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 65%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: ''
        - entity: sensor.purifier_aqi
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 600
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 13%
            left: 50%
            top: 18.5%
            width: 13%
          type: 'custom:circle-sensor-card'
          units: p
        - icon: 'mdi:speedometer'
          style:
            '--iron-icon-height': 17px
            '--iron-icon-width': 17px
            color: dodgerblue
            left: 8%
            top: 76%
          tap_action: none
          type: icon
        - entity: sensor.purifier_fan_speed
          fill: 'rgba(0,0,0,0.3)'
          font_style:
            color: white
          gradient: true
          max: 1700
          min: 0
          show_card: false
          stroke_width: 10
          style:
            height: 17%
            left: 15%
            top: 85%
            width: 17%
          type: 'custom:circle-sensor-card'
          units: ''
        - entity: sensor.purifier_fan_mode
          max: 2000
          min: 0
          prefix: 'Mode: '
          style:
            background-color: 'rgba(0, 0, 0,.0)'
            border-color: 'rgb(34, 154, 210,.0)'
            border-left-style: solid
            color: dodgerblue
            font-size: 100%
            font-weight: bold
            opacity: 1
            pointer-events: none
            right: 1%
            top: 1%
            transform: none
          type: state-label
        - entity: fan.xiaomi_air_purifier_2s
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 17%
            top: 17%
          tap_action:
            action: call-service
            service: fan.toggle
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: state-icon
        - icon: 'mdi:brightness-auto'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 4%
            top: 17%
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
              speed: Auto
          type: icon
        - icon: 'mdi:power-sleep'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 34%
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
              speed: Silent
          type: icon
        - icon: 'mdi:account-heart'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 4%
            top: 34%
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
              speed: Favorite
          type: icon
        - icon: 'mdi:monitor'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 51%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_LED_ON
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: icon
        - icon: 'mdi:monitor-off'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 3%
            top: 51%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_LED_OFF
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: icon
        - icon: 'mdi:bell'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 68%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_BUZZER_ON
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: icon
        - icon: 'mdi:lock-alert'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            margin-right: '-10%'
            right: 22%
            top: 87%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_CHILD_LOCK_ON
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: icon
        - icon: 'mdi:bell-off-outline'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 3%
            top: 68%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_BUZZER_OFF
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: icon
        - icon: 'mdi:lock-open-outline'
          style:
            '--iron-icon-height': 22px
            '--iron-icon-width': 22px
            right: 3%
            top: 87%
          tap_action:
            action: call-service
            service: fan.XIAOMI_MIIO_SET_CHILD_LOCK_OFF
            service_data:
              entity_id: fan.xiaomi_air_purifier_2s
          type: icon
      image: /local/xiaomi-mi-air-purifier-2s.jpg
      type: picture-elements
type: 'custom:vertical-stack-in-card'
style:
  background-image: url("/local/xiaomi-mi-air-purifier-2s.jpg")
  background-repeat: no-repeat
  background-size: 100% 100%
  height: 100%
  position: relative
  type: 'custom:card-modder'</sub>
home-assistant.log
[frontend.js.latest.202001082] https://192.168.xxx.xxx:xxx/local/circle-sensor-card.js?v=2:76:79 Uncaught TypeError: Cannot read property 'state' of undefined
configuration.yaml

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
#   base_url: example.duckdns.org:8123

# Text to speech
tts:
  - platform: google_translate

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
sensor: !include sensors.yaml

homeassistant:
  latitude: deleted
  longitude: deleted
  elevation: deleted
  unit_system: deleted
  time_zone: deleted
  name: Home

xiaomi_aqara:
  discovery_retry: 5
  gateways:
  - mac: deleted
    key: !secret gw_password

vacuum:
  - platform: xiaomi_miio
    host: deleted
    token: !secret roborock_token

discovery:
  ignore:
    - yeelight
yeelight:
  devices:
    deleted:
      name: Dining room light
    deleted:
      name: Kitchen light
    deleted:
      name: Bedroom left light
    deleted:
      name: Bedroom right light
    deleted:
      name: Living room light

http:
  base_url: deleted
  ssl_certificate: /ssl/cert.pem
  ssl_key: /ssl/key.pem
  
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html
panel_custom:
  - name: floorplan
    sidebar_title: Floorplan
    sidebar_icon: mdi:home
    url_path: floorplan
    config: !include floorplan.yaml

lovelace:
  mode: yaml

www folder contains the following three JS: card-modder, circle-sensor-card, vertical-stack-in-card

sensors.yaml
#fan:
  - platform: xiaomi_miio
    host: deleted
    token: !secret airpurifier_token
    #name: "Xiaomi Air Purifier 2S"
    #model: zhimi.airpurifier.ma2

#sensor:
#  - platform: template
#sensors:
  - platform: template
    sensors:
      purifier_fan_mode:
         friendly_name: "Mode"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.speed }}"
      purifier_fan_speed:
         friendly_name: "Motor speed"
         unit_of_measurement: 'rpm'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.motor_speed }}"
      purifier_temperature:
         friendly_name: "Temperature"
         unit_of_measurement: 'C°'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.temperature }}"
      purifier_humidity:
         friendly_name: "Humidity"
         unit_of_measurement: '%'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.humidity }}"
      purifier_aqi:
         friendly_name: "Air Quality Index"
         unit_of_measurement: 'aqi'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.aqi }}"
      purifier_favspeed:
         friendly_name: "Favourite Level"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.favorite_level }}"
      purifier_filter_hours_used:
         friendly_name: "Hours Used"
         unit_of_measurement: 'h'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.filter_hours_used }}"
      purifier_filter_life_remaining:
         friendly_name: "Filter"
         unit_of_measurement: '%'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.filter_life_remaining }}"
      purifier_child_lock:
         friendly_name: "Child Lock"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.child_lock }}"
      purifier_display:
         friendly_name: "Display"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.led }}"
      purifier_button_pressed:
         friendly_name: "Button Pressed"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.button_pressed }}"
      purifier_buzzer:
         friendly_name: "Buzzer"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.buzzer }}"
      purifier_filter_type:
         friendly_name: "Filter Type"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.filter_type }}"
      purifier_ligt_sensor:
         friendly_name: "Light Sensor"
         unit_of_measurement: 'lux'
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.illuminance }}"</sub>

Could you help me what am I doing wrong?

Hello, I would try to add at the end of each value_template of your sensor definitions a “| int” (for integer) or “| float” …

Example:

      purifier_fan_mode:
         friendly_name: "Mode"
         value_template: "{{ states.fan.xiaomi_air_purifier_2s.attributes.speed | int }}"