Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
DDukesterman
Level 7

TargetList with 2 children acts really weird on animation

I am having trouble with the TargetList's last child not animating correctly. On animation, the last child turns a different color. Here is a clip of what it looks like. https://photos.google.com/share/AF1QipM ... FtaGJtT1Vn

EDIT: It is doing it on the last item in the list. I have tried a 3 and 4 item size list. The last child always changes color on the list animation.

Below is the xml file for the CustomTargetList:
<?xml version="1.0" encoding="UTF-8"?>
<component name="RowT2TargetGroup" extends="TargetList">

<interface>
</interface>

    <script type="text/brightscript" >
    <![CDATA[
function init()

m.top.observeField("focusedChild", "focusedChildChanged")
m.top.observeField("itemFocused", "itemFocusedChanged")
        m.top.observeField("itemUnfocused", "itemUnfocusedChanged")

m.top.defaultTargetSetFocusIndex = 0

m.top.advanceKey = "right"
m.top.reverseKey = "left"

m.top.wrap = false

m.top.itemComponentName = "SimpleItemComponent"


targetSet1 = createObject("roSGNode", "TargetSet")
targetSet1.focusIndex = 0
targetSet1.targetRects = [
 { x:50, y:2,  width:594, height:333 },
 { x:650, y:10,  width:566, height:318 }
 ]

targetSet2 = createObject("roSGNode", "TargetSet")
targetSet2.focusIndex = 1
targetSet2.targetRects = [
 { x:64, y:10,  width:566, height:318 },
 { x:636, y:2,  width:594, height:333 }
 ]

m.top.focusedTargetSet = [targetSet1,targetSet2]

unfocusedTargetSet = createObject("roSGNode", "TargetSet")
unfocusedTargetSet.targetRects = [
 { x:64, y:10,  width:566, height:318 },
 { x:650, y:10,  width:566, height:318 }
 ]

m.top.unfocusedTargetSet = unfocusedTargetSet

m.top.targetSet = m.top.focusedTargetSet[0]

m.top.showTargetRects = true

    end function

function itemFocusedChanged()
        print "itemFocused changed to: "; m.top.itemFocused
    end function

    function itemUnfocusedChanged()
        print "itemUnfocused changed to: "; m.top.itemUnfocused
    end function

    ]]>
    </script>

    <children>
    </children>

</component>


Below is how I am declaring it:
sun init() 
       '... stuff here

        m.row = createObject("roSGNode", "RowT2TargetGroup")
        m.row.content = setUpDataModel(2)
        m.top.appendChild(m.row)

       '... stuff here
end sub


function setUpDataModel(maxCount)
    contentRoot = createObject("roSGNode", "ContentNode")
      for i = 0 to maxCount-1
        child = contentRoot.createChild("ContentNode")
        child.title = "Item " + i.tostr()
    end for
    return contentRoot
end function

ComponentName Class:
<?xml version="1.0" encoding="utf-8" ?>

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

<!-- Note that target and rect are both set during the interpolation -->
<interface>
    <field id="index"       type="int" />
    <field id="groupHasFocus" type="boolean" onChange="focusPercentChanged"/>
    <field id="itemContent" type="node"   onChange="itemContentChanged" />
    <field id="currTarget"  type="float"  onChange="currTargetChanged" />
    <field id="currRect"    type="rect2d" onChange="currRectChanged" />
    <field id="focusPercent" type="float" onChange="focusPercentChanged" />
</interface>

<script type="text/brightscript" >
<![CDATA[
    function init()
        m.theRect  = m.top.findNode("theRect")
        m.theLabel = m.top.findNode("theLabel")
    end function

    function itemContentChanged()
        ?"itemContentChanged"
        m.theLabel.text = m.top.itemContent.title
    end function

    function currRectChanged()
     m.theRect.width       = m.top.currRect.width
     m.theRect.height      = m.top.currRect.height
    end function

    function focusPercentChanged()
        if (m.top.groupHasFocus)
            'm.focusColorInterp.fraction = m.top.focusPercent
        else
            'm.focusColorInterp.fraction = 0
        end if
    end function
]]>
</script>

<children>
    <Rectangle id="theRect" color="0xff0000">
        <Label id="theLabel" translation="[10, 10]" />
    </Rectangle>
</children>

</component>

0 Kudos
5 Replies

Re: TargetList with 2 children acts really weird on animation

Did you ever get this working? I'm having the same problem.
0 Kudos
joetesta
Level 10

Re: TargetList with 2 children acts really weird on animation

A workaround is to add two additional offscreen elements, one on each end. to the targetRects. These offscreen elements suppress the blinking of the onscreen ones.

something like:
targetSet1.focusIndex = 1 ' <---- note this was bumped up to account for new element'
 targetSet1.targetRects = [
 { x:-595 y:2 width:594, height:333 }, 
 { x:50, y:2,  width:594, height:333 },
  { x:650, y:10,  width:566, height:318 },
 { x:1940, y:2, width:594, height:333 }
 ]

 targetSet2 = createObject("roSGNode", "TargetSet")
 targetSet2.focusIndex = 2
 targetSet2.targetRects = [
 { x:-595 y:2 width:594, height:333 },  
 { x:64, y:10,  width:566, height:318 },
  { x:636, y:2,  width:594, height:333 },
 { x:1940, y:2, width:594, height:333 }
 ]
aspiring
0 Kudos

Re: TargetList with 2 children acts really weird on animation

Doesn’t that make the selection work weird? Or does it ignore off screen targets?
0 Kudos
joetesta
Level 10

Re: TargetList with 2 children acts really weird on animation

no it doesn't ignore the offscreen items, but by setting the focusIndex to 1 and 2, it will never focus on the 0 and 3 items.
aspiring
0 Kudos

Re: TargetList with 2 children acts really weird on animation

Great thanks for the tip, worked like a charm. Hopefully Roku can fix this bug.
0 Kudos