Forum Discussion

YungBlood's avatar
YungBlood
Streaming Star
15 years ago

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...
Roku Developer Program

4 Replies

  • kbenson's avatar
    kbenson
    Visitor
    15 years ago
    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's avatar
    YungBlood
    Streaming Star
    15 years ago
    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's avatar
    kbenson
    Visitor
    15 years ago
    "YungBlood" wrote:
    I can't find anything on target transaction...


    Whoops, typo on my part. I meant TargetTranslation.