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: 
hsrad
Level 7

Developing rich UI contents

In order to develop rich custom UI for channel with menus and user interactions, something like YouTube or the old Dish, is there any other way other than roImageCanvas and drawing everything ? I know HTML is not supported, but is there any other markup that can be used to create UI?

Disclaimer : I'm new to Roku development
0 Kudos
42 Replies
Komag
Level 9

Re: Developing rich UI contents

roScreen, and drawing everything
0 Kudos
hsrad
Level 7

Re: Developing rich UI contents

Thanks. By "draw" you mean having a few hundred image canvas everywhere? Any idea on how to achieve something similar to YouTube's left side scrolling menu? It slides in and out of the screen and you can scroll the contents
0 Kudos
Komag
Level 9

Re: Developing rich UI contents

That's VERY advanced. No roImageCanvas, only roScreen, and it will take a lot of time to learn it.
0 Kudos
Rek
Level 7

Re: Developing rich UI contents

"hsrad" wrote:
Thanks. By "draw" you mean having a few hundred image canvas everywhere?


ImageCanvas is likely too slow for a whole application. You'll probably want to use roScreen.

"hsrad" wrote:
Any idea on how to achieve something similar to YouTube's left side scrolling menu? It slides in and out of the screen and you can scroll the contents


You can certainly create an equivalent menu with roScreen -- however, it is a non-trivial amount of work. You will have to draw everything manually. All UI state and any optimisations around when/where to draw things will have to be handled manually.
0 Kudos
EnTerr
Level 8

Re: Developing rich UI contents

"Rek" wrote:
ImageCanvas is likely too slow for a whole application. You'll probably want to use roScreen.

Is this based on experience or mostly word-of-mouth?

Say this is a mostly static screen for a non-game app, with typical UI elements like text, images, buttons, checkboxes, popups and rare full-screen transitions which might be ok to be chunky. ImageCanvas sounds appropriate for that to me - in theory, but i have no experience using it. I have experience with roScreen but looking for some relief in managing a scene with limited animation. Anyone got tripped by roImageCanvas in such situation? Or know compelling reason not to use it?
0 Kudos
belltown
Level 7

Re: Developing rich UI contents

"EnTerr" wrote:
"Rek" wrote:
ImageCanvas is likely too slow for a whole application. You'll probably want to use roScreen.

Is this based on experience or mostly word-of-mouth?

In my limited experience, roImageCanvas is noticeably slower than roScreen when any kind of animation is involved (scrolling, moving doodads around the screen, etc.) However, for mainly static content it may well be appropriate (certainly a lot less work overall).

I just looked through all the channels I have installed to see which ones use roScreen. Retaliate is a game, which is perfectly suited to roScreen; CBS News uses roScreen in a limited way (their live stream uses it, but most of the channel seems to use built-in components); Roku Recommends was written using roScreen and is a perfect example of how bad a channel can look (at least on my SD TV) when you decide to move away from using the built-in components (text fonts that are too small to read in places, images that don't fit on the screen, lack of on-screen pause/play icons, etc. on the video screen, a completely black screen when the screen-saver kicks in, a non-standard navigation scheme, etc, etc); and Newsy, which also uses roScreen entirely and, unlike Roku Recommends, seems to have a sensible UI, color scheme, image layout, font size, etc., (but still doesn't implement a screen saver, and suffers from weird scrolling issues on my 2XS such as scrolling the images too fast to be of any use when the up/down keys are held).

For every one of the roScreen-based channels I have installed right now, in the past I've installed dozens of other roScreen channels, tried them out for a while then deleted them shortly thereafter as they seemed like utter garbage, sometimes from a content perspective, but often as a result of trying to implement a UI using roScreen and doing a very poor job. Sorry, 'Roku Recommends', you're gone too now.

So even if one were to surmount the technical hurdles involved in implementing UI components with roScreen (drawing everything manually, for example), there's still way more work involved in making it look good and work well. It's still possible to come up with a bad design with the built-in components, but Roku makes it a lot easier to do a decent job (fonts are big enough to read on all sizes of TVs, components respect the TV safe zones, screen-savers work, the 'Back' button works as expected, key-click sounds work the way you've configured them, scrolling works at a sensible speed no matter what Roku device you're using, image caching is handled automatically, etc, etc.)

Unfortunately, the options available to those who are not Roku's "partners" are limited. All we have are the built-in components (including roImageCanvas for some degree of non-standard customization), and the 2D API (roScreen). And there's no middle ground; i.e., you can't generally build a screen using the built-in components then place a custom-built roScreen-based widget on top of it. It's all or nothing for each screen.

I'm sure there are good examples of custom-built roScreen UIs out there, but they probably took a lot of hard work, time and expertise. TheEndless has been doing this since time began, NewManLiving sounds like he's spending every waking moment, or more, on his grid screen. So yes, I'd consider it a non-trivial exercise -- and it's not like any of that effort can be transferred to other platforms.
https://github.com/belltown/
0 Kudos
NewManLiving
Level 7

Re: Developing rich UI contents

How did you know I spend every waking moment. Your not too far off. But it is done. Now I'm Building a client app using it. Beta in July. Would be curious to know what Sling TV is using. I suspect image canvas
My Channels: 2D API Framework Presentation: https://owner.roku.com/add/2M9LCVC
Updated: 11-11-2015 - Completed Keyboard interface
The Joel Channel ( Final Beta )
0 Kudos
belltown
Level 7

Re: Developing rich UI contents

"NewManLiving" wrote:
Would be curious to know what Sling TV is using. I suspect image canvas


I suspect it uses one of the "special" Roku partner-only SDKs. It has a similar look to some of the other channels that use the "special" SDKs. On my Roku 2XS & SD TV it looks like something that wasn't designed for a regular TV screen, but for a much higher-resolution device, then the SDK just shrunk everything down to fit (sort of), rendering the movie description text, for example, too small to read without binoculars (or maybe I just need new glasses).
https://github.com/belltown/
0 Kudos
NewManLiving
Level 7

Re: Developing rich UI contents

Don't want to be critical. But I thought it was hard to use and very unresponsive. What to you think
My Channels: 2D API Framework Presentation: https://owner.roku.com/add/2M9LCVC
Updated: 11-11-2015 - Completed Keyboard interface
The Joel Channel ( Final Beta )
0 Kudos