Creating a channel for multiple categories of video using Poster Screen for Roku

Posted By : Mohd Arif Khan | 06-Jan-2014

In the last blog, We've discussed 'How to deploy and debug a channel for Roku' and hope you have learn what you want .Now in this blog I'll explain how to show the category of videos with the help of Poster Screen(roPosterScreen Component) by taking a simple example.

 

In this blog, the app(channel) name is SimpleCategoryApp and folllow the same directry structure as last blog 'How to deploy and debug a channel for Roku'.

App have three categories Action, Comedy and Drama and each category have 3 items(videos) Item 1, Item 2 and Item 3 for all category.

First of all we'll write the code

 

SimpleCategoryApp/source/main.brs

 

'###########################################################
'##			Main()
'## Simple Category App for understanding Poster Screen
'###########################################################
Function Main()
 
    defaultTheme()
    displayCategory()
 
End Function
 
 
'###########################################################
'## 			defaultTheme()
'## setting default value of theme for the whole app
'###########################################################
 
Function defaultTheme()
 
    appManager = CreateObject("roAppManager")
    default = CreateObject("roAssociativeArray")
 'for HD if you need to test on SD then replace HD by SD like OverhangOffsetSD
    default.OverhangOffsetHD_X = "0"
    default.OverhangOffsetHD_Y = "0"
    default.OverhangSliceHD = "pkg:/images/overhang.png"
    default.OverhangLogoHD  = "pkg:/images/oodles2.png"
     
    default.BackgroundColor="#595959"
    app.SetTheme(default)
 
End Function
	

SimpleCategoryApp/source/showCategoryScreen.brs

 

'###########################################################
'##         displayCategory()
'## Display Category as a list and category items as a
'## poster
'###########################################################
Function displayCategory() As Integer
 
    mPort=CreateObject("roMessagePort")
    poster = CreateObject("roPosterScreen")
    poster.SetMessagePort(mPort)
    'we can set the list style as
    'flat-category,arced-landscape,arced-portrait,flat-episodic
    poster.SetListStyle("arced-landscape")
    category = getCategory()
    poster.SetListNames(category)
    categoryIndex=0
    categoryItems=getDetails(category[categoryIndex])
    poster.SetContentList(categoryItems)
    poster.Show()
 
    while true
        msg = wait(0, poster.GetMessagePort())
        if type(msg) = "roPosterScreenEvent" then
            if msg.isListFocused() then
        categoryIndex=msg.GetIndex()
        print "current category index = ";categoryIndex
        print "current category = ";category[categoryIndex]
                categoryItems=getDetails(category[categoryIndex])
                poster.SetContentList(categoryItems)
            else if msg.isListItemFocused() then
        print"You have focused"
                print"Category Index= "; categoryIndex
        print"Category Item index = "; msg.GetIndex()
            else if msg.isListItemSelected() then
                print"You have selected"
                print"Category Index= "; categoryIndex
        print"Category Item index = "; msg.GetIndex()
            else if msg.isScreenClosed() then
        print"Back button pressed"
                return -1
            end if
        end If
    end while
 
 
End Function
 
'###########################################################
'**         	getCategory()
'## There are three category but you can change by adding
'## and removing from below list
'###########################################################
Function getCategory() As Object
 
    category = [ "Action", "Report", "New Released" ]
    return category
 
End Function
 
 
'###########################################################
'##         		getDetails()
'## Here Details of particular category items
'###########################################################
Function getDetails(category As Object) As Object
 
    print "getDetails started with category "; category
    CategoryDetail = [
        {
            ShortDescriptionLine1:"Item 1",
            ShortDescriptionLine2:"Describe Item 1",
            HDPosterUrl:"pkg:/images/Thumbnail_HD.jpg",
            SDPosterUrl:"pkg:/images/Thumbnail_SD.jpg"
        }
        {
            ShortDescriptionLine1:"Item 2",
            ShortDescriptionLine2:"Describe Item 2",
            HDPosterUrl:"pkg:/images/Thumbnail_HD.jpg",
            SDPosterUrl:"pkg:/images/Thumbnail_SD.jpg"
        }
    ]
    print "getDetails ended with detail of category"
    return CategoryDetail
 
End Function
	
If you don't want to show Category list just comment above line number 15 that is replaced with screen.SetListNames(categoryList) from 'screen.SetListNames(categoryList)
Now make again zip and redeploy it you will see poster screen without category list

SimpleCategoryApp/manifest

 

title=Simple Category App
subtitle=You can edit source/main.brs and other brs file
mm_icon_focus_hd=pkg:/images/icon_focus_hd.jpg
mm_icon_side_hd=pkg:/images/icon_side_hd.jpg
mm_icon_focus_sd=pkg:/images/icon_focus_sd.jpg
mm_icon_side_sd=pkg:/images/icon_side_sd.jpg

In this blog you have learn how to create a poster screen with and without category list on Roku
You can download 'Ready to install' build from following link and directly deploy in above process

In next blog We'll discuss about List Screen with example

Thank you

 
Arif Khan

[email protected]

 

About Author

Author Image
Mohd Arif Khan

Arif is a bright Java and Grails developer and has worked on development of various SaaS applications using Grails framework.

Request for Proposal

Name is required

Comment is required

Sending message..