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!
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 ).
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!
Try setting the layer z order to -1 first than should do it, I do recall that is how I hid layers
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
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
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.
“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.
“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!
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.
“skitdev” wrote:
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.
If you’re displaying the canvas over video, then you need at least one layer that cuts a portal through the canvas, so the video can show through. Video does not reside on one of the layers, but behind the entire canvas.
SetLayer(zOrder as Integer, contentMetaData as Object) as Void
zOrder is a z-order specifier with higher z-orders closer to the viewer. Negative z-orders are “behind the display” and are thus invisible
if(code = 6)'OK ’ Code needs to be 6 for allowupdates to ever be false. So if code is not 6 then allowupdates false will never be called
canvas.allowUpdates(false)
canvas.allowUpdates(true)
canvas.show()
Now you may be testing this and therefore have your code set up that way, but allowupdates is set to false only when code = 6 and then turned right back on again at the bottom where there is no check on any code so if the user presses another key outside of the ones you check for then the bottom two lines will be called for every other button that is pressed as well
For example if you pressed 6 then allowupdates = false , but set right back to true at the bottom where it falls out of the if statement. Then if you press 3 allowupdates = false will never get called because you did not press 6, but it will always get set right back to true again at the bottom of the if statement
at the top allowupdates false will never be called if you press any other button but 6,
“NewManLiving” wrote:
zOrder is a z-order specifier with higher z-orders closer to the viewer. Negative z-orders are “behind the display” and are thus invisible
Fair enough, but it’s very unlikely that applies to the video plane. If roVideoPlayer, which is on the video plane, is always behind the graphics plane (which makes sense), then no matter how negative you go with z-order, it’ll always be in front of the video.
Yes, you would think so, but apparently it is just a matter of clipping. While ClearLayer is the most efficient, you can put layers “behind” the so-called video plane
If you were to move the hello layer’s x position back into the video x pos, it would display or clip accordingly as well ( I think ) 
Sub Main()
hideL = -1 ' ? Behind the video plane
backL = 0
helloL = 1
videoL = 2 ' Transparent layer is 2
coverL = 3
playerRect = { x: 120, y: 250, w: 380, h:212 }
punchRect = playerRect
coverRect = { x: playerRect.x + 75, y: playerRect.y + 75 , w: playerRect.w - 150, h: playerRect.h - 150 }
back = { Color:"#FFFFFFFF", CompositionMode:"Source"}
hello ={
Text:"Press Ok To Toggle, Back To Exit"
TextAttrs:{Color:"#FFCCCCCC", Font:"Medium",
HAlign:"HCenter", VAlign:"VCenter",
Direction:"LeftToRight"}
TargetRect:{x:450,y:325,w:500,h:60}
}
video = {
Color: "#00000000"
TargetRect: punchRect
CompositionMode: "Source" }
cover = {
Color: "#FFFFFFFF"
TargetRect: coverRect
CompositionMode: "Source" }
content = {
Stream: {
url: "http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8"
}
StreamFormat: "hls"
SwitchingStrategy: "full-adaptation"
}
canvas = CreateObject( "roImageCanvas" )
port = CreateObject( "roMessagePort" )
canvas.SetMessagePort(port)
VPlayer = CreateObject( "roVideoPlayer" )
VPlayer.SetMessagePort( port )
VPlayer.SetDestinationRect( playerRect )
VPlayer.AddContent( content )
canvas.SetLayer( backL , back )
canvas.SetLayer( videoL, video )
canvas.SetLayer( helloL, hello )
canvas.SetLayer( coverL, cover )
coverShowing = True
canvas.Show()
VPlayer.Play()
while(true)
msg = wait(0,port)
if type(msg) = "roImageCanvasEvent" then
if (msg.isRemoteKeyPressed()) then
i = msg.GetIndex()
print "Key Pressed - " ; msg.GetIndex()
if (i = 0) then
' Up - Close the screen.
VPlayer.Stop()
canvas.close()
else if i = 6
canvas.AllowUpdates( False )
if coverShowing
canvas.ClearLayer( coverL )
canvas.SetLayer( hideL, cover )
else
canvas.SetLayer( coverL, cover )
end if
coverShowing = not coverShowing
canvas.AllowUpdates( True )
canvas.Show()
end if
else if (msg.isScreenClosed()) then
print "Closed"
return
end if
else if type(msg) = "roVideoPlayerEvent" then
print msg.GetIndex(), msg.GetMessage()
end if
end while
By the way, this also applies to sprite z orders in roScreen. Fankly, I don’t think that negative sprites and layers are even drawn, what would be the point ? In the example would one use both clear and then set the cleared layer to a negative layer ? Of course not, but it demonstrates that you can have negative layers under the transparent video layer. However, you can also swap into a negative layer with the same results
“NewManLiving” wrote:
By the way, this also applies to sprite z orders in roScreen. Fankly, I don’t think that negative sprites and layers are even drawn, what would be the point ? In the example would one use both clear and then set the cleared layer to a negative layer ? Of course not, but it demonstrates that you can have negative layers under the transparent video layer. However, you can also swap into a negative layer with the same results
Actually, that’s a function of you having a fullscreen layer with a CompositionMode of “Source” on top of the negative layer, which will replace any pixels that are behind it. It is not putting the layers behind the video plane, but rather under that Source layer. You’ll get the same results if you move all of your layers forward.. For example:
hideL = 9 ' ? Behind the Background Source plane
backL = 10
helloL = 11
videoL = 12 ' Transparent layer is 12
coverL = 13
I’m speaking in terms of the API
Had this same discussion with Mark previously
You can use the Api as stated and set layer
And set sprite as documented. What happens
Is a bunch of clipping. Nothing is ever put under
The video plane or any other plane
So your analysis is completely correct but you are
Looking at it from a different perspective
“NewManLiving” wrote:
SetLayer(zOrder as Integer, contentMetaData as Object) as VoidzOrder is a z-order specifier with higher z-orders closer to the viewer. Negative z-orders are “behind the display” and are thus invisible
if(code = 6)'OK ’ Code needs to be 6 for allowupdates to ever be false. So if code is not 6 then allowupdates false will never be called
canvas.allowUpdates(false)canvas.allowUpdates(true)
canvas.show()Now you may be testing this and therefore have your code set up that way, but allowupdates is set to false only when code = 6 and then turned right back on again at the bottom where there is no check on any code so if the user presses another key outside of the ones you check for then the bottom two lines will be called for every other button that is pressed as well
For example if you pressed 6 then allowupdates = false , but set right back to true at the bottom where it falls out of the if statement. Then if you press 3 allowupdates = false will never get called because you did not press 6, but it will always get set right back to true again at the bottom of the if statement
at the top allowupdates false will never be called if you press any other button but 6,
As I said, it was a mistake. I didn’t intend to have my code set up this way.
“TheEndless” wrote:
“NewManLiving” wrote:
By the way, this also applies to sprite z orders in roScreen. Fankly, I don’t think that negative sprites and layers are even drawn, what would be the point ? In the example would one use both clear and then set the cleared layer to a negative layer ? Of course not, but it demonstrates that you can have negative layers under the transparent video layer. However, you can also swap into a negative layer with the same results
Actually, that’s a function of you having a fullscreen layer with a CompositionMode of “Source” on top of the negative layer, which will replace any pixels that are behind it. It is not putting the layers behind the video plane, but rather under that Source layer. You’ll get the same results if you move all of your layers forward.. For example:hideL = 9 ' ? Behind the Background Source plane backL = 10 helloL = 11 videoL = 12 ' Transparent layer is 12 coverL = 13
This is the part that I think I’m having trouble understanding. When you specify a layer as “source” what is using as the source?
“skitdev” wrote:
This is the part that I think I’m having trouble understanding. When you specify a layer as “source” what is using as the source?
Specifying a CompositionMode of “Source” means that that layer’s pixels will replace any pixels behind it. When set to “Source-Over” the pixels will be alpha blended together. Using “Source” on a layer with transparent pixels (e.g., #00000000), those pixels will “punch” through any layers below it, all the way through to the video plane.
