Roku Developer Program

[YungBlood]

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...

[kbenson]

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...

[YungBlood]

Ok, Tried & works great after a little research. 🙂

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()

[kbenson]

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

Whoops, typo on my part. I meant TargetTranslation.

[YungBlood]

Thanks! 🙂