Grid Screen

Hello,

I’m new to developing a channel, no experience on programming but can pick up examples quick from the SDK download. I developed a channel from the samples and changed the images. I uploaded the video file to Roku box and the source file to the server. Im able to see the channel on Roku box but I dont like the way the layout grid looks after clicking on the channel button. Can i get the code that will make the grid screen look like the Netflix layout screen and let me know where to add it to.

Thanks

Try the developers forum

viewforum.php?f=34

SetGridStyle(String style)
Sets the style or theme for displaying images in the grid screen. This allows different appearances of the overall grid for different sized images:

  • flat-movie – movie posters as seen in the Netflix channel (Default)
    Image sizes: SD 110x150 HD 210x270
    SD 5 posters across, by 2 rows
    HD 5 posters across, by 2 rows

Search your brs files for “SetGridStyle” and take it from there if you find it.
You’ll want to set it with something like
screen.SetGridStyle(“Flat-Movie”) to make it look like Netflix’s choice.

Thanks for the response but a little confused. I looked through all the .brs in the source folder and can’t find it. HELP!!

Simplegrid\source\SimpleGrid.brs

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

I merged the new files from the current sdk into my existing sdk work folder - so I’m not sure if the simplegrid example in the current SDK is the same as what I have.

The actual setting of the style is here:
Function preShowGridScreen(style as string) As Object
m.port=CreateObject(“roMessagePort”)
screen = CreateObject(“roGridScreen”)
screen.SetMessagePort(m.port)
screen.SetDisplayMode(“scale-to-fill”)
screen.SetGridStyle(style)
return screen
End Function

What I used is the example of the videoplayer zip file and source file. I uploaded the zip file to roku box and source to my server. I replaced the logos and have it connected to the server. I actually got the channel working but I liked the simplegrid look. I found the simplegrid.brs and looked at ur responce but I notice that my source file has multiple .brs files. Do i take the simplegrid.brs and replace a .brs file and rename it or copy to a certain .brs file or start from scratch (something i dont wanna do). Thanks again for your responce and being patient with me.

You’d need to merge the line(s) you need into your own source.
Before you show your grid screen, to make it look like netflix 5 columns with 2 rows, you use screen.SetGridStyle(“Flat-Movie”) where screen is the handle to the CreateObject(“roGridScreen”) you are trying to display.
If your gridscreen was working before, then that single adjustment should be all that you need.

I have in my source file:

appDetailScreen.brs
appHameScreen.brs
appMain.brs
appPosterScreen.brs
appVideoScreen.brs
catagoryFeed.brs
deviceInfo.brs
generalDlgs.brs
generalUtils.brs
showFeed.brs
urlUtils.brs

Do I merge the simpleGrid.brs in the appDetailScreen.brs and if I merge in a .brs file do i copy and paste?

Which of those files has your gridscreen code in it? Put the line or two for SetGridStyle into whatever file has the grid setup.

I noticed that the Simple Grid Screen Demonstration App (SimpleGrid.brs) has the “Sub Main ()” like my source file “appMain.brs” but different body code:

SimpleGrid.brs

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

appMain.brs

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

Do I merge certain code from SimpleGrid.brs into my source file appMain.brs? Thanks again for responding

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.

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.

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.

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.

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.

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?

That would be a good start.

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

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.

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 :slightly_smiling_face: