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

 

 

 

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

16 Replies

  • Uguisu's avatar
    Uguisu
    Binge Watcher

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

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

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