Forum Discussion

Archana's avatar
Archana
Binge Watcher
4 years ago
Solved

Custom rowlist with tiles zoomed on focus

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 usin...
Roku Developer Program
  • Uguisu's avatar
    Uguisu
    4 years ago

    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's avatar
Uguisu
Binge Watcher
4 years ago

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's avatar
Archana
Binge Watcher
4 years ago

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's avatar
    Uguisu
    Binge Watcher
    4 years ago

    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's avatar
      Archana
      Binge Watcher
      4 years ago

      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:

    • Archana's avatar
      Archana
      Binge Watcher
      4 years ago

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

      • Uguisu's avatar
        Uguisu
        Binge Watcher
        4 years ago

        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