Greenhouse monitoring dashboard

Procedure

1. Create a web visualization application. For more information, see Create a web application.
2. In the left navigation pane of the web application editor, click Pages, then configure the page background, resolution, and other settings.
   • Set the resolution to 1920x1080, a common widescreen aspect ratio.
   • In the bottom toolbar, select the Adaptive Scaling checkbox. The page will then scale proportionally to fill the screen width.

   The configuration panel on the right includes options such as Set as Homepage, Hide Layout Information, Login-free Access, and Access Control, as well as settings for Background Color and Background Image. The Page Resolution drop-down list provides options such as 1024x768, 1366x768, 1280x800, 1440x900, 1600x900, 1920x1080, and Custom.
3. Set up the layout.
   1. Drag rectangle components onto the canvas to use as backgrounds for other components.
   2. Select a rectangle component, then configure its style in the right-side configuration panel, including its size, position, fill color, and border color and weight.
      The Components panel on the left provides basic components (such as Text, Line, Image, Vector, Rectangle, Ellipse, Triangle, Star, Polygon, Arrow, Indicator, Card, Clock, iframe, Map, and Dashboard), spatial components, and control components. After you select a rectangle component, you can configure its position, size, Fill Color, and Border (weight, color, and style) in the Style panel on the right.
   3. Drag an iframe component to the center of the page, adjust its size and position, and configure the associated link. You can use an iframe component to display content from a linked page, such as a company introduction video.
      From the Components panel on the left, drag an iframe component onto the canvas. The Configure Link dialog box appears. In the Link field, enter the URL of the target page. You can also use the Parameter Source and options for advanced configuration. Note that due to security policies, only HTTPS addresses are supported. To use an HTTP address, you must bind a custom domain name.

      If the target link is an HTTPS link, the component displays the content of the target page.

      Important If the link is an HTTP link, the canvas does not display the page content. Click the Preview button above. The preview page then displays the content of the HTTP page.
4. Configure a text component to display the dashboard title.
   From the Components panel on the left, drag a Text component onto the canvas. In the configuration panel on the right, set the text position, content, and style. For this example, set the Text Content to the dashboard title, Font Family to Microsoft YaHei, Font Size to 36, Color to blue (#058BFC), Font Weight to bold, and Alignment to center.
5. Configure a clock component to display the current time.
   Drag the Clock component from the components panel on the left onto the canvas. In the style panel on the right, select Date and Time for Display Format, and configure the Text Style (such as font size, color, and weight) and Border style.
6. Configure data display components.

   You can use components like text, tables, and charts to display device data. When configuring a component, set its data source to the appropriate data from the device.

   This example uses the following components:

   • Text components to display the titles of each area.
   • Gauge components to display the property data reported by smart devices.
     • In the style settings for the gauge component, set the title to the data category it displays, such as humidity, indoor temperature, or outdoor temperature.
     • Set the data source to the corresponding device property. For example, the data source for humidity is the current humidity reported by a temperature and humidity sensor.

     The following example shows how to configure a gauge to display temperature data.

     In the Data Source panel for the gauge, select Device as the Data Source type, then select the corresponding Product (for example, a temperature and humidity sensor). In the Select Devices dialog box that appears, select the target device. For Data Item, select Device Property and then choose the Property to display (for example, temperature).
   • Text components to display a specific data value.

     Set the content for the three text components as follows:

     • The data category name, entered manually.
     • Click the Configure Data Source button next to Text Content. In the data source configuration panel, configure the relevant property data reported by the device.
     • The unit for the property data, entered manually.

     The following example shows how to configure a component to display outdoor temperature data.

     In the Text Content - Data Source panel, select Device as the Data Source type, then select the corresponding Product and Device. For Data Item, you can select Device Property or Device Event. After you select Device Property, choose the specific Property to display.
   • Switch components to display the status of devices in the greenhouse.

     For a switch component, set its data source to the corresponding device.

     In the Switch Data - Data Source panel, select the corresponding Product and Device. Set Data Item to Device Property, then select a specific property. To convert a numeric property to a switch state, select the Convert Integer to Boolean checkbox and set the thresholds for True and False.
   • A line chart to display the illuminance over the course of a day.

     Set the data source for the line chart to the illuminance monitoring device. Set the Real-time Data Period to 00:00 to 24:00 today.

     In the Data Source panel for the line chart, select Multiple devices and single property for Mode. Select the corresponding Product and Device. For Data Item, select Historical Device Data, then choose the Property to display. The Time Unit can be set to 1 hour.
7. After the configuration is complete, click Preview to preview the application page.
8. Click Publish to deploy the application to the cloud.