I have connected my HA to my OctoPi with a USB WebCam attached. In OctoPi I can rotate the WebCam feed but the feed I have in HA is not rotated. But how could I do that?
I have tried to put in Style element and transform: rotate(90deg) but nothing happens or I have entered something wrong:
Physically rotate the camera?
Hehe yes - that will not happen - it must be possible to make a rotate of a picture otherwise I will simply just skip using or integrating OctoPrint to my Home Assistant.
Maybe use card-mod to apply the transform?
Cool - that looks promising
You are a champ - Thanks!
Could you show me your complete code for the camera? I installed the Mod but am unable to rotate the card.
Here is my card setup
aspect_ratio: 73%
camera_image: camera.octoprint
camera_view: live
entity: camera.octoprint
image: /local/img/3dprinter.png
show_name: false
show_state: false
style: |
ha-card {
transform: rotate(90deg);
}
type: picture-entity
And here the setting in my configuration.yaml:
camera:
- platform: mjpeg
name: OctoPrint
still_image_url: !secret geeetech_camera_still_url
mjpeg_url: !secret geeetech_camera_stream_url
I’m trying to use this to rotate text in a Picture Elements card and all it seems to do is make the text disappear. I’ve also tried putting the color: and left: right: within the {} but it makes no difference. Any suggestions?
- entity: sensor.panel_122008049772_efficiency
style: |
ha-card {
transform: rotate(90deg);
}
color: white
left: 84%
top: 71%
type: state-label
Well I have no clue
I have tried to use the card-mod to apply the transform (I’m not an expert of the css)
I’m able to rotate the image shown in the picture-entity (still image), but if I click on the image it’s shown the live preview where the orientation is the original and not the changed.
I have tried to add also a style for the ha-dialog (I’m not sure if the syntax is correct)
....
style: |
ha-dialog {
transform: rotate(180deg);
}
ha-card {
transform: rotate(90deg);
}
type: picture-entity
How I can apply the rotation also to the live preview shown in the dialog?
You can rotate the webcam feed directly on the RasPi that Octoprint runs on, so there is no need to rotate/transform lovelace cards. However, this only works for the Raspberry Pi camera module and not external USB cameras.
ssh [email protected]
sudo nano /boot/octopi.txt
camera="raspi"
camera_raspi_options="-rot 90" # or 180, 270..
When using the plugin TheSpaghettiDetective, the file octopi.txt is skipped, so it has to be disabled/deactivated for this approach to work. It is also possible to change similar setting in TheSpaghettiDetective as well when using compatibility mode.
The documentation and additional configurable parameters can be found here:
Hope this helps!
did you find a solution, since i am also at the same problem?
Fyi I found the rotation animation quite annoying:
style: |
ha-card {
transition: transform 0s;
transform: rotate(180deg);
}
Also, if you want to rotate only the camera image and not the whole card, use this:
style: |
hui-image {
transition: transform 0s;
transform: rotate(180deg);
}
That way you can keep other card elements like title, buttons, stats, actions in the correct orientation.
This helps a lot. Thank you.
Did you find a way to rotate the video when clicking the image?
When I check the dashboard it looks fine, it’s rotated, but when I click the picture to get a biger video, then the stream is back to be upside down.
@MrBorg, maybe you have a solution for this?
Sorry, no I’m not clicking the image. I just use the imbedded video to see how the printing is going.