Picture elements and templating

Configuration Frontend
1

Hello everybody.
I’m trying to make a sort of X-Y graph over a background picture, positioning a badge on it, by passing the values of a couple of sensors to the properties top and left.
Is there any way to add templates or another way to forward the sensor’s value to the top and left properties?

Thank you in advance

2
  • type: state-label
3

Hi, could you be more specific? As far as I see, state-badge and state-label have the same features regarding to the top and left properties. None of them are accepting template :expressionless:

4

Sorry i didn’t focused on the “template” part as i use i.e temp / power sensors in state-labels ( a sensors value, is a sensors value, regardless if it’s a self made template sensor )

In it’s simplest form ( but you can place it where ever, and style it in many aspects also )
17.08.2023_09.34.03_REC

But maybe you could be more specific, by i.e showing a picture of what you are trying to accomplice, and maybe together with your code (not picture of code)

5

I think you need to use config-template-card to template those. Have a search on here there’s a few posts about it

This config has some picture-elements templating:

6

Sounds like he “only” want to “show/passing” some sensors Value, in the top/left, … no need to place picture-element in config-template-card for that , i worse case create a template-sensor, and place it where ever … And a short “over-view” of your example seems like “Styles” which can be accomplice by " style: or card_mod: " direct in Picture_Element_card

7

Thank you all for the suggestions. I’ve solved the issue by using custom-button-card. It lets using jinja templates.

custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.dew_atc_looby'].state < 10)
              return "black";
             if (states['sensor.dew_atc_looby'].state <= 12.8 && states['sensor.dew_point'].state >= 10)
              return "blue";
             else return "white";
          ]]]
      - border-radius: 50%
      - position: absolute
      - left: |
          [[[ return (states['sensor.average_appartamento'].state) + '%']]]
      - top: |
          [[[ return (states['sensor.average_appartamento_h'].state) + '%']]]

Now I need to look for a “mapping” function to transform coordinate values. I mean the upper left corner has a value of 11.5 meanwhile it should be 21. The upper right corner has 37 meanwhile it should be 88.5. To be clear a function type “map” in Arduino , e.i.

map(value_to_be displayed, max_on graph, min_on graph, max_on variable, min_on variable)

Any lead?

8

I assumed they wanted to template the left and top style which does need config-template-card

EDIT: Yes left and top templating

1 Like
9

I’ve found the function I needed. I’m sharing it in case somebody could need it

long map(long x, long in_min, long in_max, long out_min, long out_max)
{
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}