Roku Developer Program

[destruk]

Can you post the code that you are using now in your application to create the gridscreen? Then we could tell you where to put the line to set the grid style.

[rayzor]

I checked my source folder with the .brs files and search each one and couldn't find grid style section. I downloaded the SDK from the Roku Developer Home site and used the videoplayer folder in the example folder. I made changes in the image and source folder, zipped it, and uploaded to the Roku box. Of coarse its not the screen that i wanted but when I upload the simplegrid.zip folder to the Roku box it has the netflix style grid but just the grid. The videoplayer folder I can make changes so it sees my server and i can manipulate images and .brs files. The simplegrid folder only has one simplegrid.brs file in the source folder and no xml folder for the server side so i can make changes to it. The videoplayer folder has everything to start a channel and is linked to my server so i can see images and video. The simplegrid folder just has the grid style so u can see it on the Roku box but doesn't have the rest of the files to start a channel. Thanks for ur respond.

[destruk]

ok, so your video player with the server code you need, and the icons and selection stuff you need, does not have any gridscreen code in it now? If that is the case, then you ned to decide when and where the gridscreen should show up in your application. Do you want the Gridscreen to be the first one like Netflix - where you enter the channel and it immediately shows the gridscreen, or do you want a gridscreen to show up under the top level, or the second level, or third? And then, with the gridscreen, when you make a selection, do you want a details screen to populate or springboard?
If it helps, you might want to merge all the brs files into a single file to get an idea of what the real program flow is. That's what the roku does when you upload a channel in developer mode - it merges all the brs files into a single file. It's easier to search everything in your ide/editor that way too. It makes no difference which method you use - they're all mixed up on final packaging.

[rayzor]

I would like the GridScreen to be first once you click on our channel then when you make a selection it should perform like Netflix. Does it matter what order when merging the .brs file together and what should it be named for the Roku box. Can I delete the description between each code? Where should the Netflix code go once everything is merged? Thanks again for ur responce.

[destruk]

If you want it to be first, then it's probably just a much easier idea to use the simple gridscreen app and merge whatever you use in your videoplayer app into it.
The merged brs file can be called anything you like as long as it's in the source folder and has a Main() or RunUserInterface() so it knows where the program starts.

[rayzor]

In my source folder it has 5 .brs video player files and 2 of them (appMain.brs and appPosterScreen.brs) has the heading "Sub Main ()" and "Function" same as the SimpleGrid.brs file but different code under each heading. Should I take the appMain and appPosterScreen code replace it with the SimpleGrid code?

[destruk]

That would be a good start.

[rayzor]

I replaced the appMain and appPosterScreen code with SimpleGrid code and it doesn't show up on Roku box. Below is the code that is in my folder the appMain combinded with appPosterScreen and trying to merge the SimpleGrid under it. Can you please provide me with the correct merged code. Thanks
I combined the appMain and appPosterScreeen together:
Sub Main()

'initialize theme attributes like titles, logos and overhang color
initTheme()

'prepare the screen for display and get ready to begin
screen=preShowHomeScreen("", "")
if screen=invalid then
print "unexpected error in preShowHomeScreen"
return
end if

'set to go, time to get started
showHomeScreen(screen)

End Sub

Sub initTheme()

app = CreateObject("roAppManager")
theme = CreateObject("roAssociativeArray")

theme.OverhangOffsetSD_X = "72"
theme.OverhangOffsetSD_Y = "31"
theme.OverhangSliceSD = "pkg:/images/Overhang_Background_SD.png"
theme.OverhangLogoSD = "pkg:/images/Overhang_Logo_SD.png"

theme.OverhangOffsetHD_X = "125"
theme.OverhangOffsetHD_Y = "35"
theme.OverhangSliceHD = "pkg:/images/Overhang_Background_HD.png"
theme.OverhangLogoHD = "pkg:/images/Overhang_Logo_HD.png"

app.SetTheme(theme)

End Sub

Function preShowPosterScreen(breadA=invalid, breadB=invalid) As Object

if validateParam(breadA, "roString", "preShowPosterScreen", true) = false return -1
if validateParam(breadB, "roString", "preShowPosterScreen", true) = false return -1

