English
English
简体中文
Contact Us
Register
Log In
layoutIndex

App Panel Configuration

Last Updated on : 2022-06-21 02:02:04download

Different app panel templates are available for app panel design. They are the visualized DIY panel, all-in-one panel, SDK-based panel, custom panel, and DIY style panel.

Select and edit the app panel

In the process of creating a product on the Tuya IoT Platform, you can select the App UI panel and edit the settings.

App Panel Configuration

If you want to change the template, click Change and select a new one in the pop-up page. After you click Apply, you can scan the QR code and check the interface.

Note: It is recommended to refer to the template introduction and the preview on the app to determine the best interface template for your product. If functions cannot be displayed on the app, check or change the template.

App Panel Configuration

Visualized DIY panel

App Panel Configuration

All-in-one panel

App Panel Configuration

SDK-based panel

SDK-based panel: A variety of panel SDKs let you easily develop a branded panel.
App Panel Configuration

Custom panel

Custom panel: After you apply a template, click Edit to customize styles. You can modify the UI interface styles, which are UI Background, Theme Color, Font Color, and Icon Style.

App Panel Configuration
App Panel Configuration
App Panel Configuration
App Panel Configuration
App Panel Configuration

DIY style panel

DIY template: Specially designed for debugging purposes. This panel is fully functional but does not look that pretty. We recommend you change it to a nice panel after you complete debugging.

App Panel Configuration

After you apply the template of the DIY style panel, click Edit to enter the configuration page.

  • By applying the template, you can set an icon component for each function, and three modules are available for now, big, middle, and small modules. They will automatically adapt to different function types that have their own rule to send and transmit commands.

    • Background: It determines the overall tone of the app interface.
    • Switch setting (optional): The Boolean data point is applied to the switch on the app. If you set it, the switch button will be put at the bottom of the interface.
    • Function points style setting and sorting: It customizes the styles and sorting of function points, and three modes are available for now, big, middle, and small modules.
    • Big module: It supports changing background images and icons.
    • Middle module: It supports changing icons.
    • Small module: It supports changing icons.
  • During the configuration, you need to save the setting first and then preview the interface on the app by scanning the QR code.