Roku Developer Program

[gaurachit]

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.

[gaurachit]

Hi,

Can anyone explain about the above issue, I am experiencing?

[destruk]

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

[gaurachit]

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

[gaurachit]

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