Start developing for the Roku Part 3: More to the picture (associative arrays)

This is the third in a multi-part series. Please be sure to check out Part 1 and Part 2.

When we last left off, I had just shown how to side-load, or upload, your channel to the Roku using the developer mode interface. If you used the simple channel we created in the Part 1, it should have resulted in an orange screen that persisted for 5 seconds. Now, it's time to add to that.

Now, we are going to add a colored box, and some text. To do so, take the main.brs file from Part 1 and add the following lines after the single existing canvas.setLayer call:

 ' Display a shape
 newShapeLocation = { x: 300, y: 200, w: 200, h: 100 }
 canvas.setLayer(10, { color: "#00BB00", targetRect: newShapeLocation })

There's a few things going on in these new lines, but first I'll explain that together they add a mostly green box that is 200 pixels wide and 100 pixels high starting 300 pixels from the left side of the screen and 200 pixels from the top of the screen.

The first line is a comment. Anything after a single-quote character until a newline is considered a comment, and it not evaluated as BrightScript code.

In the second line, we assign an associative array to the variable newShapeLocation. Associative Arrays are created automatically when curly brases are used, and consist of colon separed key-value pairs, themselves separated by commas (or newlines, as we'll see later)

Finally, we have another setLayer() call, and this time we are specifying the location of the shape we are drawing. You can see now that setLayer() expects an Associative Array for the second argument, and the placement information is supplied as another associative array under the key targetRect. We could just as easily have called setLayer as so:

 canvas.setLayer(10, { color: "#00BB00", targetRect: { x: 300, y: 200, w: 200, h: 100 } })

...but that is't quite as easy to read, is it? Later we'll cover formatting to alleviate this issue somewhat.

Okay, now that we've added a colored box, lets add some text. The following should accomplish that:

 ' Display some text
 newTextAttributes = {
  color: "#0000CC"
  font: "Large"
  Halign: "Hcenter"
  Valign: "Vcenter"
 }
 canvas.setLayer(5, {
  text: "Hello World!",
  textAttrs: newTextAttributes,
  targetRect: {
   x: 200, y: 200, w: 200, h: 100
  }
 })

Here we see another comment, another associative array, and another call to setLayer().

Notice how the newTextAttributes associative array spans multiple lines? This is the formatting technique I mentioned before to make the data more reasonable. Note the missing commas; in multi-line associative arrays they are optional (and as such supplying them won't hurt).

Finally, note how the setLayer() call is extended over multiple lines with the associative array, and the targetRect is defined directly as another associative array within the first. We could just as easily have passed a variable containing another associative array in its place as we did before, but with this formatting this is easy to read as is.

Adding these all into the original main.brs file results in the following:

sub main()
 canvas = CreateObject("roImageCanvas")
 canvas.setLayer(0, { color: "#884400" })
 ' Display a shape
 newShapeLocation = { x: 300, y: 200, w: 200, h: 100 }
 canvas.setLayer(10, { color: "#00BB00", targetRect: newShapeLocation })
 ' Display some text
 newTextAttributes = {
  color: "#0000CC"
  font: "Large"
  Halign: "Hcenter"
  Valign: "Vcenter"
 }
 canvas.setLayer(5, {
  text: "Hello World!",
  textAttrs: newTextAttributes,
  targetRect: {
   x: 200, y: 200, w: 200, h: 100
  }
 })
 canvas.show()
 print "canvas shown"
 sleep(5000)
end sub

Packaging and uploading the channel now should result in an orange display, some blue text saying "Hello World!", and a green box the partially obscures the text. The reason the box obscures the text even through we defined the text later has to do with the layers we set for each (the first argument to setLayer()). The higher the layer, the "closer" the object appears to the viewer, with closer objects obscuring older ones.

This concludes Part 3. Next, we'll look at loops, regular arrays, and accessing associative array components.