PIXILAB Wiki

This application not shows an basic example how child replication can be used together with feed scripts to automatically list display spots and blocks in order to create a user interface where it is possible to select a spot and then select block to play.

You need a computer with a running blocks server and a web browser to use this application note.

We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples. Download this ZIP file and unpack it

If you don't know how to do this, read the instructions in the general setup section.

If you have done the general setup, copied the files and pointed to this application notes root block, follow the next steps to run this application on your computer.

1. Start Blocks.
2. Open the editor using the Admin button.
3. Log in using the name admin and the password pixi.
4. Open a second browser window and type in the URL: http://localhost:8080/spot?display=1 this is where you will see the control interface. Assign the Remote_Control spot to this window from the display spot settings.
5. Open a third browser window and type in the URL: http://localhost:8080/spot?display=2 assign this to one of the spots in Spotgroup1
6. Open a third browser window and type in the URL: http://localhost:8080/spot?display=3 assign this to the other spot in Spotgroup1

In the left column all the display spots in the Spotgroup1 is listed. In the right column all the Blocks in block group Blockgroup1 is listed. Select a spot by clicking on it, the border becomes yellow to indicate that it is currently selected. Select which block to assign to the selected spot by click on the wanted block.

If spots or blocks are added in the blocks editor the page must be reloaded to to update.

This example uses two separate feed scripts. They are both stored in /PIXILAB-Blocks-root/script/feed/ Blocks.js and Spots.js. Source code is in Blocks.ts and Spots.ts. Blocks feedscript creates a feed per Blockgroup and spots feed script creates a feed per spot group existing on the server. Those feeds are used by the child replication feature to expose the lists in the user interface.

When the user selects a spot in the left column, the path to the selected spot is written as a string value to a local parameter named targetSpot. Parameters can be listed by clicking Edit/Edit parameters in the top menu of the editor. To be able to program buttons using parameters to parametrise the property paths one must have a formal value that matches the path to one of the spots existing on the system as in this screen shot.

To see the child replication binding, edit the Control/RemoteControl block and click in to the SpotList scroller block. The source of the child replication can be seen in the property panel of the scroller. In this case is is bound to the indexed property Script.feed.Spots.Spotgroup1.

For every item in the indexed property provided by the feed script the SpotItem child will be replicated. This can be seen as the layout template. The layout can use all sorts of propertieds relative to a spot. In this case we show the spot name from the feed, the connection and the block property from the spot itself. We also use the spotPath value from the feed in the selevt button.