Component Categories

Component categories include device, basic component, control, basic chart, table, media, and other.

The following sections provide a detailed introduction to the usage, configuration, and unique property settings of each component category. This will help you select and use components flexibly according to your specific needs.

Device

This section explains the types of device components available in Aqara Studio and the essential configuration.

Supported Device Types

The available device component types are:

• Lamp
• Air conditioner
• Switch socket
• Curtain

Configuration Process

After adding a device component to the canvas, please follow the configuration steps below:

1. (Required) Link a real device
   Select the component, switch to the Data tab, find the Data Configuration section, and link this component to a real device.

2. (Optional) Customize display information
   Still under the Data tab, go to the Card Info section to configure and adjust the device information shown on the interface. The main configuration items include:

   Item	Description
   Device Name	The name displayed on the interface. You can inherit the device’s original name (default) or customize it for easier identification and management.
   Room	Space where the device belongs. Automatically gets the actual room info (default), or customize as needed.
   Status Info	Real-time display of specific device statuses (such as switch, mode, etc.). You can hide this if not needed.

3. (Optional) Style customization
   If the default style does not meet your requirements, go to the Style tab and customize in the Card Configuration section. Two configuration modes are supported:

   • Basic config: Quickly modify the styles of main elements (such as device icon, switch icon, and card font) for all statuses with one click. This is simple and efficient for common scenarios.
   • Senior: Customize the appearance for different device statuses (such as on, off, abnormal, etc.) separately, with more detailed property options (icons, font, background color, etc.), making it suitable for more complex or personalized visual designs.

By following these steps, you can flexibly configure and beautify device components based on your business needs, achieving both practicality and appealing visuals.

Basic Component

The basic components include text, shape, line segment, button, and border. You can flexibly customize the style properties of these components to achieve personalized visual effects.

Text

The text component has the following exclusive style settings, including basic style and text properties.

The basic style properties are as follows:

Category	Property	Description
Font	Font family	You can change to the specified font.
	Font size	Set the text size.
	Font weight	Select the font thickness.
	Color	Customize the font color.
Shadow	X offset	Controls the horizontal distance of the shadow. Range: [-36, 36]. Smaller values move left.
	Y offset	Controls the vertical distance of the shadow. Range: [-36, 36]. Smaller values move up.
	Blur	Range: [0, 36]. Larger values make the shadow more blurred.
	Color	Customize the color of the shadow.

The text properties are as follows:

Property	Description
Row height	It is recommended to set it greater than the font size to prevent overlap and ensure readability.
Alignment	Includes horizontal alignment (left, center, right) and vertical alignment (top, center, bottom).

Shape

The shape component provides the following style options as its basic style:

Category	Property	Description
Fill	Color	Set the background fill color of the shape.
Stroke	Thickness	Set the width of the border line.
	Color	Set the color of the border line.
	Style	Choose border as solid, dashed, or dotted line.
Rounded Corner	-	Set the corner radius of the shape. A higher value creates more rounded corners.
Shadow	Type	Choose shadow type, such as outer or inner shadow.
	X offset	Set the horizontal distance of the shadow. Range is [-36, 36]. Smaller values move the shadow to the left.
	Y offset	Set the vertical distance of the shadow. Range is [-36, 36]. Smaller values move the shadow upward.
	Blur	Set the blur range of the shadow. A larger value makes the shadow more blurred.
	Spread	Set the spread distance of the shadow on all sides.
	Color	Set the color of the shadow.

Line Segment

The line segment component includes the following exclusive style options, which are the basic styles.

Category	Property	Description
Stroke	Thickness	Set the width of the line segment.
	Color	Set the color of the line segment.
	Style	Choose the line segment to be solid, dashed, or dotted.
Rounded Corner	Corner radius	Control the roundness of both ends of the segment. Higher values make it more rounded.
Shadow	All properties	The shadow properties are exactly the same as those of shape, including type, offset, blur, spread, and color.

Button

For buttons, you first need to set the actio and the display text, then set the style.

Set Action and Text

After adding a button component to the canvas, follow these steps for the required configuration:

1. In the Configuration Drawer, switch to the Action tab. Set the action that should be performed when the button is clicked. For more details, please refer to Common Properties for Components and Assets - Action.
2. Double-click the button to edit its display text.

Configure Styles

The button component has two exclusive style configs: the basic style and the hover effect.

The properties for the basic style are:

Category	Property	Description
Fill	Color	Exactly the same as the Fill property of Shape.
Stroke	All props	Exactly the same as the Stroke property of Shape, including thickness, color, and style.
Rounded Corner	-	Exactly the same as the Rounded Corner property of Shape.
Shadow	All props	Exactly the same as the Shadow property of Shape, including type, offset, blur, spread, and color.
Font	All props	Exactly the same as the Font property of Text, including font family, size, weight, and color.

The properties for hover effect are:

Property	Description
Color	The button text color when hovered.
Background	The fill color of the button when hovered.
Border Color	The border color of the button when hovered.

Border

The border component has two exclusive style configurations: Basic style and Border style.

The properties for the basic style are as follows:

Category	Property	Description
Fill	Color	Exactly the same as the Fill property of Shape.
Stroke	All props	Exactly the same as the Stroke property of Shape, including thickness, color, and style.

The properties for the border style are as follows:

Property	Description
Color	You can set main and secondary border colors separately to distinguish different border areas.
Ratio	Configure the ratio of the border.
Type	Select the border style.

Control

When the built-in device components in Aqara Studio cannot meet your special needs, you can add Control components to customize data interaction with real devices.

This section introduces the general configuration steps for control components, as well as the features and unique properties of different types of control components. This will help you easily build a custom device control interface.

Configure Data for Control Components

1. Add a control component to the canvas. Select the component and open its Configuration Drawer.
2. Switch to the Data tab and set Type to Data Source.
3. Click Change Data Source. In the pop-up window, double-click the target function point data folder on the left, check the required properties on the right, and then click Confirm to bind.

After these steps, your control component will be successfully connected to real device data and ready for interaction.

Boolean Switch

This component is used to switch the on/off state of a device.

A boolean switch consists of four elements: Image, Function Name, Switch, and Background.

The image properties are:

Property	Description
Image	If you are not satisfied with the default icon provided by Aqara Studio, you can select an image or icon you have uploaded to the material library here.
Fill	If the image is in PNG format, you can set the background color of the image here.
Rounded Corner	This property is the same as the Rounded Corner property of Shape.
Size	Set the width and height of the image.

The function name properties are:

Property	Description
Function Name	Set the displayed function name of the component.
Color	Set the color of the function name text.
Font	Configure the font family, size, and weight.

The properties for the switch (toggle control) are:

Property	Description
Size	Set the overall size of the control.
Open	Set the fill color when the control is on.
Close	Set the fill color when the control is off.
Slider	Set the fill color of the slider.

The background properties are:

Category	Property	Description
Fill	Color	Same as the Fill property of Shape.
Rounded Corner	-	Same as the Rounded Corner property of Shape.
Stroke	All Props	Same as the Stroke property of Shape, including thickness, color, and style.

Boolean Image Switch

This component switches states using images, providing a clear visual representation of on/off.

The Boolean Image Switch component consists of the following three elements: Function Name, Image, and Background.

The Function Name and Background properties of the Boolean Image Switch are the same as those in the Boolean Switch component.

The properties for Image are as follows:

Property	Description
Open Image	The image indicating the "on" state. If you are not satisfied with the default icon provided by Aqara Studio, you can select an image or icon you have uploaded to the material library here.
Close Image	The image indicating the "off" state. If you are not satisfied with the default icon provided by Aqara Studio, you can select an image or icon you have uploaded to the material library here.
Size	This property is exactly the same as the Size property of the Boolean Switch.
Rounded Corner	This property is the same as the Rounded Corner property of Shape.

String Value

This component is used to display string-type data.

A String Value component is composed of four elements: Image, Function Name, Parameter, and Background.

The Image, Function Name, and Background properties of this component are the same as those of the Boolean Switch component.

Parameter refers to the string value, and its properties are as follows:

Property	Description
Color	Set the text color of the string value.
Font	Configure the font family, size, and weight.
Show Value	Control whether the real-time string value is displayed in this component.

Execute Auto Logic

This component is used to trigger "Logic" automation based on string values.

