Roku SceneGraph tutorial and sample channels!

SceneGraphXMLTutorial

Today we are releasing new sample applications for learning the fundamentals of Roku SceneGraph, our new XML framework for building channels.

For existing channels, these examples are functional and highlight how you can have full control of the presentation layer with Roku SceneGraph while using BrightScript for the scripting language.

For new Roku developers, make sure to follow our device setup guide and the hello world guide to understand how to install a sample channel for your Roku device.


Roku SceneGraph Sample Channel – “SThree”

Showcasing a Roku channel powered by RSS feeds and SceneGraph

SThree are two versions of the same channel application that demonstrate how to retrieve content from an RSS feed and populate the channel with thumbnails, video, text, and more. It also highlights how you can observe actions and work with SceneGraph and BrightScript to build interactions within your channel.

SThree_Details_Video

For this sample RSS feed, we’ve pulled together a collection of Roku Recommends videos, complete with titles, descriptions, playback, and tags.

SThree Resources:

SceneGraph XML tutorial

Sample channel for SceneGraph components and screens

For developers familiar with XML and tree-based structures, this sample application is a great starting point for following along our SDK docs guide to Roku SceneGraph. In addition, this sample channel is supplemental to the SceneGraph XML tutorial and SceneGraph Reference.

SceneGraphXMLTutorial

With a combination of XML and our scripting language BrightScript, you’ll see working examples of how to build your own sample channels for Roku OS 7.

SceneGraph XML tutorial resources:

This entry was posted in News and tagged , , , , , . Bookmark the permalink.
  • John

    I was studying the layout of the S three resource and embedded into Source Folder labeled Main.brs was a single mrss feed to ROKU. Now in my current channel of “Uptoten” found on my.roku.com/add/uptoten I am utilizing multiple categories vs.a mrss feed which do not seem to be recognized compared to older .sdk designs. My current channel is based off http://forums.roku.com/viewtopic.php?f=34&t=91672 aka: NewVideoPlayer. Has anyone figured how how to manipulate the current example of the sample grid.

    • John

      It took some major reworking the code to my need, but i think i managed to eliminate two of the feeds and just redo the existing mrss for my own needs and save to my server. This is my end results. my.roku.com/add/biztale

      What I am trying to figure out is how to enable a Multiple Choice voting grid for a viewer to select which video i should make that would end up sending the results by email. Is that possible if so, which is the best example that shows this command to use?

      • Michael Kisser

        Hi John,

        What steps were needed to get the RSS to work on your own server. I tried just putting a copy on my own server and telling it where it is. But it does not like that.

        Also how do I split it so each row uses its own RSS feed.

        Thanks,

        Mike

        • John

          Hey Mike, This is my attempt at the re-write of the RSS feed. http://biztale.xyz/roku/xml/media.rss once it loads in your browser you can actually save the file to your drive and hit EDIT. I use Notepad ++ as this has the ability to edit live and save to my free server. I utilize a few techniques for biztale including PowerPoint in Office2016 along with Dropshots.

  • DSHGA

    I downloaded this and installed it on my Roku as-is. It breaks because “scene” is invalid:

    BrightScript Debugger> next
    022: scene.gridContent = ParseXMLContent(list)
    BrightScript Debugger> s
    022: scene.gridContent = ParseXMLContent(list)
    Current Function:
    014: ContentList : oneRow
    015: }
    016: {
    017: Title:”Second row”
    018: ContentList : oneRow
    019: }
    020: ]
    021:
    022:* scene.gridContent = ParseXMLContent(list)
    023:
    024: while true
    025: msg = wait(0, port)
    026: print “——————”
    Invalid value for left-side of expression. (runtime error &he4) in pkg:/source/main.brs(22)
    022: scene.gridContent = ParseXMLContent(list)

    Backtrace:
    #0 Function runuserinterface() As Void
    file/line: pkg:/surce/main.brs(24)

    Local Variables:
    global rotINTERFACE:ifGlobal
    m roAssociativeArray refcnt=2 count:0
    screen bsc:roSGScreen refcnt=1
    scene Invalid
    port bsc:roMessagePort refcnt=2
    onerow roArray refcnt=3 count:15
    list roArray refcnt=1 count:2
    msg

    Any thoughts on why the scene isn’t valid?

    • Gabriel Alexandru

      did you figure this out?

  • Philip Giuliani

    Whats the best way to do a deep navigation? I see that in the SThree example, every view has the next view in its body. I dont like that when every view will have to load its own data. I cannot create a new screen inside of a xml 🙁

  • Loving the SceneGraph interface–thanks for all your hard work in bringing it to the developer community.

    One thing I have yet to be able to find is how to migrate the old round-robin registration to the SceneGraph layouts, which is key to a migration. Any chance that has been released or is coming soon?

    Thanks again!

    • Andres Estevez

      hi

  • Edward RC

    I finally got this demo work, what I need to know is how to create and modify more rows.
    Any Help, Please!
    Thanks!

    • Joseph Suchta

      This example uses an external XML RSS feed, the URI can be found in main.brs

    • Abel Valdez

      Hello I have the same question, I modify the RSS feed for my own Json service, and everything works fine in Roku plus but in roku express is super very slow and sometimes crash. I would like to know how can I load partially the information for example 2 rows by 2 rows like a RecyclerLisRow

  • Edward RC

    Hello! How to add subtitles to Hero grid Screen?

    • Hi Edward, do you mean titles overlaid or closed captioning? Thx.

      • Edward RC

        Hello! Chris, Closed Captions on srt formar file.
        if I could added from a server .
        Thanks!

  • Gabriel Alexandru

    I imported the sample app in eclipse but after my first attempt to run it i received the next error: BRIGHTSCRIPT: ERROR: roSGScreen.CreateScene: No such node tutorialPanelSetScene: pkg:/source/main.brs(11) . What am i doing wrong?

    • Jim Allison

      When you export your app, make sure that the following directories and their content are selected for deployment (have a checkmark next to them):
      components
      images
      source
      The manifest file in the top-level folder should also be checked.

      • Gabriel Alexandru

        I found my mistake. I’ve tried to run a SceneGraph project without updating the SDK. It’s working like a charm now.

        Thank you for answer!

  • Edward RC

    Hello! Chris, Closed Captions on srt formar file.
    if I could added from a server .
    Thanks!

  • Luis

    How can I do this with json?

    Thanks

    • Looking for the same myself. Anyone have a resource with JSON examples?

      • Gabriel GAP

        Have you got an example with json? I extracted the info in debug mode but did not go to the node

  • Mark ‘Markus’ Perro

    Ive got a chromebook and I cant do shit

  • Luis Antonio Salazar Cairasco

    Hi, How can you place a different rss between the first and second row? In the sdk example, the first row and the second row contain the same url.SetUrl .rss
    —-
    oneRow = GetApiArray()
    list = [
    {
    TITLE : “First row”
    ContentList : oneRow
    }
    {
    TITLE : “Second row”
    ContentList : oneRow

    thanks.

    • Andres Estevez

      HELLO YA KNOW HOW TO PUT A DIFFERENT MRSS YOU COULD HELP ME

  • Andres Estevez

    How can you place a different rss between the first and second row? In the sdk example, the first row and the second row contain the same url.SetUrl .rss