How to configure dynamic Movement level gauge

[MarekChmielowsk]

Description

I try to enable Dynamic gauge. Installed https://github.com/iantrich/config-template-card using HACS
But in dashboard i getting config error.

Describe your issue, question, or topic here.

1. Where should I place
   resources:

• url: /local/config-template-card.js
  type: module

configuration.yaml ?
template.yaml before view?

2. Please provide example of dashboard with working dynamic gauge

Details

Provide any relevant details, context, or background information.

Additional Information

• Related Issues: #
• Related Documentation:
• Other Context:

[francescopace]

Hi @MarekChmielowsk!

If you installed config-template-card with HACS, the resource is often added automatically.

If it is not, use one of these two options:

1. If you use the normal Home Assistant dashboard editor (storage mode):
   go to Settings -> Dashboards -> Resources and add:
   /hacsfiles/config-template-card/config-template-card.js
   as a module

2. If you use Lovelace YAML mode:
   add it in configuration.yaml under lovelace:

Example:

lovelace:
  resources:
    - url: /hacsfiles/config-template-card/config-template-card.js
      type: module

Below is a dynamic gauge example for ESPectre.

Important: number.espectre_threshold must also be included in entities, otherwise the card may not update correctly when the threshold changes.

views:
  - title: ESPectre
    type: sections
    sections:
      - type: grid
        cards:
          - type: custom:config-template-card
            entities:
              - sensor.espectre_movement_score
              - number.espectre_threshold
            card:
              type: gauge
              entity: sensor.espectre_movement_score
              name: Movement Level
              min: 0
              max: 10
              needle: true
              segments:
                - from: 0
                  color: green
                - from: >-
                    ${0.30 * Number(states['number.espectre_threshold'].state)}
                  color: yellow
                - from: >-
                    ${0.60 * Number(states['number.espectre_threshold'].state)}
                  color: orange
                - from: ${Number(states['number.espectre_threshold'].state)}
                  color: red

If your device name is not espectre, replace sensor.espectre_movement_score and number.espectre_threshold with your actual entity IDs.

You can also refer to our dashboard example in examples/home-assistant-dashboard.yaml

If you still get a config error after adding the resource, try refreshing the browser and reloading Home Assistant.

[francescopace]

Hi @MarekChmielowsk, I've updated the dashboard example for ESPectre 3.0.0-rc1. It now uses built-in Home Assistant cards, so you don't need config-template-card or an additional JavaScript resource.

The movement score and threshold now use a 0.0–1.0 scale. The dashboard shows the current score as a bar and plots movement alongside the detection threshold in a history graph.

You can find the complete RC1 dashboard YAML here. Paste it into the raw configuration editor of a new dashboard, and replace the example entity IDs with those from your device.

For just the movement bar, add a manual card with:

type: tile
entity: sensor.espectre_movement_score
name: Movement Level
icon: mdi:motion
hide_state: false
features:
  - type: bar-gauge
    min: 0
    max: 1
features_position: bottom

This uses Home Assistant's built-in bar gauge. It updates with the sensor value, but its colors don't follow the detection threshold.

If you prefer the colored gauge from my earlier reply, you can keep using config-template-card. After upgrading to ESPectre 3.0, change max: 10 to max: 1 and keep both the movement sensor and threshold number in its entities list so it updates when either changes.