Home Screen Icons blurry, compressed, crappy

Here is my mm_icon_focus_hd.png

[upload|k7ugApI4PbrhY90RhXtqbQ==]

And here is what it actually looks like on the home screen

[upload|gKt5/psRGhi0NsgEHJPqbg==]

One is sharp and fabulous, one is smudgy, pudgy, and pure crap. WHY???

This is side loading the app, with icon 290x218

What can I do? Why does Roku feel the need to ruin finely crafted home screen images?

“Komag” wrote:
One is sharp and fabulous, one is smudgy, pudgy, and pure crap. WHY???
You are under suspicion of overscan, see here https://forums.roku.com/viewtopic.php?f … 75#p540163

What can I do? Why does Roku feel the need to ruin finely crafted home screen images?
Well… to lighten up the situation, it’s actually debatable which of the two looks better :mrgreen:

Also, welcome to TV world! As a general note, you can’t expect crisp image on the TV because… reasons. Like the fact that many TVs will show connected Roku with overscan, chop small unspecified amount at the edges and scale up the image by 2-5% - while other few with “properly configured” input will show your pixels 1:1, w/o overscan. Oh, and you draw in 720p roScreen which gets scaled to 1080p, did you account for that?

The good news is that the “Retina” resolution from 10ft distance is such that a 1080p screen would have to have 75" diagonal for the human eye to notice such issues.

In this situation this is the Roku Home screen, not my program, so it’s not 720p to 1080p conversion. The overscan, if happening, wouldn’t smudge the graphics nearly that much. Just resizing the image 2% in any image editor on quick/dirty settings looks much better than the Roku result.

I believe it’s image compression, pure and simple.

What can I do? Why does Roku feel the need to ruin finely crafted home screen images?

Looks like anti-aliasing. You have a one-pixel outline with with beveled ghosting inside that. I wouldn’t go below 2 pixels width for the text and get rid of the bevel, it’s not showing up anyway, and your original is at 96 ppi. I’d make it 72. EnTerr is correct - Welcome to TV! It’s even more fun getting colors correct.

The problem is simply scaling artifacts. It’s nothing to do with Roku or with the fact that it’s on a TV. View your 290x218 image in some computer application like WIndows Photo Viewer and magnify it to 1080x720. You’ll see the same kind of artifacts. In fact there are some weird artifacts in the original image if you just look at the raw pixels, which makes it worse when you enlarge it. I don’t have time to capture screencaps right now but if you don’t understand what I’m saying I can do this later. As squirreltown noted, the problem is worse because your image consists of single-pixel lines. This is about the best way there is to demonstrate scaling artifacts. You should consider making the lines thicker, and perhaps blurring the edges.

–Mark

Thanks for the feedback Mark, but why is there any enlarging at all? This is the just the icon on the Roku home page, not something within the game itself. I included the graphics file that is exactly 290x218 which is what that is supposed to be I’m told, no scaling should be happening.

When I test scale a little bit to test for overscan possibility, my image looks almost as good as the original, only slightly artifacty, nothing like the blurry Roku home screen image

Are you saying Roku blows up the 290x218 file to something huge like 1080x720, then later shrinks that down to use for the home page channel icons?

So yes, I guess I don’t understand what you mean exactly and would appreciate something to show what you’re talking about.

squirreltown, I’m curious about the ppi - how could that even possibly affect this? I wan’t even aware of that setting, but as I see it, the image pixel size just is what it is, 1280x720 or 1920x1080 or 290x218; ppi wouldn’t have any effect, how could it? But maybe it does somehow, so I’m interested.

Bottom line, other than possibility of some HD overscan effect (which shouldn’t have this pronounced of an impact), is there any other reason any scaling is occurring?

Sorry, I misunderstood you to be saying you were displaying this image at 1080x720. As to why the image is being displayed that way, I don’t know for sure. But this is what I’m referring to regarding the artifacts in the original image. Note that this is NOT a scaled image; this is just the original image zoomed using gimp’s zoom feature. That is, it just enlarges each pixel so that you can see it better.

[upload|jFlBdV9JRrB3uf/r7QkTrg==]

–Mark

“Komag” wrote:

squirreltown, I’m curious about the ppi - how could that even possibly affect this?
I would doubt it has any effect on the Roku, but it’s a non-standard resolution, just tidying up.
The Roku does do some strange drawing. here’s a &hFFFFFFFF rect on a &hFF0000FF background. I just upped the curve to make it more visable, but this is the simplest thing to draw and look at all the thinking it’s doing.

[upload|qpZF6E9Ft7Ws5DbIqTfqfQ==]

“squirreltown” wrote:

“Komag” wrote:

squirreltown, I’m curious about the ppi - how could that even possibly affect this?
I would doubt it has any effect on the Roku, but it’s a non-standard resolution, just tidying up.
The Roku does do some strange drawing. here’s a &hFFFFFFFF rect on a &hFF0000FF background. I just upped the curve to make it more visable, but this is the simplest thing to draw and look at all the thinking it’s doing.

[upload|qpZF6E9Ft7Ws5DbIqTfqfQ==]
Those are compression artifacts. Assuming you took that from a screenshot captured via the box, that’s not an accurate representation of what’s being displayed. Screenshots are captured as JPEGs by default.

Those are compression artifacts. Assuming you took that from a screenshot captured via the box, that’s not an accurate representation of what’s being displayed. Screenshots are captured as JPEGs by default.
True. my mistake.
This is more what i was thinking of ( .getPNG)
There is some anti-aliasing going on and it doesn’t like single pixels (This is upper left of rect)

[upload|0J3NMuMvWmvQwJDJSGp2Yw==]

