Gauge clock-IoT Studio(IoT Studio)-阿里云帮助中心

The Gauge Clock is a skeuomorphic component that displays the current system time in a 12-hour format. This topic describes how to configure it.

Step 1: Add the component

Create a web application. For more information, see Create a web application.
In the web application editor, click the component icon on the far left.
In the search box above the component list to the left of the canvas, enter Gauge Clock and drag the component onto the canvas.

For more information about adding components, see Add a component.
Enter Gauge Clock in the search box in the component panel on the left, and add the component to the canvas from the Industrial Components category. Select the component to configure properties such as position and size, name, visibility, opacity, hour hand color, minute hand color, number color, background color, and border in the Style pane on the right.

In the Style pane on the right, set the colors for the hour hand, minute hand, numbers, and background, and configure the clock's border (thickness, color, and style).
Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

In the Interaction panel on the right side of the web application editor, click Add Interaction, and then set an event and an action.

This component supports the Mouse In event. For example, you can set the Mouse In event to trigger a Show/Hide action that reveals a hidden component with additional information.

For more information, see Interaction configuration.
Click Preview in the upper-right corner of the page to view and debug the component's data and style.