Do you have card-mod installed?
Yes, I have it installed
Then check again. Copy / paste exactly my code, check if the input_number is created.
Check whether you card-mod working with a simple examples, is it of the latest version.
Paste that code into the Template (dev-tool):
{% set ANGLE = states('input_number.test_number') + 'deg' %}
{{ANGLE}}
See what it returns:
Hi!
I have card-mod 3.1.5 installed and tested with simple rotate and translate examples. I came across this post and I´m also trying to achieve something like this. I tried your code and on the Template (dev-tool) that code works as expected but does not work when using it on the card configuration.
I´m a newbie so I don´t know if it has something to do with the variable “–my-transform-style” because I tried modifying the variable so that it would rotate 15deg instead of using the “ANGLE” value and didn´t rotate either.
Thanks for your help! Really appreciate it!
… and where is your code?
I tried yours first then mine. Here´s mine
type: picture-elements
style: |
ha-card {
{% set ANGLE = states('sensor.pitch') + 'deg' %}
--my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
}
elements:
- type: state-badge
entity: sensor.front
style:
top: 84%
left: 50%
transform: var(--my-transform-style)
image: >-
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbI_TB-oQI1xUV4iHDzRDf7ocC-F09qP6nHw&usqp=CAU
What I´m trying to do is an inclinometer. So at the end what I want to accomplish is having a couple images rotate according to roll and pitch values coming from a sensor.
Thanks!
- type: picture-elements
style: |
ha-card {
{% set ANGLE = states('input_number.test_number') + 'deg' %}
--my-transform-style-2: translate(-50%,-50%) rotate({{ANGLE}});
height: 150px !important;
}
elements:
- type: state-badge
entity: sensor.processor_use
style:
top: 20%
left: 50%
transform: var(--my-transform-style-2)
image: /local/images/blue.jpg
2 Likes
What browser do you use?
Recently I realized that Safari does not understand some CSS )))
Open Code inspector and check if the style is applied to the element.
If it reports an error like “wrong value” or “wrong property” - then it means that this browser does not understand it, you need to find another way…
At least this code works in Win+Chrome, iPadOS, Win+FF.
Check if the output of gives valid numbers.
Yes that code gives the correct output of the value of the sensor and I’m using Windows 10 with Chrome browser. If I don’t use use the variable and set the degrees to a fixed value it works correctly so that’s why I’m assuming the problem might be the variable
Copy/paste my code with input_number - does it work?
Actually, what I did is:
- took you code;
- replaced
sensor.pitchwith my helper; - replaced your image & a sensor for the badge.
And the code is working.
Also, try it with a default theme.
It is finally working after a reboot and finishing other things.
Thanks a lot
Ok I tried it with a default theme and didn´t work. Then I noticed my sensor output had 1 decimal. Changed it to 0 decimals and now IT IS WORKING!!!
Thanks for your time and sharing your knowledge!
One last question: On a Picture Elements Card, can I rotate the background image with the same method? How?
Thanks again!
You only can do it by using “pure card-mod” - but results may not satisfy you:
type: vertical-stack
cards:
- type: picture-elements
elements:
- type: state-icon
entity: sun.sun
style:
top: 50%
left: 50%
image: "/local/images/blue_low_2.jpg"
- type: picture-elements
elements:
- type: state-icon
entity: sun.sun
style:
top: 50%
left: 50%
image: "/local/images/blue_low_2.jpg"
card_mod:
style:
hui-image $: |
img {
transform: rotate(45deg);
}
Thanks for the tutorial which helped al lot. So far I did not manage to display the entity’s name. I can show state-label as well as state-icon, but is there a way to show the entity name or write a name as I’d prefer names instead of icon in this case?
best Florian
Consider using Entities card for displaying icon/name/states - w/o a border, with transparent background, with defined width.
That’s what I used so far, but no option for a background image, right?
Use card mod to set transparent background and removing borders and any other styling
I’m trying to recreate an Apple Remote using Photoshop by exporting each layer individually for each button. I thought this would be the best way since it would preserve the exact base dimensions for the base image and overlaid image elements (i.e. autoscale), but it appears that the picture elements card resizes image elements. Is there a way around this so that the elements scale in relation to the base image?
Photoshop
Picture Elements Card Configuration
There are width and height parameters you can set in style. Not sure that’s what you’re looking for but that’s how I set my doors and windows to scale off of a green or red rectangle.
- type: image
entity: binary_sensor.l_gate_opened
state_image:
"on": /local/redwall.png
"off": /local/greenwall.png
"unknown": /local/red_x.png
"unavailable": /local/red_x.png
style:
top: 93%
left: 5%
width: 6%
height: 1%
@bigscience Thanks. I’m aware of those parameters and was able to get it to look right, but if the picture element is already at the same scale as the base picture, why is it resized to begin with?
