Configuration Guide for Studio
Last Updated on : 2020-06-19 06:22:45download
How to DIY UI panel?
Let us take the air purifier as an example to see how to DIY the UI panel you want based on our official template.
Tuya IoT platform offers many official templates for customers to choose from.You can find them in the second step (App Panel Design) when creating product in Tuya IoT platform.
If you do not have specific requirements on UI panel, you can directly use our existing templates without additional adjustment and configuration.
If you have customized requirement or the official templates do not meet your needs, you can choose an existing template, click “edit” and go to panel studio for more configuration.
All the official templates can be configured and customized, which means that you can change the styles, colors, icons, characters, sequences etc as you like based on the current templates via panel studio.
Choose one template that you want to use and click “edit”, enter panel studio to begin to DIY (After you enter the panel editor, you will see a function list in the left. These are the function dps of this PID).
In this page, you can use all the capabilities that the studio offers to DIY your panel. For example, draft the visual components on the left side to the panel canvas and select “Style”, “Attribute” to do configuration as you like.
- When you are configuring the panel, you can click “preview”on the upper right corner in the studio and experience real-time change in you app.
- You can control the actual device using your DIY panel if you choose “real device preview”.
List all your panel customization requirements and start to configure.
【Adjust Style】The brand color of our products is blue, so I want to highlight our brand color in the panel.
【Adjust the order of functions】Align switch, wind speed, mode and child lock in a horizontal row instead of a vertical row.
【Link Style】 Enable different modes to show diverse icons and texts.
【Configure Overall rule】When a certain mode is activated, wind speed and child safety lock are disabled.
【Set Up Cloud Function】Support certain functions to set timer; Allow users to directly go to app mall via link in app
【Requirement】 The brand color of our products is blue, so I want to highlight our brand color in the panel.
【Requirement】I want to align switch, wind speed, mode, child lock in one horizontal row.
Step 1：Select "switch" in “Function” in the left and drag its icon to the panel canvas.
Step 2： Select component "Switch" and click “Add configuration” in “Attribute” to add three function buttons. (Click “Add configuration” for three times)
Step 3：Choose any button, click “Set function or link”, select the functions you want to add from pop-up window (in this example, you need to choose “wind speed”, “mode” and “child lock” ) and then also select "icon" that you want to use in [Attribute].
Step 4: Remove the original "switch/ mode/ wind speed/ child lock" that you do not want from panel canvas. The effect is as follows:
If you want to configure more about font colors, icons size, component backgrounds etc, you can try it out in “Style”.
【Requirement】When choosing different mode, the buttons can correspondingly show diverse icons and texts.
Step 1： Select "Mode" and find its configuration box in “Attribute”. Click “Style Linking”- “Add rule” and start to configure rules.
Step 2: When configuring the rules, please use the logic "if...then...". Here is an example: If "mode" is "automatic", then apply the automate icon and use "automatic" in "text" .
Step 3: You can see in the pictures below that with different kinds of modes, the icons, texts also change.
【Requirements】When certain mode is activated, the wind speed and children lock are disabled.
【Requirement】Allow certain functions to set timer.
【Requirement】Through the link, app user can directly turn to other pages such as App Mall.
After the panel is configured, click “Release” to start greyscale release ( If you accidentally exit during greyscale release, you can return to the page by clicking IoT platform > Product Management > Choose the product that you are configuring > go to second step of configuration (App panel) > Edit )
The purpose of grayscale release： After the panel is designed and configured, you can generate a test panel via greyscale release, which can be used to test the overall functions and app interaction (After the greyscale panel is released, current app users will not be affected.)
After the greyscale release is successful, you can share the QR code to your team member to test. Please use Tuya Smart to scan QR code.
The team members who want to test the UI panel need to register a Tuya Smart account first and the account needs to be added as a panel test account.
You can scan QR code to experience the panel via “visual device experience” and “actual device experience” (Tips: You can control actual device through the panel.)
If the QR code becomes invalid, you can click “release”and select “scan QR code to test” to scan the code again.
After the greyscale relase is successful and the test is passed,you can click “release” to officially release the panel. The panel will be directly applied to the current product after it is officially released and the page will turn to “IoT Product - App panel”. You can see your DIY panel in your app.