Background / Button (images) resolution

[TadasM]

Gents,

While waiting for a screenset from Ger21, I decided to tinker with my own one. And it looks a fun thing to do . But I have an issue with choosing resolution for backgrounds, buttons, and other images.

Laptop that I use to drive my CNC is with 1366x768 resolution, and my idea was to create a background with such resolution to maximize screenspace and quality of text and other things. I have made a quick design using Adobe Illustator choosing background size as per my laptop resolution - 1366x768. And result I got when added to UCCNC is kind a disappointing:

As you can see, the text "MDI" or button I made just for testing "OPEN FILE" is very pixelated. I have tried to make it larger and scale it down, but it does not helping...

And the file in Adobe illustator:

In original screenset I see that the background is scaled down by 1.45 times, is this "the recipe" to make good / scalable screensets ?

I would appreciate any advise / tips choosing resolutions for images to be used on UCCNC. Thank You

[ger21]

In the screen editor, what size is the screen set to?

I set mine to the actual resolution, and make my backgrounds to match, so there's no scaling.

Note about my screenset. I'm designing it at 1920x1080 (actually 1057 I think), so if you run it on a lower res monitor, it may look a bit "squished". But I was playing with it last night, dragging it to different sizes, and it looked OK at smaller sizes.

[cncdrive]

Drawing images with graphics acceleration, with OpenGL or DirectX is kind of compicated, I'll describe you some details of how it is done and what are the pitfalls to let you understand why your image might appear pixellated.

First of all not all graphics cards support other image sizes than 2^n.
This means that on some graphics cards (older ones mostly) images can be only 1 or 2 or 4 or 8 or 16 or 32 or 64 etc. pixels wide and high,
if the pixel size is for example 60 pixels wide that can make the image to not appear and to even corrupt videocard memory.
Handling this is adviced to be done with quering if the card supports any pixel size images, however unfortunately there are video cards which has this query results implemented buggy giving false report on this.
So, the only way we could make this work on any video cards is that when the UCCNC loads the images it resizes to the closest 2^n pixel in width and height with extending the canvas of the image to that size and drawing the original image to the left right corner of that larger image.
Then when drawing the image in OpenGL we define the projection ratio to project only the real part of the image to the screen.

The other thing is how OpenGL draws the images when scaled.
The best way to draw scaled (not pixel perfect scaling) images with storing mipmaps of the image.
Mipmaps are several smaller images of the same image precalculated by OpenGL and stored in video memory.
OpenGL can generate the mipmaps with calling a function.

For example you have a 32x32 pixel image then if you generate the mipmaps then the mipmaps of 16x16, 8x8, 4x4, 2x2, 1x1 are generated by default.
Then when you scale the image then the video card automatically selects the closest mipmap size to draw to make the result the less pixelated.
However again the problem is that not all video cards supports mipmapping, but fortunately the query about if it is supported works OK on all video cards,
so the UCCNC selects mipmapping if supported by the video card.

Same with image compression and smoothing, the UCCNC selects the best way which is supported.

For this reason it is hard to tell why the image is pixellated on your system, it is possible that it appears pixellated on one PC because it's videocard does not support some functions and appears OK on other computers.

For example if mipmapping is not supported then scaling the image with a large ratio, for example scaling a 1024x1024 image to 64x64 pixel on the screen will sure make it to look pixellated while if the video card supports mipmapping then the same will look good and sharp, not pixellated.

And generally speaking mostly the best result is to create the image a bit larger than it will be displayed on the screen, e.g. +20-50%, don't make it smaller resolution and don't make it very high resolution either,
because then it can appear bad on some graphics cards.
Also if you can make the image's at least one dimension to 2^n size (if it will fit the target size) will make it to load faster on most computers and will eat the least video memory.

If the UCCNC was a video game we would have a much simpler job, because we could simply define that you need a PC with at least XYZ properties and then not allow it to run on PCs which does not meet these,
but people wants to run the software on any kind of computers, not only on new ones, so we had to make the compromises which this involves.

[TadasM]

In the screen editor, what size is the screen set to?

I set mine to the actual resolution, and make my backgrounds to match, so there's no scaling.

Note about my screenset. I'm designing it at 1920x1080 (actually 1057 I think), so if you run it on a lower res monitor, it may look a bit "squished". But I was playing with it last night, dragging it to different sizes, and it looked OK at smaller sizes.

Gerry,

