Rotate WebCam feed (mjpeg) in a Lovelace

Configuration Frontend
#1

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:

image
image897×307 87.5 KB

image
image889×343 87.7 KB

Rotate text in Picture Elements card
DIY Video Doorbell with Voice Response | ESPHome / ESP32 Camera / DFPlayer Mini
#2

Physically rotate the camera?

#3

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.

#4

Maybe use card-mod to apply the transform?

2 Likes
#5

Cool - that looks promising

#6

You are a champ - Thanks!

image

image

#7

Could you show me your complete code for the camera? I installed the Mod but am unable to rotate the card.

#8

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
#9

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
#10

Well I have no clue

#11

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
#12

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!

2 Likes
Mjpeg camera rotation?
#13

did you find a solution, since i am also at the same problem?

#14

Fyi I found the rotation animation quite annoying:

    style: |
      ha-card {
        transition: transform 0s;
        transform: rotate(180deg);
      }
1 Like