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

Layer functioning in roImageCanvas

Hi All,

I am trying to make custom UI by using roImageCanvas. but I am not able to understand the exact behaviour of layers.
What is the exact meaning of clear() interface in roImageCanvas?

for better understanding of my problem I am giving my sample code below.

function main()
mainCanvas = createObject("roImageCanvas")
mainCanvas.setlayer(0, {color:"#FF0000"})
mainCanvas.show()

canvas = createObject("roImageCanvas")
port = createObject("romessagePort")
canvas.setMessagePort(port)

canvas.show()
yPosition = 0
showDataOnCanvas(yPosition, canvas)

while true
msg = wait(0, port)
if(type(msg) = "roImageCanvasEvent")
if(msg.IsRemoteKeyPressed())
index = msg.GetIndex()
if(index = 0)
mainCanvas.close()
canvas.close()
else if(index = 2)
yPosition = yPosition - 100
showDataOnCanvas(yPosition, canvas)
else if(index = 3)
yPosition = yPosition + 100
showDataOnCanvas(yPosition, canvas)
end if

else if(msg.isScreenClosed())
print "comes into screen closed"
exit while
end if
end if
end while
end function


function showDataOnCanvas(yPos, canvas)
list = []
canvas.AllowUpdates(false)
canvas.ClearLayer(0)
list.push({
color:"#33FFFFFF",
compossionMode:"Source_Over"
TargetRect:{x:0, y:0, w:1280, h:720}
})
list.push({
color: "#FF0000",
TargetRect: {x:100, y:yPos, w:300,h:100}
})
list.push({
text: yPos.toStr(),
textattrs: {color:"#000000"},
TargetRect: {x:100, y:yPos, w:300,h:100}
})
canvas.setlayer(0, list)
canvas.AllowUpdates(true)
end function


In this code I am create a red canvas first.
On above of this screen I made an another canvas with low opacity. On that canvas I am trying to make a box of red color and updating that canvas on click on up and down keys.

I am not able to understand the working of clear() interface.

As you can see In showDataOnCanvas(yPos, canvas) method, I am clearing the layer and drawing new data on that but its showing me the previous data also.

Can anyone explain? why is this behaving like that? Or I am missing something?


Thanks in advance.
0 Kudos
4 Replies
gaurachit
Level 7

Re: Layer functioning in roImageCanvas

Hi,

Can anyone explain about the above issue, I am experiencing?
0 Kudos
destruk
Level 10

Re: Layer functioning in roImageCanvas

When you clear a canvas, it sets it to entirely transparent.
What you want to do here is set a layer - that way it's the main canvas layer 0 at the bottom z-order, with layer 1 being on top, layer 2 on top of 1, layer 3 on top of that, etc etc. Then you can clear, redraw, or modify the upper layers to show what you want. It's also fast to swap layers if you need to. But it's faster still to use roScreen instead of the older roimagecanvas to do drawing.
http://sdkdocs.roku.com/display/sdkdoc/ifImageCanvas
Also -- you have a typo --
compossionMode

Should be
CompositionMode
0 Kudos
gaurachit
Level 7

Re: Layer functioning in roImageCanvas

Hi Destruk,

Thanks for reply.

Did you check my example I have posted?
It has two canvas.
1. mainCanvas
2. canvas

Main canvas is just showing any previous screen.
The main concern is with the
canvas
. As you said according to documentation when we clear the canvas it become transparent. and on redraw the new data will be populate on this. but the behaviour which I am getting is totally different. I have only one layer at index 0 in my example. every time before drawing new item I am doing clear it. but it doesn't clear.

Please run this example to see the problem.

Thanks
0 Kudos
gaurachit
Level 7

Re: Layer functioning in roImageCanvas

Hey,

Now I am able to clear my canvas before drawing new data.
Actually I was not using
SetRequireAllImagesToDraw(false)
interface.

After using this interface I am able to clear my canvas.

Thanks
0 Kudos