Skip to main content

2.2 Create an application

Description of the APPLICATION interface architecture and implementation of HelloWorld text display

BRICKS TOOLS avatar
Written by BRICKS TOOLS
Updated over a week ago

Welcome to BRICKS.
This tutorial covers the second step of the basic application interface operations: learning how to create an application. By completing the four sections in this chapter, you will easily master the fundamental operations of the BRICKS Cloud Intelligent Display application interface.

šŸ• Estimated time to complete this tutorial: 3ā€“5 minutes

  • Step 1: Create a New Application in the APPLICATION Tab

  • After logging into the BRICKS Controller, enter the workspace created in the previous section. Once inside the workspace, switch to the APPLICATION tab and click [ New Application ] at the bottom to create a new application.

    BRICKS Controller Application page

  • Step 2: Name the Application

    In the application creation window, you may assign a descriptive name and detailed description for easier management in the future. Once completed, click [ Save ] to confirm and create the application.


    ā€‹ļ¼ŠThe Layout Width and Layout Height properties define the proportional segmentation of the application, independent of the display resolution. Applications can run across devices of different sizes and resolutions. To enable seamless usage across various devices, proportional segmentation is used for basic configuration. (Display device width and height can be set under Bind Device in the APPLICATION tab.) Detailed explanations will be provided in later tutorials on multi-screen splicing.

    Create new application

  • Step 3: Select Application for Editing

    After the application is created, navigate to the Configuration column on the right and select [ Edit 'Your Application Name' ] to enter the application editing interface.

    Application Information page

  • Step 4: Add a Brick

    Upon entering the editing interface, the screen is divided into three sections:

    • Left Section: Application structure, including Canvas, Dynamic Settings, Generator processors, Property Bank (variable library), and Property Calculation (variable operations). Detailed explanations will be provided later. In this section, we will focus on adding a Brick to the Main Canvas.

    • Center Section: The editing display area (white box), with controls below for scaling, playback, and other operations.

    • Right Section: Property parameters corresponding to the item selected from the left section. Each structure displays different properties.

    Click [ + ] in the Main Canvas section on the left to add a new Brick.

    BRICKS Application Editing Interface

  • Step 5: Select Brick Type

    After clicking to add, you can assign a Title to name the Brick and select the component type in the Template field. For this exercise, select the default Rect block to practice placing your first component. Click [ New ] to confirm.

    Create new Brick interface

  • Step 6: Configure Brick Properties

    The new Rect block can be resized and repositioned in a WYSIWYG manner within the editing screen:

    Hover over the edges of the component to resize it.

    Setting brick property

drag to scale brick size

Hover over the center of the Brick to drag and reposition it.

drag to move brick position

In the right-hand property panel, locate Background Color to set the Brickā€™s background color.

Change brick background color

  • Step 7: Check Property Parameter Descriptions

    n the right-hand property panel, each parameter includes a [ ? ] button for definition reference. If you are unsure about a parameter while editing, click the [ ? ] icon for an explanation.

    Lookup brick property information

    The description will open in the right panel and can be closed anytime by clicking [ X ].

    brick property information tutorial

  • Step 8: Add a Text Brick

    Once the Brick has been added and configured, proceed to create a Text Brick for the HelloWorld message. Again, click [ + ] in the Main Canvas and select [ Text ].

    brick template type list

  • Step 9: Configure Text Brick Properties

    After adding the Text Brick:

    In the right-hand property panel, locate the Width parameter. Clicking the button to the right of the field will automatically match the width of the application, or you may manually set values or adjust using drag-and-drop.

    brick property width setting

    Position can be set either via property parameters or by dragging with the mouse.

    brick property Y position setting

    Donā€™t forget to enter your text under the Text property; otherwise, nothing will be displayed in the preview.

    Text brick Text setting

    Ensure that the text color is different from the background color of your Rect Brick so it is visible.

    Text brick color setting

  • Congratulations! You have learned the fundamental operations of the application interface.

    In the upcoming section, you will learn how to preview your application display.

Next Section

For any assistance, please click the chat icon at the bottom right cornerā€”we will respond to your questions as soon as possible.

Did this answer your question?