The Execute Auto Logic component consists of three elements: Image, Function Name, and Background.

The descriptions of the Image, Function Name, and Background properties in this component are the same as those of the Boolean Switch component.

Number Input

This component allows users to input numbers manually for precise adjustment.

The Number Input component includes three elements: Image, Function Name, and Background.

The descriptions of the Image, Function Name, and Background properties in this component are the same as those of the Boolean Switch component.

Number Slider

This component allows users to adjust numbers by dragging a slider, making it suitable for continuous parameter control.

The Number Slider component consists of five elements: Image, Function Name, Parameter, Slider Bar, and Background.

The descriptions of the Image, Function Name, and Background properties in this component are the same as those of the Boolean Switch component.

Parameter displays the current value of the Slider Bar:

Property	Description
Text Color	Set the text color of the value.
Font	Configure font type, size, and weight.

Slider Bar related properties:

Property	Description
Slider bar color	Set the color of the entire slider bar.
Slider Track	Set the color of the track on the left side of the current value.

Number Card

This component displays numeric information in the form of a card.

The Number Card component contains three elements: Number, Number Image, and Background.

The description of the Background property in this component is the same as that of the Boolean Switch component.

Number related properties:

Property	Description
Color	Set the text color of the number.
Font	Configure font type, size, and weight.

Number Image refers to the image behind each digit. If you don't want to use the default image provided by Aqara Studio, click the + button to select an image or icon you have uploaded to the material library.

Number Increment/Decrement

This component modifies the device value using plus and minus buttons, making operation easy.

The Number Increment/Decrement component consists of four elements: Image, Function Name, Adjust, and Background.

The descriptions of the Image, Function Name, and Background properties in this component are the same as those of the Boolean Switch component.

Adjust displays the current value of the device and lets users change the value using plus and minus buttons. The configurable properties include:

Property	Description
Size	Set the overall width and height of this element.
Font	Configure the font family, size, and weight for the number.
Font Color	Set the text color of the value.
Button Background	Set the background color of this element.
Stroke Color	Set the border color of this element.

Number Progress

This component displays and sets the current device value in the form of a progress bar.

The Number Progress component consists of six elements: Parameter, Content Style, Button, Image, Function Name, and Background.

Parameter refers to the current device value. For details see Number Slider.

Content Style refers to the style of the progress bar. Related properties:

Property	Description
Style	Set the overall style. Supports line, circle, and dashboard.
Slider Color	Set the color of the track on the left side of the current value.
Track Color	Set the color of the full slider bar.
Thickness	Set the width of the progress bar.
Radius	When in Circle or Dashboard style, adjust its size with this value.
Stroke Endpoint Style	Set the style for both ends of the progress bar.

Button refers to the two buttons for increasing and decreasing values. Related properties:

Property	Description
Size	Width and height of the button.
Add Position	Position of the "+" button.
Subtract Position	Position of the "-" button.
Fill	Fill color of the button.
Rounded Corner	Corner radius of the button.
Border	Border thickness, color, and type.
Font Size	Font size and color for "+" and "-".

Enum Switch

This component is used to switch between enumerated values by clicking buttons. It is suitable for enum-type data.

The Enum Switch component consists of six elements: Enum Value, Image, Function Name, Button Text, Button Background, and Background.

The descriptions of the Image, Function Name, and Background properties in this component are the same as those of the Boolean Switch component.

Enum Value count and contents are automatically generated according to the bound data source. You do not need to add them manually. You can drag and drop to adjust the display order flexibly.

Button Text related properties:

Property	Description
Selected Color	Text color when the button is selected.
Default Color	Text color when the button is not selected.
Font	Set the font family, size, and weight.

Button Background related properties:

Property	Description
Selected Color	Background color when button is selected.
Default Color	Background color when button is not selected.

Enum Image

This component visually displays the currently selected enum item using an image. Only the image belonging to the selected enum is shown; other items are not displayed.

The Enum Image component consists of four elements: Enum Value, Image, Text, and Background.

The description of the Background property in this component is the same as that of the Boolean Switch component.

The Enum Value count and contents are automatically generated based on the bound data source. You do not have to add them manually. You can rename each enum item, change its image, and adjust its order by dragging.

