Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 

Bespoke Interface

I've played around with the SDK for a week or so now and would like to know if it is possible to create my own content layout using roScreen or some other method. Example code or articles would be helpful as I can't seem to find anything to get me started.

Ideally, I'd like to build a simple interface for story books (text, images and perhaps audio). Is there any demo code that contains the building blocks that I'd need, or can anyone provide the basics?

Many thanks
0 Kudos
9 Replies
TheEndless
Level 7

Re: Bespoke Interface

If you don't need animation, then roImageCanvas might be easier for you. Either way, there are a few posts on Roku Developer's Blog that might help you get started: http://blog.roku.com/developer/
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos

Re: Bespoke Interface

Thanks, I hadn't see that blog post. I had hoped there were some more examples but I've been able to get something simple up and running.

How would I design for SD and HD screens since the positioning is all pixel based?
0 Kudos
TheEndless
Level 7

Re: Bespoke Interface

"AlexHolsgrove" wrote:
Thanks, I hadn't see that blog post. I had hoped there were some more examples but I've been able to get something simple up and running.

How would I design for SD and HD screens since the positioning is all pixel based?

If you use roScreen, it'll automatically scale to SD. If you use roImageCanvas, then you'll need to adjust the TargetRects based on the screen resolution.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
EnTerr
Level 8

Re: Bespoke Interface

"TheEndless" wrote:
If you use roScreen, it'll automatically scale to SD. ...
... assuming you force the resolution.

createObject("roScreen") defaults to native resolution, which is different on HD and SD. But if you force it like so -
createObject("roScreen", isDoubleBuffered, 1280, 720) - this works with SD too, even if not officially supported.
Someone from RokuCo unofficially thinks (half-agrees?) it might be okay - at least that's what i gathered from viewtopic.php?f=34&t=70941
0 Kudos
belltown
Level 7

Re: Bespoke Interface

For an roImageCanvas, I set my display area based on the Action Safe Zones defined in the Roku Design Guidelines document, and the display type:

' Get the TV's display size
'
di = CreateObject ("roDeviceInfo")
displaySize = di.GetDisplaySize ()
displayMode = di.GetDisplayMode ()

' Make use of the 'Action Safe Zone' for display dimensions
' HD->1150x646 starting at (64, 35)
' SD->648x432, starting at (36, 24)
'
if displayMode = "720p"
displayH% = 646
displayW% = 1150
displayX% = 64
displayY% = 35
else if displayMode = "480i"
displayH% = 432
displayW% = 648
displayX% = 36
displayY% = 24
else ' Unknown display type
displayH% = displaySize.H * 0.9
displayW% = displaySize.W * 0.9
displayX% = (displaySize.W - displayW%) / 2
displayY% = (displaySize.H - displayH%) / 2
endif

All the other dimensions I use are based off those variables.

I haven't used an roScreen yet, so I have no idea in which cases that would be more suitable than an roImageCanvas. However, I don't think the roScreen is even implemented on the older (Roku 1) devices. I try to target all versions of Roku as far as possible.
https://github.com/belltown/
0 Kudos
TheEndless
Level 7

Re: Bespoke Interface

"belltown" wrote:
I haven't used an roScreen yet, so I have no idea in which cases that would be more suitable than an roImageCanvas. However, I don't think the roScreen is even implemented on the older (Roku 1) devices. I try to target all versions of Roku as far as possible.

roScreen is available to all devices, including the legacy boxes. Generally speaking, you'd use it over roImageCanvas, if you needed a more responsive interface, particularly if you want animation.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
belltown
Level 7

Re: Bespoke Interface

"TheEndless" wrote:
roScreen is available to all devices, including the legacy boxes. Generally speaking, you'd use it over roImageCanvas, if you needed a more responsive interface, particularly if you want animation.

Good to know. I misread the SDK 4.1 Release notes where it listed roScreen as "New in this release", assuming it wasn't in the 3.1 firmware I have on my Roku 1. I missed the note that those features were also included in 3.0.
https://github.com/belltown/
0 Kudos

Re: Bespoke Interface

Thanks for the help everyone. That little snippet of code seems ideal to define some globals if I used m. before each of your displayW/displayH etc variables.

So with the roScreen - I guess I can use this in place of roImageCanvas for my current code (just a couple of images and some text) and then if I wanted to add some basic 2D animation it would then save rewriting the code over?

I'll see how much I can get done today, but I'm basically loading content from a book via an XML feed from my server.

Thanks again for your help
0 Kudos
Roku Employee
Roku Employee

Re: Bespoke Interface

The Picnic Defense example a developer created is helpful in getting started with roScreen.

viewtopic.php?f=34&t=40243&start=0&hilit=picnicdefense#p269831

Another example:

2D API (roScreen) with video

https://roku.box.com/s/c46bb964b26f1347a41e

More complex examples but also more comprehensive are the bs2dtest in your sdk and the simple2d example.

- Joel
0 Kudos