Skip to main content

How to Create a Content That Shows the Current Weather

Introduction​

Completion Time: 15 minutes

Description

To create simple content with a background video and three weather widgets (one for current temperature, one for the weather condition icon, and one for the weather description), follow these step-by-step instructions.

Widgets Used

  1. Video (Background): A scenic video covering the entire canvas.
  2. Weather 1 (Temperature): Displayed in the center in bold text.
  3. Weather 2 (Icon): Positioned next to the temperature widget for clarity.
  4. Weather 3 (Description): Positioned below the temperature and icon.

Step-by-Step Interactive Tutorial​

Step-by-Step Instructions​

1. Set Up the Content​

Create a New Content:

  • Navigate to the Contents section on the Wallboard dashboard.
  • Click the + icon and select Create Content.
  • In the popup, name your content, and set the resolution to match your screen.
  • Click Create and Open to enter the Content Editor.

Add a Background Video:

  • Drag the Video Widget from the Widgets Panel onto the canvas.
  • Click the widget to open the Properties Panel on the right.
  • In the Source field, select your background video from the file manager, and click Choose File.
  • Resize the Video Widget to cover the entire canvas by dragging the corners or using the Size and Position presets found under the Main tab in the properties panel.

2. Add the Weather Widgets​

Weather Widget for Current Temperature:

  • Drag the Weather Widget from the Widgets Panel onto the canvas.
  • In the Properties Panel, under the Main tab, configure the following:
    • Remove Additional Locations: Click the - icon to remove extra locations so only one remains.
    • City ID: Enter the postal code of the location you want to display (e.g., 75052).
    • Display Name: Enter the city or location name (e.g., “Dallas”).
    • Country: Select the appropriate country code (e.g., US or US_TX for Texas).
    • Temperature Unit: Choose Celsius or Fahrenheit.
    • Partial Toggle: Toggle the Partial property and select Temperature from the dropdown.
  • To style the text, choose a font family, style, size, and color under the Main tab in the properties panel.
  • Resize and position the widget where you want the temperature displayed.

Weather Widget for Icon:

  • Copy the first Weather Widget by selecting it and pressing Ctrl + C and Ctrl + V.
  • Move the copied widget to a new position.
  • In the copied widget’s Properties Panel, under the Main tab, adjust the Partial property to display the weather Icon.
  • Style the icon:
    • Choose from one of the different themes in the Icon Set dropdown.
  • Resize the widget to display the weather icon as needed.

Weather Widget for Description:

  • Copy any of the Weather Widgets by selecting it and pressing Ctrl + C and Ctrl + V.
  • Move the copied widget to a new position.
  • In the copied widget’s Properties Panel, under the Main tab, adjust the Partial property to display the weather Description.
  • Style the text:
    • Choose a font family, style, size, and color under the Main tab in the properties panel.
  • Resize the widget to display the weather description as needed.

3. Final Adjustments​

Align Widgets:

  • Use the alignment tools in the top toolbar to align the weather widgets and ensure the layout is visually balanced.
  • Fine-tune positioning using the arrow keys for pixel-perfect placement.

Save and Publish:

  • Click the Save icon (floppy disk) to apply your changes.
  • Publish the content to your devices or schedule it for later.

Preview the Content:

  • Select the Preview icon (play button) at the top of the editor to view your content full screen.
  • Confirm the widgets are displaying correctly and adjust as needed.

Downloads​

Downloadable content!

downloadIcon.png

Tip!

If you have further questions please do not hesitate to contact us at support@wallboard.info. Happy editing!