Custom Gauge

[RoyalGreen]

Hi there,

I really like your custom background gauges, however i am a novice to Home Assistant and really struggling to work out how to correctly install them.

So much so i am embarrassed to say it is not clear to me how i even install your card.

Is there any guidence you can offer.

Very much appreciated.

Royal

[GlennGoddard]

No problem. If I need to make the readme more descriptive so it is clearer, I can do that. Do you know where your local www folder is under HA? Are you running HA from docker, a pi image...?

This is what got me started: https://community.home-assistant.io/t/cool-uv-index-gauge-for-my-swimming-pool-area/116223

I made a directory under my 'www' folder called 'gauge' where I put my gauge backgrounds. If you primarily use a windows machine you can use a program called WinSCP to transfer files from you computer to your raspberry pi. You may need to transfer the files to the user directory and then log on to the pi and use 'sudo' to move (mv) the files to the 'www' directory.

In HassIo the folder is typically '/config/www'.

I personally use docker but you should be able to use this with any type of installation. If you search the HA forums on 'www' directory you should find more help.

Feel free to ask any other questions.

[RoyalGreen]

Thank you very much for your reply, with your direction on WinSCP I was able to get the images onto my raspberry PI and call them.

I then went to my dashboard and using a picture element, pasted your UV YAML code. Referencing the images which loaded correctly.

I have the custom canvas gauge installed, but dont know if i need to do any more with it then just install it.

I am using a home weather station which is working and providing a UV number, in this example i have used the UV sensor to provide LUX too - i can amend this once i get the card loading correctly.

It looks like I am missing a font pack perhaps? I am not sure if pasting your YAML code into a picture entity is how i am mean to install your pack - I really am a novice, but keen to learn!

I have attached an image of what I am having returned and a txt of my picture card code.

`type: picture-elements image: /local/gauge/UV/UV_Blank.png elements:

• type: state-label style: top: 84% left: 50% box-shadow: none background-color: transparent entity: sensor.uv_index attribute: '' title: null
• type: state-label style: top: 89% left: 50% box-shadow: none background-color: transparent entity: sensor.uv_index attribute: '' title: null
• type: custom:text-element text: Low style: top: 65% left: 5% color: rgb(255,255,255) font-family: Quicksand font-size: 140% font-weight: bold transform: rotate(-45deg) background-color: rgba(0,0,0,.0) border-radius: 50% text-align: center
• type: custom:text-element text: Moderate style: top: 10% left: 10% color: rgb(0,0,0) font-family: Quicksand font-size: 130% font-weight: bold transform: rotate(30deg) background-color: rgba(0,0,0,.0) border-radius: 50% text-align: center
• type: custom:text-element text: High style: top: 5% left: 45% color: rgb(0,0,0) font-family: Quicksand font-size: 140% font-weight: bold transform: rotate(0deg) background-color: rgba(0,0,0,.0) border-radius: 50% text-align: center
• type: custom:text-element text: Very High style: top: 10% left: 70% color: rgb(255,255,255) font-family: Quicksand font-size: 140% font-weight: bold transform: rotate(-40deg) background-color: rgba(0,0,0,0) border-radius: 50% text-align: center
• type: custom:text-element text: Extreme style: top: 70% left: 80% color: rgb(255,255,255) font-family: Quicksand font-size: 140% font-weight: bold transform: rotate(45deg) background-color: rgba(0,0,0,0) border-radius: 50% text-align: center
• type: custom:canvas-gauge-card entity: sensor.uv_index style: top: 50% left: 50% box-shadow: none background-color: transparent gauge: type: radial-gauge title: '' width: 230 height: 230 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: 1 valueInt: null
• type: image image: /local/gauge/UV/sun-UV.png style: top: 50% left: 50% width: 25% box-shadow: none background-color: transparent

`

[RoyalGreen]

You asked about my HA setup.

System Health

version: core-2022.2.9 installation_type: Home Assistant OS dev: false hassio: true docker: true user: root virtualenv: false python_version: 3.9.7 os_name: Linux os_version: 5.10.92-v8 arch: aarch64

[GlennGoddard]

Well, the good news is you have the pictures and the gauge and the rotation of the text.

If you have HACS installed into HA then add "Text Element" from the Frontend tab. (I will need to reference that in the ReadMe). If you don't have HACS (Home Assistant Community Store), I highly recommend it.

[RoyalGreen]

Hi, thank you very much! with installing the 'Text Element' the gauge now works perfectly. Really appreciate your support. Bit of learning curve for me, but your help got me there.