port=CreateObject("roMessagePort")
screen = CreateObject("roPosterScreen")
screen.SetMessagePort(port)
if breadA<>invalid and breadB<>invalid then
screen.SetBreadcrumbText(breadA, breadB)
end if

screen.SetListStyle("arced-landscape")
return screen

End Function

Function showPosterScreen(screen As Object, category As Object) As Integer

if validateParam(screen, "roPosterScreen", "showPosterScreen") = false return -1
if validateParam(category, "roAssociativeArray", "showPosterScreen") = false return -1

m.curCategory = 0
m.curShow = 0

screen.SetListNames(getCategoryList(category))
screen.SetContentList(getShowsForCategoryItem(category, m.curCategory))
screen.Show()

while true
msg = wait(0, screen.GetMessagePort())
if type(msg) = "roPosterScreenEvent" then
print "showPosterScreen | msg = "; msg.GetMessage() " | index = "; msg.GetIndex()
if msg.isListFocused() then
m.curCategory = msg.GetIndex()
m.curShow = 0
screen.SetFocusedListItem(m.curShow)
screen.SetContentList(getShowsForCategoryItem(category, m.curCategory))
print "list focused | current category = "; m.curCategory
else if msg.isListItemSelected() then
m.curShow = msg.GetIndex()
print "list item selected | current show = "; m.curShow
m.curShow = displayShowDetailScreen(category, m.curShow)
screen.SetFocusedListItem(m.curShow)
print "list item updated | new show = "; m.curShow
else if msg.isScreenClosed() then
return -1
end if
end If
end while


End Function

Function displayShowDetailScreen(category as Object, showIndex as Integer) As Integer

if validateParam(category, "roAssociativeArray", "displayShowDetailScreen") = false return -1

shows = getShowsForCategoryItem(category, m.curCategory)
screen = preShowDetailScreen(category.Title, category.kids[m.curCategory].Title)
showIndex = showDetailScreen(screen, shows, showIndex)

return showIndex
End Function

Function getCategoryList(topCategory As Object) As Object

if validateParam(topCategory, "roAssociativeArray", "getCategoryList") = false return -1

if type(topCategory) <> "roAssociativeArray" then
print "incorrect type passed to getCategoryList"
return -1
endif

categoryList = CreateObject("roArray", 100, true)
for each subCategory in topCategory.Kids
categoryList.Push(subcategory.Title)
next
return categoryList

End Function

Function getShowsForCategoryItem(category As Object, item As Integer) As Object

if validateParam(category, "roAssociativeArray", "getCategoryList") = false return invalid

conn = InitShowFeedConnection(category.kids[item])
showList = conn.LoadShowFeed(conn)
return showList

End Function
________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

This is the SimpleGrid code:
Sub Main()

'initialize theme attributes like titles, logos and overhang color
initTheme()

gridstyle = "Flat-Movie"

'set to go, time to get started
while gridstyle <> ""
print "starting grid style= ";gridstyle
screen=preShowGridScreen(gridstyle)
gridstyle = showGridScreen(screen, gridstyle)
end while

End Sub

Sub initTheme()
app = CreateObject("roAppManager")
app.SetTheme(CreateDefaultTheme())
End Sub

Function CreateDefaultTheme() as Object
theme = CreateObject("roAssociativeArray")

theme.ThemeType = "generic-dark"

' All these are greyscales
theme.GridScreenBackgroundColor = "#363636"
theme.GridScreenMessageColor = "#808080"
theme.GridScreenRetrievingColor = "#CCCCCC"
theme.GridScreenListNameColor = "#FFFFFF"

' Color values work here
theme.GridScreenDescriptionTitleColor = "#FFFF00"
theme.GridScreenDescriptionDateColor = "#FF005B"
theme.GridScreenDescriptionRuntimeColor = "#5B005B"
theme.GridScreenDescriptionSynopsisColor = "#606000"

'used in the Grid Screen
theme.CounterTextLeft = "#FF0000"
theme.CounterSeparator = "#00FF00"
theme.CounterTextRight = "#0000FF"

