Your Digital Media Has Never Looked So Good

 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Mon Sep 18, 2017 11:11 am

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
 
User avatar
Komag
Posts: 671
Joined: Fri Aug 22, 2014 3:42 am

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

Mon Sep 18, 2017 7:20 pm

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)
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Wed Sep 20, 2017 9:59 am

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
 
User avatar
squirreltown
Posts: 732
Joined: Sun Apr 21, 2013 2:20 pm

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

Wed Sep 20, 2017 2:32 pm

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 Screensaver (kineticsscreensaver), Kinetics³ Screensaver(kinetics3), Kinetics Painter Screensaver (kineticspainter), Kinetics Splash Screensaver (kineticssplash)
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Thu Sep 21, 2017 8:23 am

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?
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Thu Sep 21, 2017 3:14 pm

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?
 
joetesta
Posts: 541
Joined: Wed Apr 20, 2011 11:48 am

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

Thu Sep 21, 2017 4:56 pm

you have to create a task node that runs http retrieval
aspiring
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Fri Sep 22, 2017 6:07 am

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?
 
User avatar
squirreltown
Posts: 732
Joined: Sun Apr 21, 2013 2:20 pm

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

Fri Sep 22, 2017 8:45 am

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 Screensaver (kineticsscreensaver), Kinetics³ Screensaver(kinetics3), Kinetics Painter Screensaver (kineticspainter), Kinetics Splash Screensaver (kineticssplash)
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Fri Sep 22, 2017 9:04 am

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!!
 
User avatar
squirreltown
Posts: 732
Joined: Sun Apr 21, 2013 2:20 pm

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

Fri Sep 22, 2017 9:09 am

Are you saying  that you are saving the file to tmp:/ and it's being deleted without you doing so? Simply downloading it makes a object of it, but it seems to be going out of scope.

OK i see your edit. Don't know, i thought tmp:/ was tmp:/. It should be there until the channel exits.
Kinetics Screensaver (kineticsscreensaver), Kinetics³ Screensaver(kinetics3), Kinetics Painter Screensaver (kineticspainter), Kinetics Splash Screensaver (kineticssplash)
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Fri Sep 22, 2017 1:50 pm

I tried placing the bitmap into a poster of the task node, but it still doesn't work. Perhaps because the task node is not paced on stage visually so Roku immediately tries to get rid of it.

Any other thoughts?
 
User avatar
squirreltown
Posts: 732
Joined: Sun Apr 21, 2013 2:20 pm

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

Fri Sep 22, 2017 3:55 pm

Any other thoughts?
if you are saving something to tmp:/ and it's disappearing then something must be removing it. I know zip about RSG so the only thing i can think of is save the file to a directory and maybe the node will ignore it.
Kinetics Screensaver (kineticsscreensaver), Kinetics³ Screensaver(kinetics3), Kinetics Painter Screensaver (kineticspainter), Kinetics Splash Screensaver (kineticssplash)
 
necrotek
Posts: 10
Joined: Tue Sep 13, 2011 7:49 pm

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

Fri Sep 22, 2017 8:04 pm

If you are using SceneGraph, a poster node extends Group therefore has its fields.

https://sdkdocs.roku.com/display/sdkdoc/Group
 
jackhand
Topic Author
Posts: 26
Joined: Thu Sep 14, 2017 9:09 am

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

Tue Sep 26, 2017 8:05 am

How do you save the file in a different folder? I tried to use the "images/" folder but the app crashed.

Who is online

Users browsing this forum: No registered users and 9 guests