Scaling an element:
Scaling is achieved by using a "scale()" filter.
Better to use with the "translate(-50%,-50%)" filter as it was explained above.
In the example below the first scaling(0.5, 0.5) is defined w/o using the "translate(-50%,-50%)" filter, other scalings are defined with it. It is clearly seen that the 1st scaled element changed it’s position.
Note: other methods to change an element’s size:
- state-badge - changing a badge’s size (link);
- state-badge, state-label, service-button - changing a font-size (link);
- state-icon, icon - changing an icon’s size (link);
type: picture-elements
title: ''
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 12%
left: 10%
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 12%
left: 30%
transform: scale(0.5,0.5)
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 12%
left: 60%
transform: translate(-50%,-50%) scale(1.5,1)
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 12%
left: 85%
transform: translate(-50%,-50%) scale(1,1.5)
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 31%
left: 10%
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 31%
left: 30%
transform: scale(0.5,0.5)
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 31%
left: 60%
transform: translate(-50%,-50%) scale(1.5,1)
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 31%
left: 85%
transform: translate(-50%,-50%) scale(1,1.5)
- type: icon
icon: mdi:car
style:
top: 43%
left: 10%
- type: icon
icon: mdi:car
style:
top: 43%
left: 30%
transform: scale(0.5,0.5)
- type: icon
icon: mdi:car
style:
top: 43%
left: 60%
transform: translate(-50%,-50%) scale(1.5,1)
- type: icon
icon: mdi:car
style:
top: 43%
left: 85%
transform: translate(-50%,-50%) scale(1,1.5)
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 58%
left: 10%
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 60%
left: 30%
transform: scale(0.5,0.5)
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 60%
left: 60%
transform: translate(-50%,-50%) scale(1.5,1)
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 60%
left: 85%
transform: translate(-50%,-50%) scale(1,1.5)
- type: service-button
title: Command
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
style:
top: 75%
left: 10%
- type: service-button
title: Command
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
style:
top: 75%
left: 30%
transform: scale(0.5,0.5)
- type: service-button
title: Command
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
style:
top: 75%
left: 60%
transform: translate(-50%,-50%) scale(1.5,1)
- type: service-button
title: Command
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
style:
top: 75%
left: 85%
transform: translate(-50%,-50%) scale(1,1.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 90%
left: 10%
- type: image
image: /local/images/small_pic.jpg
style:
top: 90%
left: 30%
transform: scale(0.5,0.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 90%
left: 60%
transform: translate(-50%,-50%) scale(1.5,1)
- type: image
image: /local/images/small_pic.jpg
style:
top: 90%
left: 85%
transform: translate(-50%,-50%) scale(1,1.5)
image: /local/images/white.jpg
Changing an origin point:
There is some issue with scaling - and it is better to show it with images.
By default the scaled image is scaled “from its center” - that means that original and scaled images are centrally aligned.
To change it, a "transform-origin" function is used.
On the example below:
- the 1st row is with original images;
- the 2nd row is with scaled images (except the left image) - and the scaled images are centrally aligned with respect to the left image and to images on the 1st row;
- the 3rd row is with scaled images (except the left image) - and the scaled images are centrally aligned with respect to the left image and left-aligned to images on the 1st row;
- the 4th row is with scaled images (except the left image) - and the scaled images are top-aligned with respect to the left image and centrally aligned to images on the 1st row.
type: picture-elements
card_mod:
style: |
ha-card {
height: 550px !important;
}
elements:
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 15%
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 45%
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 80%
- type: image
image: /local/images/small_pic.jpg
style:
top: 30%
left: 15%
- type: image
image: /local/images/small_pic.jpg
style:
top: 30%
left: 45%
transform: translate(-50%,-50%) scale(1.5,1.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 30%
left: 80%
transform: translate(-50%,-50%) scale(1.5,1.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 50%
left: 15%
- type: image
image: /local/images/small_pic.jpg
style:
top: 50%
left: 45%
transform-origin: left
transform: translate(-50%,-50%) scale(1.5,1.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 50%
left: 80%
transform-origin: left
transform: translate(-50%,-50%) scale(1.5,1.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 70%
left: 15%
- type: image
image: /local/images/small_pic.jpg
style:
top: 70%
left: 45%
transform-origin: top
transform: translate(-50%,-50%) scale(1.5,1.5)
- type: image
image: /local/images/small_pic.jpg
style:
top: 70%
left: 80%
transform-origin: top
transform: translate(-50%,-50%) scale(1.5,1.5)
image: /local/images/white.jpg
Another example - 4 images, 3 of them scaled with using "transform-origin: left top":
Note: a "border: 1px solid black" style is used for make image’s border look more clear.
type: picture-elements
card_mod:
style: |
ha-card {
height: 250px !important;
}
elements:
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 15%
transform-origin: left top
transform: translate(-50%,-50%) scale(3.5,3.5)
border: 1px solid black
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 15%
transform-origin: left top
transform: translate(-50%,-50%) scale(2.5,2.5)
border: 1px solid black
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 15%
transform-origin: left top
transform: translate(-50%,-50%) scale(1.5,1.5)
border: 1px solid black
- type: image
image: /local/images/small_pic.jpg
style:
top: 10%
left: 15%
border: 1px solid black
image: /local/images/white.jpg
Large images’ auto-scaling:
There is one more issue regarding scaling - for images whose width is larger than a card’s width (actually, larger than a space available for an image) with "translate(0,0)".
These images are automatically scaled to fill all available area to the right (keeping aspect ratio):
The example below contains 3 same images:
- the 1st image is placed to the left top corner with
"translate(0,0)" filter and fills the whole card to the right (keeping aspect ratio);
- the 2nd & 3rd images are shifted to the right and fill the remained area to the right (keeping aspect ratio).
type: picture-elements
card_mod:
style: |
ha-card {
height: 450px !important;
}
elements:
- type: image
image: /local/images/pink.jpg
style:
top: 0%
left: 0%
transform: translate(0,0)
border: 1px solid black
- type: image
image: /local/images/pink.jpg
style:
top: 0%
left: 30%
transform: translate(0,0)
border: 1px solid black
- type: image
image: /local/images/pink.jpg
style:
top: 10%
left: 60%
transform: translate(0,0)
border: 1px solid black
image: /local/images/white.jpg
Oddly this happens with "translate(0,0)" and does not happen with "translate(-50%,-50%)" (haven’t checked with other combinations).
For example, I cannot explain these cases:
a) Here an image (904x679) with "translate(-50%,-50%)" occupies half of the available area (although it’s width is more than twice bigger than the card’s width):
type: picture-elements
elements:
- type: image
image: /local/images/test/pink_mask.png
style:
top: 0%
left: 0%
transform: translate(-50%,-50%)
image: /local/images/test/blue.jpg
b) Here the same image is placed in the card’s center and also does not occupy the whole available area:
type: picture-elements
elements:
- type: image
image: /local/images/test/pink_mask.png
style:
top: 50%
left: 50%
transform: translate(-50%,-50%) scale(1,1)
image: /local/images/test/blue.jpg