Mine screen editor is set to 1366x768 res (so I could have no scaling of the background images, as those are set to same resolution as screen). The screenshot I have provided is from my work pc that has a DELL 34" ultrawide monitor (with much higher res that Im designing screen set for) and result on my laptop with 1366x768 res is very same as per my screenshot. BUT when I run UCCNC at full screen mode (not chanignd any resolution settings on screen editor) on my DELL monitor - all pixellation is gone...

At first, I have tried to do 1920x1080 res too, but it ended up very bad results on my laptop with 1366x768 res (no chance to read labels at all).

Could I send my background image to You Gerry, if you would have couple minutes to check ?

[TadasM]

Drawing images with graphics acceleration, with OpenGL or DirectX is kind of compicated, I'll describe you some details of how it is done and what are the pitfalls to let you understand why your image might appear pixellated.

First of all not all graphics cards support other image sizes than 2^n.
This means that on some graphics cards (older ones mostly) images can be only 1 or 2 or 4 or 8 or 16 or 32 or 64 etc. pixels wide and high,
if the pixel size is for example 60 pixels wide that can make the image to not appear and to even corrupt videocard memory.
Handling this is adviced to be done with quering if the card supports any pixel size images, however unfortunately there are video cards which has this query results implemented buggy giving false report on this.
So, the only way we could make this work on any video cards is that when the UCCNC loads the images it resizes to the closest 2^n pixel in width and height with extending the canvas of the image to that size and drawing the original image to the left right corner of that larger image.
Then when drawing the image in OpenGL we define the projection ratio to project only the real part of the image to the screen.

The other thing is how OpenGL draws the images when scaled.
The best way to draw scaled (not pixel perfect scaling) images with storing mipmaps of the image.
Mipmaps are several smaller images of the same image precalculated by OpenGL and stored in video memory.
OpenGL can generate the mipmaps with calling a function.

For example you have a 32x32 pixel image then if you generate the mipmaps then the mipmaps of 16x16, 8x8, 4x4, 2x2, 1x1 are generated by default.
Then when you scale the image then the video card automatically selects the closest mipmap size to draw to make the result the less pixelated.
However again the problem is that not all video cards supports mipmapping, but fortunately the query about if it is supported works OK on all video cards,
so the UCCNC selects mipmapping if supported by the video card.

Same with image compression and smoothing, the UCCNC selects the best way which is supported.

For this reason it is hard to tell why the image is pixellated on your system, it is possible that it appears pixellated on one PC because it's videocard does not support some functions and appears OK on other computers.

For example if mipmapping is not supported then scaling the image with a large ratio, for example scaling a 1024x1024 image to 64x64 pixel on the screen will sure make it to look pixellated while if the video card supports mipmapping then the same will look good and sharp, not pixellated.

And generally speaking mostly the best result is to create the image a bit larger than it will be displayed on the screen, e.g. +20-50%, don't make it smaller resolution and don't make it very high resolution either,
because then it can appear bad on some graphics cards.
Also if you can make the image's at least one dimension to 2^n size (if it will fit the target size) will make it to load faster on most computers and will eat the least video memory.

If the UCCNC was a video game we would have a much simpler job, because we could simply define that you need a PC with at least XYZ properties and then not allow it to run on PCs which does not meet these,
but people wants to run the software on any kind of computers, not only on new ones, so we had to make the compromises which this involves.

Dear Balazs,

Thank You for detailed explanation. Very helpful !

The PC that I work with is latest hardware and software so there should'nt be an issue related to hardware issues. I will try to implement all Your suggestions and will come back with results.

[ger21]

Could I send my background image to You Gerry, if you would have couple minutes to check ?

Yes, send it to cncwoodworker at comcast dot net

[TadasM]

Could I send my background image to You Gerry, if you would have couple minutes to check ?

Yes, send it to cncwoodworker at comcast dot net

Thank You in advance Gerry. I have sent an e-mail to You

[TadasM]

Huge thanx to Gerry. He instantly saw the problem.

In Adobe Illustrator, I have created canvas size with aimed resolution of 1366 by 768. After export to PNG, using standard "export" tool, the software makes file somehow bigger, like canvas size does not matter. And I wasn't checking the exported background dimensions as I was 100% it is correct... Now that Gerry found my problem - I found how to export PNG file with dimensions I really need. And it all works just fantastic.

Thank You gents for you help. I hope that this my failure will be helpful for someone in the future