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

how to add a progress bar on roImageCanvas?

hi,
i want to make a custome screen for audio by using roImageCanvas.
But i don't know how to add a rectangle on roImageCanvas which indicate as a progress bar
0 Kudos
8 Replies
belltown
Level 7

Re: how to add a progress bar on roImageCanvas?

"rohitkaushik" wrote:
hi,
i want to make a custome screen for audio by using roImageCanvas.
But i don't know how to add a rectangle on roImageCanvas which indicate as a progress bar

It's a lot of work to create a custom screen using roImageCanvas. If you're asking how to add a rectangle to an roImageCanvas, which is about the most basic thing you can do with an roImageCanvas (use SetLayer with an associative array containing TargetRect, Color and CompositionMode meta-data objects), then the solution probably be over your head. Why not use one of the standard screen types, such as an roSpringboardScreen? It will be a lot less work, yet still allow you to have an image displayed and a progress bar. Once you've got that working, if you still ned a more customized solution, then you can play around with the roImageCanvas. By then you'll be more familiar with BrightScript and Roku components and be in a better position to understand how to use roImageCanvas without having someone else write your code for you.
https://github.com/belltown/
0 Kudos
rohitkaushik
Level 7

Re: how to add a progress bar on roImageCanvas?

@belltown
Actually roSpringBoardScreen have lot of limitations,like a small progress bar show just inside the thumbnail
and we can't show timing of a audio progress bar by using roSpringBoardScreen.
Roku documentation shows a imgage of roSpringBoardScreen for audio.
In which it shows a progress bar in the center of screen and timing also,But actually it doesn't happen.
So,What can I do in this situation.
0 Kudos
belltown
Level 7

Re: how to add a progress bar on roImageCanvas?

"rohitkaushik" wrote:
@belltown
Actually roSpringBoardScreen have lot of limitations,like a small progress bar show just inside the thumbnail
and we can't show timing of a audio progress bar by using roSpringBoardScreen.
Roku documentation shows a imgage of roSpringBoardScreen for audio.
In which it shows a progress bar in the center of screen and timing also,But actually it doesn't happen.
So,What can I do in this situation.

Yes, it is quite limiting. I also don't like the small image/progress bar with no numerical timing display (it shows timing in the documentation, but like many things in the Roku documentation is not correct), but it is the easiest way to get something working initially.

One thing I've done to keep things simple and get around those limitations is use the "episode" content type instead of the "audio" content type on an roSpringboardScreen, to get a larger image displayed. That image type has no progress bar; instead, I use the breadcrumb area to display the progress, e.g: 3:40 / 45:38, keeping it continually updated. It's not a "bar", but it at least gives a numerical indicator of the elapsed and total track time.

An roImageCanvas would be the next step up from that, but the learning curve is very much higher. I don't know of any canned "templates" out there for progress bar implementations. For audio, I think most people use the standard components.

EDIT: And why have you started 3 threads asking the exact same question?
https://github.com/belltown/
0 Kudos
rohitkaushik
Level 7

Re: how to add a progress bar on roImageCanvas?

@belltown

can we use the breadcrumb area to display the progress in case of "audio" content type.
Due to which we can show a small progress bar and timimg also.
Is this possible.
0 Kudos
belltown
Level 7

Re: how to add a progress bar on roImageCanvas?

"rohitkaushik" wrote:
@belltown

can we use the breadcrumb area to display the progress in case of "audio" content type.
Due to which we can show a small progress bar and timimg also.
Is this possible.

Yes, that is possible. I just chose not to use the audio content-type because I didn't like the image dimensions, and since I was already going to use the breadcrumb area for the times, decided I didn't need both. I actually specify the ContentType as one of the elements in the Xml description for my content items, so I can change it to anything I want.
https://github.com/belltown/
0 Kudos
rohitkaushik
Level 7

Re: how to add a progress bar on roImageCanvas?

@belltown

But when we set content type is "audio" rather than "episode" then description doesn't show on roSpringboardScreen.
Is this show only in "episode" case.
Then how to shows Description on SpringboardScreen in case of audio?
0 Kudos
belltown
Level 7

Re: how to add a progress bar on roImageCanvas?

"rohitkaushik" wrote:
@belltown

But when we set content type is "audio" rather than "episode" then description doesn't show on roSpringboardScreen.
Is this show only in "episode" case.
Then how to shows Description on SpringboardScreen in case of audio?

Set the ContentType meta-data element to "audio". [This gets you an image with a progress bar along the image's bottom edge]
Call SetDescriptionStyle ("movie") on your roSpringboardScreen object. [This allows you to fill in all the tags, including "Description" on the screen].
https://github.com/belltown/
0 Kudos
rohitkaushik
Level 7

Re: how to add a progress bar on roImageCanvas?

@belltown
I am using SetBreadcrumbText() for showing the progress timing and SetDescriptionStyle("movie").
But now problem is when the time change then a zig-zag horizontal movement occur.
Can we fix the space for that,due to which time continously show without any zig-zag movement.
0 Kudos