Roku Developer Program

[wshirley]

I'm building off the Hero Channel sample code.  I have added a rectangle node to the customItem component that is attached to the RowList.

I'm using the Rectangle object to function as a "progress bar" based on the item's bookmark value by varying the width of the Rectangle using a simple Bookmark/Duration formula.  When I load up all the content the rectangles show the appropriate progress.

However, if the user watches some more of the video and then exits the video, I need to update the width setting of the rectangle.

I have been unable to figure how to write to the rectangle's width field after the initial.  The trigger code is located in the "Hero Screen.brs", but the rectangle is a node attached to a component called "customItem.xml" which is itself declared in the RowList.xml.  Below is the relevant xml code (there is no corresponding brs file for the customItem.xml file)

Is it possible to change a field value in the rectangle that's part of the customitem.xml component from a subroutine in the HeroScreen.brs file?  I can access RowList from there, but haven't been able to figure out how to "address" the field in the rectangle.

I want to be able to execute something like:

m.progressrectangle.width = progressvalue

Any help would be greatly appreciated.

Thanks.

<?xml version="1.0" encoding="utf-8" ?>
<!-- Copyright 2016 Roku Corp.  All Rights Reserved. -->

<component name="HeroScreen" extends="Group" initialFocus="RowList">

  <children>
    <!-- For transition animation -->
    <FadingBackground
      id="Background"
      width="1920"
      height="1080"
      color="0x000000"
      ShadeOpacity="0.8" />

    <!-- The main content -->
<!--       rowItemSize="[[1600,700],[375,197],[375,526],[375,197],[375,197]"   -->

    <RowList
     id="RowList"
      itemComponentName="customItem"
      focusXOffset="[165]"
      itemSize="[1920,220]"
      numRows="25"
      rowFocusAnimationStyle="FixedFocusWrap"
      rowHeights="[800,
      300,300,300,300,300,
      300,300,300,300,300,
      300,300,300,300,300,
      300,300,300,300,300,
      300,300,300,300]"
      rowItemSize="[[1400,700],
      [375,197],[375,197],[375,197],[375,197],[375,197],
      [375,197],[375,197],[375,197],[375,197],[375,197],
      [375,197],[375,197],[375,197],[375,197],[375,197],
      [375,197],[375,197],[375,197],[375,197],[375,197],
      [375,197],[375,197],[375,197],[375,197]
      ]"
      rowItemSpacing="[[30,0]]"
      rowLabelOffset="[[165,8]]"
      showRowLabel="[true,true,true,true,true]"
      showRowCounter="[true,true,true,false]"
      translation="[0,155]"
      
      />

    <!-- For transition animation -->
    <Poster
      translation="[0,1000]"
      uri="pkg:/images/BG_dark_down.png"
      width="2000"
      height="95" />
   <Video
        id = "Video"
        height = "1080"
        width = "1920"
 loop = "false"
        visible = "false"
    />
    
    
  </children>

  <interface>
    <!-- Grid Content Node -->
    <field id="content" type="node" alias="RowList.content" />

    <!-- Row item selection handler -->
    <field id="rowItemSelected" type="intarray" alias="RowList.rowItemSelected" alwaysnotify="true"/>

    <!-- Row item focused handler - sets background image uri and focusedContent field -->
    <field id="itemFocused" type="intarray" alias="RowList.rowItemFocused" onChange="OnItemFocused"/>

    <!-- Interface to focused item (Content Node) -->
    <field id="focusedContent"  type="node"/>

    <!-- # of requests that have bad/no content (not a 200 response) -->
    <field id="numBadRequests" type="integer"/>
    
    <!--  video interface -->
    <field id="state" type="string"/>
  </interface>

  <script type="text/brightscript" uri="pkg:/components/HeroScreen/HeroScreen.brs" />

</component>

<?xml version="1.0" encoding="utf-8" ?>
<!-- Copyright 2016 Roku Corp.  All Rights Reserved. -->

<component name="customItem" extends="Group">

  <interface>
    <field id="width"       type="float" onChange="updateLayout"/>
    <field id="height"      type="float" onChange="updateLayout"/>
    <field id="itemContent" type="node" onChange="itemContentChanged" />
  </interface>

  <script type="text/brightscript">
    <![CDATA[
      sub Init()
        m.Poster = m.top.findNode("poster")
[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif]                 m.ProgressRectangle = m.top.FindNode("ProgressRectangle")[/font][/size]

[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif]        success = m.poster.appendChild(m.ProgressRectangle)[/font][/size]
[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif]      end sub[/font][/size]

      sub itemContentChanged()
        m.Poster.loadDisplayMode = "scaleToZoom"
        if m.top.height < 400 and m.top.width < 400
          m.Poster.loadWidth = 300
          m.Poster.loadHeight = 150
        end if
        updateLayout()
        m.Poster.uri = m.top.itemContent.HDPOSTERURL
        m.ProgressRectangle = m.poster.getchild(0)

      thisBookmark = GetBookmarkData(m.top.itemcontent.guid)
   '   ? "thisBookmark = ";
   '   ? thisbookmark
 '     stop
      if thisBookmark > 0
        progress = thisBookmark/m.top.itemcontent.duration
        m.progressrectangle.width = m.top.itemcontent.ProgressWidth * progress
        m.progressrectangle.translation = [0, m.top.itemcontent.ProgressY]
        m.progressrectangle.visible = true
    '    print "progress"
      else
        m.progressrectangle.visible = false
      end if




        
      end sub

      sub updateLayout()
        if m.top.height > 0 And m.top.width > 0 then
          m.Poster.width  = m.top.width
          m.Poster.height = m.top.height
        end if
      end sub
function GetBookmarkData(id as Object) As Integer
  '  ?"GetBookmarkData(" id ")"
    sec = CreateObject("roRegistrySection", "Bookmarks")
    ' check whether bookmark for this item exists
    if sec.Exists("Bookmark_" + id.ToStr())
        return sec.Read("Bookmark_" + id.ToStr()).ToInt()
    end if
    return 0
end function

            ]]>
  </script>

  <children>
      <Poster id="poster" />
      
          <Rectangle
            id="ProgressRectangle"
            color="0x880088FF"
            width="0"
            height="15"
            translation="[0,0]"
            visible = "false" />
  </children>

</component>

[speechles]

<field id="setWidth" type="float" alias="progressrectangle.width" />

m.progressrectangle.width = m.top.setWidth

[wshirley]

I solved this issue.  I didn't realize that the posters are created on the fly when the rowlist is displayed.  I only needed to update the bookmarkposition field to get an updated rectangle.  I didn't need to access the progressrectangle node itself or any of its fields, as they are generated on the fly when the poster is generated.

Thanks again for your help.

[speechles]

in the XML: <field id="setWidth" type="float" alias="progressrectangle.width" alwaysNotify="true"/>
in the BRS: 
m.progressrectangle = m.top.findnode("progressrectangle")
m.progressrectangle.width = m.top.setWidth

Put those in your custom component...

To react with it use this in your parent component do this and call the child.
In XML: <mycustomcompontent id="customcomponent" .../>
In BRS:
m.customcomponent = m.top.findnode("customcomponent")
m.customcomponent.setWidth = (set width here)


It is better we don't give the full answer. Part of the process of brightscript is when it "just starts to click" and that epiphany moment. I do not want to spoil that for you. ^_~