Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
DDukesterman
Visitor

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 5

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
Roku Guru

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
Roku Guru

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