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

Toggle Element Visibility with roImageCanvas

Hey everyone,

I'm trying to play video (using roVideoPlayer) and display an overlay for it (using roImageCanvas). I can draw shapes and images to the canvas while video plays, but my attempts to hide the elements have been largely unsuccessful. I've had limited success with calling canvas.setLayer( layerNum, invalid), but canvas.clear() and canvas.clearLayer(layerNum) haven't worked. Am I doing something wrong?

I can provide some code samples if needed

Thanks for the help!
0 Kudos
20 Replies
NewManLiving
Level 7

Re: Toggle Element Visibility with roImageCanvas

its been awhile since I've used the canvas ( prefer roScreen ), but as I recall doing the same thing, you can set layer to a negative number -1 and it should hide that layer
behind everything else
also your transparent area over the videoplayer can also be on a so-called layer and you can move top layers behind that one ( I think I did that in an example on here somewhere ).
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
skitdev
Level 7

Re: Toggle Element Visibility with roImageCanvas

Thanks, NewManLiving. An example would be super awesome, but I don't wnat to make you go digging. I'll give your suggests a try and let you know how it goes.

Thanks so much!
0 Kudos
NewManLiving
Level 7

Re: Toggle Element Visibility with roImageCanvas

Try setting the layer z order to -1 first than should do it, I do recall that is how I hid layers
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
skitdev
Level 7

Re: Toggle Element Visibility with roImageCanvas

I tried it, but I'm not sure I'm doing it things correctly. Here's my code. I tried setting them to -1, I tried swapping with negative layers, and I tried moving the video up several layers. I don't think the video is getting added to the roImageCanvas. The layers seem to swap successfully (tried mixing them up), but they stay visible because the video seems to just be visible behind the roImageCanvas and not actually added to a layer.

Would you mind taking a look?


Library "v30/bslCore.brs"
Function main( ) as void
'prep for input
codes = bslUniversalControlEventCodes()
port = CreateObject("roMessagePort")

canvas = CreateObject("roImageCanvas")
canvas.SetMessagePort(port)
canvas.show()

player = CreateObject("roVideoPlayer")
player.SetMessagePort(port)
player.SetPositionNotificationPeriod(1)
player.SetContentList([
{
Stream : { url :"http://video.ted.com/talks/podcast/DavidKelley_2002_480.mp4" }
StreamFormat : "mp4"
}
])

player.SetDestinationRect(canvas.GetCanvasRect())
player.Play()
canvas.setLayer( 1, player )

yPos = 50
bgHeight = 61
bgWidth = 214
stringOffset = 31

imageBox = { Color: "#ff183542", TargetRect: {x: (1280-bgWidth), y: yPos , w: bgWidth, h: bgHeight} }
imageText = { Text: "asdf", TextAttrs: { font: "large", color: "#ffffffff" }, TargetRect: {x: (1280-bgWidth-stringOffset), y: yPos , w: bgWidth-stringOffset, h: bgHeight} }

while(true)
msg = wait(1000, port)
if( msg <> invalid )
if (msg.isRemoteKeyPressed())
print "button press!"
code = msg.GetIndex()
if(code = 6)'OK

canvas.allowUpdates(false)
else if(code = 3) 'Down
print "down!, swap to negs"
canvas.SwapLayers(3,-4)
canvas.SwapLayers(4,-3)
else if(code = 5) 'Right
print "right, render!"

canvas.SetLayer(3, imageBox)
canvas.SetLayer(4, imageText)
else if(code = 4) 'Left
print "left, set to -1!"

canvas.SetLayer(-1, imageText)
canvas.SetLayer(-1, imageBox)
else if(code = 2) 'Up
print "up, swap video!"
canvas.SwapLayers(1,100)
endif
canvas.allowUpdates(true)
canvas.show()
endif
end if

end while

End Function
0 Kudos
NewManLiving
Level 7

Re: Toggle Element Visibility with roImageCanvas

I really don't like the imagecanvas (sigh), but off-hand looks like your canvas.allowUpdates(false)
gets set only if code = 6. Also what if you get other 'codes' then allowupdates true and show will be called for everything. I Can't say that's your problem but your logic seems a bit off. But then I've been plowing away every spare minute to perfect my own projects. So I'm pretty tired myself
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
TheEndless
Level 7

Re: Toggle Element Visibility with roImageCanvas

ifImageCanvas.ClearLayer() is the correct way to hide a layer. I don't see that anywhere in your code. I've never used negative z-orders, so no idea if that works.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
skitdev
Level 7

Re: Toggle Element Visibility with roImageCanvas

"NewManLiving" wrote:
I really don't like the imagecanvas (sigh), but off-hand looks like your canvas.allowUpdates(false)
gets set only if code = 6. Also what if you get other 'codes' then allowupdates true and show will be called for everything. I Can't say that's your problem but your logic seems a bit off. But then I've been plowing away every spare minute to perfect my own projects. So I'm pretty tired myself


Thanks for the feedback. Sorry to keep you up!

code 6: that wasn't intentional.

allowUpdates(): The documentation says that surrounding large changes with allowUpdates(false) and allowUpdates(true) can speed it up. Perhaps I didn't use these properly?

show(): the documentation says that you need to call this to get changes to render. I figured I needed to call this even after hiding elements.

I tried looking through your post history for an roImageCanvas example but I didn't see it.
0 Kudos
skitdev
Level 7

Re: Toggle Element Visibility with roImageCanvas

"TheEndless" wrote:
ifImageCanvas.ClearLayer() is the correct way to hide a layer. I don't see that anywhere in your code. I've never used negative z-orders, so no idea if that works.


I was trying it earlier, but it wasn't working. I dropped it back in, and now it did work. Must be something else in there that I'm missing... I'll dig a bit and report back. Probably just a dumb mistake somewhere.

Thanks!
0 Kudos
skitdev
Level 7

Re: Toggle Element Visibility with roImageCanvas

I think I found the issue. Looks like what I needed to do was add


canvas.ClearLayer(0)
canvas.SetLayer(0, { Color: "#00000000", CompositionMode: "Source" })


at the beginning so that my canvas set up code looks like


canvas = CreateObject("roImageCanvas")
canvas.SetMessagePort(port)
canvas.ClearLayer(0)
canvas.SetLayer(0, { Color: "#00000000", CompositionMode: "Source" })
canvas.show()


I'm not sure why it was necessary, but it appears to be the culprit. I can set layers to invalid or use clearLayer to clear them away.
0 Kudos