Manage gauge sensor

Configuration
1

Good morning.
I have a problem with a simple gauge…
My goal is to have it the same size as the button next to it (120x70px).
Thanks to the contribution of another user in another thread I managed to get here:
immagine

type: gauge
entity: sensor.lastricosolare_temperaturaacqua
name: Temperatura acqua
card_mod:
  style:
    .: |
      .name {
        font-size: 10px !important;
        background-color: ;
        position: absolute;
        bottom: 25px;
        padding-bottom: 0px;
        padding-top: 0px;
        padding-left: 0px
        padding-right: 0px
        }
    ha-gauge$: |
      svg {
      transform: scale(0.9) translateY(-20px);
      overflow: visible;
      }
      svg text {
      transform: scale(0.4) translateY(-290px);
      }
unit: °C
needle: true
min: -5
max: 50
segments:
  - from: -10
    color: '#FF0000'
  - from: 10
    color: '#FFD700'
  - from: 15
    color: '#43a047'
  - from: 30
    color: '#FFD700'
  - from: 40
    color: '#FF0000'

What I can’t do is:

  • size the gauge to the desired dimensions (priority);
  • change the font size of the temperature value and its position;
  • change the color of the text and the temperature value
  • change the sensor background
  • add the border.

(Perhaps whit CSS code :crazy_face:)
Thanks for your attention!

1 Like
2

I’ll answer myself:

type: custom:mod-card
card:
  type: gauge
  entity: sensor.lastricosolare_temperaturaacqua
  name: Temperatura acqua
  card_mod:
    style:
      .: |
        ha-card {
          width: 170px;
          height: 100px !important;
          top: 70px;
          padding: 0px 0px 0px 0px;
          background: rgb(75, 75, 75);
          border: 5px solid rgb(0, 0, 0);
          border-radius: 10px;
          box-shadow: 5px -5px 10px -3px rgba(25, 90, 80, 1);
          color: rgb(255, 32, 122);
          --paper-item-icon-color: rgb(255, 32, 122);
        }
        .name {
          font-size: 17px !important;
          font-weight: bold;
          color: white !important;
          position: absolute;
          bottom: 2px;
          padding: 0px 0px 0px 0px;
          }
      ha-gauge$: |
        svg {
        transform: scale(1.1) translateY(-10px);
        overflow: visible;
        }
        svg text {
        transform: scale(1.2) translateY(-20px);
        }
        text.value-text {
          font-size: 50px !important;
          font-weight: bold;
          fill: rgba(255, 255, 224, 1) !important;
          text-anchor: middle;
        }
        .needle {
          fill: white !important;
        }
  unit: °C
  needle: true
  min: -5
  max: 50
  segments:
    - from: -10
      color: '#191970'
    - from: 5
      color: '#FFD700'
    - from: 15
      color: '#00FF00'
    - from: 25
      color: '#FFD700'
    - from: 35
      color: '#FF0000'

immagine

1 Like