English
English
简体中文
Contact Us
Register
Log In
Language
English
English
简体中文
Contact Us
Log In
Register
Go to main website
App Develop

App Development Platform

App development platform provides multiple development methods such as no-code or IoT App SDK development to maximize the monetization of IoT apps.
layoutIndex
DocumentationPanel DevelopmentConfigure All-in-one Panels

Configure All-in-one Panels

Last Updated on : 2021-03-30 11:50:13download

All-in-one panels support the configurations of products that are developed with systems on chips (SoCs) no-code solutions and microcontroller units (MCUs) low-code solutions. This topic describes how to configure the SoC-based and MCU-based products by using all-in-one panels on the Tuya IoT Platform.

Note: The final panel configuration effect is subject to the final display effect of the configured device.

Configure the panel for an SoC-based product

Common SoC-based products are electrical and lighting products. This section uses a Wi-Fi four-way power strip as an example to describe how to configure the panel of an SoC product.

Note: If you choose a no-code development solution to develop the product, you can only modify the appearance and text of the panel. Data points (DPs) of the product cannot be modified.

Function requirements

A four-way power strip includes two Chinese GB standard sockets and two USB sockets.

Panel preview

Configure All-in-one Panels

Procedure

Set the panel style

You can modify the pattern to set the panel style. Fixed templates and custom templates are available on the Tuya IoT Platform.

  1. Click Apply on a preferred custom panel to select the panel.

    Note: Only the panel that is marked with Custom in the upper left of the panel supports custom modifications.

    Configure All-in-one Panels

  2. Click Edit to enter the Interface configuration page.
    Configure All-in-one Panels

  3. Edit the background of the panel.
    In the UI interface background section, you can set the background type to define the background style. You can specify a background color or a background image as the background. After the setting, you can scan the QR code on the right of the page to preview the background. The following figures show the comparison before and after the panel background is modified.
    Configure All-in-one Panels

    • Background color: You can select a preset color, or enter a hexadecimal red, green, blue (RGB) color code. Then, click Save.
      Configure All-in-one Panels

    • Background image: You can select a preset image or upload a custom background image. Then, click Save.

      Note: The image dimensions must be 750 × 1334 pixels. The PNG, JPEG, and JPG formats are supported.

      Configure All-in-one Panels

  4. Edit the theme color of the panel.
    The theme color is displayed on the panel. You can set the theme color to define the background color of the master switch for the four-way power strip.

    • UI interface theme color: You can select a preset color, or enter a hexadecimal RGB color code. After the setting, click Save. You can scan the QR code on the right of the page to preview the background.
      Configure All-in-one Panels

    • The following figures show the comparison before and after the theme color of the panel is modified.
      Configure All-in-one Panels

  5. Enter the font color of the panel
    The font color is displayed on the panel. You can set the font color to define the foreground color of the buttons for the four-way power strip. Font color: You can select a preset color, or enter a hexadecimal RGB color code. In the Custom field, click the color block to open a palette and select a color.

    • After the setting, click Save. You can scan the QR code on the right of the page to preview the font color.
      Configure All-in-one Panels

    • The following figures show the comparison before and after the font color of the panel is modified.
      Configure All-in-one Panels

  6. Edit the icon modality.
    The icon modality is displayed on the panel. You can select a modality or upload a custom modality. You can set the icon modality to define the socket style for the four-way power strip.

    Note: The image dimensions must be 336 × 336 pixels. The PNG format is supported.

    • After the setting, click Save. You can scan the QR code on the right of the page to preview the background. Configure All-in-one Panels

    • The following figures show the comparison before and after the icon modality of the panel is modified.
      Configure All-in-one Panels

  7. Set the panel text.

    Note: If the text modification does not take effect, clear the app cache and try again or scan the QR code again to preview the text.

    You can go to the step Product Configuration and click Multilingual to edit the text of the panel. Perform the following steps:

    1. Click Settings to enter the Product Language module. Configure All-in-one Panels

    2. On the Data Point tab, edit the text of each data point (DP).
      Configure All-in-one Panels
      After the settings are saved, you can preview the app panel as shown in the following figure.
      Configure All-in-one Panels

    3. On the Device Panel tab, edit the text other than that of DPs.
      Configure All-in-one Panels
      The following figures show the comparison before and after the text is modified.
      Configure All-in-one Panels

Configure the panel for an MCU-based product

Note:

  • Standard DPs of all-in-one panels cannot be modified. If certain required standard DPs are not specified, the panel cannot be loaded. If certain standard DPs are not specified, the panel cannot support all required functions.
  • If you add more than 25 standard DPs and custom DPs to certain devices, device stability cannot be ensured. We recommend that you add up to 40 DPs for a device. This upper limit does not apply to cloud functions.

Common MCU-based products are small home applications, kitchen applications, and sensors. This section uses a Wi-Fi air purifier as an example to describe how to configure the panel of an MCU-based product. MCU products allow you to edit DPs. You can add or delete DPs based on certain custom all-in-one panels. For more information, see Custom Functions.

Things to note

  • The data type of custom DPs cannot be set to Char type or Raw type. Otherwise, all-in-one air purifier panels cannot be available.
  • The custom DPs for which the data transfer type is set to Only report are displayed on the homepage of the panel. The custom DPs for which the data transfer type is set to Issue and report are displayed on the Settings page of the panel.
  • The DPs for which the data type is set to Fault are not displayed on the panel.

Function requirements

  • The panel displays indoor temperature and humidity and the concentration of total volatile organic compounds (TVOC) and formaldehyde.
  • A fan blade switch is added to the panel.
  • The font color of the value that indicates the indoor PM2.5 concentration varies based on different value ranges. The font color turns green for the value from 0 to 50, yellow for the value from 50 to 100, and red for the value larger than 100.
  • Outdoor weather is indicated with weather icons.
  • The curves of indoor PM2.5 concentration are canceled.

Panel preview

Configure All-in-one Panels Configure All-in-one Panels Configure All-in-one Panels

Procedure

  1. Set the DPs.
    a. Select the standard DPs that are required by your product.
    Configure All-in-one Panels

    b. View the specified DPs.
    Configure All-in-one Panels

    c. Add the custom DPs that are required by your product.
    Configure All-in-one Panels

    d. Select a preferred all-in-one air purifier template.
    Configure All-in-one Panels The following figures show the comparison before and after the panel style is configured.
    Configure All-in-one Panels Configure All-in-one PanelsConfigure All-in-one Panels

  2. Set the multilingual text.

    Note: If the text modification does not take effect, clear the app cache and try again or scan the QR code again to preview the text.

  3. Submit a ticket to require the panel modifications.
    The font color of the indoor PM2.5 concentration value, the weather icon, and indoor PM2.5 concentration curves are configured based on the background coding by Tuya engineers. To configure these functions, submit a ticket.

Configure custom functions

The following table list the custom functions that are configured only after you submit a ticket. To configure these functions, submit a ticket and include the product ID (PID) in the ticket. Configure All-in-one Panels