How to rotate image in picture glance card

Configuration Frontend
1

I cannot seem to get the yaml correct to make a picture-glance card with the picture right-side up!
cards:
- entities:
- entity: switch.06200046bcddc2e96358
title: Living Room
type: picture-glance
image: /local/Livingroom.jpeg
style:
transform: rotate(180deg)
It might not be possible. Is there a better way to achieve this type of look?

Thanks!
upside%20down

2

Also, I used the snippets and it looks like I can’t figure out how to use it to achieve clear formatting.

3

Leave a blank line between your code and the text above before highlighting and pressing the code format button.

Alternatively surround your code with three tic marks ( the key between tab and escape) in lines above and below your code. This method has the advantage of syntax highlighting.

4

move to Australia? I don’t think you can the way you have it configured. If you had it configured as a camera, I think you could get this working. It appears you have it creating an image in a directory then posting that image. Is there a way to rotate the image from the camera side?

5

:joy::rofl::joy::rofl:

1 Like
6

Seriously how did you manage to setup HA if you cant workout code snippet?, which has the instructions at the top of every page?

That being said there is no style option on picture-glance. Am i missing something here? why not just edit the image and rotate it?

7

So this is your version of being helpful? If you see the answer provided by tom_I AND read the instruction at the top you will see that the key spacing is not communicated. If ever there was a barrier to general uptake of HA, it is communication and clarity, and perhaps some kindness.

8

AFAIK, picture-glance card does not support ‘style’.
If you stay with picture-glance card, you may want to look into card-modder to do that.

Or you can try picture-element cards like image which support style.

9

I am still getting an upside down image on Chrome but rightside up on iOS app. I used the 3x tic marks - thanks tom_I

So the problem remains that the image is upside down in Chrome, however, it is right-side up in the iOS app. Thus rotating at source wouldn’t solve anything. Does anyone understand the origin of this problem?

image%20on%20iphone
image%20on%20iphone739×1600 139 KB

Code below (thanks tom_I):

      - entities:
          - entity: switch.06200046bcddc2e96358
        title: Living Room
        type: picture-glance
        image: /local/Livingroom.jpeg
10

That sounds very much like some form of exif data on the picture which one of the browsers ignore, and the other doesn’t.

I think there are services online where you can upload your picture and have all exif data stripped. After that it should be consistent between browsers, and then you can look at making it right side up.

11

removing the exif at https://www.verexif.com/en/ did indeed make them render the same on both devices, just upside down. The web was on chrome and presumably the iOS is using a safari platform. However, if I open the image directly in Chrome, it is right side up (even with EXIF stripped). It isn’t clear why HASS on Chrome is behaving differently than chrome by itself.

I opened the file in gimp and exported to .png and used advanced options to not save exif and xmp data. worked like a charm.

Thanks thomasloven and tom_I for teaching me something new that I didn’t know.

12

Card-modder looks impressive but might take some time to get into. I’ll check it out! Thanks JTPublic

13

So if this truly isn’t a camera and just an image, why didn’t you just rotate the image? Just wondering

14

I assume you mean without removing the exif. Because either the iOS or the desktop Chrome version would always be upside down. Once exif was removed, image was consistent between two platforms and could be rotated if needed.

15

Well here I object it’s not a solution. What if you have a webcam on your 3D-printer from a PC then a rotate of 90 deg. will be in place

image