theme.GridScreenLogoHD = "pkg:/images/Overhang_Test_HD.png"

theme.GridScreenLogoOffsetHD_X = "0"
theme.GridScreenLogoOffsetHD_Y = "0"
theme.GridScreenOverhangHeightHD = "99"

theme.GridScreenLogoSD = "pkg:/images/Overhang_Test_SD43.png"
theme.GridScreenOverhangHeightSD = "66"
theme.GridScreenLogoOffsetSD_X = "0"
theme.GridScreenLogoOffsetSD_Y = "0"

' to use your own focus ring artwork
'theme.GridScreenFocusBorderSD = "pkg:/images/GridCenter_Border_Movies_SD43.png"
'theme.GridScreenBorderOffsetSD = "(-26,-25)"
'theme.GridScreenFocusBorderHD = "pkg:/images/GridCenter_Border_Movies_HD.png"
'theme.GridScreenBorderOffsetHD = "(-28,-20)"

' to use your own description background artwork
'theme.GridScreenDescriptionImageSD = "pkg:/images/Grid_Description_Background_SD43.png"
'theme.GridScreenDescriptionOffsetSD = "(125,170)"
'theme.GridScreenDescriptionImageHD = "pkg:/images/Grid_Description_Background_HD.png"
'theme.GridScreenDescriptionOffsetHD = "(190,255)"


return theme
End Function

Function preShowGridScreen(style as string) As Object

m.port=CreateObject("roMessagePort")
screen = CreateObject("roGridScreen")
screen.SetMessagePort(m.port)
' screen.SetDisplayMode("best-fit")
screen.SetDisplayMode("scale-to-fill")

screen.SetGridStyle(style)
return screen

End Function

Function showGridScreen(screen As Object, gridstyle as string) As string

print "enter showGridScreen"

categoryList = getCategoryList()
categoryList[0] = "GridStyle: " + gridstyle
screen.setupLists(categoryList.count())
screen.SetListNames(categoryList)
StyleButtons = getGridControlButtons()
screen.SetContentList(0, StyleButtons)
screen.SetContentList(1, getShowsForCategoryItem(categoryList[1]))
screen.SetContentList(2, getShowsForCategoryItem(categoryList[2]))
screen.SetContentList(3, getShowsForCategoryItem(categoryList[3]))
screen.Show()

while true
print "Waiting for message"
msg = wait(0, m.port)
'msg = wait(0, screen.GetMessagePort()) ' getmessageport does not work on gridscreen
print "Got Message:";type(msg)
if type(msg) = "roGridScreenEvent" then
print "msg= "; msg.GetMessage() " , index= "; msg.GetIndex(); " data= "; msg.getData()
if msg.isListItemFocused() then
print"list item focused | current show = "; msg.GetIndex()
else if msg.isListItemSelected() then
row = msg.GetIndex()
selection = msg.getData()
print "list item selected row= "; row; " selection= "; selection

' Did we get a selection from the gridstyle selection row?
if (row = 0)
' yes, return so we can come back with new style
return StyleButtons[selection].Title
endif

'm.curShow = displayShowDetailScreen(showList[msg.GetIndex()])
else if msg.isScreenClosed() then
return ""
end if
end If
end while


End Function

Function displayShowDetailScreen(category as Object, showIndex as Integer) As Integer

'add code to create springboard, for now we do nothing
return 1

End Function

Function getCategoryList() As Object

categoryList = [ "GridStyle", "Reality", "History", "News", "Comedy", "Drama"]
return categoryList

End Function

Function getShowsForCategoryItem(category As Object) As Object

print "getting shows for category "; category

