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:
sensor.pitch with my helper;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?
So if I’m following you, you made the buttons and background at the right sizes they shouldn’t need any adjustments but they do? I can’t say for sure but my guess is that it puts regular icons in at a normal size and then other pictures at the size of the background. Here you can see my floor plan with the pictures adjusted to the size I want with the height/width settings:
- type: image
entity: binary_sensor.living_room_motion_detected
state_image:
"on": /local/motion_red.png
"off": /local/motion_grey.png
"unknown": /local/red_x.png
"unavailable": /local/red_x.png
style:
top: 60%
left: 88%
width: 5%
If I add in a picture with no scaling, it makes it full size:
- type: image
entity: binary_sensor.living_room_motion_detected
state_image:
"on": /local/motion_red.png
"off": /local/motion_grey.png
"unknown": /local/red_x.png
"unavailable": /local/red_x.png
style:
top: 50%
left: 50%
# width: 5%
You’re addressing my question. I suppose I still don’t understand why it works this way and am trying to determine if it’s a good feature request to have non-CSS scaled picture elements to essentially auto-scale with the background/base image.
Here’s another question. Is there a way to get this card to use the transparency data for the action zones of non-rectangular .png’s used as picture elements?
The picture elements I used are .png’s with transparency, but it appears that this card does not use that information to determine the “action zones” (or whatever they’re called). Here’s a screenshot with the elements’ opacity at 50% (will eventually be set to 0%). My cursor focus is at the top left corner of the info popup which is in the transparent area of the picture element image, but within the horizontal and vertical dimensions of the image.
Try playing with “pointer-events: none” style for elements you do not want to intercept mouse input.
@Ildar_Gabdullin Thank you. But, if I understand that property right, it would also disable mouse clicks on the non-transparent part of the picture element. Is that right? If so, that’s not what I’m after at this time.
Right. An element is rectangular.
In similar circumstances I had to revise a structure of a card (what elements are located on each layer, what is an order of layers, …).
