Roku Developer Program

[Archana]

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.

[Uguisu]

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

[Archana]

@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.

[Uguisu · Accepted solution]

@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()

[Archana]

@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??

[Uguisu]

@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.

[Archana]

@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?

[Uguisu]

@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.

[Archana]

@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. 

[Archana]

@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??