GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → rokudev → hero-grid-channel

rokudev / hero-grid-channel

Licence: other
Sample channel with sliding hero row and a grid of content below.

Programming Languages

Brightscript
28 projects

Hero Grid Channel Example

Hero Grid Sample Channel for the Roku Platform.

Hero-Grid-1 Hero-Grid-2 Hero-Grid-d

Use case

This sample channel should be used as a starter template for your channel development. It demonstrates how to display content in a fairly conventional Roku UI from multiple RSS feeds performant on all devices on the Roku platform.

How to run this sample

Features

  • Showcases a grid-based UI, varying the display of content by manipulating the built-in Scene Graph component
    • Includes a (1) hero sized row, (2) normal row, (3) movie poster row, and (4) a grid row of content.
  • Showcases how to create multiple "screens" in a channel
    • Includes the main grid screen, a details screen, and a screen that displays the video content.
  • Demonstrates how to use both built-in and custom made Scene Graph components
  • Demonstrates how to handle multiple URL requests to fill in different rows of content (e.g. Movies, specific genres, etc.)
  • Demonstrates how to handle deep-linking of content
  • Demonstrates how to display information to the user in a dialog box in case of failures to load content (e.g. bad URL request)

Directory Structure

  • Components: The Scene Graph components
    • DetailsScreen: All code related to the details screen
    • Animations: Currently only contains fadingbackground.brs/xml, which is used for the transitions between each grid tile element
    • HeroScreen: The main screen of the channel (i.e. the grid of content)
    • Item: The individual tile element that the grid is comprised of
    • LoadingIndicator: The spinning wheel displayed before content is available
    • Content: Contains all files related to handling content (URL request/response + parsing + content node creation for populating the UI). UriHandler.brs/xml handles URL requests/responses. Parser.brs/xml handles parsing of the response. SGHelperFunctions.brs includes functions that are/may be useful for SceneGraph development (currently only has 2 functions but will grow in size as more utilities become abstracted and conventionalized).
    • HeroScene.brs/xml: The main scene. Acts as the controller in the MVC-like pattern of the channel.
  • Images: Contains image assets used in the channel
  • Source: Contains the main brightscript file that runs right when the channel starts

Channel Flow

This section explains what happens when the channel/app does and what the user sees as a result.

  • Event: Opening the channel starts several URL requests to get content for each row of content in the channel.
  • User: While this occurs, a loading wheel is presented to the user.
  • Event: The URL responses are parsed as they come in and stored until all requests are finished. When all requests have been received, sets the UI element to the content
  • User: Sees the screen load with all the content
  • Event: HeroScreen --> user can move around the grid to look at different content. The user presses OK on the remote to select content.
  • User: Upon pressing OK, a details screen opens up and displays info. about the content.
  • Event: User presses the play button on the DetailsScreen
  • User: The video starts playing
  • Event: User presses the back button on the DetailsScreen
  • User: User goes back to the main grid content screen.
  • Event: User presses the back button on the video
  • User: Sees the details screen.

Issues / Feature Requests

Known issues

  • The content may take a while to load (i.e. the loading wheel will be active for a long time) since the HTTP requests are asynchronous and the content is only loaded after all requests have their corresponding responses parsed for content. This is an issue with network latency and async requests. One way to mitigate this issue is to load content whenever you receive a response. However, the implementation is a bit tricky since the content may load in a different order than intended. Any suggestions/pull requests on this issue would be appreciated!
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].