Mobile device panel

Feature overview

FastBee provides an out-of-the-box draggable running-status panel for mobile devices. After users log in to the mobile app, they can view one or more associated devices. Tapping a device opens the device detail page, also called the device panel.

Each device type has its own device panel. Devices of the same product type share the same panel, so you do not need to edit a panel for every device.

The panel shown in the mobile running-status page is determined by the product that the device belongs to. By editing the product application configuration, you can show different device panels to users.

Feature location

Device panels are editable. Open Product Management, enter any product detail page, then open Application Configuration to find the device panel editor entry.

1. Edit panel

Click Open editing panel to enter the device panel editor.

2. Enable panel

Click Enable to use the content generated by the editor as the device panel. When it is disabled, the system default running-status panel is displayed.

Drag-and-drop editor

The editor consists of the top toolbar, left component list, center editing canvas, and right component configuration panel.

1. Toolbar

The toolbar is in the upper-right corner of the visual editor. It provides reset, import, export, view JSON, preview, and save actions.

Action	Description
Reset	Clear all settings.
Import	Import a JSON file to generate a visual page.
Export	Export the designed page as a JSON file.
View	View the JSON data of the current design.
Preview	Preview how the current page looks on mobile.
Save	Save the data and upload it to the cloud.

2. Component list

Different components serve different purposes and correspond to different data types.

Component	Data type	Read-only	Chart
Title	-	-	-
Text display	String	-	No
Numeric display	Decimal, integer	Read-only data	No
Numeric control	Decimal, integer	Writable data	No
Multi-state control	Enum	-	No
Switch control	Boolean	-	No
Historical data	Decimal, integer	Read-only data	Yes

3. Editing canvas

The editing canvas is the main area for designing the device panel. Drag components from the component list into the canvas and arrange them freely.

You can select a component with the left mouse button and click the delete icon to remove it. You can also scroll the mouse wheel to zoom the canvas.

4. Component configuration

The right panel is used for page settings, layer management, component styles, and component property configuration.

• Page settings: configure the running-status page background color and background image.
• Layer management: manage the order of multiple components by dragging.
• Component settings: select component properties and configure style parameters.

Operation flow

1. Open the product detail page, select Application Configuration, click Enable, then click Open editing panel.

2. Drag a component from the left component list into the editing canvas. The example below uses the text display component. After the component is added, the canvas prompts you to configure it on the right panel.

3. Click Property selection, select the target property, then confirm. The selected property is displayed on the canvas.

4. After the design is complete, export the page as a JSON file or preview the mobile style. After confirming the result, click Save in the upper-right corner to save the data to the cloud.

5. Open the mobile app after saving, select a device under the corresponding product, and view the designed running-status page.