Components Library

Build Dynamic Content

SignageStudio's component library provides hundreds of pre-built widgets for adding dynamic content to your digital signage. From weather and clocks to social media feeds and live data, create engaging displays without coding.

Component Categories

Overview

Category	Components	Description
Time & Date	Clock, Calendar, Countdown	Time-based displays
Weather	Current, Forecast, Radar	Weather information
News & Feeds	RSS, News, Ticker	Information feeds
Social Media	Twitter, Instagram, Facebook	Social content
Data	JSON, XML, Database	Custom data integration
Media	Image, Video, Slideshow	Rich media
Interactive	Touch, QR Code, Forms	User interaction
Shapes	Rectangle, Circle, Line	Design elements

---

Time & Date Components

Clock

Display current time in various formats:

Style	Description	Best For
Digital	Numeric display	Modern look
Analog	Traditional clock face	Classic style
World Clock	Multiple timezones	Global offices
Flip Clock	Animated digits	Retro style

Configuration Options:

• Time format (12/24 hour)
• Timezone selection
• Show/hide seconds
• Custom fonts and colors
• Size and position

Calendar

Display events and schedules:

Source	Integration
Google Calendar	OAuth connection
Outlook/Office 365	OAuth connection
iCal/ICS	URL feed
Custom	API/JSON

Display Styles:

• Month view
• Week view
• Day view
• Agenda list
• Next event only

Countdown

Timer counting to/from a date:

Type	Use Case
Event countdown	"Product launch in X days"
Time since	"X days since last accident"
Deadline	"Sale ends in X hours"
Daily reset	"Store closes in X minutes"

---

Weather Components

Current Weather

Display real-time weather conditions:

Data	Display Options
Temperature	Fahrenheit, Celsius
Conditions	Icon, text, both
Humidity	Percentage
Wind	Speed, direction
Feels like	Adjusted temperature
UV Index	Scale/description

Configuration:

Location: [City, ZIP, or coordinates]
Units: [Metric / Imperial]
Style: [Simple / Detailed / Icon only]
Update: [Every 15/30/60 minutes]

Weather Forecast

Multi-day forecast display:

Style	Days	Best For
Horizontal	3-7 days	Wide displays
Vertical	3-5 days	Narrow spaces
Grid	5-7 days	Square zones
Hourly	24 hours	Detailed planning

Weather Radar

Live radar map display:

• Animated precipitation
• Configurable region
• Zoom level control
• Layer options (radar, satellite, temperature)
• Auto-refresh interval

---

News & Feed Components

RSS Feed

Display content from any RSS/Atom feed:

Setting	Options
Feed URL	Any valid RSS/Atom URL
Items shown	1-10 items
Display style	Headlines, summary, full
Image	Show/hide thumbnails
Rotation	Time per item
Animation	Fade, slide, none

Popular Sources:

• News sites (CNN, BBC, Reuters)
• Company blogs
• Industry publications
• Custom internal feeds

News Ticker

Scrolling headline display:

Property	Description
Speed	Pixels per second
Direction	Left, right, up, down
Separator	Between items
Pause on hover	For touch displays
Repeat	Continuous or single pass

Multi-Source Aggregator

Combine multiple feeds:

┌─────────────────────────────────────────────────────────────────┐
│                    NEWS AGGREGATOR                               │
│                                                                  │
│   Sources:                                                       │
│   ├── Company Blog RSS                                          │
│   ├── Industry News Feed                                        │
│   ├── Local News RSS                                            │
│   └── Internal Announcements                                    │
│                                                                  │
│   Display: Mixed rotation                                        │
│   Priority: Internal > Industry > Local                          │
│   Max age: 24 hours                                              │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

---

Social Media Components

Twitter/X Feed

Display tweets from various sources:

Source Type	Configuration
User timeline	@username
Hashtag	#hashtag
Search	Keywords
List	Curated list

Display Options:

• Show/hide images
• Show/hide retweets
• Number of tweets
• Auto-refresh rate
• Moderation (approval required)

Instagram Feed

Display Instagram content:

Source	Display
User posts	Profile's recent posts
Hashtag	Public posts with tag
Location	Posts from place

Layout Styles:

• Single image (rotate)
• Grid (2x2, 3x3)
• Carousel
• Story-style

Facebook Page

Show Facebook page content:

Content	Options
Posts	Recent page posts
Events	Upcoming events
Reviews	Customer reviews
Photos	Album display

Social Wall

Multi-platform aggregation:

