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: 
edskitter
Visitor

Re: Beta Scene Graph Components

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>
0 Kudos
TheEndless
Channel Surfer

Re: Beta Scene Graph Components

"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().
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
juantwc
Visitor

Re: Beta Scene Graph Components

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.
0 Kudos
edskitter
Visitor

Re: Beta Scene Graph Components

"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
0 Kudos

Re: Beta Scene Graph Components

"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.
0 Kudos
RokuRobB
Streaming Star

Re: Beta Scene Graph Components

The SimpleRowList.zip sample has been fixed.
0 Kudos
RokuJoel
Binge Watcher

Re: Beta Scene Graph Components

"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
0 Kudos
RokuJoel
Binge Watcher

Re: Beta Scene Graph Components

"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)
0 Kudos

Re: Beta Scene Graph Components

"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.
0 Kudos
edskitter
Visitor

Re: Beta Scene Graph Components

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.
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.