Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Highlighted
Level 7

roImageCanvas and Loops...

Hi,
I would like to create a thumbnail page and be able to select the image to open it up full screen. To get more thumbnails on the screen at the same time, I'm using roImageCanvas. I would like to populate the canvas items using loops. so instead of:

canvasItems = [
{ url:"pkg:/images/Tile1.png", TargetRect:{x:100,y:100,w:43,h:43} },
{ url:"pkg:/images/Tile2.png", TargetRect:{x:100,y:100,w:43,h:43} },
{ url:"pkg:/images/Tile3.png", TargetRect:{x:100,y:100,w:43,h:43} },
...
]


I would like to be able to do something like:

for(x = 0; x < 5; x++)
for(y = 0; y < 5; y++)
canvasItems[x][y] = {url:thumb[x][y], TargetRect:{x:50+x,y:50+y,w:43,h:43} }
end for
end for


Is anything like that possible? I've looked through the examples & , but I don't seem to find anything. I'm a noob when it comes to BrightScript...
YungBlood

Bringing more fun to Roku!
0 Kudos
4 Replies
Highlighted
Level 7

Re: roImageCanvas and Loops...

Yes, but since the SetLayer interface method expects either a single associative array (isn't "hash" so much easier to say?) containing attributes, or an array (single level) of associative arrays, you probably want to do something like:


canvasItems = []
for x=0 to 4
for y=0 to 4
canvasItems.push({ url:thumb[x][y], TargetRect:{x:50+x,y:50+y,w:43,h:43 } })
end for
end for


Although what you probably want instead of setting the x and y in TargetRect is to use TargetTransaction for that. The x/y in TargetRect actually set the origin of the image, which is used for translation and rotation, etc. For example, the origin is inthe upper left corner by default. Rotating the image will rotate it around this point. If you change the origin to be the center of the image, rotating will make it rotate around it's center point.

Update:
Err, that's TargetTranslation, not TargetTransation. Damn muscle memory...
-- GandK Labs
Check out Reversi! in the channel store!
0 Kudos
Highlighted
Level 7

Re: roImageCanvas and Loops...

Ok, Tried & works great after a little research. Smiley Happy

Thanks!!


canvas = CreateObject("roImageCanvas")
cw = Int(canvas.GetCanvasRect().w / 2)
ch = Int(canvas.GetCanvasRect().h / 2)
sx = cw - 194
sy = ch - 194
canvasItems = []
for x = 0 to 3
for y = 0 to 3
cx = sx + x * 43
cy = sy + y * 43
canvasItems.push({ url:"pkg:/images/S_Tile.png", TargetRect:{x:cx,y:cy,w:43,h:43} })
end for
end for
port = CreateObject("roMessagePort")
canvas.SetMessagePort(port)
'Set opaque background
canvas.SetLayer(0, {Color:"#FF000000", CompositionMode:"Source"})
canvas.SetRequireAllImagesToDraw(true)
canvas.SetLayer(1, canvasItems)
canvas.Show()
YungBlood

Bringing more fun to Roku!
0 Kudos
Highlighted
Level 7

Re: roImageCanvas and Loops...

"YungBlood" wrote:
I can't find anything on target transaction...


Whoops, typo on my part. I meant TargetTranslation.
-- GandK Labs
Check out Reversi! in the channel store!
0 Kudos
Highlighted
Level 7

Re: roImageCanvas and Loops...

Thanks! Smiley Happy
YungBlood

Bringing more fun to Roku!
0 Kudos