Welcome to BRICKS.
This tutorial covers the first step of interaction control: interaction behavior management. By completing this chapter, you will easily master the use of dynamic controls in the BRICKS Cloud Intelligent Display.
🕐 Estimated time to complete this tutorial: 2–3 minutes
Step 1: Add a New Canvas
From the top-level Main (Root) in the left panel, click [ ＋ ] to add and name a new Canvas. Then click [ New ] to confirm.
Step 2: Add a Background Rect Brick to the New Canvas
Locate the newly created Canvas in the left hierarchy panel, and click [ ＋ ] on the right to add a Rect Brick.
Set its width and height to match the application and configure a preferred [ Background Color ] in the property panel on the right.
Step 3: Configure Automatic Canvas Switching
Select the new Canvas. In the property panel on the right, locate Showing Timeout to define how long the Canvas will remain visible.
Time is measured in milliseconds (1,000 ms = 1 second).
After setting the display duration, use Next Canvas ID to select which Canvas it should switch to next.
In this example, set it to return to the Main root Canvas.
At this point, if you run a preview, the display will stay on the Main Canvas and not switch to the new one. This is because the system always starts playback from the Main Canvas, and no switching mechanism has been configured there. In the next step, we will add an interaction to trigger the switch.
Step 4: Configure a Tap Behavior
Click any object on the Main Canvas. In the right property panel, scroll down to Event, and configure the [ On Press ] behavior.
The On Press event defines the action triggered when the user taps the selected object.
Step 5: Define the Event Action
Click the [ Edit ] button next to On Press. This will open the behavior configuration interface.
Under New Action, select the desired action to trigger when the object is tapped. Choose [ CHANGE CANVAS ].
In Select Action Property, select Canvas ID as the property.
In the target ID field, select the Canvas you want to switch to. In this case, choose the Canvas created in Step 1.
After completing the setup, click [ Save ], then run a preview. Tap the configured object to see if it switches to the new Canvas.
The new Canvas should remain visible for the configured duration before automatically returning to the Main Canvas.
If the tap does not trigger, it may be due to the object’s layer order being too low and covered by other objects. Adjust the layer hierarchy, then try again.
Congratulations! You have successfully completed your first interactive application.
The next section will introduce transition animation effects.
For any assistance, please click the chat icon in the bottom-right corner. Our team will respond to your questions as quickly as possible.