[Feature Request] Scaling for the Raspberry Pi 7" Touchscreen

[hoffma0901]

I love the extension and I'm using it currently with the Raspberry Pi 7" touchscreen. Is it possible to scale the interface so it fits to the resolution so the whole display is used?

[karoria]

@hoffma0901
Sorry, I read your post now. Your display shows you have wrong zoom (around 50%) in chromium browser. In my case I use 80% zoom and it almost fits the 7" pi display.
Cheers!
Ravi

[miharix]

Hi,

I did sort of fixed this little before you posted this question
master...miharix:cncjs-shopfloor-tablet:master
unfortunately I needed to put this (and other) project on long hold...

This is how mine looks now

The screen is 800x480 so to fit all on screen you need to edit pendant-shopfloor-tablet/src/css/app.css

Add to the bottom of app.css

@media screen and (max-width: 800px) {

	.btn-group-justified > .btn-group .dropdown-menu {
	  left: unset;
	}

	.dropdown-menu{
	 right: 0;
	 left: unset;
	}

	.btn{
	 padding: 6px 3px;
	}

	body{
	 overflow: hidden;
	 background-color: #000;
	 color: yellow;
	}
	
	button, input, select, textarea{
	 color: black;
	}
	
	[data-route="axes"] .pos-name{
	 color: black;
	 border-radius: 3px;
	}
	
	.col-xs-1 {
	  color: black;
	}

	[data-route="workspace"] {
	  padding: 2px;
	  font-size: 14px;
	}
	
	[data-route="axes"] > * {
	  margin-bottom: 2px;
	}

	[data-route="axes"] .axis-position .container-fluid {
	  padding-top: 5px;
	  padding-bottom: unset;
	  border-radius: 3px;
	}
	[data-route="axes"] .control-pad .container-fluid {
	  padding-top: 5px;
	  padding-bottom: unset;
	  margin-top: 7px;
	  border-radius: 3px;
	}
}

Or replace using this attached app.css
app.css.zip

As you see I did modify the look slightly to look closer the black RsPi screen border.
After change resolution bigger then 800px should stay the same as before.

The 2D visualizer is missing, I don't know why... I did clean rasspibian and then cncjs install using this script
https://github.com/cncjs/cncjs-pi-raspbian
Because following the cncjs install steps I was stuck in some dependency problems (RsPi 2 B+)

After the install the .cncjs/cncjs-kiosk.sh
was little modified to allow auto serial connect so the chromium is started using command
chromium-browser --kiosk --allow-insecure-localhost --localhost --noerrdialogs --disable-suggestions-service --disable-translate --disable-save-password-bubble --disable-session-crashed-bubble --disable-infobars --touch-events=enabled --no-touch-pinch --disable-gesture-typing http://miharix-cnc.miharix.eu/tablet
for the same adding this Cooke change was needed
cncjs/cncjs-pendant-tinyweb#6
and also to add my host (/etc/hosts) in RsPi

One more if someone is hawing headache because he needed to mount this LCD upside down:
Add
video=DSI-1:800x600M,margin_right=0,margin_left=0,margin_top=0,margin_bottom=0,rotate=180
ad end of line in /boot/cmdline.txt
and

lcd_rotate=2
display_hdmi_rotate=2

in /boot/config.txt