Rotate WebCam feed (mjpeg) in a Lovelace

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?

3 Likes

Cool - that looks promising

You are a champ - Thanks!

image

image

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
4 Likes

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?

1 Like

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.

  1. SSH into the RasPi of Octoprint, e.g. ssh [email protected]
  2. Open the file /boot/octopi.txt, e.g. sudo nano /boot/octopi.txt
  3. Add the following lines, it doesn’t matter where exactly:
camera="raspi"
camera_raspi_options="-rot 90"  # or 180, 270..
  1. Exit and save the file, then reboot the RasPi

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!

3 Likes

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);
      }

2 Likes

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.

4 Likes

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.