Can't get Emby Theater display to rotate. Need help.

[them8os235 16]

Hello,  

I'm using a 7" display case which requires a 180 degree rotation.  I've tried all of the following: 

In config.txt:

display_rotate=2
display_lcd_rotate=2
lcd_rotate=2
dtoverlay=vc4-kms-dsi-7inch,invx,invy

(some do rotate the boot text and spash screen)

And in LXDE-pi/autostart:

# Force DSI-1 output
output "DSI-1" {
    mode "800x480" {
        rotate "normal"
    }
}

But the Emby Theater / LXDE desktop isn't rotating.  Does anyone know what I need to do?

Thanx

[Luke 37066]

Hi, what exactly isn’t rotating?

[them8os235 16]

Hi there. Pictured in the attachments are...  As the pi boots, you see the splash screen is rotated 180 degrees to render correctly and upright, as a result of the lcd_rotate=2 property I added to config.txt. 

But then when emby theater starts, it will only render in the default orientation.  But which due to the case design, is upside-down.  None of those setting that would normally flip/rotate display orientation are effective.

Hoping one of you good folks know what I can define to control the display orientation of the LXDE desktop to flip it 180 degrees.

[them8os235 16]

3 hours ago, Luke said:

Hi, what exactly isn’t rotating?

Hi Luke.  Quoting you here only so you get a notification that I replied and provided the info you requested, but it's in the previous post. I forgot to quote you in that response, so doing it here. 

[Luke 37066]

OK so the webview is handled by electron. We'll look into what it supports regarding orientation. Thanks.

[them8os235 16]

37 minutes ago, Luke said:

OK so the webview is handled by electron. We'll look into what it supports regarding orientation. Thanks.

Much thanx!  

[them8os235 16]

On 11/19/2023 at 9:59 PM, Luke said:

OK so the webview is handled by electron. We'll look into what it supports regarding orientation. Thanks.

Hello.  Reaching out to ask if anyone had a chance to look into this?  I'm already 'overstocked' with RPi cases and was hoping to not have to buy a SmartiPi,(which doesn't mount the display upside-down).  But if there's no simple Electron config option change available to address the rotation, I'll go ahead and do that.  Please advise.  Much thanx for the assist.

p.s.  I did find this, having a rotation property:  https://www.electronjs.org/docs/latest/api/structures/display  So I guess I can alter a javascript file to add the rotation property value I want?

Edited December 1, 2023 by them8os235

[them8os235 16]

p.p.s. Okay, so I have time on my hands and got curious...  So I looked into your emby-theater-electron github code repo and the Electron API.  Unfortunately while 'rotation' is in Electron Display Object (https://www.electronjs.org/docs/latest/api/structures/display), I don't see it as a options property in the Electron Object:

BrowserWindow([options])

https://www.electronjs.org/docs/latest/api/browser-window#class-browserwindow

I was figuring one would want to setup rotation within your main.js file's windowOptions statement:

var windowOptions = { 
  ...existingOptions...,
  rotation: 180
}

...which is then passed to the window creation statement:  

mainWindow = new BrowserWindow(windowOptions);

 

It seemed this would have gotten us most cleanly to initialize emby-theater in a rotated state.  But as mentioned since the Electron BrowserWindow options list doesn't include rotation, does this above at least spur your thinking as to where the Display object can be easily exposed to allow me to modify my emby-theater instance and rotate it?

 

Edited December 1, 2023 by them8os235

[them8os235 16]

 

Thought I'd mention.  According to Bard, I need to use CSS.  However, I'm not finding a 'main.html' (or similar) file, or CSS files under /opt/emby-theater/electron/resources/app. 

If I learn of the mechanics of Electron I might be able to figure this out.   But, happy to get a leg-up and immediate answer from you Luke if you have one.  

 

Quote

Question: I am using the Javascript Framework named Electron.  
1. The Display Object includes a property named rotation, to represent the rotation of the screen.  
2. When creating a new BrowserWindow, the constructor accepts a list of properties as new BrowserWindow([options]). 

However I cannot find where the two overlap.  I need to create a new application window using new BrowserWindow(options), and specify that the display of the output initialize with a 180 degree rotation.  Can you tell me how I can achieve that?

 

Quote

Answer: Unfortunately, Electron currently lacks native support for rotating BrowserWindow displays directly. However, there are workarounds to achieve a similar effect depending on your platform and requirements.

Workaround 1: CSS Transforms:

This approach involves applying CSS transforms to the web content displayed within the BrowserWindow. You can achieve this by adding the following CSS styles to your HTML document:

CSS

body {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

Use code with caution. Learn more

content_copy

Benefits:

• Simple and easy to implement.
• Works across all platforms supported by Electron.

Drawbacks:

• Rotates the entire web content, including any embedded elements like images and videos.
• Might cause visual glitches or unexpected behavior for certain elements.

 

(removed Workaround 2 as that method is code only that rotates only video, not the whole UI/UX)

 

Edited December 1, 2023 by them8os235

[Luke 37066]

Hi, this is on our list for review but I don't have a quick answer for you right now. 

It might be possible to write some JavaScript that will inject CSS and apply the rotation,  but I don't think this is a good approach for a number of reasons. For one, some elements in the UI position themselves separately and there's no guarantee that the rotation would end up applying to them.

And second, doing it this way would only apply to the user interface and not the video player.

[them8os235 16]

54 minutes ago, Luke said:

Hi, this is on our list for review but I don't have a quick answer for you right now. 

It might be possible to write some JavaScript that will inject CSS and apply the rotation,  but I don't think this is a good approach for a number of reasons. For one, some elements in the UI position themselves separately and there's no guarantee that the rotation would end up applying to them.

And second, doing it this way would only apply to the user interface and not the video player.

Thanks.  Glad to hear it made it to your backlog.

Yes too, I get it.  I was only looking at doing a hot-fix presently, tweeking mechanisms in place already, if it's even possible.  Speaking also for only this one use case I have atm, it's for music-only, no videos at all.  So a compromised incomplete solution you'd never check in to github  for public consumption would be okay for me, atm.   

Given then that a comprehensive approach to rotation is still an unknown, I'll then buy a different RPi case. I want to deliver the two emby theater players to my friend sooner than later.  Thank you for the update.