Beta Scene Graph Components

edskitter · Thu Nov 19, 2015 8:59 am

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 · Thu Nov 19, 2015 11:03 am

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 · Mon Nov 30, 2015 5:54 am

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 · Thu Dec 03, 2015 9:39 am

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 · Wed Dec 09, 2015 4:40 am

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.

Wed Dec 09, 2015 12:59 pm

The SimpleRowList.zip sample has been fixed.

Wed Dec 09, 2015 3:57 pm

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

Wed Dec 09, 2015 4:00 pm

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 · Thu Dec 10, 2015 1:49 am

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 · Thu Dec 10, 2015 5:15 pm

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.

dacian_roman23 · Mon Dec 14, 2015 1:14 am

I'm in a row list screen, and I have 3 row list elements. When i select one of them, i create a new scene that extends the task node that will download and parse a xml file. I am able to create a new screen , create my scene, but when i try to append any content to my scene, roku freezes, the telnet connection is lost, and then roku restarts itself . Suppose for the purpose of this example that when i select first element from the row i want to insert a rectangle such as <Rectangle id="middleRectangle" color="0xFFFFFF" width="50" height="50" translation="[250,225]"/> or when i select the second element i want to insert something as a label

function createContentTest(xml) as void
contentNode = createObject("roSGNode","ContentNode")
for each elem in xml
print elem.getName()
child = contentNode.createChild(elem.getName())
child.setFields(elem.getAttributes())
end for
screen = createObject("roSGScreen")
port = createObject("roMessagePort")
screen.setMessagePort(port)
scene = screen.createScene("seletedItemScene")
scene.appendChild(contentNode)

end function

####### selectedItemScene ####

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

<component name="seletedItemScene" extends="Scene">

<children>
<Label text="aaa" translation="[0,0]" />
</children>

</component>

dacian_roman23 · Wed Dec 16, 2015 3:46 am

I'm trying to create a "roArray" object in my scenegraph init function, and i get invalid as a result. It is not possible ? This component is not listed in Scene Graph BrightScript Support table.

maria_tarkany · Fri Dec 18, 2015 2:20 am

Can we change the colour of the RowList cursor?
I've noticed by default it's bright white... but the client would like to have it on blue colour.

maria_tarkany · Tue Dec 22, 2015 2:08 am

How to set a field outside the xml file?

I want to send a value when I create a scene in main function:

sub Main()
    screen = CreateObject("roSGScreen")
    m.port = CreateObject("roMessagePort")
    screen.setMessagePort(m.port)
    scene = screen.CreateScene("FirstScene")
    scene.url = "http://wallpaperswide.com/download/" 'HERE I want to send the url value
    'in debugging mode scene.url or scene.top.url are both invalid here
    screen.show()
end sub

I have this xml with "FirstScene" Scene:

<?xml version="1.0" encoding="utf-8" ?> 
<component name="FirstScene" extends="Scene" >
   <interface>
      <field id="url" type="string"/>
   </interface>
   <script type="text/brightscript">
        <![CDATA[
          sub init()
               m.ep1 = m.top.createChild("Poster")
          m.ep1.uri = m.top.url   'HERE I want to use the url
              'But when I debug the app, in terminal the m.top.url field has no value
          m.ep1.width = "264"
          m.ep1.height = "148"
          m.ep1.translation = "[930,500]"          
          end sub
         ]]>
        </script>
</component>

dacian_roman23 · Tue Dec 22, 2015 3:43 am

Regarding what Maria said, a field from a component interface can be set only in the init function of that component or in other components init function ? Is there a way for setting a field like she is doing in the example ? If not, how can we solve this problem?

Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Re: Beta Scene Graph Components

Who is online