Docs

Design App UI

Last Updated on : 2020-10-10 07:50:38download

Different interface templates are available for app panel design, including fixed template, custom template, DIY template (app interface generation engine without coding), and debug template.

In the App Panel Design step of creating product in the IoT Console, you can select the desired template and then edit it.

The configurations supported by each template are different. You can refer to the template introduction for details or scan the QR code with Tuya Smart App to check if current template matches your product.

Design App UI

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.

Design App UI

The following interface templates are available:

Fixed template

Different fixed templates are provided to adapt to various product categories. They deliver suitable interfaces corresponding to the standard function configuration (such as, enable or disable).

Design App UI

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.

Custom template

Custom template: after you apply a template, click Edit to customize styles. You can modify the interface styles, such as interface background, theme color and font color, and then click Save.

Design App UI

DIY template

DIY template: allows you to flexibly set up the app interface. Various styles of component, icon and background are offered to suit different function points. The interface styles can be changed simply by sorting and setting related elements.

Design App UI

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

Design App UI

DIY template description

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

  • Background: determine 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: customizes the styles and sorting of function points, and three modules are available for now, big, middle and small module.
  • Big module: supports changing background picture and icon.
  • Middle module: supports changing icon.
  • Small module: supports changing icon.

During DIY template configuration, you need to save the setting first and then preview the interface on the app by scanning the QR code.

Debug template

Debug template supports checking communication log. After you apply debug template, click Next: Hardware Develop.

Design App UI

Click Virtual Device Commissioning, and scan the QR code with Tuya Smart App to proceed online debugging.

Design App UI

Design App UI

Design App UI

Check the communication log on the virtual panel. Debug template can also be used for testing your products. It supports displaying all product functions and function types. But it is not recommended to release this debug interface to users.

Click for services and help