Skip to main content

How to Create a Content That Shows the Current Weather

Completion Time: 15 minutes

This guide walks you through creating a simple content layout with a Video Widget as a background and three Weather Widgets to display the current temperature, condition icon, and description.

Widgets Used​

  • Video Widget (Background): A scenic video covering the entire canvas.
  • Weather Widget (Temperature): Displayed in the center in bold text.
  • Weather Widget (Icon): Positioned next to the temperature widget.
  • Weather Widget (Description): Positioned below the temperature and icon.

Interactive Tutorial​

Instructions​

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.
    • 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 fullscreen:
    • Use the Size & Position presets under the Main Tab to cover the entire canvas.

Add the Weather Widgets​

Weather Widget for Current Temperature​

  • Drag the Weather Widget from the Widgets Panel onto the canvas.
  • In the Main Tab under Widget Properties, configure the following:
    • Click the - icon to remove additional locations.
    • Enter the City ID (e.g., 75052).
    • Enter the Display Name (e.g., “Dallas”).
    • Select the Country (e.g., US or US_TX).
    • Choose the Temperature Unit (Celsius or Fahrenheit).
    • Toggle Partial and select Temperature.
  • Style the text: set font family, style, size, and color in the Main Tab.
  • Resize and position the widget accordingly.

Weather Widget for Icon​

  • Copy the first Weather Widget (Ctrl + C, Ctrl + V).
  • Move it to the desired position.
  • In the Main Tab, change the Partial property to Icon.
  • Select a theme from the Icon Set dropdown.
  • Resize the widget to fit the layout.

Weather Widget for Description​

  • Copy any Weather Widget (Ctrl + C, Ctrl + V).
  • Move it to the desired position.
  • In the Main Tab, change the Partial property to Description.
  • Style the text in the Main Tab.
  • Resize the widget for best readability.

Final Adjustments​

Align Widgets​

  • Use the alignment tools in the top toolbar to align widgets.
  • Use arrow keys for fine-tuned adjustments.

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​

  • Click the Preview button (play icon) to view your content fullscreen.
  • Confirm the widgets display correctly.

Downloadable content​

Downloadable content!

Project files
Content export

SUPPORT

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