Image properties allow you to set how the enum item’s image appears, including width, height, and border radius.

Text properties include color, font family, font size, and weight.

Enum Image Switch

You can switch enums by clicking different images on this component.

The Enum Image Switch component consists of four elements: Enum Value, Image, Text, and Background.

The description of the Background property in this component is the same as that of the Boolean Switch component.

The descriptions of Image and Text properties in this component are the same as those in the Enum Image component.

The Enum Value count and contents are automatically generated according to the bound data source. You do not have to add them manually. You can rename each enum item, change the selected and unselected images, and drag and drop to adjust the display order.

Enum Selection

This component supports switching enums using a dropdown list.

The Enum Selection component consists of Enum Value, Text, and Background.

The description of the Background property in this component is the same as that of the Boolean Switch component.

The Enum Value count and contents are automatically generated based on the bound data source. You do not need to add them manually. You can also rename each enum item and drag to adjust their display order.

Text properties include default color, font family, font size, font weight, and text color when selected.

Basic Chart

Basic chart components are used to display data on the canvas in a clear and easy-to-understand way. This helps users quickly understand device status, trends, and important information at a glance. Aqara Studio supports many common chart types, such as line charts, bar charts, radar charts, dashboards, and pie charts. These meet various needs for data visualization in different scenarios. All chart components allow you to flexibly set styles, bind data sources, and enable real-time refresh. This helps you quickly build a personalized visual interface.

Configure Data for Basic Charts

After adding a basic chart component, please follow these steps to configure real device data:

1. Select the chart component and switch to the Data tab in its Settings Drawer.
2. Under Data Source Type, choose ord data query (static-history) and click Add. A new static-history data source will appear.
3. Click the Edit Data Source button. In the pop-up window, double-click the data source you need and click Confirm to bind it.
4. In the Settings Drawer, find Cycle. Choose the Enum options and set the data time range you want the chart to show (such as Today, 24 hours, or Yesterday).

If the default chart style does not fit your data well after configuration, you can adjust the appearance of the chart.

Adjust Chart Styles

You can adjust the appearance of the chart in the Component Configuration section of the Style tab. There are basic settings and advanced settings.

Base config are the same for all chart types: you can set the font style for all text, as well as the font size for tooltips and legends.

Advanced configs offer different options depending on the chart type, providing more detailed customization:

Chart Category	Chart Types	Advanced Configurable Items
Line Chart	Basic Line Chart Area Line Chart Step Line Chart Dual-axis Line Chart	Style: Customize fonts for all text in the chart. Title: Set chart title, control its display, position, and font style. Tooltip: Configure the info box shown on hover/click, including trigger type and style. Legend: Show/hide the legend, adjust its font, position, and spacing. Axes: For X/Y axes, set visibility, type, unit, format, axis lines, and grid lines. Zoom: Enable area zooming for easier detail viewing. Series: Customize the name and style for each data series (like "Data1", "Data2"), keeping the same order as the Data tab.
Dashboard	Dashboard	Base config: Adjust the size of the gauge and its position on the canvas. Title: Same as Line Chart. Range: Customize the gauge’s scale range and number of segments. Pointer: Adjust the length and position of the pointer. Axis: Set the width of the outer axis and styles for main/sub tick marks. Label: Control the display of main tick labels, their font, and relative position. Current Value: Set how the current value is shown, style its font, and adjust location. Internal Title: Control the internal title’s display, font, content, and position inside the gauge.
Radar Chart	Basic Radar Chart	Title, Tooltip, Legend: Same as Line Chart. Radar: Set the radar chart’s shape and number of segments. Axis: Configure styles for axes and grid lines. Indicator: Customize the name and max value for each indicator. Series: Same as Line Chart.
Bar Chart	Basic Bar Chart Stacked Column Chart	Configuration is exactly the same as Line Chart.
Horizontal Bar	Basic Horizontal Bar Stacked Horizontal Bar	Configuration is exactly the same as Line Chart.
Scatter Chat	Scatter Plot	Configuration is exactly the same as Line Chart.
Pie Chart	Basic Pie Rose Chart Ring Pie	Style, Title, Tooltip, Legend, and Series: All settings are the same as Line Chart. Polar Axis: Adjust pie chart size and position.

