Gauge Card mirroring

Configuration Frontend
1

Is it anyhow possible to mirror a gauge card so that zero is on the right side and the needle goes to the left?

2

Try card-mod, some “transform” functions… You will have to learn css.
Alternatively - use a “mirrored” entity (example: if a source entity =33%, then a “mirrored” entity =67%); but seems that you need to show an original value…

Card-mod:

    card_mod:
      style:
        ha-gauge $: |
          .gauge {
            transform: rotateY(180deg);
          }

Example:

image
image480×480 16.6 KB

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_level_1
  - &ref_gauge_card
    type: gauge
    entity: input_number.test_level_1
    needle: true
    segments:
      - from: 0
        color: green
      - from: 34
        color: orange
      - from: 67
        color: red
  - <<: *ref_gauge_card
    card_mod:
      style:
        ha-gauge $: |
          .gauge {
            transform: rotateY(180deg);
          }
3

You’re estimation is absolutely correct! I want to show the sun elevation on the gauge card. When I’m sitting in front of my computer or in the garden I always lock to the east. So the sun is on the right hand. Showing the angle of the sun from right to left and the angle of my PV-Panels from left to right is a correct illustration of the reality.

Thanks for the solution. The CSS instruction is as easy as always - as long as you know the statement(s) to use …

4

Perhaps same is for everything)))

5

I am familiar with CSS - and I could have asked Chattie to help me find the statement. But discussing it here gives a value for everyone who will have the same problem in future :innocent: