Weather

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 4 Weather widget card

• Background
  • Background color: Background color of the widget card.
  • Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
  • Style: Image display style. The options are normal, center, stretch, and tiled.
  • Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, or GIF images are recommended. The size of each image cannot exceed 50 MB.
• Special effect: Widget highlighted status. Displayed by default or on page load.
• Padding: Distance between the chart and the four sides (top, bottom, left, and right as shown in Figure 3) of the widget. The default value is 0, indicating that the chart stretches to fill the entire widget.

Configuration

You can set the year, month, date, background color, and time bar color of the widget.

Figure 5 Configuration

• Unified configuration
  • Display future weather forecast: Whether to display the weather forecast of the next week.
  • Background color: Background color of the weather forecast.
• Temperature
  • Display: Whether to display the temperature of the current day.
  • Font: Font, size, and color of today's temperature.
• Weather icon
  • Display: Whether to display the weather icon.
  • Icon size: Size of the weather icon.
  • Icon color: Color of the weather icon.
• City name
  • Display: Whether to display the city name.
  • Font: Font, size, and color of the city name.
• Today's weather
  • Display: Whether to display today's weather.
  • Font: Font, size, and color of today's weather.
• Current week
  • Display: Whether to display the current week.
  • Font: Font, size, and color of today.
• Current date
  • Display: Whether to display the current date.
  • Font: Font, size, and color of today.
• Current time
  • Display: Whether to display the current time.
  • Font: Font, size, and color of the current time.
• Today's other metrics
  • Display: Whether to display other weather indicators of the current day.
  • Font: Font, size, and color of other weather indicators of today.
• Future weather icon
  • Display: Whether to display the future weather icon.
  • Icon size: Size of the future weather icon.
  • Icon color: Color of the future weather icon.
• Highest temperature in the future
  • Display: Whether to display the highest temperature in the next few days.
  • Font: Font, size, and color settings for the highest temperature in the next few days.
• Lowest temperature in the future
  • Display: Whether to display the lowest temperature in the next few days.
  • Font: Font, size, and color of the lowest temperature in the next few days.
• Display of future week
  • Display: Whether to display the next few weeks.
  • Font: Font, size, and color of the next few weeks.
• Future date display
  • Display: Whether to display the dates of the next few days.
  • Font: Font, size, and color of the dates in the next few days.

Data

In the data settings, you can set the data source of the weather widget. For more information, see Data Access.

Figure 6 Setting the data source of the weather widget

Figure 7 Selecting Preset Bridge and Static Data

In the static data, dataNow corresponds to the weather of the current day, and dataForecast corresponds to the weather forecast of the next few days.

Huawei Cloud Astro Canvas presets a set of beautiful weather icons, which are used to display weather conditions on the weather widget. The icon field indicates the weather icon of today, and the iconDay field indicates the weather icon of a future date. For example, the value 100 indicates a sunny day, and the weather icon is displayed. The value 307 indicates heavy rain, and the weather icon is displayed. For the mapping between the value and weather, see Table 1.

Interaction

In the interaction settings, you can configure interactions between the weather widget and other widgets or pages. For details, see Interaction Configuration.