Develop home screen just like Amazon OnDemand

Archived
1

Hi All,
I am new to Roku development and have some basic questions.
We are trying to develop an App with home screen just like the one in Amazon Ondemand App - https://cacoo.com/diagrams/VlmkHx3OiFOVI2bN

Can you please provide help as to how one can develop this custom screen?

We are also looking at developing some additional interactivity on the detail screen (“Related Movies” feature) - https://cacoo.com/diagrams/VlmkHx3OiFOVI2bN#D0253

Will this be possible ? What kind of customizations do I need to do?

Thanks in Advance.

-Sunny

2

Any customized screen you want would have to be done with roImageCanvase or roScreen. It’s a lot of work to develop custom interfaces, but if you are dead set on it it’s possible. The channel code itself doesn’t need to be complex - most graphics you will need to pull down from your CDN/Webserver as you can’t fit much into the storage constraints of the app itself.

3

I believe that is the new roListScreen that did not make it into the documentation, hopefully we will have some docs for that in the not too distant future.

  • Joel
4

Thanks a lot. Appreciate your reply.

How simple is the customization to roSpringboard to get the “Related Movies” feature at the bottom? Just like the wireframe below.

https://cacoo.com/diagrams/VlmkHx3OiFOVI2bN#D0253

-Sunny

5

“sunny77” wrote:
Thanks a lot. Appreciate your reply.
How simple is the customization to roSpringboard to get the “Related Movies” feature at the bottom? Just like the wireframe below.
https://cacoo.com/diagrams/VlmkHx3OiFOVI2bN#D0253
-Sunny
It’s not. You’d have to draw a completely custom screen either with an roScreen or roImageCanvas. The built-in screens don’t provide that type of functionality.

6

“RokuJoel” wrote:
I believe that is the new roListScreen that did not make it into the documentation, hopefully we will have some docs for that in the not too distant future.

  • Joel

Good things come to those who wait :slightly_smiling_face: Any other goodies that didn’t make it into the docs?

7

Is there a way to get a breakdown of the available methods on that roListScreen object using BrightScript?

Could you post a quick example of how to use it or at least the method to set the content of the screen? SetContentList or something?

Thanks!

8

This is what I could figure out from experimentation. There’s probably much more.

Sub RunUserInterface()
    screenFacade = CreateObject("roPosterScreen")
    screenFacade.showMessage("roListScreen test")
    screenFacade.show()

    port = CreateObject("roMessagePort")
    roLS = CreateObject("roListScreen")
    roLS.setMessagePort(port)
    roLS.SetContent([{title:"This is the first item"},{title:"Another item"},{title:"The third item"}])

    roLS.show()

    while true
        msg = wait(0, port)
        if type(msg) = "roListScreenEvent"
            print "Event: ";type(msg)
            print msg.GetType(),msg.GetIndex(),msg.GetData()
            if msg.isScreenClosed() then 'ScreenClosed event'
                print "Closing list screen"
                exit while
            else if msg.isListItemFocused() then
                print "isListItemFocused"
            else if msg.isListItemSelected() then
                print "isListItemSelected -";msg.GetIndex()
                roLS.Close()
            end if
        else
            print "Event: ";type(msg)
            print msg.GetInfo()
        end if
    end while

    print "Exiting app"
    screenFacade.showMessage("")
    sleep(25)
End Sub

-JT

9

The documentation isn’t final, but the below should help:

CreateObject(“roListScreen”)

Void SetContent(Object contentList)
Void AddContent(Object item)
Void SetItem(Integer index, Object item)
Void ClearContent()
Void RemoveContent(Integer index)
Void SetFocusedListItem(Integer index)
Void SetHeader(String header)
Void SetTitle(String title)
Boolean Show(Void)
Void Close(Void)

10

That’s very helpful, thanks Patrick!

Any hints as to theme attributes? Or is anyone out there a better guesser than I am? ListScreenHeaderText was easy enough to guess, but I couldn’t figure out how to change the color of the text items (normal and highlighted).

11

I just had to keep guessing…

ListItemText
ListItemHighlightText

It’d be great to hear about more, but that’s enough to get me by.

12

Do you guys know how Amazon did that fullscreen image below the roListScreen?

I was able to get a 250x250 image next to the menu using this piece:

screen = CreateObject(“roListScreen”)
screen.SetContent([
{title:“Item”, hdPosterURL:“pkg:/images/imageA.jpg” },
{title:“Another item”, hdPosterURL:“pkg:/images/imageB.jpg”}
])

Next question would be, how do I change the image of the selected item focus ring? The documentation is not clear on how we do it.

Thanks!