Roku Developer Program

[edskitter]

I am trying to set up a markup grid from the documentation and unable to setFocus on the actual grid. Key presses are not handled and I was wondering if anyone has gotten this to work or what I am doing wrong. The 3 nodes are rendered but key presses are not handled. The statement m.top.hasFocus() comes back true.

I also downloaded the simpleRowList.zip http://sdkdocs.roku.com/display/sdkdoc/RowList and while the nodes render, the key presses are not handled. It appears that the setFocus is being set inside the init() function but it does not fire for some reason.

Any help would be appreciated.

CustomMarkUpGrid.xml

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

<component name="CustomMarkupGrid" extends="MarkupGrid" >

<script type="text/brightscript" >
<![CDATA[

    function init()
    
        print "in markup grid init()"
	    m.top.itemComponentName = "SimpleGridItem"
	    m.top.numRows = 3
	    m.top.numColumns = 1
	  	m.top.itemSize = "[200, 200]"
	  	m.top.itemSpacing = "[4,6]"
        m.top.vertFocusAnimationStyle = "floatingFocus"

        data = CreateObject("roSGNode", "ContentNode")
        item = data.CreateChild("ContentNode")
        item.HDPOSTERURL = "http://orig03.deviantart.net/e9be/f/2009/079/e/d/aimp2_icon_128x128_by_vicing.png"
        item.GOTITEMCONTENT = false
        item.PRICE = "25.99"
        item.width = "200"
        item.height = "200"

        item = data.CreateChild("ContentNode")
        item.HDPOSTERURL = "https://upload.wikimedia.org/wikipedia/commons/9/99/Opml-icon-128x128.png"
        item.GOTITEMCONTENT = false
        item.PRICE = "19.99"
        item.width = "200"
        item.height = "200"

        item = data.CreateChild("ContentNode")
        item.HDPOSTERURL = "http://orig03.deviantart.net/e9be/f/2009/079/e/d/aimp2_icon_128x128_by_vicing.png"
        item.GOTITEMCONTENT = false
        item.PRICE = "19.99"
        item.width = "300"
        item.height = "300"

        m.top.content = data
	    
	   
        m.top.visible = true
        m.top.SetFocus(true)
        print "has focus:"
	    print m.top.hasFocus()

 m.top.ObserveField("itemSelected", "onItemSelected")
	   
	    m.top.ObserveField("itemFocused", "onitemFocused")

    end function

    function onitemFocused() as void
    	print "item itemFocused"
    	print m.top.itemFocused
    end function

    function onItemSelected() as void
    	print "item selected"
    	print m.top.itemSelected
    end function

    function onKeyEvent(key as String, press as Boolean) as Boolean

	handled = false
	print "Channel Zapper: " + key
	   
       if press
        if key = "left"
            print "key press left"
        end if
       end if
	return handled
end function
]]>
</script>

</component>

SimpleGridItem.xml

<?xml version="1.0" encoding="utf-8" ?>
 
<component name="SimpleGridItem" extends="Group">
 
<interface>
  <field id="width" type="float" onChange="widthChanged"/>
  <field id="height" type="float" onChange="heightChanged"/>
  <field id="itemContent" type="node" onChange="itemContentChanged"/>
</interface>
 
<script type="text/brightscript" >
<![CDATA[
  function itemContentChanged()
    print "itemContentChanged"
    m.gridPoster.uri = m.top.itemContent.HDPOSTERURL
    print "m.top.itemContent.HDPOSTERURL"
    print m.top.itemContent.PRICE
    print m.top.itemContent.HDPOSTERURL
    if m.top.itemContent.GOTITEMCONTENT
      m.priceBox.visible = false
      m.priceLabel.visible = false
      m.ownedIcon.visible = true

    else
      m.priceLabel.text = m.top.itemContent.PRICE
      m.priceBox.visible = true
      m.priceLabel.visible = true
      m.ownedIcon.visible = false
    end if
    updateLayout()
  end function
 
  function widthChanged()
    updateLayout()
  end function
 
  function heightChanged()
    updateLayout()
  end function
 
  function updateLayout()
  print "updateLayout"

    if m.top.height > 0 and m.top.width > 0
    print "got inside updateLayout"
      posterSize = m.top.height
      m.gridPoster.width = m.top.width
      m.gridPoster.height = m.top.height
      ' position the ownedIcon in the bottom/right corner
      m.ownedIcon.translation = [ m.top.width - m.ownedIcon.bitmapWidth, m.top.height - m.ownedIcon.bitmapHeight ]
      m.priceBox.width = m.top.width
      m.priceBox.height = m.ownedIcon.bitmapHeight
      m.priceBox.translation = [ 0, m.top.height - m.priceBox.height ]
      m.priceLabel.width = m.top.width
      m.priceLabel.height = m.priceBox.height
      m.priceLabel.vertAlign = "center"
      m.priceLabel.horizAlign = "center"
      m.priceLabel.translation = m.priceBox.translation
    end if
  end function
 
  function init()
    m.gridPoster = m.top.findNode("gridPoster")
    m.priceBox = m.top.findNode("priceBox")
    m.priceLabel = m.top.findNode("priceLabel")
    m.ownedIcon = m.top.findNode("ownedIcon")
    m.ownedIcon.loadSync = true
    m.ownedIcon.uri = "http://arts.dartmouth.edu/assets/green-check.png"
  end function
]]>
</script>
 
<children>
 
<Poster id="gridPoster"  />
<Rectangle id="priceBox" color="0x00000080"  />
<Label id="priceLabel"  text="text here" />
<Poster id="ownedIcon" />
 
</children>

</component>
 

[TheEndless]

"edskitter" wrote:
I am trying to set up a markup grid from the documentation and unable to setFocus on the actual grid. Key presses are not handled and I was wondering if anyone has gotten this to work or what I am doing wrong. The 3 nodes are rendered but key presses are not handled.

You need to set focus in your scene, either using the initialFocus attribute of the component or by explicitly setting focus to the grid in your scene's init().

[juantwc]

Having the same problem.

Setting the focus on the scene using initialFocus also doesn't work. Or maybe i am doing it wrong?

<?xml version="1.0" encoding="utf-8" ?>
<component name="SimpleRowListScene" extends="Scene" initialFocus="theRowList" >
	<children>
		<SimpleRowList id="theRowList" translation="[50,50]" />
	</children>
</component>

As a suggestion i would say when creating documentation please make sure things actually work. It's confusing for new developers when it doesn't or there is some hidden step involved.

[edskitter]

"edskitter" wrote:
How would keep persistent data ( i.e. login information ) as roRegistry is not allowed in the Graph components?

Just to answer this question after getting help from RokuJoel, just use the roRegistry inside a Task node and it works fine.

sub getContent()
  if m.top.registryaction = "read"
    if RegRead("login", "AppLogin")=invalid OR RegRead("password", "AppLogin")=invalid
        m.top.registrycontent = "Not Found"
    else 
        print "CREDENTIALS FOUND"
        m.top.registrycontent = "CREDENTIALS FOUND"
        print RegRead("login", "AppLogin")
        print RegRead("password", "AppLogin")
    end if

  end if

  if m.top.registryaction = "delete"
    RegDelete("login", "AppLogin")
    RegDelete("password", "AppLogin")
    m.top.registrycontent = "DELETED!!!!!"
  end if
end sub

'******************************************************
'Registry Helper Functions
'******************************************************
Function RegRead(key, section=invalid)
    if section = invalid then section = "Default"
    sec = CreateObject("roRegistrySection", section)
    if sec.Exists(key) then return sec.Read(key)
    return invalid
End Function

Function RegWrite(key, val, section=invalid)
    if section = invalid then section = "Default"
    sec = CreateObject("roRegistrySection", section)
    sec.Write(key, val)
    sec.Flush() 'commit it
End Function

Function RegDelete(key, section=invalid)
    if section = invalid then section = "Default"
    sec = CreateObject("roRegistrySection", section)
    sec.Delete(key)
    sec.Flush()
End Function

[maria_tarkany]

"juantwc" wrote:
Having the same problem.
Setting the focus on the scene using initialFocus also doesn't work. Or maybe i am doing it wrong?
As a suggestion i would say when creating documentation please make sure things actually work. It's confusing for new developers when it doesn't or there is some hidden step involved.

