Welcome to BRICKS.
This tutorial covers all aspects of the Smart Screen Display Area. By completing this chapter, you will easily master the fundamental usage of Bricks in the BRICKS Cloud Intelligent Display.
🕐 Estimated time to complete this tutorial: 2–3 minutes
Step 1: Edit the Screen Display Area
Switch to the APPLICATION page and select [ Bind Device ] to enter the screen display area editing page.
Step 2: Configure the Device Display Area
From the device list on the left, you can view the currently bound devices.
Click the screen icon to the right of a device name to display its detailed property variables on the right panel.
In the Device Viewports section in the center:Drag the viewport with your mouse to reposition it.
Drag its edges to resize it.
Alternatively, set the X, Y, Width, and Height values in the property panel on the right.
To rotate the device’s display area, use the Rotate property to adjust the rotation angle, and set Rotate Type to [ physical-rotate ] to achieve flexible rotation settings.
Recommended aspect ratios for individual devices can be found under the DEVICE tab. Select the device from the list on the left, scroll to the bottom of its details, and review the suggested layout size.
Step 3: Understand the Relationship Between the Application Content and the Screen Display Area
By adjusting the viewport position and size, you can map specific sections of the application content to the device screen.
For example, in the illustration below, the Galaxy S6 display area is configured to align vertically in the middle along the right edge. On the device, the displayed content will correspond to the right-edge vertical middle section of the application.
Congratulations! You have now learned the basic concepts of configuring screen display areas.
The next chapter will introduce various interactive behaviors in BRICKS.
For any assistance, please click the chat icon in the bottom-right corner. Our team will respond to your questions as quickly as possible.