Lovelace: Gauge card


Loading failed for the with source “/local/guage-card.js?v=2”. 0:1
uncaught exception: /local/guage-card.js?v=2


Did you put the file in your /www/gauge-card.js ?

is /config/ on hassio or /home/homeassistant/.homeassistant/ in hassbian

Works on chrome out of the box, but for firefox you need to enable two custom flags in about:config


yes, I run under docker and is in /config/www/gauge-card.js


Can you please make a screenshot of the full JS error? If it’s a stacktrace, make sure you expand it


something may have happened when I upgraded to 0.73.1. My other custom_ui state cards for sliders on lights are also not working.
almost like it can’t read whats in /config/www.


I’m having some strange behavior when loading the lovelace with gauge, it shows the error for a second and then the normal gauge appears correct, see below:


And the error that printed is:


Yes, this is the behaviour seen with any custom cards. It only happens on a full browser refresh until the JS files are cached.

Maybe in a future release of HA this will get polished a bit, but it’s nothing to worry about for now.


No, it happens also on regular refresh as well (F5 or ctrl+r)


I just spent a lot of time with this, because there is one important point missing in documentation.

When you created the www folder, because it was missing there, you have to restart homeassistant.


I will add that to the FAQ



I restarted it like thousand times already :slight_smile: still appears the same like this (on each page load and for a regular F5 refresh as well):


See several post above: Lovelace: Gauge card


Thanks. Love the gauges. Added gauge to Tesla battery and total power usage for the house. Looks great :slight_smile:


Do you mind sharing your config for the tesla card?


no problem :slight_smile: Just change VIN to your cars vin number and image to a picture of the car in correct color you want to use.

  - type: vertical-stack
      - type: picture-entity
        title: Tesla Model S
        image: /local/lovelace/tesla_black.jpg
        entity: sensor.tesla_model_s_VIN_mileage_sensor
        name: Milage
      - type: custom:gauge-card
        title: Battery
        entity: sensor.tesla_model_s_VIN_battery_sensor
        min: 0
        max: 100
          green: 50
          yellow: 20
          red: 0
      - type: glance
         - sensor.tesla_model_s_VIN_range_sensor
         - switch.tesla_model_s_VIN_charger_switch
         - binary_sensor.tesla_model_s_VIN_charger_sensor
      - type: glance
         - entity: sensor.tesla_model_s_VIN_temperature_sensor_inside
           name: Inside
         - entity: sensor.tesla_model_s_VIN_temperature_sensor_outside
           name: Outside
         - climate.tesla_model_s_VIN_hvac_climate_system
         - input_datetime.tesla_climate_timer
         - input_boolean.climate_timer
  - type: history-graph
    title: Battery Status
      - sensor.tesla_model_s_VIN_battery_sensor


I’m new to HA and even newer to Lovelace. In attempting to implement this, the gauges are showing as below. Any help would be appreciated.
My ui-lovelace is as follows:

- title: Weather
  - type: custom:gauge-card
    title: Outdoor Temperature
    entity: sensor.outside_temp
    min: -20
    max: 110
      red: 90
      amber: 85
      green: 60
      blue: 0

  - type: custom:gauge-card
    title: Outdoor Humidity
    entity: sensor.outside_humidity
      red: 75
      green: 0
      amber: 65

and my sensors.yaml looks like:

  - platform: mqtt
    name: "Outside Temp"
    state_topic: "5n1"
    unit_of_measure: "°F"
    value_template: >
      {% if value_json.message_type == 56 %}
        {{ float( value_json.temperature_F) }}
      {% else %}
        {{ states('sensor.outside_temp') }}
      {% endif %}

  - platform: mqtt
    name: "Outside Humidity"
    state_topic: "5n1"
    unit_of_measure: "%"
    value_template: >
      {% if value_json.message_type == 56 %}
        {{ float( value_json.humidity|round(1)) }}
      {% else %}
        {{ states('sensor.outside_humidity') }}
      {% endif %}



It’s unit_of_measurement not unit_of_measure


That would do it. I had others correct. Thanks


hello it is possible not to display numeric data but only I name and progress bar? thank you


hey there,
I really like the gauge card. Great work but I’ve got one problem with it. It always shows blue color.

Defined the card like this:

- type: custom:gauge-card
  title: Download
  entity: sensor.speedtest_download
  max: 51
    - green: 45
    - red: 0
    - amber: 30

The value of the sensor is 47.6 Mbit/s. The bar is shown in blue not in green as expected.

I’m using Chrome browser and added the javascript_version: latest to my configuration.yaml

Do you have any idea? Thanks in advance.