Table

The table component helps display various device or business data on the canvas in a structured way. It is suitable for comparing information, showing batches of data, or viewing detailed data records. Aqara Studio provides both data tables and alarm tables. You can flexibly configure their content and style to efficiently manage and visualize data.

This section explains how to configure different types of table components so you can quickly build the data tables you need.

Data Table

The data table component is used to display static data. Follow these steps to configure it:

1. Select the data table component to open the Settings Drawer, then switch to the Data tab.
2. Edit Custom table data. In the popup, add or delete table rows and columns, and freely edit the content of each cell.
3. When finished editing, click Confirm. You will see the table preview on the canvas in real time.

Alarm Table

The alarm table component displays alarm data from Aqara Studio. You can use it immediately without extra setup or data binding. In this table, you can view alarm time, alarm ID, alarm source status, and more. This allows you to quickly check and monitor alarms, making it easy to locate and handle abnormal situations and improve system maintenance efficiency.

If you need to show more alarm details in the table (such as the user who acknowledged the alarm or the acknowledgment status), follow these steps:

1. Select the alarm table component and go to the Settings Drawer, then switch to the Data tab.
2. Click the Table configuration > Column configuration button.
3. In the popup, click Add column. At the bottom, a new row will appear. Now you can name the new column, select the data type as Basic column, and bind the required data source.
4. After configuring, click Confirm. The new column will be added to the alarm table and bound to the data.

Common Table Settings

Both data tables and alarm tables support the following data item settings in Table Settings:

Property	Description
Filter data	Set filtering rules for different data.
Function settings	Adjust interactivity, layout, and style of the table.
Cycle	Set the time range of the data shown in the table (such as Today, 24 hours, or Last 7 days).
Limit	Set the maximum number of rows displayed in the table.
Sort	Configure data to be shown in ascending or descending order.
Automatically Refresh Data	Choose whether the table data auto refreshes at intervals.
Refresh Interval	If auto refresh is enabled, define the refresh time interval.

Media

Media components let you display rich multimedia content on the big screen, mainly via the video player. You can embed external videos into the interface, supporting many popular video formats. This enhances the display and interactivity of your dashboard. You can flexibly set the video source as needed for different display scenarios.

Video Player

This component supports playing external video on the big screen. To configure:

1. Click the component, open the Settings Drawer, and switch to the Data tab.
2. Set Type to Custom. In Custom Data, enter the external video’s URL (make sure the URL meets the requirements below).
   tip

   The video URL must meet these requirements:

   • Direct access: The URL must point directly to the video file itself (only .mp4, .flv, and .m3u8 formats are supported). The video must be accessible on the public network. URLs for video sites (like Youku, Tencent Video, etc.) are not supported.
   • Protocol consistency: If your dashboard is accessed via HTTPS, your video URL should also use HTTPS to avoid mixed content issues.
   • CORS setting: If the video is stored on a third-party server, ensure cross-origin access (CORS) is allowed. Otherwise, the player may not play the video.
   • Smooth playback: For a better user experience, make sure the video file is not too large and uses a reasonable bitrate.
3. Switch to the Style tab, and set the video mode that matches the video format to ensure normal playback and the best display.

Other

Besides the components mentioned above, Aqara Studio also provides some additional components to enhance the dashboard, including Dropdown and Timer.

Dropdown

The dropdown component provides a convenient dropdown menu for your screen. Users can choose different options to quickly jump to a specified external website. This enables flexible page linking and many extension scenarios.

After adding a dropdown component, configure URLs as follows:

1. Select the component. Open the Settings Drawer and switch to the Data tab.
2. In Tag configuration, click the + button to add a new tab for the dropdown.
3. Expand the new tab. You can customize its name, configure its URL, and select how to open the URL.
4. If you want to add more options, repeat the above steps.

Timer

The timer component can show the current time on the screen in real time, making your data more timely and readable.

After adding the timer component, follow these steps to set the display format:

1. Select the timer component and go to the Settings Drawer, then switch to the Style tab.
2. Under Timer > Format, select the date and time format you want (such as yyyy/mm/dd hh:mm), so you can match different display requirements.