Hi,
I am trying to build custom rowlist. Where on focus, the focused item size should be greater than the other unfocused tiles in the row list. I was able increase the size of the row tiles by using focus percentage change. But on focus change the row items are getting cropped on top. I need help on this. I stuck with this issue. Any help would be appreciated.
Thanks.
Hey @Archana
I’ve run into the the same issue before, and the solution that I came up with was to move the component, the rowlist is using for each tile, down so that each item is in the boundaries of the rowlist when the item is scaled up. This will probably cause the opposite issue of being cropped on the bottom, which can be solved by changing the rowItemSize and itemSize of the rowlist. Hopefully this makes sense and helps
@Uguisu I tried with setting up the rowItemSize and itemSize. But getting the same output. I have different items sizes within the rowList. Any code reference would be greatest help.
And also any suggestions on making the focused row tile/item to center of the rowList? On focus I am increasing the width and height of the focused tile/item. But which is not aligned centre of the rowList.
@Archana , so what I was trying to indicate was that each tile needs to be translated down, which I just discovered is what is done in the rowlist example that roku has on their github https://github.com/rokudev/samples/tree/master/ux%20components/lists%20and%20grids/RowListExample.
<component name = "RowListItem" extends = "Group" >
<interface >
<field id = "itemContent" type = "node" onChange = "showcontent"/>
<field id = "focusPercent" type = "float" onChange = "showfocus"/>
<field id = "rowFocusPercent" type = "float" onChange = "showrowfocus"/>
</interface>
<script type = "text/brightscript" >
<![CDATA[
sub init()
m.itemposter = m.top.findNode("itemPoster")
m.itemmask = m.top.findNode("itemMask")
m.itemlabel = m.top.findNode("itemLabel")
end sub
sub showcontent()
itemcontent = m.top.itemContent
m.itemposter.uri = itemcontent.HDPosterUrl
m.itemlabel.text = itemcontent.title
end sub
sub showfocus()
'This increases the size of the tile as it gains more focus
scale = 1 + (m.top.focusPercent * 0.08)
m.itemposter.scale = [scale, scale]
end sub
sub showrowfocus()
m.itemmask.opacity = 0.75 - (m.top.rowFocusPercent * 0.75)
m.itemlabel.opacity = m.top.rowFocusPercent
end sub
]]>
</script>
<children >
<Poster
id = "itemPoster"
'this is where all the tiles are moved so that they don't get cropped
translation = "[ 10, 10 ]"
width = "512"
height = "288"
'This sets where the center is for the scale that is done on the the tile
scaleRotateCenter = "[ 256.0, 144.0 ]"
>
<Rectangle
id = "itemMask"
color = "0x000000FF"
opacity = "0.75"
width = "512"
height = "288"
scaleRotateCenter = "[ 256.0, 144.0 ]"/>
</Poster>
<Label
id = "itemLabel"
translation = "[ 20, 264 ]"
horizAlign = "right"
width = "492"
opacity = "0.0"/>
</children>
This describes how each tile acts. So when the poster (id= itemposter) is translated [10,10] it moves the poster down and right 10 away from the border of the rowlist, which is what is cropping your tiles. So the more you increase the size of the tile the more the tile will have to be translate.
This also shows how to increase the tile size while keeping it centered. This is done by changing the scaleRotateCenter to the center of your tile then when the item has focus you increase the scale of the tile as done in the showFocus()
@Uguisu Thank you so much. This has saved my day. I have used same technique without scaling. I used entire group to translate on focus. Now facing the focus issue. Once it reaches the end of the row list and press right or left button twice or more the focus is lost. Any idea on this??
@Archana Well since the rowlist no longer catches the key press if it doesn’t have any more items to move to, I would imagine that there is something higher up in the node tree that is catching the key presses to cause a change in focus. What you could potentially do is a onKeyEvent function in the same node as the rowlist and catch the right and left presses by return true for them.
function onKeyEvent(key, press) as boolean
result = false
if press
if key = "left" or key = "right"
result = true
end if
end if
return result
end function
Without knowing more this is my best guess on what to do. It would better know what is causing the change in focus.
@Uguisu It’s not zooming the content and focus image is not shown. On click events and all is working fine. Can we get scaled image width and height?
@Archana Oh, so the tiles stop zooming and the focus image no longer shows when you reach the end and press right or left twice, but you can still move in the rowlist. I’m not sure what to do about it, I would need to see some of the code to get an idea of what is happening.
To get the scaled image you can multiply the width and height by the scale[0] and scale[1] accordingly. There is also the possibility of using boundingRect(), however if there are any children to the image that are outside of the boundary of the image it will give the width and height that encompasses both the image and its children.
@Uguisu Yeah, I used boundingRect() to get the width and height of scaled item. I resolved the focus issue. Missed the check for itemHasFocus. Thanks a Lot. :smileyhappy:
@Uguisu Hi, when the focus is set for rowlist, all first items of my row list are getting focused.
I have added a check on focusPercent
sub onFocusPercent()
if m.top.focusPercent >= 0.5 and m.top.rowListHasFocus
//Enable the focus
else
//Disable the focus
end if
end sub
But the focus(custom focus- have focus poster and poster) is set for all other first tiles of rowlist.
Any idea on this??
@Archana I would recommend going to https://developer.roku.com/en-ca/docs/references/scenegraph/list-and-grid-nodes/rowlist.md the section on “RowList xml Component” has a bunch of fields that are usable in the rowlistItem they have to be added as a field if you want to use them. Like what rowListHasFocus has.
<field id="fieldName" type="boolean" onChange= "onFocusPercent" />
So the issue is the rowListHasFocus is always true when the whole rowlist has focus,there some other fields that have just the particular row has focus or the particular item has focus, which should allow you to limit which items will get focus
@Uguisu I am trying to get blurred image background from poster. I tried some trick which was posted on the Roku community. Where they are using loadWidth and loadHeight and scaling the image to get blurred image. But I observe the image gets pixelated. I can see some random and asymmetric lines over the image.
When I add overlay the lines are more visible. Any idea on this? Can we get good image without these lines.
here is the link : Gaussian Blur
<Poster id = "Background" loadWidth = "8.96" loadHeight = "5.04" height = "720" width = "1280" loadDisplayMode = "scaleToFill" />
<Rectangle id = "hideMe" height = "1080" width = "1920" opacity = "0.7" color = "0x000000"/>
hi i want to make some changes to showFocus() but i am confused.
i want title Label translation to be changed when item get focus to [0,0] and when it losses focus label goes back to it’s position.
how to do that kindly help me
@alive-ghost You can handle this on focusPercent observer within in the rowList Item component. You can simply change the translation of the label here.
if m.top.focusPercent >= 0.5 and (m.top.gridHasFocus)
'set the Label translation here
else
'reset the Label translation
end if
hi, can we change itemSpacing of just first item.
like space between 1st and 2nd item is 20px and spacing between all other items are 10px.
can we do this if yes how?
thanks in advance
@hamza061 I don’t think that’s poosible in roku rowList. For your reference please look into the fields.
https://developer.roku.com/docs/references/scenegraph/list-and-grid-nodes/rowlist.md#fields
@hamza061 From what I can tell it can’t be done in the xml for the rowlist. However it should be doable with the itemComponent of the rowlist. As long as you add the index to the fields for the itemComponent you should be able to shift all the other items to the right by 10 that aren’t the 1st item or 0th index. Now you want to move everything else because moving anything to the left or up in the itemComponent will most likely cut off what you moved due to how ItemComponents work. Also you will have to make sure that the itemSize is correct as well since you will basically be making the item 10 wider with the translation. In the Roku samples
https://github.com/rokudev/samples/blob/master/ux%20components/lists%20and%20grids/RowListExample/components/rowlistitem.xml
this would all be done in the showcontent(). Now if you wanted to have the current item that is focused to have the extra space next to it you would do basically the same thing in the showFocus()
Hopefully this helps.
