Differences

This shows you the differences between two versions of the page.

--- blocks:app-note:spot-block-list [2025-09-15 08:56] – [How it works] mattias
+++ blocks:app-note:spot-block-list [2025-09-15 10:48] (current) – [How it works] mattias
@@ Line 1: / Line 1: @@
 =====List spots and blocks on a remote control=====
-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.
+This application note 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 remote control user interface where it is possible to select a spot and then select block to play.
 ==== Installation ====
@@ Line 9: / Line 9: @@
 We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples.
-{{ :blocks:app-note:interactivemap:interactivemapofafrica.zip |Download this ZIP file and unpack it}}
+{{ :blocks:app-note:spot-block-list:spot_block_list.zip |Download this ZIP file and unpack it}}
 If you don't know how to do this, read the instructions in the [[blocks:app-note:start|general setup section]].
@@ Line 42: / Line 43: @@
 {{:blocks:app-note:spot-block-list:screenshot_2025-09-15_102310.png|}}
-To see the child replication binding, edit the Control/RemoteControl block and click in to the SpotList scroller block. The
+To view the child replication binding, edit the Control/RemoteControl block and open the SpotList scroller block. In the property panel of the scroller, you can see the source of the child replication. In this case, it is bound to the indexed property Script.feed.Spots.Spotgroup1.
-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.
 {{:blocks:app-note:spot-block-list:screenshot_2025-09-15_103158.png|}}
 ===Items in the list===
-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.
+For every item in the indexed property provided by the feed script, a SpotItem child is replicated. This acts as the layout template.
+The layout can use various properties relative to the spot and the feed. In this example, it shows the spot name from the feed, and the connection and block property from the spot itself.
+The block name is provided by a text element bound to Relative/spotName.
+{{:blocks:app-note:spot-block-list:screenshot_2025-09-15_112141.png|}}
+The Select button sets the local parameter Local/parameter/targetSpot to the value of Relative/spotPath. All Relative property paths are evaluated in the context of the current item in the list.
+{{:blocks:app-note:spot-block-list:screenshot_2025-09-15_105728.png|}}
+===Custom property path===
+For the connected indicator and the spot’s playing block, custom property paths must be used to get values relative to the spot list item. This feature is not currently supported by the property path picker, so the paths must be written manually using bracket notation.
+For example:
+Spot[Relative.spotPath].connected
+Here, the value of Relative.spotPath is substituted into the path to reference the correct property.
+To enter a custom property path, click the pen icon next to the property picker in the property panel.
+{{:blocks:app-note:spot-block-list:screenshot_2025-09-15_110802.png|}}
+====Styling====
+This Remotecontrol block uses some CSS to style the button appearance and create a custom paragraph text size.
+The custom //ctrl_gui// class is applied to the root composition. This is used as a prefix class in the block specific style sheet to isolate this blocks style from any other css that may be in use in a project. To see the styling ,click Edit Blocks CSS  from the edit menu while editing the block.