Very cool and fully customizable card for gauges
based on http://bernii.github.io/gauge.js/
Hi I get “Custom element doesn’t exist:content-card-gauge.” I have copied the .js files under www folder, added resources and restarted HA. however still facing same issue.
any idea what may cause that?
cheers
Ali
Nice card!
Should I expect to see this card, when installed, in the custom_updater/tracker-card?
Now I dont.
how did you manage to fix it. i have the same issue
from what I remember there was something in the code I wrote, very sensitive 
I can’t remember what was it exactly. Let me know how you go.
thank you for your response. Do you mind if you can post your full code for the dash i might try to see what went wrong.
1 Like
#################################################################
# alfresco view #
#################################################################
- title: Alfresco
icon: 'mdi:swim'
path: Alfresco_tab
badges: []
cards:
- type: custom:card-modder #temp Graph
style:
border-radius: 25px
card:
type: custom:mini-graph-card
name: Temperature
#icon: mdi:server
entities:
- entity: sensor.carport_temperature
name: Carport
- entity: sensor.dark_sky_temperature
name: Forecast
points_per_hour: 1
- type: custom:card-modder #lux Graph
style:
border-radius: 25px
card:
type: custom:mini-graph-card
name: Carport Lux
icon: mdi:eye
entities:
- entity: sensor.carport_light_level
points_per_hour: 1
- type: custom:card-modder #swimming pool
style:
border-radius: 25px
card:
type: picture-entity
entity: switch.swimming_pool_light
tap_action:
action: toggle
state_image:
"on": /local/pics/pool-on.jpg
"off": /local/pics/pool-off.jpg
- type: custom:card-modder #UV Gauge
style:
border-radius: 25px
card:
type: picture-elements
image: /local/pics/UV_gauge_wa.png
elements:
- type: custom:canvas-gauge-card
entity: sensor.current_uv_index
style:
top: 50%
left: 50%
gauge:
type: "radial-gauge"
title: UV Index
width: 200
height: 200
minValue: 0
maxValue: 13
startAngle: 40
ticksAngle: 280
valueBox: true
majorTicks: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"]
minorTicks: 5
strokeTicks: true
highlights: [{"from": 2.5, "to": 5.5,"color": "rgba(247, 228, 1, .75)"},{"from": 0, "to": 2.5,"color": "rgba(40, 149, 0, .75)"},{"from": 5.5, "to": 7.5,"color": "rgba(248, 123, 1, .75)"},{"from": 7.5, "to": 10.5,"color": "rgba(216, 23, 0, .75)"},{"from": 10.5, "to": 13,"color": "rgba(75, 46, 154, .75)"}]
borders: no
needleType: "arrow"
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: "linear"
valueBoxBorderRadius: 10
colorValueBoxRect: "#222"
colorValueBoxRectEnd: "#333"
valueDec: 2
valueInt: 2
- type: custom:card-modder #Alfresco
style:
border-radius: 25px
card:
type: entities
title: Alfresco
entities:
- entity: light.alfresco_lamp_1
- entity: light.alfresco_lamp_2
- entity: switch.swimming_pool_light
- entity: light.carport
- entity: binary_sensor.carport_motion_sensor
I have this at start:
#################################################################
# #
# Resources #
# #
#################################################################
resources:
- url: /local/custom_cards/mini-media-player-bundle.js?v=1.0.3
#https://github.com/kalkih/mini-media-player
type: module
- url: /local/custom_cards/gauge.min.js
type: js
- url: /local/custom_cards/canvas-gauge-card.js
type: module
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
type: module
- url: /local/custom_cards/card-tools.js?track=true
#https://github.com/thomasloven/lovelace-card-tools
type: js
- url: /local/custom_cards/card-modder.js?v=1
#https://github.com/thomasloven/lovelace-card-modder
type: js
- url: /local/custom_cards/mini-graph-card-bundle.js?v=0.3.2
#https://github.com/kalkih/mini-graph-card
type: module
- url: /local/custom_cards/kiosk.js?v=1.0
#https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931
type: js
- url: /local/custom_cards/theme-maker.js
#https://github.com/thomasloven/lovelace-theme-maker
type: js
- url: /local/custom_cards/fold-entity-row.js
#https://github.com/thomasloven/lovelace-fold-entity-row
type: js
let me know how you go
Hi, i use your code for my uv-index gauge, but have this problem:
How to fix it?
PS: i don’t use card-modder.
Thanks
Hi, mmm haven’t seen this before, try going through the documentation for color palette , for me it shows up as transparent:
which browser are you using? try another browser maybe? I am using Chrome.
let me know how it goes.
regards,
Ali
I found its a bug of new version… can you send me your js file?
Hi,
sorry for the late reply, I was travelling and did not have access to my home assistant.
how can I send you the file?
regards,
Ali
@Marco_Lupieri, were you able to get this working with the version supplied by @Ali_Kiaie. I am having the same issue as you.
ho to install on HA 108?