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.

1 Like

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:

1

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

Update: https://github.com/ciotlosm/custom-lovelace#i-have-added-the-custom-card-javascript-file-in-my-www-folder-but-it-doesnt-load-why

1 Like

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:

4 Likes

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.

cards:
  - type: vertical-stack
    cards:
      - 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
        severity:
          green: 50
          yellow: 20
          red: 0
      - type: glance
        entities: 
         - sensor.tesla_model_s_VIN_range_sensor
         - switch.tesla_model_s_VIN_charger_switch
         - binary_sensor.tesla_model_s_VIN_charger_sensor
      - type: glance
        entities: 
         - 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
    entities:
      - sensor.tesla_model_s_VIN_battery_sensor
4 Likes

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
  cards:
  - type: custom:gauge-card
    title: Outdoor Temperature
    entity: sensor.outside_temp
    min: -20
    max: 110
    severity:
      red: 90
      amber: 85
      green: 60
      blue: 0

  - type: custom:gauge-card
    title: Outdoor Humidity
    entity: sensor.outside_humidity
    severity:
      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 %}

Gauge-Undefined

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
  severity:
    - 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.
image

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

Do you have any idea? Thanks in advance.

1 Like