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

Mask an image (show only part of an image)?

I have an image that contains multiple images. I would like to display only a portion of the image to reveal one of the smaller images. Is there a way to mask an image to do this?

If you are an HTML/CSS developer, the concept is similar to placing multiple images into one image sprite image file.
https://www.w3schools.com/css/css_image_sprites.asp
0 Kudos
30 Replies
Highlighted
Komag
Level 9

Re: Mask an image (show only part of an image)?

Yes, you end up making "regions"

<Bitmap name="sprite_rockAn" filespec="pkg:/assets/rockAn.png">
<Region name="r1" x="0" y="0" w="64" h="64" t="96" />
<Region name="r2" x="64" y="0" w="64" h="64" t="96" />
<Region name="r3" x="128" y="0" w="64" h="64" t="96" />
<Region name="r4" x="192" y="0" w="64" h="64" t="96" />
</Bitmap>


The image is 256 x 64, with each region being a 64x64 area. (I'm using the compositor to manage these "sprites", but that's beside the point)
0 Kudos
jackhand
Level 7

Re: Mask an image (show only part of an image)?

What's the procedure to make region "r3" visible and all the other regions not visible? How to do this using code and not XML?

I am looking for more info on how to use the compositor
https://sdkdocs.roku.com/dosearchsite.a ... compositor
0 Kudos
squirreltown
Level 9

Re: Mask an image (show only part of an image)?

"jackhand" wrote:
What's the procedure to make region "r3" visible and all the other regions not visible? How to do this using code and not XML?

Only draw the one you want. They're separate objects
Kinetics Screensavers
0 Kudos
jackhand
Level 7

Re: Mask an image (show only part of an image)?

This is how I am incorporating the region. I am currently running into a runtime error:


 m.compositor = CreateObject("roCompositor")
 m.compositor.SetDrawTo(m.posterNode, &h00000000)
 bmp = CreateObject("roBitmap", imageURL)
 region = CreateObject("roRegion", bmp, 0, 0, 50, 50)
 m.compositor.NewSprite(0, 0, region)
 m.compositor.draw()

This is the runtime error I am getting:
'//BRIGHTSCRIPT: ERROR: roCompositor.NewSprite: invalid region parameter type roInvalid

What am I doing wrong?
0 Kudos
jackhand
Level 7

Re: Mask an image (show only part of an image)?

After a little but more research, it seems like I need to transfer the external image to the local file system before creating a bitmap and region. I tried the following code, but I now get a runtime error elsewhere in the code.


m.compositor = CreateObject("roCompositor")
m.compositor.SetDrawTo(m.posterNode, &h00000000)
http = CreateObject("roUrlTransfer")
http.SetMessagePort(CreateObject("roMessagePort"))
http.SetUrl(imageURL)
http.AsyncGetToFile("tmp:/thumbnailSprite.png")
wait(0, http.GetPort())
bmp = CreateObject("roBitmap", "tmp:/thumbnailSprite.png")]
region = CreateObject("roRegion", bmp, 0, 0, 50, 50)
m.compositor.NewSprite(0, 0, region)
m.compositor.draw()


The runtime error is: 
BRIGHTSCRIPT: ERROR: roUrlTransfer: creating MAIN|TASK-only component failed on RENDER thread

It looks like the line that is causing the runtime error is: 
http = CreateObject("roUrlTransfer")

Again what am I doing wrong?
0 Kudos
joetesta
Level 10

Re: Mask an image (show only part of an image)?

you have to create a task node that runs http retrieval
aspiring
0 Kudos
jackhand
Level 7

Re: Mask an image (show only part of an image)?

I created a task node. I was able to create the bitmap in that task node, but I need to use that bitmap outside of that task node. I place the bitmap into an associative array to pass it to the main code. The main code gets this associative array but by the time the main code gets the associative array, the bitmap variable is set to "invalid".  I've even tried to pass the bitmap local path in the associative array and try to make the bitmap in the main code, but the bitmap still is invalid,

Are bitmaps only temporary and need to be used immediately? If so, how do I ensure I create a bitmap that I can use outside of the task node?
0 Kudos
squirreltown
Level 9

Re: Mask an image (show only part of an image)?

There has to be a better way but you can write a bitmap to tmp:/  and then remake it in main.

image= bitmap.GetPng(0, 0, 1280, 720)
image.WriteFile("tmp:/test.png")
Kinetics Screensavers
0 Kudos
jackhand
Level 7

Re: Mask an image (show only part of an image)?

that doesn't work for me. The bitmap is already written to the temporary local file system. I think because it is done in the task node and not used immediately, then the bitmap is removed from the local system in the regular main code. 

The following is how I am creating the bmp in the task node. As you can see, it is being written to the local file directory...

http = CreateObject("roUrlTransfer")
http.SetMessagePort(CreateObject("roMessagePort"))
http.SetUrl(url)
imagePath = "tmp:/"+ sFileName ''//where sFileName is a string of a file name supplied by the code: i.e. "temp.jpg"
http.AsyncGetToFile(imagePath)
wait(0, http.GetPort())
bmp = CreateObject("roBitmap", imagePath) ''//See! The image is stored locally!!
0 Kudos