“TheEndless” wrote:
Those are compression artifacts. Assuming you took that from a screenshot captured via the box, that’s not an accurate representation of what’s being displayed. Screenshots are captured as JPEGs by default.
Ringing artifacts for the @squirreltown indeed. Fourier transform (which is foundation in JPEG/MPEG/MP3/etc) “really doesn’t like” sharp transitions. A signal is represented as a sum of harmonic functions and to represent a perfectly sharp edge, an infinite number of harmonics would have to be used. And since nobody likes infinitely big in size JPEG/MP3s, from some point on the higher frequencies would be dropped.

Which in practice is fine, since neither the human eye nor ear have infinite resolution. The mere fact that image/audio/video has been digitized testifies to that. Nature abhors sharp edges, one may say.

“Komag” wrote:
In this situation this is the Roku Home screen, not my program, so it’s not 720p to 1080p conversion. The overscan, if happening, wouldn’t smudge the graphics nearly that much. Just resizing the image 2% in any image editor on quick/dirty settings looks much better than the Roku result.
That is true, here is windows paint resizing by 5 pixels in each direction (from 290x218 to 295x223):

[upload|WFWBzBWx6zHLBi+vsuF+Tg==]

Looks better indeed. But we don’t know what algorithm your TV or capture card uses for overscan, most likely is quick&dirty linear (vs Paint… bicubic?).

Have you tried this on different Roku models btw? There might be surprises (OpenGL v DirectFB)

I believe it’s image compression, pure and simple.
But whose image compression? Elgato, HDMI, Roku?

My in-game graphics are perfectly crisp and sharp and perfect, no problem with overscan scaling or HDMI or elgato compression. I can take PNG screenshots (after changing the setting on that one hidden screen) and fine details come through completely sharp.

In general I have tried to avoid single-pixel-thin drawing simply to make the game playable for people with SD screens (I even do some testing on a old 13 inch CRT), but in some cases I use fine details where it doesn’t impact playability, and everything shows up pixel perfect on three different HD displays.

I’ve tried on:

  • A computer monitor with HDMI input running Roku 2 XS and original Roku 3
  • A computer monitor with HDMI input running the older streaming stick
  • my Roku TV
  • and of course, the 13" old CRT tv (with Roku 1 2710)
    (I haven’t tried hooking up the 2710 to the other monitors recently)
    All of them have (except old tv) have sharp clear pixel-accurate lines in-game. It’s ONLY the Roku Home screen icon that looks like mud, and it looks that way on all of them. That has led me to believe there is some under-the-hood shenanigans going on, such as Roku heavily compressing all the home screen icons for a performance boost, or a strange combination of resizing back and forth, or something.

“Komag” wrote:
All of them have (except old tv) have sharp clear pixel-accurate lines in-game. It’s ONLY the Roku Home screen icon that looks like mud, and it looks that way on all of them. That has led me to believe there is some under-the-hood shenanigans going on, such as Roku heavily compressing all the home screen icons for a performance boost, or a strange combination of resizing back and forth, or something.
Hmm, i am at a loss - although as always excited to troubleshoot a problem :slightly_smiling_face:
Here are couple of ideas to try -
(1) “burn-in” the exact size info into each of the images (i.e. 540x405 image should have the text “540x405” somewhere in it and so forth) - just like Netflix has test clips with stamped dimensions/bandwidth per each HLS stream chunk. This is to help figuring out if 295x223 image you see actually came from resizing 290x218 or from 540x405 or something else. Because notice that 540x405 was supposed to be the FHD image but in reality you see 295x223.
(2) Try both in 720 and 1080 video HDMI output and compare which images are used and if there is difference in blurring.

I already had unique images for each one. 1080p and 720p both display the hd image 290x218, both seemed to appear about the same quality. Only SD Roku displayed the 214x144. The different looking fhd 540x405 image was never shown. This is a side-loaded app, so maybe it works different with a private channel or a published channel.

I did another test, which was to make a big shape in-game, exactly 800x320 (based on a pic I already had). When Roku is 720p, the in-game shape (red block) is EXACTLY 800x320, no scaling for overscan or anything. When Roku is 1080p, the shape is exactly 1200x480 (50% larger each way), which is roScreen scaling the 720p game up to 1080p perfectly. So in-game there is no issue with HD overscan from either the HDMI or the elgato device. I also double confirmed this result with direct Roku screenshots in png mode.

(Interestingly, on this computer monitor, I found a setting for the HDMI input to act either as “Video” or “PC” - when I put it on “Video” it slightly zooms in the screen, cutting off the edges a little bit, creating overscan! Of course I set that junk back to “PC” where it will remain forever - where it was before.)

Back on subject…
So in-game there is no overscan happening at all. Is it possible there is some overscan happening only on the Roku home page? Maybe now you want to spill the beans how you measured 290x218? :grinning_face_with_smiling_eyes:

Anybody else have a way to capture a screenshot of the home page in 1080p and measure some pixels as they appear on-screen? See if the channel pictures are 290x218 as they are supposed to be, or something more like 295x223 as I’m measuring.

Maybe there is some crapification of side-loaded icon image files that doesn’t happen the same way with private/public channels. Maybe they get squished, prodded, translated to jpg, enlarged, pushed into a box and shrunk down again, and compressed to boot.

I made a new icon with thicker lines
Here is my new mm_icon_focus_hd.png

[upload|0o55XAfU0TePdWZG1phvjQ==]

And here is the slightly better than last time but still crappy home screen result

[upload|iHFlTELuYYQwW9JSe0ejjQ==]

Here is the original full screen cap that came from:
https://www.dropbox.com/s/5vmjsddj7074z … l.png?dl=0

Still getting blurred out for whatever reason.

I really would prefer the thinner lines, looks so much more retro/80’s that way, which is the flavor of the game.