I have the same problem with RowList example downloaded from here: http://sdkdocs.roku.com/download/attach ... 228&api=v2 .

I've noticed that after my roku device goes into sleep mode (the screensaver appears), the navigation (moving the cursor) works...

I also made a gif with the flow:


1. open the example
2. the navigation doesn't work, I can't focus another item
3. roku device is in sleep mode (screensaver plays on the screen)
4. press ok button on the remote to stop the screensaver
5. press right => the next item is focused

PS: I've set m.top.rowFocusAnimationStyle = "fixedFocusWrap" instead of "floatingfocus". That's why the position of the cursor is not changed, the items are scrolled to the left.

[RokuRobB]

The SimpleRowList.zip sample has been fixed.

[RokuJoel]

"edskitter" wrote:
Could Roku post an example with multiple scenes and how to navigate between them?

Engineering's Response:
So you can create the “illusion” of having multiple Scenes by selectively making the current “scene” invisible and replacing it (appending) another component, then “go back” when needed by removing/disappearing the component “scene” and making the original “scene” visible again (not unheard of for UI programming, in fact). Again, you probably want to use your Scene node as your “master control” node.

I’ll show the latest code I’m working on to do this, for a much more elaborate tutorial I’ll be adding to the documentation shortly.

So here’s the code for switching back and forth between “scenes”. It is from a OverhangPanelSetScene node, which at this time consists entirely of BrightScript code to manipulate the dozens of child components, setting focus, creating/appending them, removing them, etc. Note that focus is set explicitly on a child GridPanel node grid, dialogs are brought up in response to key presses for certain components, etc., even the background can be changed (though I’ve commented this out for this version since I was using that for a different purpose).

sub runselectedexample()
      examplecontent = m.examplespanel.grid.content.getChild(m.examplespanel.grid.itemSelected)
      component = examplecontent.shortdescriptionline2

      m.top.overhang.optionsAvailable = false
      m.top.overhang.visible = false
      m.top.panelset.visible = false
      m.banner.visible = false
      m.banner.control = "stop"
      ' m.top.backgroundURI = "pkg:/images/rsgetbgdark.jpg"
                                
      m.currentexample = createObject("RoSGNode",component)
      m.top.AppendChild(m.currentexample)
      m.currentexample.SetFocus(true)
    end sub

    function onKeyEvent(key as String,press as Boolean) as Boolean
      if press then
        if key = "back"
          if not (m.currentexample = invalid)
            m.top.RemoveChild(m.currentexample)
            m.currentexample = invalid

            ' m.top.backgroundURI = "pkg:/images/rsgetbg.jpg"
            m.banner.control = "start"
            m.banner.visible = true
            m.top.overhang.optionsAvailable = true
            m.top.overhang.visible = true
            m.top.panelset.visible = true
            m.examplespanel.grid.setFocus(true)

            return true
          end if

        else if key = "options"
                  if (m.top.overhang.optionsAvailable = true)
                 dialog = createObject("RoSGNode","Dialog")
                 dialog.title = "Example Options"
                 m.buttons =  [ "Show Code", "Show Example", "Show Instructional Video" ]
                 dialog.buttons = m.buttons
                 m.top.dialog = dialog
          end if
        end if
      end if

    return false
    end function

[RokuJoel]

"mrkjffrsn" wrote:
Hi Everyone, I ran into an issue while using the getChild() from a node. It seems to return child nodes which do not exist within the parent node.

• The non-existant nodes returned by getChild problem is a bug and will be fixed (to the best of my knowledge)

[maria_tarkany]

"RokuRobB" wrote:
The SimpleRowList.zip sample has been fixed.

Nice, thanks.

So the init() function from SimpleRowListScene scene was missing:

function init()
    m.theRowList = m.top.FindNode("theRowList")
    m.theRowList.SetFocus(true)
end function

- we had to set the focus to the rowList component from the scene xml.

[edskitter]

Is there any sample 9-patch images for the EPGGrid? I am running across an issue where in SD mode, the overlays are not showing. I use a custom png for this but I am not seeing the results I would like. I'm not drawing the overlays to what Roku is expecting.

The default overlays (i.e. programBackgroundBitmapUri) work great in 720 and 1080, not SD though.