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.