┌─────────────────────────────────────────────────────────────────┐
│                     SOCIAL WALL                                  │
│                                                                  │
│  ┌───────────┬───────────┬───────────┬───────────┐             │
│  │ Twitter   │ Instagram │ Facebook  │ Twitter   │             │
│  │ @company  │ @company  │ Review    │ #event    │             │
│  ├───────────┼───────────┼───────────┼───────────┤             │
│  │ Instagram │ Twitter   │ Instagram │ Facebook  │             │
│  │ #brand    │ mention   │ @company  │ Post      │             │
│  └───────────┴───────────┴───────────┴───────────┘             │
│                                                                  │
│  Moderation: Auto-approve verified / Manual review others       │
│  Refresh: Every 5 minutes                                        │
│  Animation: Waterfall style                                      │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Moderation Options:

• Auto-approve all
• Auto-approve verified accounts
• Keyword filtering
• Manual approval queue
• Blocklist

---

Data Components

JSON Data

Display data from any JSON API:

// Example Configuration
{
  "url": "https://api.example.com/data",
  "method": "GET",
  "headers": {
    "Authorization": "Bearer TOKEN"
  },
  "refresh": 60,  // seconds
  "mapping": {
    "title": "$.data.title",
    "value": "$.data.metrics.current"
  }
}

Data Binding:

• Map JSON fields to display elements
• JSONPath expressions supported
• Conditional formatting
• Array iteration

XML Data

Display data from XML feeds:

Feature	Support
XPath queries	Yes
Namespaces	Yes
Attributes	Yes
XSLT transform	Optional

Google Sheets

Connect to Google Sheets for live data:

1. Share sheet with SignageStudio
2. Configure sheet URL
3. Select data range
4. Map columns to display

Use Cases:

• Price lists
• Event schedules
• Employee directories
• KPI dashboards

Database Connection

Direct database queries (Server edition):

Database	Support
SQL Server	Full
MySQL	Full
PostgreSQL	Full
Oracle	Full
ODBC	Generic

---

Media Components

Image

Display static images:

Format	Support
JPG/JPEG	Full
PNG	Full (transparency)
GIF	Full (animated)
WebP	Full
SVG	Full (vector)

Properties:

• Fit mode (contain, cover, stretch, center)
• Background color
• Border and shadow
• Rotation and opacity
• Animation on entry/exit

Video

Play video content:

Format	Recommended Codec
MP4	H.264 (universal)
WebM	VP8/VP9 (web)
MOV	H.264 (Apple)

Playback Options:

• Loop or play once
• Muted or with audio
• Autoplay
• Start/end trim
• Speed control

Slideshow

Rotate through images:

Setting	Options
Source	Folder, selection, feed
Duration	Per-image time
Transition	Cut, fade, slide, etc.
Order	Sequential, random
Ken Burns	Pan and zoom effect

Web Page

Embed websites or web apps:

Use Case	Example
Dashboards	Power BI, Grafana
Internal apps	Intranet, portals
Live data	Traffic, stocks
Interactive	Wayfinding, kiosks

Settings:

• URL
• Refresh interval
• Scroll position
• Scale/zoom
• JavaScript enabled

---

Interactive Components

Touch Button

Interactive touch elements:

Action	Trigger
Navigate	Go to scene
URL	Open web page
API call	Send request
Play media	Video, audio
Show popup	Modal content

QR Code

Dynamic QR code generator:

Data Type	Example
URL	Website links
WiFi	Network credentials
vCard	Contact info
Text	Custom message
Dynamic	API-driven content

Form Input

Collect user input (touch displays):

Field Types
Text input
Dropdown select
Radio buttons
Checkboxes
Date picker
Submit button

---

Utility Components

Shapes

Basic design elements:

Shape	Use
Rectangle	Backgrounds, buttons
Circle	Icons, decorations
Line	Dividers, connectors
Arrow	Direction indicators
Custom SVG	Complex shapes

Text

Text display options:

Type	Feature
Label	Single line
Text box	Multi-line, wrapping
HTML	Rich formatting
Ticker	Scrolling text

Containers

Layout organization:

Container	Use
Zone	Independent playlist area
Group	Grouped elements
Scroll	Scrollable content
Tab	Tabbed interface

---

Component Configuration

Common Properties

All components share these properties:

Property	Description
Position	X, Y coordinates
Size	Width, height
Rotation	Angle in degrees
Opacity	Transparency (0-100%)
Visible	Show/hide toggle
Layer	Z-index ordering
Animation	Entry/exit effects
Conditions	Display conditions

Data Refresh

Configure how often data updates:

Type	Refresh Rate
Static	Never (images, text)
Cached	Hourly (weather, news)
Live	Minutes (social, data)
Real-time	Seconds (stocks, alerts)

---

Frequently Asked Questions

---

Next Steps

• Scene Editor - Design layouts
• Data Integration - Connect data sources
• Scheduling - Schedule content
• Player Management - Deploy content

---

Components documentation maintained by MediaSignage. For custom component requests, contact support@digitalsignage.com