Roku Developer Program

[shibuyashadows]

I am running the Simple_Grid_with_Details_and_Video SThree example channel right out of the box on a Roku 4

You can see that when a row is selected all the images on that row become very blurred/pixelated one the row has been selected. You can also see the items shift slightly to the left.

I have tried everything I can think of, but can't seem to fix this.

Has anyone else experienced the same problem?

[Veeta]

It has to do with the half-pixel in rowItemSpacing.  If you change the first value from 16.5 to 16, the shifting effect goes away.

 34         <RowList
 35             id="RowList"
 36             focusBitmapUri="pkg:/images/focus_grid.9.png"
 37       translation="[-60, 372]"
 38       itemSize="[1327, 218]"
 39       numRows="2"
 40       itemSpacing="[13, 0]"
 41       focusXOffset="[147]"
 42       rowFocusAnimationStyle="fixedFocusWrap"
 43       rowItemSize="[[262, 147]]"
 44       rowItemSpacing="[[16.5, 3]]"
 45       showRowLabel="true"
 46       showRowCounter="true"
 47       rowLabelOffset="[[147, 20]]"
 48             />

This is probably due to rowItemSize[0][0]+rowItem[0][0] indicating the first item to be at a half-pixel boundary, yet the focusXOffset is set to a full-pixel boundary.  I would guess that in the focus row, focusXOffset takes precedence for setting the position of all objects, the one in the focus box being locked at full-pixel boundary.  The the non-focus row probably left-aligns with the main row and just addes rowItemSize and rowItem widths and x-offsets to set the positions on their items... which would give a half-pixel boundary.  There may also be some rounding thrown in there which pushes posters up or down pixel boundaries.  I try to avoid sub-pixel values for all the projects I do and they seem to not run into these types of problems.

[shibuyashadows]

Hi Veeta,

Many thanks for the reply, that indeed has solved the shifting problem!  🙂

May I ask, are you also seeing a pixelation of the images on the selected row? If you see my attached screen shot and look at the Ted channel, the item on the selected row is pixelated, where as the item on the row below is not.

http://imgur.com/a/htBTz

[Veeta]

I do see the pixelation in your screenshot, but I haven't been able to recreate that on the Roku device itself.  It may be something particular to your device and display settings which is causing the Roku to resample the loaded posters.  Which device and display setting are you testing this on?

[shibuyashadows]

Interesting, thanks for the feedback. I am testing on a Roku 4 out to a 1080p monitor HDMI-HDMI 60hz.

[shibuyashadows]

I finally tracked this down to the ui_resolutions property in the manifest file

I changed it from:
ui_resolutions=hd
to:
ui_resolutions=fhd

I had to relayout the UI etc. but after this the problem went away on the Roku 4 (and everything looked consistent in roku 3 and 4), guess it is related to the res of the UI, need to target the higher resolution device.