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

Replace Images in roImageCanvas

HI,
I want to replace images in roImageCanvas one after another (to show overlay over static map as weather report ). Is there any way to show replaced image in fast way? I am using the following code to achieve this:

function main()
m.mapCanvas = createObject("roImageCanvas")
mapPort = CreateObject("roMessagePort")
m.mapCanvas.SetMessagePort(mapPort)
m.mapCanvas.SetRequireAllImagesToDraw(false)
m.mapCanvas.PurgeCachedImages()
m.mapCanvas.AllowUpdates(false)
list = []
list.push({Color:"#b2cffb", CompositionMode:"Source"})
m.mapCanvas.setLayer(0, list)
m.mapCanvas.AllowUpdates(true)
m.mapCanvas.show()
while true
msg = wait(2500, mapPort)
if(type(msg) = "roImageCanvasEvent")
if(msg.isRemoteKeyPressed())
print "Remote Event called."
else if(msg.isScreenClosed())
print "Screen Closed Event called."
end if
else
showOverlay()
end if
end while
end function

Function showOverlay()
m.mapCanvas.AllowUpdates(false)
list = []
overlayURL = Different_Overlay_Url_Comes_Here_Every_Time

list.Push({
url: overlayURL
TargetRect:{x:0, y:0, w:1280, h:720}
})

m.mapCanvas.SetLayer(1, list)
m.mapCanvas.AllowUpdates(true)
End Function


If i am reducing the wait duration then it never received the "roImageCanvasEvent" and also the Image not successfully draw on the canvas.
Is there any way to achieve this in proper way? or should I use some other component to achieve this.
Please give me any short example if any.

Thanks for reply in advance.
0 Kudos
10 Replies
Roku Employee
Roku Employee

Re: Replace Images in roImageCanvas

If you want to set a layer on top of another image, just put it on the next layer up, so if your map is on layer 1:

screen.setlayer(1,[map])

put your overlays on layer 2:

screen.setlayer(2,[item1, item2, item3, item4, item5])

Where each item is an image.

Be sure to use the Source_Over metadata property so that you can see the previous layer through the current layer.

- Joel
0 Kudos
chandu
Level 7

Re: Replace Images in roImageCanvas

Hi Joel,

Thanks for quick reply.
Actually we are doing the same thing as you suggest. We are showing static map on one layer and overlays on another layer over the static map and its working fine we can see the overlays over the map. But our concern is to increase the speed of animation which we are creating with overlays. right now we are using "waitTime = 2500" as you can find in our code. to increase the speed if we are reducing the waitTime from 2500 it moves little fast but we can't be able to receive the roImageCanvas events and if speed reduces to 1000 then overlays image doesn't shows and screen halt.
0 Kudos
Roku Employee
Roku Employee

Re: Replace Images in roImageCanvas

Ideally, you should be using roScreen instead of roImageCanvas - roScreen is ideal for creating smooth scrolling fast user interfaces and animated video games. roImageCanvas is generally going to provide a poor user experience, although some developers have managed to squeeze some OK performance out of it.

- Joel
0 Kudos
chandu
Level 7

Re: Replace Images in roImageCanvas

Hi Joel,
Thanx for Reply.
Actually i have used roScreen also. but it works only with in local images, plz tell me can i use roScreen with images getting from http request ? If Yes plz post some example.
0 Kudos
Roku Employee
Roku Employee

Re: Replace Images in roImageCanvas

Please see roTextureManager which is designed to handle images from the web for use in roScreen.

- Joel
0 Kudos
chandu
Level 7

Re: Replace Images in roImageCanvas

Hi,

Yes roTextureManager is used to download the images with the help of roTextureRequest from the server and I am able to show the server images on the screen, but It is just loading 5 images and after that the roTextureRequest gets the status value "4 which is showing request Failed". and I need to show approx 10 images on the screen one after another.
0 Kudos
NewManLiving
Level 7

Re: Replace Images in roImageCanvas

1- your texturerequest must persist until
Completion (cannot go out of scope)
If your requests are asynchronous
2- how big are your textures- large bitmaps
Consume most of available memory very
Quickly even with the texture manager
So you have to design your application
To download, draw to screen and unload
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
Roku Employee
Roku Employee

Re: Replace Images in roImageCanvas

"chandu" wrote:
Hi,
Yes roTextureManager is used to download the images with the help of roTextureRequest from the server and I am able to show the server images on the screen, but It is just loading 5 images and after that the roTextureRequest gets the status value "4 which is showing request Failed". and I need to show approx 10 images on the screen one after another.


You should use a placeholder image for all bitmaps you will display on screen. When texture manager returns a bitmap to you, replace the placeholder with that bitmap. Every time you get a failed request, then re-request the image from the server.

- Joel
0 Kudos
cbauer
Level 7

Re: Replace Images in roImageCanvas

How can I put an roBitmap into an roImageCanvas? I have tried several different ways and can't get it to display. Can you just tell me the meta-data object I need to enter into SetLayer please? I need to be able to set the TargetRect too.
0 Kudos