Cool UV Index gauge for my swimming pool area

Share your Projects! Dashboards & Frontend
1

I have made a cool gauge card to visualize the UV index and its level before going out to my Alfresco area. The UV in Australia can go extreme and you will need to be protected :sunglasses:

image
image2395×1688 401 KB

for this you need to use Open UV platform:

for automation of OpenUV I am using the suggested 30 minutes updates which gives you enough points within your free 50 API requests.

for the gauge I am using combination of cards:

  - 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

I made the background myself to fit the gauge and my screen nicely:

UV_gauge_wa
UV_gauge_wa1566×1560 193 KB

I hope you enjoy. Let me know if any feedback or suggestion to improve. I haven’t figured it out if I can get the UV index from any other source like BOM.

The end result:

image
image795×801 113 KB

Cheers
Ali

9 Likes
2

Thanks for this. I will give it a try. UV sensor can also.be.obtained from DarkSky component.

3

yeah, could’t find it reliable for australia

4

Hi Ali,

Nice work! I’m trying your card out as well. Yet, I see that lovelace-card-mod has replaced lovelace-card-modder. Have you updated your code accordingly? Wondering how I can get it working with this newer card-mod module. Any suggestions?

Thanks, Roland.

5

Very nice work thank you for this

I have one problem, the config is the same as yours.

chrome
chrome1080×1076 135 KB

6

how can i remove the white part from the background?

Immagine
Immagine1920×1080 304 KB

thi is my code:

      - type: custom:card-modder
        style: {background-repeat: no-repeat, background-color: 'rgba(50,50,50,0.3)', background-size: 100% 68px, border-radius: "12px", border: "solid 1px rgba(100,100,100,0.3)", color: white,}
        card:
          type: entities
          color: white
          show_header_toggle: false
          entities:
            - type: custom:vertical-stack-in-card
              cards:
                - type: horizontal-stack
                  cards:
                    - type: custom:canvas-gauge-card
                      entity: sensor.livello_acqua
                      card_height: 125
                      image: "/local/bg3.jpg"
                      gauge: 
                        type: "radial-gauge"
                        title: Livello Acqua
                        width: 180
                        height: 180
                        minValue: 0
                        maxValue: 100
                        startAngle: 80
                        ticksAngle: 200
                        valueBox: false
                        majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
                        minorTicks: 1
                        strokeTicks: true
                        highlights: [{"from": 0, "to": 45,"color": "rgba(200, 50, 50, .75)"}]
                        colorPlate: "#ddd"
                        borders: true
                        needleType: "arrow"
                        needleWidth: 2
                        needleCircleSize: 7
                        needleCircleOuter: false
                        needleCircleInner: false
                        animationDuration: 1500
                        animationRule: "linear"
                        
                    - type: custom:canvas-gauge-card
                      entity: sensor.flusso
                      card_height: 125
                      gauge:
                        type: "radial-gauge"
                        title: Pompa (Lt/m)
                        width: 180
                        height: 180
                        minValue: 0
                        maxValue: 10
                        startAngle: 80
                        ticksAngle: 200
                        valueBox: false
                        majorTicks: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
                        minorTicks: 1
                        strokeTicks: true
                        highlights: [{"from": 6, "to": 10,"color": "rgba(200, 50, 50, .75)"}]
                        colorPlate: "#ddd"
                        borders: true
                        needleType: "arrow"
                        needleWidth: 2
                        needleCircleSize: 7
                        needleCircleOuter: true
                        needleCircleInner: false
                        animationDuration: 1500
                        animationRule: "linear"`Preformatted text`
7

I struggled with the same issue. Was able to resolve it with 2 simple lines:

background-color: transparent
box-shadow: none

Place these 2 after the 50% markers and before the “gauge:” section

I was happy after this change.

1 Like
8

Your background was a great starter for my other gauges:
https://community.home-assistant.io/t/allergen-and-asthma-dashboard/118793/15

I have several different displays I have to accommodate so I just have to find live with good enough. It would be great if the canvas-gauge could use percentage instead of pixels.

1 Like
9

Amazing work! :slight_smile:

10

This all started from me plagiarizing your UV gauge:
https://github.com/GlennGoddard/CanvasGaugeBackgrounds

I have not fully put this in all my cards but adding

transform: scale(1,1) translate(-50%,-50%)

under the style section for the gauge allows you to successfully resize the canvas gauge without having to change the pixel size for different size displays.

I tried to do complement colors for the text but it does not always work, so for the most part I stayed with Black and White but colors are easily changeable for text. I put the text inside the yaml and removed it from the background image; this will allow non English users to change the language to whatever they want.

I see the appeal of the SunSmart logo, but did not use it on mine (yet anyway). I might add the logo to my repo though to allow others to add the picture if they want to; it would be done the exact same way I do the logos in the center of the gauge. User just needs to change position to where they want it. Order in the picture elements yaml determines what goes on top of what; lower down on the list is higher on top.

I would like to figure out how to make multiline state-labels that are not a disaster. I attempted a max word limit css new lines; nothing worked well if at all.

Anyway, your work has made my dashboard look so much better. I have had many people comment on how good they look; so I might as well let you know you stated all this.

1 Like
11

I love it. looks very nice