Picture-Elements-Card: How to scale State-Badges?

Configuration Frontend
1

Hello,
I have problems with my floor plan right from the start years ago…
It can be viewed in the preview, on a desktop and on a mobile and all look completely different because of scaling issues.

So far I got images to scale thats fine.
To scale icons I found this:

But I dont use them anymore.
I got text to scale, but that destroys the preview and is ugly.
Now I want to replace my text (temperatures etc.) with state-badges, but they dont scale at all.

Is the a way to get state-badges to scale?

I am really happy about all the new functions and features but I am absolutely puzzled why nobody adresses scaling for 6 years now… there are many posts about this problem but rarely any solutions…

Regards
Martin

2

There’s some background on why dashboards behave as they do here:

It’s been a “mobile first” project from the beginning - and it’s only in the last few years that dashboards, wall tablets, “magic mirrors” and the like have become a concern.

I think the answer to your question is… You can’t. And the current method of doing things is so embedded in the way HA works it’s unlikely to change any time soon.

3

Scaling explained here

4

Thanks for the answers, I read the articles but that did not enable me to solve my problem.
I did not do any web projects since 2012 so my knowledge is rather old^^

What I need is basically a value for Scaling that changes dynamically depending on the viewport.
The following things I was able to get from the articles:

1.)

card_mod:
      style: |
        ha-card {
          {% if is_state('input_boolean.test_boolean','on') %}
          --my-transform-style: translate(-50%,-50%) rotate(-0.25turn);
          {% else %}
          --my-transform-style: translate(-50%,-50%)
          {% endif %}
        }

I could create this my-transform-style but the if is checked within HA, not on the device. The information is there because I use Browser-Mod.
But I would need to:

  • create a list of all devices in Browser-Mod
  • check which of these have a binary-sensor with the same name as the device that is currently on and the sensor Browser-User’s value needs to be the name of the currently logged in user on my viewing device
  • take the first item from the list and return Browser Width
    I have no Idea how to write that kind of code within HA so next idea…

2.) I could use “mediaquery”, but I have no idea what the correct syntax is and how to combine that with my picture elements card-

3.) I could use card-mod and style like so:

type: picture-elements
card_mod:
  style: |
    ha-card 
    {
      @media (min-width: 1921px) and (max-width: 3840px) {
        --my-transform-style: translate(-50%,-50%) scale(0.1,0.1);
      }
      :|
      @media (max-width: 500px) {
        --my-transform-style: translate(-50%,-50%) scale(0.5,0.5);
      }
    }

and:

- entity: sensor.hmip_wth_2_000a9f298a14bc_actual_temperature
    style:
      left: 40%
      top: 1.5%
      transform: var(--my-transform-style)
    type: state-badge

But I probably got the syntax all wrong it does not work at all.

4.)

The best solution for me would be using this:

style: |
      ha-card {
        {% set ANGLE = states('input_number.test_number') + 'deg' %}
        --my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
      }

With scale instead of angle and somehow get the viewport width of the browser from somewhere….

What is the best solution?

Regards
Martin

5

I got solution 2.) to work.

card_mod:
  style: |
    ha-card 
    {
      @media (min-width: 1921px) and (max-width: 3840px) {
        --my-transform-style: translate(-50%,-50%) scale(1.8,1.8);
      }
      @media (min-width: 601px) and (max-width: 1920px) {
        --my-transform-style: translate(-50%,-50%) scale(0.8,0.8);
      }
      @media (max-width: 600px) {
        --my-transform-style: translate(-50%,-50%) scale(0.5,0.5);
      }
    }

2 problems:

  1. It does not work in the preview, because it is not fullscreen and the width of the monitor is meaningless there, same problem as with my scaled text, i would need the width of the actual card
  2. I would rather use a formula like scale = width/constant but I do not know the syntax for that.