Rotating the screen through custom css (saving performance)

Hello guys,

if you’re running on low end hardware e.g. Raspberry Pi and want to rotate the screen you can rotate it with a custom css file, thus saving precious performance!

Copy paste this code to your custom.css file for a screen rotation of 90degrees:

 body {
        margin: 0;
	position: absolute;
 	transform: rotate(90deg);
 	transform-origin: bottom left;
	width: 100vh;
	height: 100vw;
	object-fit: cover;
	top: -100vw;
        visibility: visible;
 }

Copy paste this code to your custom.css file for a screen rotation of -90degrees:

 body {
	margin: 0;
	position: absolute;
 	transform: rotate(-90deg);
 	transform-origin: top left; 
	width: 100vh;
	height: 100vw;
	object-fit: cover;
	top: 100vh;
        visibility: visible;
 }

Also note that you may have to switch back framebuffer_width and framebuffer_height in your /boot/config.txt file as stated by evroom here, e.g.:

framebuffer_width=1600
framebuffer_height=900

Drawbacks:

• since it only rotates the magic mirror app, external apps like omxplayer have to be rotated seperately
• you may have to edit the css file of some modules as well

This could be added to the wiki here.

@j-e-f-f thank you! Of course you can

@evroom Yes, I did rotate it counter clockwise.

I found a solution that worked for my setup, rotating the screen 270:

 body {
	margin: 0;
	position: absolute;
 	transform: rotate(-90deg);
 	transform-origin: top left; 
	width: 100vh;
	height: 100vw;
	
	object-fit: cover;
	top: 100vh;
        visibility: visible;
 }

Tell me if that worked for you. Then I`ll update the post

Adjusting the omxplayer orientation is one of the drawbacks.

@keyun21 Correct, just give it a go and see what happens Just delete the lines if something strange occours.

@justjim1220 Thanks for sharing!

Only disadvantage here is that you may have to change the styles of other modules, for example the Snow module doesn’t work right of the bat I think.

Also note that there might be a better way to code it, since I just googled how to rotate with CSS

Rotating the screen through custom css (saving performance)

Hello guys,

if you’re running on low end hardware e.g. Raspberry Pi and want to rotate the screen you can rotate it with a custom css file, thus saving precious performance!

Copy paste this code to your custom.css file for a screen rotation of 90degrees:

 body {
        margin: 0;
	position: absolute;
 	transform: rotate(90deg);
 	transform-origin: bottom left;
	width: 100vh;
	height: 100vw;
	object-fit: cover;
	top: -100vw;
        visibility: visible;
 }

Copy paste this code to your custom.css file for a screen rotation of -90degrees:

 body {
	margin: 0;
	position: absolute;
 	transform: rotate(-90deg);
 	transform-origin: top left; 
	width: 100vh;
	height: 100vw;
	object-fit: cover;
	top: 100vh;
        visibility: visible;
 }

Also note that you may have to switch back framebuffer_width and framebuffer_height in your /boot/config.txt file as stated by evroom here, e.g.:

framebuffer_width=1600
framebuffer_height=900

Drawbacks:

• since it only rotates the magic mirror app, external apps like omxplayer have to be rotated seperately
• you may have to edit the css file of some modules as well

This could be added to the wiki here.

@cr4z33 that’s most likely a versioning problem with puppeteer and chromium.
I assume you already did:

cd ~/MagicMirror/modules/MMM-MusicOnDemand
npm install puppeteer@1.11.0

Please check your chromium version. My version is the latest one: version 65.0.3325.181.
If it’s not, try:

sudo apt-get install chromium-browser

And check that your chromium path in the config file is “/usr/bin/chromium-browser”, which I guess it is. Because on Raspberry Pi the browser of puppeteer isn’t working.

If that’s also not launching your browser I honestly don’t know why

In the latest build I added the option “showBrowser” in the config-file. If you set it to true, you are able to see the browser and what it is doing in the browser.

@cr4z33 with puppeteer you can control the browser with Javascript. But it will install a version of chromium inside the puppeteer folder which you can delete to save space if you use the preinstalled chromium of raspbian

That’s strange.
Try cd in the MusicOnDemand folder and then:
npm install puppeteer@1.11.0

Thanks for pointing that out! The dependencies in the package.json weren’t set. I uploaded a changed version but unfortunatley this build won’t work for me right now, so I have to do a deeper look into it.
Edit: It`s again working on the new build, was a problem with the puppeteer version and the chromium version installed on raspbian.

Description:

This module allows you to play music from Deezer with puppeteer. That means you need at least a free account from Deezer. It is meant to be used with a speech recognition module like MMM-AssistantMk2, but it should work with other modules as long as you send the correct notifications as described in de README of the project.
It acutally plays the music on the machine this module is running on. So you don't have to use a other device to play music with a music on demand service e.g. on Raspberry Pi.
Enjoy

Screenshots:

Download:

GitHub

Version 1.01

• Force installs puppeteer v1.11.0

Version 1.0

• Initial Release, confirmed working on Raspberry Pi 3b+