Skip to main content

Screenshot datasource

Screenshot datasources allow you to capture and display images of web pages, applications, or any URL-accessible content directly in your widgets and templates. The system automatically generates screenshots at specified intervals and makes them available for dynamic content display.

Prerequisites​

Before creating a Screenshot datasource, ensure you have:

  • Valid URLs that are publicly accessible or properly authenticated
  • Understanding of the target page layout and content
  • Proper network access from the Wallboard server to the target URLs
  • Knowledge of any authentication requirements for protected pages
  • Consideration of page loading times for dynamic content

Supported Screenshot Features​

The Screenshot datasource supports:

Image Formats:

  • PNG or JPG format selection via Image Format switch
  • PNG format for high-quality screenshots
  • JPG format for smaller file sizes
  • Configurable resolution and viewport sizes
  • Cropping capabilities for specific page sections
  • Custom headers for authentication

Limitations:

  • Maximum of 5 screenshots per datasource
  • Wait times between 2000ms (2 seconds) and 25000ms (25 seconds)
    • Some dynamic content may require longer wait times to load

Create datasource​

Go to Settings > Datasources and open the External Datasources tab. Click Add external datasource, then on the Choose a datasource type screen select Screenshot.

  • Set how often the datasource updates under Refresh settings: a Simple interval or an Advanced schedule (cron). Learn more: Refresh and caching
  • You can also assign teams to the datasource if necessary.

Configuration Options​

When adding a new screenshot to your datasource, configure the following settings:

Basic Settings​

URL

  • Enter the complete URL to capture a screenshot from
  • Must include the protocol (http:// or https://)
  • Ensure the URL is accessible from your Wallboard server
  • Examples: https://example.com, https://app.example.com/dashboard

Image Format

  • Choose between PNG or JPG format for the screenshot output
  • PNG: Higher quality, larger file size
  • JPG: Smaller file size, suitable for most use cases

Image Width

  • Define the viewport width for the screenshot capture
  • Default value: 1280 pixels if not specified
  • Range: Typically 320px to 1920px for optimal results
  • Consider the target content layout when setting width

Image Height

  • Define the viewport height for the screenshot capture
  • Default value: 720 pixels if not specified
  • Range: Typically 240px to 1080px for optimal results
  • Use appropriate height to capture desired content area

Authentication Settings​

Headers

  • Add custom HTTP headers for authentication or configuration
  • Useful for accessing protected pages or APIs
  • Format: JSON object {"Authorization":"Bearer token123"}
  • Common headers: Authorization, Cookie, User-Agent, API-Key
  • Example: {"Authorization":"Basic dXNlcjpwYXNz", "User-Agent":"Wallboard-Screenshot"}

Timing Settings​

Wait Time (ms)

  • Time to wait before capturing the screenshot
  • Allows page content to fully load
  • Range: 2000ms (2 seconds) to 25000ms (25 seconds)
  • Default: 2000ms (2 seconds) if not specified

Crop Settings​

Crop functionality allows you to capture specific sections of a webpage instead of the entire viewport:

Start Coordinates (X, Y)

  • Start X: Left boundary of the crop area (horizontal offset)
  • Start Y: Top boundary of the crop area (vertical offset)
  • Values in pixels from the top-left corner of the original screenshot

End Coordinates (X, Y)

  • End X: Right boundary of the crop area
  • End Y: Bottom boundary of the crop area
  • Values in pixels from the top-left corner of the original screenshot

Crop Examples:

  • Header only: Start X,Y: 0,0 - End X,Y: 1280,100
  • Center content: Start X,Y: 200,100 - End X,Y: 1080,620
  • Sidebar section: Start X,Y: 0,100 - End X,Y: 300,720
  • Square crop: Start X,Y: 0,0 - End X,Y: 500,500

The cropped image dimensions will be: (End X - Start X) × (End Y - Start Y) pixels.

img

Advanced Settings​

Active

  • Enable or disable individual screenshots within the datasource
  • Useful for temporarily excluding specific screenshots without deletion
  • Inactive screenshots won't be captured during datasource updates

A Screenshot datasource has no caching settings. Continue refreshing despite errors and Connection settings are explained in Advanced datasource settings.

Screenshot Image Viewer​

After your Screenshot datasource captures images, you can preview them using the Screenshot Image Viewer:

Accessing the Image Viewer​

  • Navigate to the Screenshot datasource in the Datasources menu
  • Click on the preview/view icon to open the Screenshot previews modal
  • The viewer displays all captured screenshots from the datasource

Image Viewer Features​

Screenshot Selection

  • Dropdown selector at the top to choose which screenshot to preview
  • Shows the datasource name or screenshot identifier

Main Preview Area

  • Large preview display of the selected screenshot
  • Navigation arrows (< >) to browse through screenshots sequentially
  • Click arrows to move between previous and next screenshots

Thumbnail Carousel

  • Bottom carousel showing all screenshots with labels
  • Click any thumbnail to jump directly to that screenshot
  • Visual overview of all captured images in the datasource
  • Thumbnails labeled with screenshot names or identifiers

Screenshot Previews Modal

Using Screenshot Data in Widgets​

Once your Screenshot datasource is created and active, you can use the captured images in various widgets:

Image Widget​

  • Display screenshots directly using the datasource path
  • Example: {{datasource.screenshot_name.image}}
  • Supports automatic refresh based on datasource update frequency

Common Use Cases​

Dashboard Displays

  • Show external dashboards or control panels
  • Display third-party analytics or monitoring tools
  • Create unified views of distributed systems

Content Preview

  • Show previews of web applications or tools
  • Display live content from external sources
  • Create visual catalogs of web resources

Tips for Optimal Screenshots​

URL Configuration:

  • Use specific page URLs rather than generic domain names
  • Include necessary parameters for proper page display
  • Test URLs in a browser to verify accessibility

Timing Optimization:

  • Increase wait times for JavaScript-heavy pages
  • Consider page loading patterns when setting wait times
  • Monitor screenshot quality and adjust timing as needed

Resolution Settings:

  • Match viewport size to the target content layout
  • Use standard screen resolutions (1280x720, 1920x1080)
  • Consider the final display size when choosing resolution

Authentication:

  • Use session cookies or API tokens for protected content
  • Test authentication headers before deploying
  • Consider token expiration and renewal requirements

Save and Activate​

Once all configuration is complete:

  1. Review Settings: Verify all URLs, dimensions, and timing settings
  2. Test Configuration: Use the preview function if available
  3. Save Datasource: Click the Save button to store your configuration
  4. Monitor Performance: Check the first few captures for quality and timing
  5. Adjust as Needed: Fine-tune settings based on initial results

Your Screenshot datasource will now capture images according to the specified refresh frequency or cron expression, making them available for use in your widgets and templates.