showList = [
{
Title: category + ":Title 1",
releaseDate: "1976",
length: 3600-600,
hdBranded: true,
HDPosterUrl:"pkg:/images/Logo_Overhang_Roku_SDK_HD.jpg",
SDPosterUrl:"pkg:/images/Logo_Overhang_Roku_SDK_SD43.png",
Description:"Short Synopsis #1",
Synopsis:"Length",
StarRating:10,
}
{
Title: "Title 2",
releaseDate: "MCMLXXI",
length: 36000,
Description:"Short Synopsis Show #2",
HDPosterUrl:"pkg:/media/bogusFileName_hd.jpg",
SDPosterUrl:"pkg:/media/bogusFileName_hd.jpg",
StarRating:40,
}
{
Title: "Beverly Hillbillies",
releaseDate: "1969",
rating: "PG",
Description:"Come and listen to a story about a man named Jed: Poor mountaineer, barely kept his family fed. Then one day he was shootin at some food, and up through the ground came a bubblin crude. Oil that is, black gold, Texas tea.",
numEpisodes:42,
contentType:"season",
StarRating:80,
UserStarRating:40
}
{
Title: "John F. Kennedy",
releaseDate: "1961",
rating: "PG",
Description:"My fellow citizens of the world: ask not what America will do for you, but what together we can do for the freedom of man.",
HDPosterUrl:"http://upload.wikimedia.org/wikipedia/en/5/52/Jfk_happy_birthday_1.jpg",
SDPosterUrl:"http://upload.wikimedia.org/wikipedia/en/5/52/Jfk_happy_birthday_1.jpg",
StarRating:100
}
{
Title: "Man on the Moon",
releaseDate: "1969",
rating: "PG",
Description:"That's one small step for man, one giant leap for mankind.",
HDPosterUrl:"http://upload.wikimedia.org/wikipedia/commons/1/1e/Apollo_11_first_step.jpg",
SDPosterUrl:"http://upload.wikimedia.org/wikipedia/commons/1/1e/Apollo_11_first_step.jpg",
StarRating:100
}
{
Title: "I have a Dream",
releaseDate: "1963",
rating: "PG",
Description:"I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character.",
HDPosterUrl:"http://upload.wikimedia.org/wikipedia/commons/8/81/Martin_Luther_King_-_March_on_Washington.jpg",
SDPosterUrl:"http://upload.wikimedia.org/wikipedia/commons/8/81/Martin_Luther_King_-_March_on_Washington.jpg",
StarRating:100
}
]

return showList
End Function

function getGridControlButtons() as object
buttons = [
{ Title: "Flat-Movie"
ReleaseDate: "HD:5x2 SD:5x2"
Description: "Netflix style"
}
{ Title: "Flat-Landscape"
ReleaseDate: "HD:5x3 SD:4x3"
Description: "Channel Store"
}
{ Title: "Flat-Portrait"
ReleaseDate: "HD:5x2 SD:5x2"
Description: "3x4 style posters"
}
{ Title: "Flat-Square"
ReleaseDate: "HD:7x3 SD:6x3"
Description: "1x1 style posters"
}
{ Title: "Flat-16x9"
ReleaseDate: "HD:5x3 SD:4x3"
Description: "HD style posters"
}
]
return buttons
End Function

[belltown]

What you're trying to do isn't a simple matter of cutting and pasting some code from the simplegrid example into the videoplayer example. The videoplayer example has a 3-level hierarchical content structure: the poster screens at the top level for the major categories, a filter banner displaying sub-categories below each of these categories, and the content poster screens themselves at the bottom level. The code and the XML files reflect this structure. A grid screen, as used in the Netfix channel that you want to emulate or simplegrid example, handles a 2-level content structure. You'd need to rework the design of the videoplayer code and the structure of its XML files to come up with a 2-level model (perhaps eliminating one of the levels) then incorporate the relevant portions of code from the simplegrid example. ... Or, start from scratch, incorporating some snippets of code from either example where it might help.

Either way, it's a non-trivial task for someone with no programming experience and no Roku development experience. There's no Roku example code that I know of that emulates a Netflix-like browsing experience. I know that several developers here have developed similar code for their own channels. I'm not sure if you'd be able find someone willing to share their code -- especially when you consider that many of these people are professionals getting paid to come up with new channels. Helping out with specific problems, or asking for small snippets of sample code to do something that's not clear from the documentation is one thing -- but it looks like you're asking for the complete code for an example channel that doesn't yet exist.

[AngeloB]

Hi, you guys are all beyound me, I just want to know how do I connect a website to the simplegrid example, thank, I know this is a a easy one you you 🙂