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

roScreen, and drawing everything

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

That’s VERY advanced. No roImageCanvas, only roScreen, and it will take a lot of time to learn it.

“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.

“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?

“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.

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

“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).

Don’t want to be critical. But I thought it was hard to use and very unresponsive. What to you think

“belltown” wrote:
… 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.
OK. There goes me trying to publish my channel Private in its pre-beta form.

“belltown” wrote:
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.
tsss tch

“belltown” wrote:
rendering the movie description text, for example, too small to read without binoculars (or maybe I just need new glasses).
IF only … is it OK to require binoculars to use my app? YES! “New glasses or binoculars” are my new demographic!

To sum up: “Presentation!” - Megamind

“belltown” wrote:
…but they probably took a lot of hard work, time and expertise.
I’m not aware of anything worthwhile that isn’t.
Just my 10 bytes.

“NewManLiving” wrote:
Don’t want to be critical. But I thought it was hard to use and very unresponsive. What to you think
I thought the same thing, although I didn’t sign up for a subscription, just perused some of the movie previews. Some of the qualities reminded me of the official YouTube channel, although Sling was easier to use; or the Vudu channel. They all feel to me like they weren’t really designed for the Roku platform, lacking the smoothness you could get with roScreen or the consistency you’d get with the built-in components. It’s like they were designed to run in a web browser and somehow ported to the Roku platform.

“belltown” wrote:
They all feel to me like they weren’t really designed for the Roku platform, lacking the smoothness you could get with roScreen
This is what I can’t figure out. One thing about roScreen is it can be really slick movement-wise, there’s just no excuse to have stuff stuttering around, and yet a lot of these “partner” channels do just that. What are they actually building them with? I haven’t seen anything that couldn’t be duplicated with roScreen, so why don’t they use it?

“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?

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?
My MainSqueeze channel is written using nothing but roImageCanvas (with the exception of the search screen). It’s pretty responsive, but doesn’t include any animation. The library screen is the least responsive, but it has a ton of text on it.

“NewManLiving” wrote:
Would be curious to know what Sling TV is using. I suspect image canvas
I haven’t tried it, but based on how it looks identical to the app on other platforms, I’d suspect it’s an HTML5 channel, which could very well explain bad performance.

“belltown” wrote:
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. …
How can you distinguish if something is using roScreen vs roImageCanvas?

Also, if i build my own UI widgets for roScreen, i think i will end up with scene with nodes at different zOrder… sounds like re-implementing roImageCanvas, no? (And if so, what would be a reason to think that my re-make will be any faster?)

“EnTerr” wrote:
How can you distinguish if something is using roScreen vs roImageCanvas?
The fonts are noticeably different, but a quick way would be to set your screensaver to 1 minute, and wait to see if the screen goes black or shows an actual screensaver.

“TheEndless” wrote:
I’d suspect it’s an HTML5 channel, which could very well explain bad performance.

I was wondering about the HTML5 thing, although I didn’t think the Roku was powerful enough for that. According to Anthony Wood:

we don’t use android or html – both require a lot more memory and faster CPUs than the Roku OS

“EnTerr” wrote:

How can you distinguish if something is using roScreen vs roImageCanvas?
r2d2_bitmaps

“TheEndless” wrote:
My MainSqueeze channel is written using nothing but roImageCanvas (with the exception of the search screen). It’s pretty responsive, but doesn’t include any animation. The library screen is the least responsive, but it has a ton of text on it.
I’ll have a look, thanks!
Since you had perused extensively, bonus question*: Can roImageCanvas draw anything else but images and text (i.e. lines, rectangles)?
Also the TargetRotation property - does it support arbitrary angles or only multitudes of 90?

(*) no good deed goes unpunished :twisted: