FIDS Visual Page Designer - Complete Documentation

System Overview

This WPF-based digital signage system for Flight Information Display Systems (FIDS) and Passenger Information Display Systems (PIDS) supports rich multimedia displays with animations, transitions, and real-time content. The system uses XML configuration with XSLT processing for dynamic content generation.

Basic Structure

XML

<page id="main" width="1920" height="1080">
    <!-- All elements go inside a page -->
    <panel><!-- Container elements --></panel>
    <text><!-- Text content --></text>
    <image><!-- Images --></image>
    <clock><!-- Time displays --></clock>
    <marquee><!-- Scrolling text --></marquee>
    <rotate><!-- Rotating content --></rotate>
    <media><!-- Video/audio --></media>
    <adsequence><!-- Advertisements --></adsequence>
    <html><!-- Web content --></html>
    <weather><!-- Weather displays --></weather>
</page>

Coordinate System

Origin (0,0) is top-left corner.
X increases going right.
Y increases going down.
All measurements in pixels.
Supports auto-scaling for different resolutions.

Element Types Available

page - Root container with global settings.
panel - Container for grouping elements with layout control.
text - Static and dynamic text with rich formatting.
image - Static images with scaling and effects.
clock - Real-time date/time displays with custom formatting.
marquee - Scrolling text displays for announcements.
rotate - Rotating content with transitions.
media/mediaelement - Video and audio content.
adsequence - Advertisement sequence management.
html - Embedded HTML content.
weather - Weather information displays.
bgimage - Background images.

Page Element

The root container that defines the overall display area and global properties.

Complete Attributes Reference

Required Attributes

XML

<page id="unique-identifier">    <!-- REQUIRED: Unique page identifier -->

Dimensions and Layout

XML

<page width="1920">              <!-- Page width in pixels (default: 1024) -->
<page height="1080">             <!-- Page height in pixels (default: 768) -->
<page auto-scale="true">         <!-- Enable automatic scaling (true/false) -->
<page auto-scale="false">        <!-- Use fixed dimensions -->

Background Colors

XML

<page bgcolor="black">           <!-- Solid background color -->
<page bgcolor="#FF0000">         <!-- Hex color notation -->
<page bgcolor="rgb(255,0,0)">    <!-- RGB color notation -->

Page Transitions

XML

<page transition="fade">         <!-- Fade transition -->
<page transition="slide">        <!-- Slide transition -->
<page transition="wipe">         <!-- Wipe transition -->
<page transition="push">         <!-- Push transition -->
<page transition="">             <!-- No transition -->
<page preserve="true">           <!-- Preserve content during transitions -->
<page preserve="false">          <!-- Clear content (default) -->

Timing and Display Control

XML

<page effect-hold-seconds="2.5"> <!-- Global effect duration in seconds -->
<page dynamic-hold-time="30">    <!-- Page display duration in seconds -->
<page remove-delay="0.5">        <!-- Delay before removing elements -->

Synchronization

XML

<page ad-sync="true">            <!-- Enable advertisement synchronization -->
<page ad-sync="false">           <!-- Independent timing (default) -->

Time-Based Display Control

XML

<page display-start="09:00:00">   <!-- Start time (HH:mm:ss format) -->
<page display-end="17:00:00">     <!-- End time (HH:mm:ss format) -->
<page display-start="1900-01-01T09:00:00"> <!-- Full datetime format -->
<page display-end="1900-01-01T17:00:00">   <!-- Full datetime format -->

Video Wall Configuration

XML

<page video-wall="true">         <!-- Enable video wall mode -->
<page video-wall-device="Device1"> <!-- Assign to specific device -->
<page video-wall-layout="layout1"> <!-- Use specific layout -->

Global Blinking Control

XML

<page blink-interval="5">        <!-- Global blink on duration (1/10 seconds) -->
<page blink-off-interval="5">    <!-- Global blink off duration (1/10 seconds) -->

Performance Tip: Use solid colors for better performance on older hardware. Complex gradients should be applied to smaller elements rather than full pages.

Page Examples

Standard FIDS Display

XML

<page id="departures" 
      width="1920" 
      height="1080" 
      bgcolor="black" 
      auto-scale="true" 
      font="Arial" 
      font-size="16" 
      color="white"
      transition="fade" 
      preserve="false" 
      dynamic-hold-time="60">
    <!-- Flight departure content -->
</page>

Emergency Alert Page

XML

<page id="emergency" width="1024" height="768" 
      bgcolor="red" auto-scale="true"
      blink-interval="3" blink-off-interval="3"
      effect-hold-seconds="1" font="Arial Bold" font-size="24" color="white">
    <!-- Emergency alert content -->
</page>

Kiosk Information Display

XML

<page id="kiosk" width="1080" height="1920" 
      bgcolor="lightblue" auto-scale="true" 
      font="Verdana" font-size="18" color="darkblue"
      transition="slide" dynamic-hold-time="120">
    <!-- Vertical kiosk content -->
</page>

Element Transformation

Transform elements with rotation, scaling, and positioning effects.

Complete Transformation Reference

Rotation Properties

XML

<!-- Element Rotation -->
<text rotate-angle="45">         <!-- Rotation angle in degrees -->
<text rotate-x="100">            <!-- Rotation center X coordinate -->
<text rotate-y="50">             <!-- Rotation center Y coordinate -->

<!-- Combined Rotation -->
<panel rotate-angle="30" rotate-x="200" rotate-y="150">
    <text>Rotated panel content</text>
</panel>

Advanced Positioning

XML

<panel position="relative">      <!-- Relative positioning -->
<panel position="absolute">      <!-- Absolute positioning -->
<panel i="1">                    <!-- Index for relative positioning -->
<panel anchor="top">             <!-- Anchor to top -->
<panel anchor="bottom">          <!-- Anchor to bottom -->
<panel anchor="left">            <!-- Anchor to left -->
<panel anchor="right">           <!-- Anchor to right -->

Transformation Examples

Rotated Flight Number Display

XML

<text id="rotated-flight" x="400" y="200" width="200" height="60"
      rotate-angle="15" rotate-x="100" rotate-y="30"
      font-size="32" color="yellow" bgcolor="darkblue"
      align="center" valign="center">
    AA1234
</text>

Panel Element

Container element for organizing content with advanced layout, styling, and animation capabilities.

Complete Attributes Reference

Position and Size

XML

<panel id="unique-id"            <!-- Unique identifier -->
       x="100"                   <!-- X coordinate (pixels from left) -->
       y="50"                    <!-- Y coordinate (pixels from top) -->
       width="400"               <!-- Width in pixels -->
       height="300"              <!-- Height in pixels -->
       z="5">                    <!-- Z-index for layering (higher = front) -->
</panel>

Complete Attributes Reference

Anchoring System

XML

<panel anchor="top">             <!-- Anchor to top of parent container -->
<panel anchor="bottom">          <!-- Anchor to bottom of parent container -->
<panel anchor="">                <!-- No anchoring (default) -->

Background Colors and Gradients

Linear Gradient Backgrounds

The <LinearGradientBrush> element defines a smooth color transition between two or more colors along a straight line. It’s commonly used to create visually appealing backgrounds, panels, and shapes. You can control the direction of the gradient using StartPoint and EndPoint, and specify individual color stops with <GradientStop> elements.

The example below uses a golden-yellow gradient palette to create a warm, glowing background. Adjust the Color and Offset values to customize the blend.

XML

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
    <!-- Creates a diagonal gradient from top-left (0,0) to bottom-right (1,1) -->

    <GradientStop Color="#FFF59E0B" Offset="0.0" />
    <!-- Bright golden yellow at start (0%) -->

    <GradientStop Color="#FFFBBF24" Offset="0.4" />
    <!-- Soft warm yellow midtone at 40% -->

    <GradientStop Color="#FFFACC15" Offset="0.7" />
    <!-- Light sunny yellow highlight at 70% -->

    <GradientStop Color="#FFCA8A04" Offset="0.9" />
    <!-- Deep amber accent near the end (90%) -->

    <GradientStop Color="#FF78350F" Offset="1.0" />
    <!-- Rich orange-brown finish at 100% -->
</LinearGradientBrush>

🧠 Tips:

Use #AARRGGBB format for transparency (AA = alpha).
#FF = opaque, #80 = 50% transparent, #00 = fully transparent.
Keep Offset values between 0.0 and 1.0 for proper blending.
Try reversing the StartPoint and EndPoint to change the gradient direction.

XML

<!-- Solid Colors -->
<panel bgcolor="red">            <!-- Named colors -->
<panel bgcolor="#FF0000">        <!-- 6-digit hex -->
<panel bgcolor="#FFFF0000">      <!-- 8-digit hex with alpha -->
<panel bgcolor="rgb(255,0,0)">   <!-- RGB notation -->
<panel bgcolor="transparent">    <!-- Transparent background -->

<!-- Linear Gradients -->
<panel bgcolor="red"             <!-- Start color -->
       color2="yellow"           <!-- End color (creates gradient) -->
       bgcolor2="yellow"         <!-- Alternative syntax for end color -->
       gradient-angle="45"       <!-- Gradient direction: 0-360 degrees -->
       gradient-y-start-percent="20"> <!-- Start position: 0-100% -->
</panel>

Transparency and Layering

To create transparency in your FIDS system, you need to use hex color notation with alpha values. Here's how to layer panels with transparency.

XML

<!-- Green panel (bottom layer) -->
<panel id="green-base" 
       x="100" 
       y="100" 
       width="400" 
       height="300" 
       bgcolor="green" 
       z="1">
    <text x="20" y="20" color="white">Green base panel content</text>
</panel>

<!-- Blue panel (top layer with 60% transparency) -->
<panel id="blue-overlay" 
       x="100" 
       y="100" 
       width="400" 
       height="300" 
       bgcolor="#990000FF" 
       z="2">
    <text x="20" y="50" color="white">Blue transparent overlay content</text>
</panel>

Alpha Value Reference: Colors in ARGB/hex format follow the pattern: #AARRGGBB - AA = Alpha (transparency/opacity) - RR = Red - GG = Green - BB = Blue

Example: For pure blue (#0000FF) with 60% transparency, use: bgcolor="#990000FF" (Here 99 = ~60% opacity).

Alpha (AA) Values:

FF = 100% opaque (no transparency).
F2 = 95% opaque (5% transparent).
E6 = 90% opaque (10% transparent).
CC = 80% opaque (20% transparent).
B3 = 70% opaque (30% transparent).
99 = 60% opaque (40% transparent).
80 = 50% opaque (50% transparent).
66 = 40% opaque (60% transparent).
4D = 30% opaque (70% transparent).
33 = 20% opaque (80% transparent).
1A = 10% opaque (90% transparent).
00 = 0% opaque (fully transparent).

Quick Reference Table:

Alpha Hex	Opacity %	Transparency %
FF	100%	0%
F2	95%	5%
E6	90%	10%
CC	80%	20%
B3	70%	30%
99	60%	40%
80	50%	50%
66	40%	60%
4D	30%	70%
33	20%	80%
1A	10%	90%
00	0%	100%

Note: Some environments may use #RRGGBBAA instead of #AARRGGBB. Always check the expected format of the platform (e.g., CSS, XAML, Android, etc.).

Border System

XML

<!-- Border Sides -->
<panel border="all">             <!-- All four sides -->
<panel border="left,right">      <!-- Multiple sides (comma-separated) -->
<!-- Border Styling -->
<panel border="all" 
       border-color="black"      <!-- Border color -->
       border-width="3"          <!-- Width in pixels (1-10+) -->
       border-style="solid">     <!-- Line style -->
<!-- Rounded Corners -->
<panel corner-radius="10">       <!-- Corner radius in pixels -->
</panel>

Panel Rotation System

XML

<panel rotate="true"             <!-- Enable panel rotation -->
       hold-time="5"             <!-- Seconds to show each panel -->
       transition-time="1"       <!-- Seconds for transition -->
       transition="fade">        <!-- Transition effect -->
    <panel bgcolor="red">Panel 1 Content</panel>
    <panel bgcolor="green">Panel 2 Content</panel>
    <panel bgcolor="blue">Panel 3 Content</panel>
</panel>

Transition	Description	Performance	Best For
`fade`	Standard fade in/out	Good	General content
`slide`	Slide transition	Good	Panel changes
`flipwarp`	Flip warp effect	Lower	Special effects
`pixelate`	Pixelation effect	Lower	Artistic transitions
`newsflash`	News flash transition	Good	Breaking news
`random`	Random transition	Variable	Varied displays

Panel Animation (Page Transitions)

XML

<panel animation="ScaleTransform"     <!-- Basic scale animation -->
       x="200" y="100"                <!-- Final position -->
       width="400" height="300"       <!-- Final size -->
       start-x="100" start-y="50"     <!-- Starting position -->
       start-width="200" start-height="150"  <!-- Starting size -->
       duration="3">                  <!-- Animation duration (seconds) -->

<panel animation="ScaleTransform2"    <!-- Enhanced with ViewBox support -->
       duration="2.5">                <!-- Better for complex content -->
</panel>

Advanced Panel Properties

XML

<!-- Panel Behavior -->
<panel resettable="true">              <!-- Panel can be reset -->
<panel dynamic-hold="true">            <!-- Dynamic hold time calculation -->
<panel media-wait="true">              <!-- Wait for media completion -->
<panel max-play-time="120">            <!-- Maximum play duration (seconds) -->

<!-- Enhanced Panel Features -->
<panel name="panel-identifier">        <!-- Named panel for reference -->
<panel remove-delay="0.5">             <!-- Delay before removing (seconds) -->

Scrolling Animation

XML

<panel step-height="50"          <!-- Pixels to step each movement -->
       transition-time="0.5"     <!-- Time for each step (seconds) -->
       hold-time="2">            <!-- Pause between steps (seconds) -->
</panel>

Alignment and Positioning

XML

<panel valign="top">             <!-- Vertical alignment: top, center, bottom -->
<panel position="relative">      <!-- Relative positioning -->
<panel i="1">                    <!-- Index for relative positioning -->

Panel Inheritance Properties

Panels automatically pass these properties to their children:

font, font-size, color - Typography settings.
bold, italics, uline, strikeout - Text styling.
align, valign - Alignment settings.
blink - Blinking behavior.
scalex, scaley - Scaling factors.
marquee-interval, marquee-steps - Marquee timing.
wait-steps, fade-steps - Animation timing.
dropshadow-x, dropshadow-y - Drop shadow settings.

Panel Examples

Basic Container Panel

XML

<panel id="info-container" x="100" y="100" width="600" height="400" 
       bgcolor="lightblue" border="all" border-color="navy" 
       border-width="2" corner-radius="10">
    <text x="20" y="20" color="darkblue" font-size="20">Information Panel</text>
</panel>

Gradient Header Panel

XML

<panel id="header" x="0" y="0" width="1920" height="120" 
       bgcolor="darkblue" color2="lightblue" gradient-angle="90" 
       border="bottom" border-color="gold" border-width="4"
       font="Arial Bold" font-size="24" color="white">
    <text x="50" y="40">FLIGHT INFORMATION</text>
</panel>

Rotating Content Panel

XML

<panel id="rotating-news" x="100" y="300" width="800" height="200" 
       rotate="true" hold-time="6" transition-time="1" transition="slide"
       border="all" border-color="red" border-width="3" corner-radius="15">
    
    <panel bgcolor="blue" color2="lightblue" gradient-angle="45">
        <text x="50" y="80" color="white" font-size="24" align="center" width="700">
            Flight AA1234 to New York - Now Boarding at Gate B15
        </text>
    </panel>
    
    <panel bgcolor="green" color2="lightgreen" gradient-angle="45">
        <text x="50" y="80" color="white" font-size="24" align="center" width="700">
            Terminal Dining: Food court open until 11 PM
        </text>
    </panel>
    
    <panel bgcolor="purple" color2="pink" gradient-angle="45">
        <text x="50" y="80" color="white" font-size="24" align="center" width="700">
            WiFi Available: Airport_Guest - No password required
        </text>
    </panel>
</panel>

Animated Entrance Panel

XML

<panel id="welcome-panel" x="400" y="300" width="600" height="200" 
       bgcolor="darkgreen" border="all" border-color="gold" 
       border-width="5" corner-radius="20"
       animation="ScaleTransform" duration="2.5"
       start-x="50" start-y="50" start-width="100" start-height="50">
    <text x="50" y="80" color="white" font-size="28" align="center" width="500">
        Welcome to Terminal C
    </text>
</panel>

Scrolling Information Panel

XML

<panel id="scrolling-info" x="100" y="500" width="400" height="300" 
       bgcolor="lightyellow" border="all" border-color="orange" border-width="2"
       step-height="25" transition-time="0.6" hold-time="2">
    <text x="20" y="20" color="black" font-size="16">
        Line 1: Check-in opens 2 hours before departure
        Line 2: Security screening required for all passengers
        Line 3: Carry-on liquid restrictions apply
        Line 4: Electronic devices must be charged
        Line 5: Arrive at gate 30 minutes before boarding
        Line 6: Flight status updates available on monitors
        Line 7: Customer service desk located in center terminal
        Line 8: Lost baggage claim at carousel level
    </text>
</panel>

Text Element

Displays text content with extensive formatting, effects, and animation options.

Complete Attributes Reference

Position and Size

XML

<text id="unique-id"             <!-- Unique identifier -->
      x="100" y="50"             <!-- Position coordinates -->
      width="300" height="100"   <!-- Text container size -->
      z="5">                     <!-- Z-index for layering -->
    Text content here
</text>

Font Properties

XML

<!-- Font Family -->
<text font="Arial">              <!-- Standard fonts: Arial, Times New Roman, Courier New -->
<text font="Verdana">            <!-- Verdana, Tahoma, Georgia, Comic Sans MS -->
<text font="Arial Bold">         <!-- Font variants with weight -->
<text font="Arial Italic">       <!-- Italic variants -->
<text font="Arial Black">        <!-- Black weight -->
<text font="Times New Roman Bold Italic"> <!-- Combined styles -->

<!-- Font Size -->
<text font-size="16">            <!-- Font size in pixels (default: 16) -->
<text font-size="8">             <!-- Minimum recommended: 8 -->
<text font-size="72">            <!-- Large display text -->

<!-- Font Modifiers -->
<text bold="true">               <!-- Bold text -->
<text italics="true">            <!-- Italic text -->
<text uline="true">              <!-- Underlined text -->
<text strikeout="true">          <!-- Strikethrough text -->

Colors

XML

<text color="black">             <!-- Text color (foreground) -->
<text color="#FF0000">           <!-- Hex color notation -->
<text color="rgb(255,0,0)">      <!-- RGB color notation -->
<text bgcolor="white">           <!-- Background color -->
<text bgcolor="transparent">     <!-- Transparent background (default) -->

Text Alignment

XML

<!-- Horizontal Alignment -->
<text align="left">              <!-- Left aligned (default) -->
<text align="center">            <!-- Center aligned -->
<text align="right">             <!-- Right aligned -->
<text align="justify">           <!-- Justified text -->

<!-- Vertical Alignment -->
<text valign="top">              <!-- Top aligned (default) -->
<text valign="center">           <!-- Center aligned vertically -->
<text valign="bottom">           <!-- Bottom aligned -->

Text Behavior

XML

<text wrap="true">               <!-- Enable text wrapping -->
<text wrap="false">              <!-- Single line (default) -->
<text lower="true">              <!-- Convert to lowercase -->
<text center="true">             <!-- Legacy center alignment -->

Blinking Effects

XML

<text blink="true">              <!-- Enable blinking -->
<text blink="false">             <!-- No blinking (default) -->

Flip-Board (Flap) Display System

XML

<text flap="true"                <!-- Enable flip-board display -->
      flap-width="64"            <!-- Character cell width in pixels -->
      flap-height="96"           <!-- Character cell height in pixels -->
      flap-speed="0.5"           <!-- Animation speed in seconds -->
      flap-randomness="0.3"      <!-- Random timing variation (0-0.75) -->
      flap-padding="9"           <!-- Cell padding percentage -->
      flap-vpadding="16"         <!-- Vertical padding percentage -->
      flap-upper="true"          <!-- Convert to uppercase -->
      flap-delay="0.1"           <!-- Delay between characters -->
      flap-delay-threshhold="5"  <!-- Threshold for delay -->
      colon-flap="3">            <!-- Position for colon character -->
    FLAP BOARD TEXT
</text>

Drop Shadow Effects

XML

<text dropshadow-x="3">          <!-- Shadow X offset (negative = left) -->
<text dropshadow-y="3">          <!-- Shadow Y offset (negative = up) -->
<text dropshadow-color="black">  <!-- Shadow color -->
<text dropshadow-opacity="0.8">  <!-- Shadow opacity (0-1) -->
<text dropshadow-blur-radius="5"> <!-- Blur amount in pixels -->

Scaling and Transformation

XML

<text scalex="1.2">              <!-- Horizontal scaling factor -->
<text scaley="0.8">              <!-- Vertical scaling factor -->

Border and Visual Effects

XML

<text border="all">              <!-- Border on all sides -->
<text border-color="blue">       <!-- Border color -->
<text border-width="2">          <!-- Border width in pixels -->
<text border-style="solid">      <!-- Border style -->
<text corner-radius="5">         <!-- Rounded corners -->

Extended Text Properties

XML

<!-- Text Processing -->
<text name="text-identifier">         <!-- Named text for reference -->
<text split="true">                   <!-- Split text into words -->
<text split="false">                  <!-- Keep text as blocks (default) -->

<!-- Advanced Text Behavior -->
<text resettable="true">              <!-- Text can be reset -->
<text media-wait="true">              <!-- Wait for media events -->
<text max-play-time="60">             <!-- Maximum display time -->

Enhanced Flap Properties

XML

<text flap="true"
      flap-delay="0.1"             <!-- Delay between character flaps -->
      flap-delay-threshold="5"     <!-- Threshold for delay application -->
      flap-padding="10"            <!-- Cell padding percentage -->
      flap-vpadding="15"           <!-- Vertical padding percentage -->
      flap-width="64" flap-height="96"
      flap-speed="0.5" flap-randomness="0.3">
    FLAP TEXT
</text>

Text Examples

Standard Flight Number

XML

<text id="flight-num" x="50" y="100" width="150" height="50"
      font="Arial Bold" font-size="28" color="yellow" bold="true"
      align="center" valign="center" bgcolor="darkblue"
      border="all" border-color="yellow" border-width="2" corner-radius="8">
    AA1234
</text>

Multi-line Departure Information

XML

<text id="departure-info" x="200" y="150" width="600" height="120"
      font="Arial" font-size="18" color="white" bgcolor="darkgreen"
      wrap="true" align="left" valign="top"
      border="all" border-color="lightgreen" border-width="2" corner-radius="10">
    Flight AA1234 to New York (JFK)
    Scheduled Departure: 3:45 PM
    Current Status: On Time
    Boarding: Gate B15 at 3:15 PM
</text>

Emergency Alert with Effects

XML

<text id="emergency-alert" x="300" y="50" width="800" height="80"
      font="Arial Black" font-size="32" color="white" bold="true"
      bgcolor="red" align="center" valign="center" blink="true"
      border="all" border-color="white" border-width="4" corner-radius="15"
      dropshadow-x="4" dropshadow-y="4" dropshadow-color="darkred" 
      dropshadow-opacity="0.8">
    SECURITY ALERT - TERMINAL EVACUATION
</text>

Airport-Style Flip Board

XML

<text id="flip-board" x="400" y="300" width="640" height="120"
      flap="true" flap-width="64" flap-height="120" flap-speed="0.4"
      flap-upper="true" flap-randomness="0.2" colon-flap="8"
      color="white" bgcolor="black" font-size="48"
      border="all" border-color="gray" border-width="3">
    BOARDING
</text>

Stylized Header Text

XML

<text id="terminal-header" x="200" y="50" width="800" height="100"
      font="Georgia" font-size="42" color="gold" bgcolor="darkblue"
      align="center" valign="center" italics="true" uline="true"
      dropshadow-x="3" dropshadow-y="3" dropshadow-color="navy" 
      dropshadow-blur-radius="6" corner-radius="20"
      border="all" border-color="gold" border-width="3"
      scalex="1.1" scaley="1.0">
    TERMINAL A DEPARTURES
</text>

Status Display with Scaling

XML

<text id="status-display" x="500" y="400" width="400" height="60"
      font="Arial Bold" font-size="24" color="green" bgcolor="black"
      align="center" valign="center" scalex="1.3" scaley="1.1"
      border="all" border-color="green" border-width="2" corner-radius="8">
    ON TIME
</text>

Image Element

Displays static images with scaling, positioning, and visual effects.

Complete Attributes Reference

Position and Size

XML

<image id="unique-id"            <!-- Unique identifier -->
       x="100" y="50"            <!-- Position coordinates -->
       width="200" height="100"  <!-- Display dimensions -->
       z="5">                    <!-- Z-index for layering -->
</image>

Image Sources

XML

<!-- Local Files -->
<image source="logo.png">        <!-- PNG files -->
<image source="banner.jpg">      <!-- JPEG files -->
<image source="icon.gif">        <!-- GIF files -->
<image source="photo.bmp">       <!-- BMP files -->
<image source="vector.svg">      <!-- SVG files -->

<!-- Relative Paths -->
<image source="images/company-logo.png">
<image source="../shared/background.jpg">
<image source="icons/warning.png">

<!-- URLs (if supported) -->
<image source="http://example.com/image.jpg">
<image source="https://cdn.example.com/logo.png">

Scaling and Positioning

XML

<image stretch="true">           <!-- Stretch to fill container (default) -->
<image stretch="false">          <!-- Maintain original size/aspect ratio -->
<image center="true">            <!-- Center image within container -->
<image center="false">           <!-- Position at x,y coordinates (default) -->

Visual Effects

XML

<image blink="true">             <!-- Make image blink -->
<image blink="false">            <!-- No blinking (default) -->

Border and Styling

XML

<image border="all">             <!-- Border on all sides -->
<image border-color="black">     <!-- Border color -->
<image border-width="2">         <!-- Border width in pixels -->
<image border-style="solid">     <!-- Border style -->
<image corner-radius="10">       <!-- Rounded corners -->

Image Examples

Airline Logo Display

XML

<image id="airline-logo" source="logos/american-airlines.png" 
       x="50" y="20" width="200" height="80" 
       stretch="true" border="all" border-color="gray" 
       border-width="1" corner-radius="5">
</image>

Gate Sign Image

XML

<image id="gate-sign" source="icons/gate-b15.png" 
       x="800" y="100" width="150" height="100" 
       stretch="false" center="true"
       border="all" border-color="blue" border-width="3" corner-radius="10">
</image>

Blinking Warning Icon

XML

<image id="warning-icon" source="icons/warning.png" 
       x="100" y="500" width="64" height="64" 
       stretch="false" blink="true" z="10"
       border="all" border-color="red" border-width="2">
</image>

Promotional Banner

XML

<image id="promo-banner" source="banners/summer-special.jpg" 
       x="300" y="200" width="800" height="200" 
       stretch="true" border="all" border-color="gold" 
       border-width="4" corner-radius="15" z="2">
</image>

Clock Element

Displays real-time date and time information with extensive formatting options.

Complete Attributes Reference

Position and Size

XML

<clock id="unique-id"            <!-- Unique identifier -->
       x="100" y="50"            <!-- Position coordinates -->
       width="200" height="60"   <!-- Clock container size -->
       z="5">                    <!-- Z-index for layering -->
</clock>

Time Format Strings

XML

<!-- Time Formats -->
<clock format="HH:mm:ss">        <!-- 24-hour with seconds: 14:30:25 -->
<clock format="hh:mm:ss tt">     <!-- 12-hour with seconds: 02:30:25 PM -->
<clock format="HH:mm">           <!-- 24-hour no seconds: 14:30 -->
<clock format="h:mm tt">         <!-- 12-hour no seconds: 2:30 PM -->
<clock format="H:mm">            <!-- Single digit hour: 2:30 -->

<!-- Date Formats -->
<clock format="MM/dd/yyyy">           <!-- 03/15/2025 -->
<clock format="dddd, MMMM dd, yyyy">  <!-- Friday, March 15, 2025 -->
<clock format="ddd MMM dd">           <!-- Fri Mar 15 -->
<clock format="yyyy-MM-dd">           <!-- 2025-03-15 -->
<clock format="M/d/yy">               <!-- 3/15/25 -->
<clock format="MMMM d yyyy">          <!-- March 15 2025 -->

<!-- Combined Date/Time -->
<clock format="dddd, MMMM dd, yyyy - HH:mm:ss">
<clock format="MM/dd/yyyy hh:mm tt">
<clock format="ddd MMM dd, HH:mm">
<clock format="MMMM d yyyy h:mm tt">  <!-- Default FIDS format -->

<!-- Custom Formatting -->
<clock format="HH'h' mm'm' ss's'">    <!-- 14h 30m 25s -->
<clock format="'Today is' dddd">       <!-- Today is Friday -->
<clock format="'Current Time:' h:mm tt"> <!-- Current Time: 2:30 PM -->

Font and Styling

XML

<clock font="Arial"              <!-- Font family -->
       font-size="24"            <!-- Font size in pixels -->
       color="white"             <!-- Text color -->
       bgcolor="black"           <!-- Background color -->
       bold="true"               <!-- Bold text -->
       italics="false"           <!-- Italic text -->
       align="center"            <!-- Horizontal alignment -->
       valign="center">          <!-- Vertical alignment -->
</clock>

Clock Behavior

XML

<clock lower="true">             <!-- Convert AM/PM to lowercase -->
<clock lower="false">            <!-- Keep uppercase (default) -->
<clock blink="true">             <!-- Enable blinking -->
<clock blink="false">            <!-- No blinking (default) -->

Countdown Timer Mode

XML

<clock countdown="true"          <!-- Enable countdown mode -->
       target-time="2025-12-31 23:59:59"  <!-- Target datetime -->
       template="Time left: %TIMER% seconds"  <!-- Display template -->
       stop-at-zero="true">      <!-- Stop counting at zero -->
</clock>

Flip-Board Clock Display

XML

<clock flap="true"               <!-- Enable flip-board display -->
       flap-width="70"           <!-- Character cell width -->
       flap-height="120"         <!-- Character cell height -->
       flap-speed="0.3"          <!-- Animation speed (seconds) -->
       flap-upper="true"         <!-- Force uppercase display -->
       flap-randomness="0.2"     <!-- Random timing variation -->
       colon-flap="3">           <!-- Position for colon display -->
</clock>

Visual Effects

XML

<clock dropshadow-x="2">         <!-- Drop shadow X offset -->
<clock dropshadow-y="2">         <!-- Drop shadow Y offset -->
<clock dropshadow-color="gray">  <!-- Drop shadow color -->
<clock scalex="1.1">             <!-- Horizontal scaling -->
<clock scaley="1.0">             <!-- Vertical scaling -->

Border and Styling

XML

<clock border="all">             <!-- Border on all sides -->
<clock border-color="blue">      <!-- Border color -->
<clock border-width="2">         <!-- Border width -->
<clock border-style="solid">     <!-- Border style -->
<clock corner-radius="10">       <!-- Rounded corners -->

Clock Examples

Standard Terminal Clock

XML

<clock id="terminal-time" x="1400" y="30" width="400" height="60"
       format="dddd, MMMM dd, yyyy - HH:mm:ss"
       font="Arial" font-size="20" color="white" bgcolor="darkblue"
       align="center" valign="center"
       border="all" border-color="lightblue" border-width="2" corner-radius="8">
</clock>

Gate Display Clock

XML

<clock id="gate-clock" x="700" y="50" width="250" height="80"
       format="h:mm tt" font="Arial Bold" font-size="36" 
       color="yellow" bgcolor="black" align="center" valign="center"
       lower="true" border="all" border-color="yellow" border-width="3">
</clock>

Flip-Board Departure Time

XML

<clock id="departure-flap" x="500" y="200" width="420" height="140"
       format="HH:mm" flap="true" flap-width="70" flap-height="140"
       flap-speed="0.5" flap-upper="true" colon-flap="3"
       color="white" bgcolor="black"
       border="all" border-color="red" border-width="4" corner-radius="5">
</clock>

Countdown to Departure

XML

<clock id="boarding-countdown" x="300" y="350" width="500" height="60"
       countdown="true" target-time="2025-08-23 15:45:00"
       template="Boarding in %TIMER% minutes"
       font="Arial Bold" font-size="24" color="red" bgcolor="yellow"
       align="center" valign="center" stop-at-zero="true"
       border="all" border-color="red" border-width="3" corner-radius="10">
</clock>

Date Only Display

XML

<clock id="current-date" x="100" y="100" width="400" height="50"
       format="dddd, MMMM dd, yyyy"
       font="Times New Roman" font-size="22" color="darkblue" 
       align="left" valign="center"
       dropshadow-x="2" dropshadow-y="2" dropshadow-color="lightblue">
</clock>

Marquee Element

Creates continuously scrolling text displays for announcements, news tickers, and alerts.

Complete Attributes Reference

Position and Size

XML

<marquee id="unique-id"          <!-- Unique identifier -->
         x="0" y="700"           <!-- Position coordinates -->
         width="1024" height="50" <!-- Marquee container size -->
         z="5">                  <!-- Z-index for layering -->
</marquee>

Scrolling Control

XML

<!-- Speed and Movement -->
<marquee marquee-speed="80">     <!-- Scroll speed (pixels/second) -->
<marquee marquee-interval="10">  <!-- Legacy: scroll interval (1/10 seconds) -->
<marquee marquee-steps="5">      <!-- Legacy: pixels per step -->

<!-- Direction Control -->
<marquee vertical="false"        <!-- Horizontal scrolling (default) -->
         scroll-right="false">   <!-- Left to right (default) -->
<marquee scroll-right="true">    <!-- Right to left -->
<marquee vertical="true"         <!-- Vertical scrolling -->
         scroll-down="false">    <!-- Bottom to top (default) -->
<marquee scroll-down="true">     <!-- Top to bottom -->

Behavior Options

XML

<marquee scroll-only-overflow="true">  <!-- Only scroll if content overflows -->
<marquee scroll-only-overflow="false"> <!-- Always scroll (default) -->
<marquee static-offset="10">           <!-- Offset for non-scrolling content -->
<marquee circular="true">              <!-- Loop content continuously -->
<marquee circular="false">             <!-- Single pass (default) -->
<marquee delimiter=" • ">              <!-- Separator between multiple items -->

Performance Settings

XML

<marquee new-thread="true">      <!-- Run on separate thread -->
<marquee new-thread="false">     <!-- Run on main thread (default) -->
<marquee use-bitmap="true">      <!-- Use bitmap rendering for performance -->
<marquee use-bitmap="false">     <!-- Use standard rendering (default) -->

Quality Settings

XML

<marquee quality="low">          <!-- Fastest rendering, lowest quality -->
<marquee quality="high">         <!-- Best quality, slower rendering -->
<marquee quality="fant">         <!-- Fant interpolation -->
<marquee quality="linear">       <!-- Linear interpolation -->
<marquee quality="nearest">      <!-- Nearest neighbor -->
<marquee quality="unspecified">  <!-- System default -->

Background and Styling

XML

<marquee bgcolor="darkblue">     <!-- Background color -->
<marquee border="all">           <!-- Border options -->
<marquee border-color="white">   <!-- Border color -->
<marquee border-width="2">       <!-- Border width -->
<marquee corner-radius="5">      <!-- Rounded corners -->

Advanced Marquee Control

XML

<!-- Enhanced Scrolling Behavior -->
<marquee off-screen="true">           <!-- Start animations off-screen -->
<marquee off-screen="false">          <!-- Start on-screen (default) -->
<marquee marquee-wait="true">         <!-- Wait behavior for scrolling -->
<marquee marquee-wait="false">        <!-- No wait (default) -->
<marquee min-speed="20">              <!-- Minimum scroll speed (pixels/sec) -->

<!-- Legacy Marquee Properties -->
<marquee marquee-interval="10">       <!-- Legacy scroll interval -->
<marquee marquee-steps="5">           <!-- Legacy pixels per step -->

Marquee Examples

Basic News Ticker

XML

<marquee id="news-ticker" x="0" y="950" width="1920" height="60"
         bgcolor="darkred" marquee-speed="100" circular="true" delimiter=" ••• ">
    <text color="white" font-size="18" font="Arial">
        FLIGHT UPDATE: AA1234 delayed 30 minutes due to weather
    </text>
    <text color="white" font-size="18" font="Arial">
        TERMINAL INFO: Food court extended hours during delays
    </text>
    <text color="white" font-size="18" font="Arial">
        PARKING: Level B now 85% full - Allow extra time
    </text>
</marquee>

Vertical Stock Ticker

XML

<marquee id="stock-ticker" x="1750" y="200" width="150" height="600"
         vertical="true" scroll-down="false" marquee-speed="60"
         bgcolor="darkgreen" border="all" border-color="green" border-width="2">
    <text color="lime" font="Courier New" font-size="14" align="center">
        STOCKS
        --------
        AAPL $150.25 ↑
        GOOGL $2,350 ↓
        MSFT $305.50 ↑
        TSLA $875.20 ↓
        AMZN $145.75 ↑
        META $320.40 ↓
    </text>
</marquee>

Emergency Alert Marquee

XML

<marquee id="emergency-alert" x="0" y="0" width="1920" height="100"
         bgcolor="red" marquee-speed="80" 
         border="bottom" border-color="white" border-width="4"
         blink="true">
    <text color="white" font="Arial Black" font-size="32" valign="center">
        EMERGENCY EVACUATION - PROCEED TO NEAREST EXIT - DO NOT USE ELEVATORS
    </text>
</marquee>

High-Performance Announcement Bar

XML

<marquee id="announcements" x="100" y="800" width="1600" height="80"
         use-bitmap="true" quality="high" new-thread="true"
         marquee-speed="120" bgcolor="navy" corner-radius="10"
         border="all" border-color="gold" border-width="3">
    <text color="white" font="Arial Bold" font-size="24" valign="center">
        Now boarding Flight DL456 to Los Angeles at Gate C22 - Final call for passengers
    </text>
</marquee>

Conditional Overflow Marquee

XML

<marquee id="info-scroll" x="200" y="600" width="800" height="50"
         scroll-only-overflow="true" static-offset="20"
         bgcolor="lightyellow" border="all" border-color="orange" border-width="1">
    <text color="darkblue" font-size="18">
        This text only scrolls if it exceeds the container width, otherwise stays static
    </text>
</marquee>

Rotate Element

Cycles through multiple text or content items with various transition effects and animations.

Complete Attributes Reference

Position and Size

XML

<rotate id="unique-id"           <!-- Unique identifier -->
        x="200" y="100"          <!-- Position coordinates -->
        width="400" height="200"  <!-- Container size -->
        z="5">                   <!-- Z-index for layering -->
</rotate>

Timing Control

XML

<rotate wait-steps="30">         <!-- Wait time between items (1/10 seconds) -->
<rotate fade-steps="10">         <!-- Fade transition time (1/10 seconds) -->
<rotate hold-time="5">           <!-- Display time per item (seconds) -->

Text Processing

XML

<rotate split="true">            <!-- Split text into individual words -->
<rotate split="false">           <!-- Keep text as complete blocks (default) -->
<rotate wrap="true">             <!-- Enable text wrapping -->
<rotate wrap="false">            <!-- No wrapping (default) -->
<rotate margin="5">              <!-- Margin between wrapped elements -->

Scrolling for Overflow

XML

<rotate scroll-only-overflow="true">   <!-- Only scroll if text too long -->
<rotate scroll-only-overflow="false">  <!-- Always use rotation (default) -->
<rotate scroll-direction="right">      <!-- Scroll direction: left/right -->
<rotate scroll-direction="left">       <!-- Default scroll direction -->
<rotate min-speed="20">               <!-- Minimum scroll speed (pixels/second) -->
<rotate marquee-wait="true">          <!-- Wait behavior for scrolling -->
<rotate marquee-wait="false">         <!-- No wait (default) -->
<rotate off-screen="true">            <!-- Start animations off-screen -->
<rotate off-screen="false">           <!-- Start animations on-screen (default) -->

Flip-Board Animation

XML

<rotate flap="true"              <!-- Enable flip-board animation -->
        flap-width="64"          <!-- Character cell width -->
        flap-height="96"         <!-- Character cell height -->
        flap-speed="0.5"         <!-- Animation speed (seconds) -->
        flap-upper="true"        <!-- Convert to uppercase -->
        flap-randomness="0.3"    <!-- Random timing variation -->
        colon-flap="3">          <!-- Colon position -->
</rotate>

Background and Styling

XML

<rotate bgcolor="white">         <!-- Background color -->
<rotate border="all">            <!-- Border options -->
<rotate border-color="black">    <!-- Border color -->
<rotate border-width="2">        <!-- Border width -->
<rotate corner-radius="10">      <!-- Rounded corners -->

Rotate Examples

Flight Status Rotation

XML

<rotate id="flight-status" x="400" y="200" width="600" height="100"
        wait-steps="50" fade-steps="15" bgcolor="black"
        border="all" border-color="yellow" border-width="2" corner-radius="10">
    
    <text color="green" font-size="28" align="center" valign="center">
        AA1234 NEW YORK - ON TIME - GATE B15
    </text>
    <text color="red" font-size="28" align="center" valign="center">
        DL456 CHICAGO - DELAYED 45 MIN - GATE C22
    </text>
    <text color="green" font-size="28" align="center" valign="center">
        UA789 LOS ANGELES - BOARDING - GATE A8
    </text>
</rotate>

Airport-Style Flip Board

XML

<rotate id="destination-flap" x="300" y="300" width="640" height="120"
        flap="true" flap-width="64" flap-height="120" flap-speed="0.6"
        flap-upper="true" flap-randomness="0.25" wait-steps="60">
    
    <text font-size="48" color="white" bgcolor="black" colon-flap="8">
        NEW YORK
    </text>
    <text font-size="48" color="white" bgcolor="black" colon-flap="8">
        CHICAGO
    </text>
    <text font-size="48" color="white" bgcolor="black" colon-flap="8">
        LOS ANGELES
    </text>
    <text font-size="48" color="white" bgcolor="black" colon-flap="8">
        MIAMI
    </text>
</rotate>

Scrolling Long Messages

XML

<rotate id="scrolling-announcements" x="100" y="500" width="800" height="80"
        scroll-only-overflow="true" min-speed="60" scroll-direction="right"
        off-screen="true" bgcolor="darkblue" corner-radius="8">
    
    <text font-size="22" color="white">
        Important: All passengers must arrive at departure gate 30 minutes before scheduled departure time
    </text>
    <text font-size="22" color="white">
        Security reminder: Electronics larger than cell phone must be removed from carry-on bags
    </text>
    <text font-size="22" color="white">
        Facility information: Free WiFi available throughout terminal - Network: Airport_Guest
    </text>
</rotate>

Advanced Message System with Line Segments

XML

<rotate id="complex-messages" x="200" y="400" width="1000" height="300"
        wrap="true" margin="10" wait-steps="80" fade-steps="25"
        bgcolor="white" border="all" border-color="gray" border-width="3" corner-radius="15">
    
    <message>
        <line align="center">
            <linesegment attr:color="darkblue" attr:font-size="32" attr:bgcolor="lightblue" attr:bold="true">
                GATE INFORMATION
            </linesegment>
        </line>
        <line align="left">
            <linesegment attr:color="black" attr:font-size="20">Gate A1-A20:</linesegment>
            <linesegment attr:color="blue" attr:font-size="20">Domestic Departures</linesegment>
        </line>
    </message>
    
    <message>
        <line align="center">
            <linesegment attr:color="darkgreen" attr:font-size="32" attr:bgcolor="lightgreen" attr:bold="true">
                PASSENGER SERVICES
            </linesegment>
        </line>
        <line align="left">
            <linesegment attr:color="black" attr:font-size="20">Baggage Claim:</linesegment>
            <linesegment attr:color="green" attr:font-size="20">Lower Level, Carousels 1-8</linesegment>
        </line>
    </message>
</rotate>

Media Element

Displays video and audio content with playlist support and advanced playback control.

Complete Attributes Reference

Position and Size

XML

<media id="unique-id"            <!-- Unique identifier -->
       x="100" y="100"           <!-- Position coordinates -->
       width="640" height="480"  <!-- Display dimensions -->
       z="5">                    <!-- Z-index for layering -->
</media>

Media Sources

XML

<!-- Video Formats -->
<media source="video.mp4">       <!-- MP4 videos (recommended) -->
<media source="movie.avi">       <!-- AVI videos -->
<media source="clip.wmv">        <!-- Windows Media Video -->
<media source="film.mov">        <!-- QuickTime MOV -->
<media source="presentation.mkv"> <!-- Matroska video -->

<!-- Audio Formats -->
<media source="music.mp3">       <!-- MP3 audio -->
<media source="sound.wav">       <!-- WAV audio -->
<media source="audio.wma">       <!-- Windows Media Audio -->

<!-- Streaming Sources -->
<media source="http://stream.example.com/live.m3u8">
<media source="rtmp://server.com/live/stream">

Playback Control

XML

<media playcount="2000000000">   <!-- Loop count (high number = infinite) -->
<media playcount="1">            <!-- Play once -->
<media playcount="5">            <!-- Play 5 times -->
<media media-events="true">      <!-- Enable media event handling -->
<media media-events="false">     <!-- Disable events (default) -->

Alternative Media Elements

XML

<mediaelement>                   <!-- Enhanced media element -->
<quicktime>                      <!-- QuickTime specific -->
<realplayer>                     <!-- RealPlayer specific -->
<shockwave>                      <!-- Shockwave/Flash content -->

Playlist System (MediaElement)

XML

<mediaelement media-events="true">
    <file source="intro.mp4" duration="30"/>     <!-- Override duration -->
    <file source="main.mp4" duration="120"/>
    <file source="outro.mp4" duration="20"/>
</mediaelement>

Styling

XML

<media bgcolor="black">          <!-- Background color -->
<media border="all">             <!-- Border options -->
<media border-color="gray">      <!-- Border color -->
<media border-width="3">         <!-- Border width -->
<media corner-radius="10">       <!-- Rounded corners -->

Media Examples

Welcome Video Display

XML

<media id="welcome-video" source="videos/terminal-welcome.mp4"
       x="400" y="200" width="800" height="450" 
       playcount="2000000000" media-events="true"
       border="all" border-color="darkgray" border-width="3" corner-radius="10">
</media>

Safety Information Playlist

XML

<mediaelement id="safety-videos" x="200" y="150" width="640" height="360"
              media-events="true" bgcolor="black"
              border="all" border-color="red" border-width="4" corner-radius="8">
    <file source="safety/part1-boarding.mp4" duration="45"/>
    <file source="safety/part2-safety.mp4" duration="90"/>
    <file source="safety/part3-services.mp4" duration="60"/>
</mediaelement>

Gate Area Video

XML

<media id="gate-video" source="content/gate-information.mp4"
       x="100" y="100" width="600" height="400"
       playcount="1" bgcolor="darkblue"
       border="all" border-color="lightblue" border-width="2">
</media>

Additional Media Elements

Specialized media elements for legacy and specific content types.

Shockwave/Flash Content

XML

<shockwave id="flash-content" 
           source="animation.swf" 
           x="100" y="100" width="400" height="300"
           border="all" border-color="gray" border-width="2">
</shockwave>

QuickTime Media

XML

<quicktime id="qt-video" 
           source="video.mov" 
           x="200" y="150" width="640" height="480"
           playcount="1" bgcolor="black">
</quicktime>

RealPlayer Content

XML

<realplayer id="real-stream" 
            source="stream.rm" 
            x="300" y="200" width="320" height="240">
</realplayer>

AdSequence Element

Manages advertisement sequences with support for video, image, and web content rotation.

Complete Attributes Reference

Position and Size

XML

<adsequence id="unique-id"       <!-- Unique identifier -->
            x="100" y="100"      <!-- Position coordinates -->
            width="400" height="600" <!-- Display dimensions -->
            z="5">               <!-- Z-index for layering -->
</adsequence>

AdSequence Behavior

XML

<adsequence new-ad-sequence="true">   <!-- Use enhanced system (recommended) -->
<adsequence new-ad-sequence="false">  <!-- Use legacy system -->
<adsequence interleave="true">        <!-- Interleave with other content -->
<adsequence interleave="false">       <!-- Independent sequencing (default) -->
<adsequence vlc="true">              <!-- Force VLC media player -->
<adsequence vlc="false">             <!-- Use system default player -->
<adsequence preserve="true">         <!-- Preserve processes -->
<adsequence preserve="false">        <!-- Don't preserve (default) -->
<adsequence media-events="true">     <!-- Enable media event handling -->
<adsequence media-events="false">    <!-- Disable events (default) -->

Default Hold Time

XML

<adsequence hold-time="15">      <!-- Default display time per ad (seconds) -->

Ad Content Types

XML

<!-- Video Advertisements -->
<ad type="V" source="commercial.mp4" hold-time="30"/>
<ad type="V" source="promo.avi" hold-time="25"/>

<!-- Web/HTML Advertisements -->
<ad type="W" source="interactive-banner.html" hold-time="20"/>
<ad type="W" source="http://ads.example.com/banner" hold-time="15"/>

<!-- Image Advertisements -->
<ad type="I" source="poster.jpg" hold-time="12"/>
<ad type="I" source="promotion.png" hold-time="10"/>

Styling

XML

<adsequence bgcolor="black">     <!-- Background color -->
<adsequence border="all">        <!-- Border options -->
<adsequence border-color="red">  <!-- Border color -->
<adsequence border-width="2">    <!-- Border width -->
<adsequence corner-radius="8">   <!-- Rounded corners -->

Enhanced AdSequence Properties

XML

<!-- Player Control -->
<adsequence vlc="true">               <!-- Force VLC media player -->
<adsequence vlc="false">              <!-- Use system default (default) -->
<adsequence preserve="true">          <!-- Preserve media processes -->
<adsequence preserve="false">         <!-- Don't preserve (default) -->

<!-- Advanced Features -->
<adsequence dynamic-hold="true">      <!-- Dynamic hold time calculation -->
<adsequence no-handle="true">         <!-- Disable window handles -->
<adsequence no-handle="false">        <!-- Enable handles (default) -->

AdSequence Examples

Terminal Advertisement Display

XML

<adsequence id="terminal-ads" x="1500" y="200" width="350" height="600"
            new-ad-sequence="true" media-events="true" hold-time="15"
            bgcolor="black" border="all" border-color="gold" border-width="3">
    <ad type="V" source="ads/airline-services.mp4" hold-time="30"/>
    <ad type="I" source="ads/duty-free-special.jpg" hold-time="15"/>
    <ad type="W" source="ads/hotel-booking.html" hold-time="20"/>
    <ad type="V" source="ads/car-rental.mp4" hold-time="25"/>
    <ad type="I" source="ads/restaurant-promo.png" hold-time="12"/>
</adsequence>

Gate Area Advertisements

XML

<adsequence id="gate-ads" x="800" y="500" width="400" height="300"
            new-ad-sequence="true" vlc="false" interleave="false">
    <ad type="V" source="gate-ads/destination-guide.mp4" hold-time="45"/>
    <ad type="I" source="gate-ads/travel-insurance.jpg" hold-time="18"/>
    <ad type="V" source="gate-ads/airport-services.mp4" hold-time="35"/>
</adsequence>

Video Wall System

Multi-device synchronized display management for large format video walls.

Video Wall Configuration

XML

<videowall id="main-wall">
    <layout id="layout1" duration="30" width="3840" height="2160">
        <panel device-id="Device1" x="0" y="0" width="1920" height="1080"/>
        <panel device-id="Device2" x="1920" y="0" width="1920" height="1080"/>
        <panel device-id="Device3" x="0" y="1080" width="1920" height="1080"/>
        <panel device-id="Device4" x="1920" y="1080" width="1920" height="1080"/>
    </layout>
    
    <layout id="layout2" duration="45" width="3840" height="2160">
        <panel device-id="Device1" x="0" y="0" width="3840" height="1080"/>
        <panel device-id="Device2" x="0" y="1080" width="1920" height="1080"/>
        <panel device-id="Device3" x="1920" y="1080" width="1920" height="1080"/>
    </layout>
</videowall>

Video Wall Features

Multi-device synchronization across network
Dynamic layout switching with timing control
Per-device content assignment
Automatic device discovery and management
Failover and redundancy support

HTML Element

Embeds HTML content within the display system.

Complete Attributes Reference

Position and Size

XML

<html id="unique-id"             <!-- Unique identifier -->
      x="200" y="300"            <!-- Position coordinates -->
      width="800" height="600"   <!-- HTML container size -->
      z="5">                     <!-- Z-index for layering -->
</html>

HTML Sources

XML

<html source="">                 <!-- Empty for inline HTML -->
<html source="page.html">        <!-- Local HTML file -->
<html source="http://example.com/page"> <!-- External URL -->

Styling

XML

<html bgcolor="white">           <!-- Background color -->
<html border="all">              <!-- Border options -->
<html border-color="gray">       <!-- Border color -->
<html border-width="2">          <!-- Border width -->
<html corner-radius="8">         <!-- Rounded corners -->

HTML Examples

Web Content Display

XML

<html id="web-info" x="100" y="200" width="800" height="600"
      source="http://flightinfo.airport.com/status"
      border="all" border-color="blue" border-width="2" corner-radius="10">
</html>

Local HTML Content

XML

<html id="local-content" x="300" y="150" width="600" height="400"
      source="content/terminal-map.html"
      bgcolor="white" border="all" border-color="gray" border-width="1">
</html>

Weather Element

Displays weather information requiring data context with city nodes.

Complete Attributes Reference

Position and Size

XML

<weather id="unique-id"          <!-- Unique identifier -->
         x="1600" y="100"        <!-- Position coordinates -->
         width="300" height="200" <!-- Weather display area -->
         z="5">                  <!-- Z-index for layering -->
</weather>

Data Requirements

Weather elements require a data context containing city nodes. The system looks for weather data in the format:

XML

<!-- Data context structure -->
<rows>
    <weather>
        <iataweather iata="NYC" weatherdate="2025-08-23" currenttemp="75" hi="78" lo="68"/>
    </weather>
</rows>

Weather Fields Available

currenttemp - Current temperature.
hi - High temperature forecast.
lo - Low temperature forecast.
weatherdate - Date of weather data.
image - Weather condition icon.

Styling

XML

<weather bgcolor="lightblue">    <!-- Background color -->
<weather border="all">           <!-- Border options -->
<weather border-color="blue">    <!-- Border color -->
<weather border-width="2">       <!-- Border width -->
<weather corner-radius="10">     <!-- Rounded corners -->
<weather font="Arial">           <!-- Font family -->
<weather font-size="18">         <!-- Font size -->
<weather color="darkblue">       <!-- Text color -->

Weather Examples

Current Conditions Display

XML

<weather id="current-weather" x="1400" y="150" width="350" height="200"
         bgcolor="lightblue" border="all" border-color="darkblue" 
         border-width="3" corner-radius="15"
         font="Arial" font-size="18" color="darkblue">
    <!-- Weather data populated from city context -->
</weather>

Compact Weather Widget

XML

<weather id="weather-widget" x="1600" y="50" width="280" height="100"
         bgcolor="white" border="all" border-color="gray" 
         border-width="1" corner-radius="8"
         font="Verdana" font-size="14" color="black">
</weather>

Background Images

Special elements for page and panel backgrounds.

Complete Attributes Reference

Background Image Properties

XML

<bgimage source="background.jpg" <!-- Image file path -->
         x="0" y="0"             <!-- Position coordinates -->
         width="1920" height="1080" <!-- Background size -->
         stretch="true"          <!-- Stretch to fit -->
         center="true">          <!-- Center in container -->
</bgimage>

Panel Background Images

XML

<panel>
    <bgimage source="panel-bg.png" stretch="true" center="false">
    </bgimage>
    <!-- Panel content here -->
</panel>

Background Image Examples

Full Page Background

XML

<page id="terminal-view" width="1920" height="1080" bgcolor="black">
    <bgimage source="backgrounds/terminal-interior.jpg" 
             x="0" y="0" width="1920" height="1080" 
             stretch="true">
    </bgimage>
    <!-- Other page content overlays the background -->
</page>

Panel Background

XML

<panel id="info-panel" x="200" y="200" width="600" height="400">
    <bgimage source="textures/blue-gradient.png" 
             stretch="true" center="true">
    </bgimage>
    <text x="50" y="50" color="white">Content over background</text>
</panel>

Animation and Effects

Global Animation Properties

Timing Controls

XML

wait-steps="30"                  <!-- Pause duration (1/10 seconds) -->
fade-steps="15"                  <!-- Fade transition time (1/10 seconds) -->
effect-hold-seconds="2.5"       <!-- Effect duration (seconds) -->
transition-time="1.0"           <!-- Transition duration (seconds) -->
hold-time="5"                   <!-- Display time (seconds) -->

Blinking Effects

XML

blink="true"                     <!-- Enable blinking -->
blink-interval="5"               <!-- On duration (1/10 seconds) -->
blink-off-interval="5"           <!-- Off duration (1/10 seconds) -->

Scaling and Transformation

XML

scalex="1.2"                     <!-- Horizontal scale factor -->
scaley="0.8"                     <!-- Vertical scale factor -->

Drop Shadow System

XML

dropshadow-x="3"                 <!-- Shadow X offset -->
dropshadow-y="3"                 <!-- Shadow Y offset -->
dropshadow-color="black"         <!-- Shadow color -->
dropshadow-opacity="0.8"         <!-- Shadow opacity (0-1) -->
dropshadow-blur-radius="5"       <!-- Blur radius in pixels -->

Animation Examples

Pulsing Gate Alert

XML

<text id="gate-alert" x="400" y="300" width="600" height="100"
      font-size="36" color="red" bold="true" blink="true"
      blink-interval="8" blink-off-interval="8"
      bgcolor="yellow" align="center" valign="center"
      border="all" border-color="red" border-width="4">
    FINAL BOARDING CALL - GATE A12
</text>

Scaled Status Display

XML

<text id="status-scaled" x="500" y="400" width="400" height="80"
      font-size="28" color="green" bgcolor="black"
      scalex="1.4" scaley="1.2" align="center" valign="center"
      dropshadow-x="3" dropshadow-y="3" dropshadow-color="darkgreen">
    DEPARTED
</text>

Visual Message (VMsg) System

The VMsg system handles dynamic messaging and real-time alerts integrated with the database.

VMsg Implementation

VMsg in Marquee

XML

<marquee id="vmsg-display" x="0" y="950" width="1920" height="100"
         bgcolor="darkblue" marquee-speed="100">
    <!-- VMsg content populated dynamically -->
    <!-- Uses XSLT for-each loop: xsl:for-each select="$vmsg/msg" -->
</marquee>

VMsg Configuration

The system supports both single-site and multi-site VMsg configurations:

vmsg.xml - Single site configuration.
vmsg-multisite.xml - Multi-site configuration.

VMsg Features

Real-time database integration.
Priority-based message display.
Multi-site message distribution.
Dynamic content updates.
Integration with emergency systems.

Parameters and Templating

Parameter System

Parameter Format

Parameters are passed as semicolon-separated key:value pairs:

XML

gate:B15;claim:1;num-pages:2;flight:AA1234;status:ON TIME

Parameter Usage in Templates

XML

<!-- Direct Parameter Substitution -->
<text>Gate: {$gate}</text>        <!-- Displays: Gate: B15 -->
<text>Flight: {$flight}</text>    <!-- Displays: Flight: AA1234 -->
<text>Status: {$status}</text>    <!-- Displays: Status: ON TIME -->

<!-- Conditional Parameter Usage -->
<xsl:if test="$status='DELAYED'">
    <text color="red">DELAYED FLIGHT</text>
</xsl:if>

Reserved System Parameters

These parameters are automatically managed by the system:

devices - Device configuration data.
emergency - Emergency mode status.
now - Current timestamp.
panel-height - Dynamic panel height calculation.
panel-height2 - Secondary panel height.
rolloff - Content roll-off timing.
rollon - Content roll-on timing.
timetree - Schedule data structure.

Parameter Examples

Flight Information Template

XML

<!-- Parameters: flight:AA1234;gate:B15;status:ON TIME;dest:NEW YORK;time:15:45;claim:3 -->
<panel id="flight-display" width="1000" height="120" bgcolor="darkblue">
    <text x="20" y="20" font-size="32" color="yellow" bold="true">
        {$flight}
    </text>
    <text x="200" y="20" font-size="24" color="white">
        TO {$dest}
    </text>
    <text x="500" y="20" font-size="24" color="white">
        GATE {$gate}
    </text>
    <text x="650" y="20" font-size="24" color="green">
        {$status}
    </text>
    <text x="20" y="60" font-size="20" color="lightblue">
        DEPARTURE: {$time} | CLAIM: {$claim}
    </text>
</panel>

Dynamic Gate Display

XML

<!-- Parameters: gate:C22;next-flight:DL456;next-time:17:30;boarding:PRIORITY -->
<page id="gate-info" width="1024" height="768">
    <panel id="gate-header" x="0" y="0" width="1024" height="120">
        <text x="50" y="40" font-size="48" color="white" bgcolor="darkblue">
            GATE {$gate}
        </text>
    </panel>
    
    <panel id="current-status" x="50" y="150" width="924" height="200">
        <text x="20" y="20" font-size="28" color="green">
            CURRENT BOARDING: {$boarding} PASSENGERS
        </text>
        <text x="20" y="80" font-size="24" color="white">
            NEXT FLIGHT: {$next-flight} DEPARTURE {$next-time}
        </text>
    </panel>
</page>

XSLT Integration

Dynamic Content Generation

XSLT Loops for Data Display

XML

<!-- Display multiple flight records -->
<panel id="flight-list" x="100" y="200" width="1600" height="600">
    <xsl:for-each select="rows/flights/flight">
        <panel x="0" y="{position() * 60}" width="1600" height="50">
            <text x="20" y="10" width="120" height="30">
                <xsl:value-of select="flight_number"/>
            </text>
            <text x="160" y="10" width="300" height="30">
                <xsl:value-of select="destination"/>
            </text>
            <text x="480" y="10" width="100" height="30">
                <xsl:value-of select="gate"/>
            </text>
            <text x="600" y="10" width="150" height="30">
                <xsl:choose>
                    <xsl:when test="status='DELAYED'">
                        <xsl:attribute name="color">red</xsl:attribute>
                    </xsl:when>
                    <xsl:when test="status='CANCELLED'">
                        <xsl:attribute name="color">orange</xsl:attribute>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:attribute name="color">green</xsl:attribute>
                    </xsl:otherwise>
                </xsl:choose>
                <xsl:value-of select="status"/>
            </text>
        </panel>
    </xsl:for-each>
</panel>

Conditional Display Logic

XML

<!-- Show different content based on time of day -->
<xsl:choose>
    <xsl:when test="substring($now,9,2) &lt; '06'">
        <!-- Early morning content -->
        <text color="blue">Early Morning Service</text>
    </xsl:when>
    <xsl:when test="substring($now,9,2) &gt; '22'">
        <!-- Late night content -->
        <text color="purple">Late Night Operations</text>
    </xsl:when>
    <xsl:otherwise>
        <!-- Regular hours content -->
        <text color="green">Regular Service Hours</text>
    </xsl:otherwise>
</xsl:choose>

Parameter Processing

XML

<!-- XSLT parameter definitions -->
<xsl:param name="gate">A1</xsl:param>
<xsl:param name="flight">DEFAULT</xsl:param>
<xsl:param name="status">UNKNOWN</xsl:param>

<!-- Using parameters in content -->
<text>Flight <xsl:value-of select="$flight"/> at Gate <xsl:value-of select="$gate"/></text>

Style System

CSS-Like Style Attributes

Style Attribute Syntax

XML

<text style="font: Arial Bold; font-size: 24; color: red; bgcolor: yellow; align: center;">
    Styled text using CSS-like syntax
</text>

Available Style Properties

XML

<!-- Font Properties -->
style="font: Arial; font-size: 18; bold: true; italics: false; uline: false; strikeout: false;"

<!-- Color Properties -->
style="color: blue; bgcolor: lightblue; border-color: darkblue;"

<!-- Layout Properties -->
style="align: center; valign: middle; width: 300; height: 100;"

<!-- Effects -->
style="dropshadow-x: 2; dropshadow-y: 2; dropshadow-color: gray; blink: true;"

<!-- Border and Visual -->
style="border: all; border-width: 2; border-style: solid; corner-radius: 10;"

Attribute Inheritance

Inheritable Properties

These properties are automatically inherited from parent to child elements:

font, font-size, color - Typography.
bold, blink, italics, align, uline, strikeout - Text styling.
scalex, scaley, height, width - Sizing and scaling.
marquee-interval, marquee-steps - Marquee behavior.
wait-steps, fade-steps - Animation timing.
valign - Vertical alignment.
dropshadow-x, dropshadow-y - Drop shadow effects.

Complete Inheritable Properties List

XML

<!-- Core Typography -->
font="Arial"
font-size="18"
color="white"
bold="true"
italics="false"
uline="false"
strikeout="false"

<!-- Layout and Alignment -->
align="center"
valign="middle"
width="300"
height="100"
scalex="1.0"
scaley="1.0"

<!-- Animation and Effects -->
blink="false"
marquee-interval="10"
marquee-steps="5"
wait-steps="30"
fade-steps="15"
dropshadow-x="2"
dropshadow-y="2"
dropshadow-color="black"
dropshadow-opacity="0.8"
dropshadow-blur-radius="5"

<!-- Media Control -->
hold-time="10"
media-wait="false"
max-play-time="120"
resettable="false"

<!-- Text Behavior -->
wrap="false"
center="false"
stretch="true"
auto-scale="true"

<!-- Flap Animation -->
flap="false"
flap-width="64"
flap-height="96"
flap-padding="9"
flap-vpadding="16"
flap-speed="0.5"
flap-delay="0.1"
flap-delay-threshold="5"
flap-randomness="0.3"
flap-upper="false"

<!-- Extended Properties (m_Inheritable2) -->
bgcolor="transparent"
bgcolor2=""
corner-radius="0"
gradient-angle="90"
gradient-y-start-percent="0"

Inheritance Example

XML

<panel font="Arial" font-size="20" color="blue" bold="true">
    <!-- This text inherits: Arial, size 20, blue, bold -->
    <text x="10" y="10">Inherited styling</text>
    
    <!-- This text overrides color but keeps other inherited properties -->
    <text x="10" y="40" color="red">Red text, still Arial 20pt bold</text>
    
    <!-- This text overrides multiple properties -->
    <text x="10" y="70" color="green" font-size="24" bold="false">
        Green text, 24pt, not bold, still Arial
    </text>
</panel>

Advanced Border Styles

Complete border styling system with multiple line styles and patterns.

Border Style Options

XML

<!-- Line Styles -->
<panel border-style="solid">          <!-- Solid line (default) -->
<panel border-style="dashed">         <!-- Dashed line -->
<panel border-style="dotted">         <!-- Dotted line -->
<panel border-style="dot">            <!-- Alternative dot style -->

<!-- Custom Dash Patterns -->
<panel border-style="dash">           <!-- Standard dash pattern -->
<panel border-style="dashdot">        <!-- Dash-dot pattern -->
<panel border-style="dashdotdot">     <!-- Dash-dot-dot pattern -->

Border Examples

XML

<!-- Decorative Dashed Border -->
<panel x="100" y="100" width="400" height="200"
       border="all" border-color="gold" border-width="3"
       border-style="dashed" corner-radius="15">
    <text>Dashed border panel</text>
</panel>

<!-- Dotted Alert Box -->
<panel x="200" y="300" width="500" height="100"
       border="all" border-color="red" border-width="2"
       border-style="dotted" bgcolor="yellow">
    <text color="red" font-size="20" bold="true">Important Notice</text>
</panel>

Complete Examples

Example 1: Comprehensive Airport Departure Board

XML

<page id="departure-board" width="1920" height="1080" 
      bgcolor="black" auto-scale="true" transition="fade"
      font="Arial" font-size="16" color="white">
    
    <!-- Background Image -->
    <bgimage source="backgrounds/airport-terminal.jpg" 
             x="0" y="0" width="1920" height="1080" stretch="true">
    </bgimage>
    
    <!-- Header Panel with Gradient -->
    <panel id="header" x="0" y="0" width="1920" height="150" 
           bgcolor="darkblue" color2="blue" gradient-angle="90"
           border="bottom" border-color="gold" border-width="5">
        
        <!-- Airport Logo -->
        <image source="logos/airport-logo.png" x="50" y="25" width="200" height="100"
               stretch="true">
        </image>
        
        <!-- Main Title -->
        <text x="300" y="40" width="1000" height="70" 
              font="Arial Black" font-size="42" color="white" bold="true"
              align="left" valign="center"
              dropshadow-x="3" dropshadow-y="3" dropshadow-color="darkblue">
            FLIGHT DEPARTURES - TERMINAL A
        </text>
        
        <!-- Current Time -->
        <clock x="1350" y="40" width="500" height="70" 
               format="dddd, MMMM dd, yyyy - HH:mm:ss"
               font="Arial" font-size="22" color="yellow" 
               align="right" valign="center"
               dropshadow-x="2" dropshadow-y="2" dropshadow-color="darkblue">
        </clock>
    </panel>
    
    <!-- Column Headers -->
    <panel id="column-headers" x="80" y="180" width="1760" height="60" 
           bgcolor="gray" border="all" border-color="white" border-width="2">
        
        <text x="20" y="15" width="150" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            FLIGHT
        </text>
        <text x="190" y="15" width="350" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            DESTINATION
        </text>
        <text x="560" y="15" width="150" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            GATE
        </text>
        <text x="730" y="15" width="200" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            DEPARTURE
        </text>
        <text x="950" y="15" width="150" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            STATUS
        </text>
        <text x="1120" y="15" width="150" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            AIRCRAFT
        </text>
        <text x="1290" y="15" width="180" height="30" 
              font="Arial Bold" font-size="20" color="black" align="center" bold="true">
            REMARKS
        </text>
    </panel>
    
    <!-- Flight Information Rows -->
    <panel id="flight-data" x="80" y="260" width="1760" height="600"
           font="Arial" font-size="18" color="white">
        
        <!-- Flight Row 1 -->
        <panel x="0" y="0" width="1760" height="50" bgcolor="darkblue">
            <text x="20" y="10" width="150" height="30" color="yellow" bold="true" align="center">
                AA1234
            </text>
            <text x="190" y="10" width="350" height="30" align="left">
                NEW YORK (JFK)
            </text>
            <text x="560" y="10" width="150" height="30" align="center">
                B15
            </text>
            <text x="730" y="10" width="200" height="30" align="center">
                15:45
            </text>
            <text x="950" y="10" width="150" height="30" color="green" align="center" bold="true">
                ON TIME
            </text>
            <text x="1120" y="10" width="150" height="30" align="center">
                B737-800
            </text>
            <text x="1290" y="10" width="180" height="30" align="center">
                BOARDING
            </text>
        </panel>
        
        <!-- Flight Row 2 -->
        <panel x="0" y="60" width="1760" height="50" bgcolor="darkgreen">
            <text x="20" y="10" width="150" height="30" color="yellow" bold="true" align="center">
                DL456
            </text>
            <text x="190" y="10" width="350" height="30" align="left">
                CHICAGO (ORD)
            </text>
            <text x="560" y="10" width="150" height="30" align="center">
                C22
            </text>
            <text x="730" y="10" width="200" height="30" align="center">
                16:20
            </text>
            <text x="950" y="10" width="150" height="30" color="orange" align="center" bold="true" blink="true">
                DELAYED
            </text>
            <text x="1120" y="10" width="150" height="30" align="center">
                A320
            </text>
            <text x="1290" y="10" width="180" height="30" color="orange" align="center">
                +30 MIN
            </text>
        </panel>
        
        <!-- Flight Row 3 -->
        <panel x="0" y="120" width="1760" height="50" bgcolor="darkred">
            <text x="20" y="10" width="150" height="30" color="yellow" bold="true" align="center">
                UA789
            </text>
            <text x="190" y="10" width="350" height="30" align="left">
                LOS ANGELES (LAX)
            </text>
            <text x="560" y="10" width="150" height="30" align="center">
                A8
            </text>
            <text x="730" y="10" width="200" height="30" align="center">
                17:15
            </text>
            <text x="950" y="10" width="150" height="30" color="red" align="center" bold="true" blink="true">
                CANCELLED
            </text>
            <text x="1120" y="10" width="150" height="30" align="center">
                B777-200
            </text>
            <text x="1290" y="10" width="180" height="30" color="red" align="center">
                WEATHER
            </text>
        </panel>
    </panel>
    
    <!-- Side Information Panel -->
    <panel id="side-info" x="1300" y="300" width="550" height="500" 
           bgcolor="lightblue" border="all" border-color="darkblue" 
           border-width="3" corner-radius="15">
        
        <!-- Weather Display -->
        <weather x="20" y="20" width="510" height="120" 
                 bgcolor="white" border="all" border-color="blue" 
                 border-width="2" corner-radius="10"
                 font="Arial" font-size="16" color="darkblue">
        </weather>
        
        <!-- Rotating Information -->
        <rotate x="20" y="160" width="510" height="150" 
                wait-steps="50" fade-steps="20"
                bgcolor="lightyellow" border="all" border-color="orange" 
                border-width="2" corner-radius="8">
            
            <text color="darkorange" font-size="18" align="center" valign="center">
                TERMINAL SERVICES
                Food Court: Level 2
                Gift Shop: Gate Area A15
                ATM: Near Entrance
            </text>
            
            <text color="darkgreen" font-size="18" align="center" valign="center">
                GROUND TRANSPORTATION
                Taxi Stand: Exit Door 3
                Rental Cars: Level B1
                Hotel Shuttle: Exit Door 5
            </text>
            
            <text color="darkred" font-size="18" align="center" valign="center">
                PASSENGER REMINDERS
                Security: Arrive 2 hours early
                Boarding: 30 minutes before departure
                ID Required: Government issued
            </text>
        </rotate>
        
        <!-- Advertisement Space -->
        <adsequence x="20" y="330" width="510" height="150"
                    new-ad-sequence="true" media-events="true" hold-time="12"
                    border="all" border-color="purple" border-width="2" corner-radius="8">
            <ad type="I" source="ads/duty-free.jpg" hold-time="15"/>
            <ad type="V" source="ads/hotel-promo.mp4" hold-time="20"/>
            <ad type="I" source="ads/car-rental.png" hold-time="12"/>
        </adsequence>
    </panel>
    
    <!-- Emergency Information Bar -->
    <panel x="80" y="880" width="1760" height="80" 
           bgcolor="yellow" border="all" border-color="red" 
           border-width="3" corner-radius="10">
        
        <text x="40" y="15" width="1680" height="50" 
              color="red" font="Arial Bold" font-size="22" 
              align="center" valign="center">
            EMERGENCY: In case of emergency, follow EXIT signs to nearest stairwell - Do not use elevators
        </text>
    </panel>
    
    <!-- News and Announcements Ticker -->
    <marquee id="announcements" x="0" y="980" width="1920" height="100" 
             bgcolor="darkblue" marquee-speed="120" circular="true" 
             delimiter=" ••• " border="top" border-color="gold" border-width="3">
        
        <text color="white" font-size="24">
            Welcome to Terminal A - All domestic departures Gates A1-A30
        </text>
        <text color="yellow" font-size="24">
            Security wait time approximately 15 minutes - TSA PreCheck available
        </text>
        <text color="white" font-size="24">
            Free WiFi: Network AIRPORT_GUEST - No password required
        </text>
        <text color="lightgreen" font-size="24">
            Food services available until 11:00 PM - Multiple dining options Level 2
        </text>
        <text color="white" font-size="24">
            Parking: Short-term Levels 1-3, Long-term Shuttle Level 4
        </text>
    </marquee>
</page>

Example 2: Interactive Gate Display

XML

<page id="gate-display" width="1024" height="768" 
      bgcolor="darkblue" auto-scale="true" 
      font="Arial" font-size="18" color="white">
    
    <!-- Gate Header with Animation -->
    <panel id="gate-header" x="0" y="0" width="1024" height="120" 
           bgcolor="navy" color2="darkblue" gradient-angle="180"
           animation="ScaleTransform" duration="2"
           start-width="100" start-height="20">
        
        <text x="50" y="35" width="400" height="50" 
              font="Arial Black" font-size="36" color="white" bold="true"
              valign="center">
            GATE A15
        </text>
        
        <clock x="600" y="35" width="350" height="50" 
               format="dddd, h:mm tt" font="Arial Bold" font-size="24" 
               color="yellow" align="right" valign="center" lower="true">
        </clock>
    </panel>
    
    <!-- Current Flight Information -->
    <panel id="current-flight" x="50" y="150" width="924" height="200" 
           bgcolor="black" border="all" border-color="yellow" 
           border-width="3" corner-radius="15">
        
        <text x="30" y="30" width="864" height="50" 
              font="Arial Bold" font-size="32" color="yellow" 
              align="center" bold="true">
            FLIGHT AA1234 - NEW YORK (JFK)
        </text>
        
        <text x="30" y="90" width="400" height="40" 
              font-size="24" color="green" bold="true">
            STATUS: BOARDING NOW
        </text>
        
        <text x="500" y="90" width="394" height="40" 
              font-size="24" color="white" align="right">
            DEPARTURE: 3:45 PM
        </text>
        
        <text x="30" y="140" width="864" height="40" 
              font-size="20" color="lightblue" align="center">
            NOW BOARDING: FIRST CLASS, PRIORITY, GROUPS 1-3
        </text>
    </panel>
    
    <!-- Next Flight Information -->
    <panel id="next-flight" x="50" y="380" width="924" height="120" 
           bgcolor="darkgray" border="all" border-color="lightgray" 
           border-width="2" corner-radius="10">
        
        <text x="30" y="20" width="864" height="30" 
              font-size="24" color="white" align="center">
            NEXT: FLIGHT DL456 - CHICAGO (ORD)
        </text>
        
        <text x="30" y="60" width="400" height="30" 
              font-size="20" color="lightblue">
            ESTIMATED BOARDING: 4:45 PM
        </text>
        
        <text x="500" y="60" width="394" height="30" 
              font-size="20" color="lightblue" align="right">
            SCHEDULED DEPARTURE: 5:30 PM
        </text>
    </panel>
    
    <!-- Rotating Gate Announcements -->
    <rotate id="gate-announcements" x="50" y="530" width="924" height="120" 
            wait-steps="60" fade-steps="20"
            bgcolor="darkgreen" border="all" border-color="lightgreen" 
            border-width="2" corner-radius="10">
        
        <text color="white" font-size="20" align="center" valign="center">
            BOARDING PRIORITY
            First Class and Elite Members
            Families with small children
            Military personnel in uniform
        </text>
        
        <text color="white" font-size="20" align="center" valign="center">
            CARRY-ON REMINDERS
            Liquids must be 3-1-1 compliant
            Electronics larger than phone must be screened
            Sharp objects prohibited
        </text>
        
        <text color="white" font-size="20" align="center" valign="center">
            ASSISTANCE AVAILABLE
            Wheelchair service: Contact gate agent
            Language interpretation services
            Special dietary needs coordination
        </text>
    </rotate>
    
    <!-- Status Ticker -->
    <marquee id="status-ticker" x="0" y="680" width="1024" height="60"
             bgcolor="orange" marquee-speed="100" 
             border="top" border-color="darkorange" border-width="3">
        
        <text color="black" font-size="18" bold="true" valign="center">
            WEATHER ADVISORY: Possible delays due to thunderstorms in destination area - Monitor flight status
        </text>
    </marquee>
</page>

Example 3: Emergency Alert System

XML

<page id="emergency-system" width="1920" height="1080" 
      bgcolor="red" blink-interval="5" blink-off-interval="5"
      font="Arial Bold" font-size="24" color="white">
    
    <!-- Emergency Header -->
    <panel id="emergency-header" x="0" y="0" width="1920" height="200" 
           bgcolor="darkred" border="bottom" border-color="white" border-width="5"
           blink="true">
        
        <!-- Warning Icons -->
        <image source="icons/emergency-warning.png" x="100" y="50" width="100" height="100"
               blink="true" z="10">
        </image>
        <image source="icons/emergency-warning.png" x="1720" y="50" width="100" height="100"
               blink="true" z="10">
        </image>
        
        <!-- Main Emergency Message -->
        <text x="250" y="50" width="1420" height="100" 
              font="Arial Black" font-size="60" color="white" bold="true"
              align="center" valign="center"
              dropshadow-x="5" dropshadow-y="5" dropshadow-color="darkred">
            EMERGENCY EVACUATION
        </text>
    </panel>
    
    <!-- Instructions Panel -->
    <panel id="instructions" x="200" y="250" width="1520" height="400" 
           bgcolor="black" border="all" border-color="white" 
           border-width="5" corner-radius="20">
        
        <text x="50" y="50" width="1420" height="80" 
              font-size="42" color="white" align="center" bold="true">
            PROCEED TO NEAREST EXIT IMMEDIATELY
        </text>
        
        <text x="50" y="150" width="1420" height="60" 
              font-size="36" color="yellow" align="center" bold="true">
            DO NOT USE ELEVATORS
        </text>
        
        <text x="50" y="230" width="1420" height="60" 
              font-size="36" color="white" align="center" bold="true">
            FOLLOW EMERGENCY PERSONNEL INSTRUCTIONS
        </text>
        
        <text x="50" y="310" width="1420" height="60" 
              font-size="32" color="lightgreen" align="center" bold="true">
            REMAIN CALM - ASSISTANCE IS AVAILABLE
        </text>
    </panel>
    
    <!-- Flip-Board Emergency Status -->
    <text id="emergency-status" x="400" y="700" width="1120" height="150"
          flap="true" flap-width="80" flap-height="150" flap-speed="0.3"
          flap-upper="true" color="white" bgcolor="black"
          border="all" border-color="red" border-width="5" corner-radius="10">
        EVACUATE NOW
    </text>
    
    <!-- Emergency Contact Information -->
    <panel id="emergency-contact" x="300" y="900" width="1320" height="100" 
           bgcolor="yellow" border="all" border-color="red" 
           border-width="4" corner-radius="15">
        
        <text x="50" y="25" width="1220" height="50" 
              color="red" font-size="28" align="center" valign="center" bold="true">
            EMERGENCY SERVICES: DIAL 911 | AIRPORT SECURITY: (555) 123-4567
        </text>
    </panel>
    
    <!-- Scrolling Emergency Instructions -->
    <marquee id="emergency-instructions" x="0" y="1020" width="1920" height="60"
             bgcolor="darkred" marquee-speed="80" 
             border="top" border-color="white" border-width="3">
        
        <text color="white" font-size="20" bold="true" valign="center">
            EVACUATION ROUTES: Follow illuminated EXIT signs - Assembly point: Parking Lot A - Report to Emergency Personnel
        </text>
    </marquee>
</page>

Example 4: Multi-Media Information Kiosk

XML

<page id="info-kiosk" width="1080" height="1920" 
      bgcolor="lightblue" auto-scale="true" 
      font="Verdana" font-size="18" color="darkblue">
    
    <!-- Kiosk Header -->
    <panel id="kiosk-header" x="0" y="0" width="1080" height="180" 
           bgcolor="darkblue" color2="blue" gradient-angle="90"
           border="bottom" border-color="gold" border-width="4">
        
        <image source="logos/facility-logo.png" x="40" y="40" width="150" height="100"/>
        
        <text x="220" y="60" width="800" height="60" 
              color="white" font-size="32" font="Arial Bold" bold="true"
              align="left" valign="center">
            VISITOR INFORMATION CENTER
        </text>
    </panel>
    
    <!-- Welcome Video -->
    <mediaelement id="welcome-video" x="90" y="220" width="900" height="500"
                  media-events="true" bgcolor="black"
                  border="all" border-color="darkgray" border-width="3" corner-radius="15">
        <file source="kiosk/welcome-message.mp4" duration="60"/>
        <file source="kiosk/facility-tour.mp4" duration="90"/>
        <file source="kiosk/services-overview.mp4" duration="45"/>
    </mediaelement>
    
    <!-- Interactive Directory -->
    <panel id="directory" x="90" y="760" width="900" height="600" 
           bgcolor="white" border="all" border-color="darkblue" 
           border-width="4" corner-radius="20">
        
        <text x="40" y="30" color="darkblue" font-size="28" font="Arial Bold" bold="true">
            BUILDING DIRECTORY
        </text>
        
        <!-- Floor 1 -->
        <text x="40" y="100" color="black" font-size="22" font="Arial Bold" bold="true">
            GROUND FLOOR
        </text>
        <text x="60" y="135" color="darkblue" font-size="18">
            Reception Desk & Information
        </text>
        <text x="60" y="165" color="darkblue" font-size="18">
            Cafeteria & Coffee Shop
        </text>
        <text x="60" y="195" color="darkblue" font-size="18">
            Gift Shop & ATM Services
        </text>
        
        <!-- Floor 2 -->
        <text x="40" y="240" color="black" font-size="22" font="Arial Bold" bold="true">
            SECOND FLOOR
        </text>
        <text x="60" y="275" color="darkblue" font-size="18">
            Human Resources Department
        </text>
        <text x="60" y="305" color="darkblue" font-size="18">
            Training Rooms A-D
        </text>
        <text x="60" y="335" color="darkblue" font-size="18">
            Employee Lounge & Break Areas
        </text>
        
        <!-- Floor 3 -->
        <text x="40" y="380" color="black" font-size="22" font="Arial Bold" bold="true">
            THIRD FLOOR
        </text>
        <text x="60" y="415" color="darkblue" font-size="18">
            Executive Offices
        </text>
        <text x="60" y="445" color="darkblue" font-size="18">
            Conference Center & Board Room
        </text>
        <text x="60" y="475" color="darkblue" font-size="18">
            IT Support & Data Center
        </text>
        
        <!-- Emergency Information -->
        <panel x="40" y="520" width="820" height="60" 
               bgcolor="lightyellow" border="all" border-color="orange" 
               border-width="2" corner-radius="8">
            
            <text x="20" y="15" color="red" font-size="16" font="Arial Bold" bold="true">
                EMERGENCY: Fire exits located at each end of every floor
            </text>
        </panel>
    </panel>
    
    <!-- Rotating Announcements -->
    <rotate id="kiosk-announcements" x="90" y="1400" width="900" height="150" 
            wait-steps="50" fade-steps="20"
            bgcolor="lightgreen" border="all" border-color="darkgreen" 
            border-width="3" corner-radius="15">
        
        <text color="darkgreen" font-size="20" align="center" valign="center">
            VISITOR PARKING AVAILABLE
            Level B1: Spaces 1-100
            2-hour maximum stay
            Validation required at reception
        </text>
        
        <text color="darkblue" font-size="20" align="center" valign="center">
            MEETING ROOMS AVAILABLE
            Reserve at reception desk
            Audio/visual equipment included
            Catering services available
        </text>
        
        <text color="purple" font-size="20" align="center" valign="center">
            BUILDING HOURS
            Monday-Friday: 7:00 AM - 7:00 PM
            Saturday: 9:00 AM - 5:00 PM
            Sunday: Closed
        </text>
    </rotate>
    
    <!-- Current Time Display -->
    <clock id="kiosk-time" x="90" y="1580" width="900" height="80" 
           format="dddd, MMMM dd, yyyy - h:mm tt"
           bgcolor="darkblue" color="white" font-size="24" 
           align="center" valign="center" lower="true"
           border="all" border-color="lightblue" border-width="3" corner-radius="12">
    </clock>
    
    <!-- Footer Information -->
    <panel id="footer-info" x="90" y="1700" width="900" height="180" 
           bgcolor="darkgray" border="all" border-color="white" 
           border-width="3" corner-radius="15">
        
        <text x="40" y="30" width="820" height="40" 
              color="white" font-size="18" align="center" font="Arial Bold" bold="true">
            FOR ASSISTANCE CONTACT RECEPTION
        </text>
        
        <text x="40" y="80" width="820" height="40" 
              color="yellow" font-size="22" align="center" bold="true">
            PHONE: (555) 123-4567
        </text>
        
        <text x="40" y="130" width="820" height="40" 
              color="lightblue" font-size="18" align="center">
            EMAIL: INFO@FACILITY.COM
        </text>
    </panel>
</page>

Example 5: Dynamic XSLT-Driven Flight Board

XML

<page id="dynamic-flights" width="1920" height="1080" 
      bgcolor="black" auto-scale="true">
    
    <!-- XSLT Parameters -->
    <xsl:param name="terminal">A</xsl:param>
    <xsl:param name="display-type">DEPARTURES</xsl:param>
    
    <!-- Dynamic Header -->
    <panel id="dynamic-header" x="0" y="0" width="1920" height="120" 
           bgcolor="darkblue" border="bottom" border-color="white" border-width="3">
        
        <text x="50" y="30" width="800" height="60" 
              font-size="36" color="white" bold="true" valign="center">
            <xsl:value-of select="$display-type"/> - TERMINAL <xsl:value-of select="$terminal"/>
        </text>
        
        <clock x="1200" y="30" width="650" height="60" 
               format="dddd, MMMM dd, yyyy - HH:mm:ss"
               font-size="20" color="yellow" align="right" valign="center">
        </clock>
    </panel>
    
    <!-- Dynamic Flight List -->
    <panel id="flight-list" x="50" y="150" width="1820" height="800">
        
        <!-- Column Headers -->
        <panel x="0" y="0" width="1820" height="50" bgcolor="gray">
            <text x="20" y="10" width="120" height="30" font-size="18" color="black" bold="true" align="center">FLIGHT</text>
            <text x="160" y="10" width="300" height="30" font-size="18" color="black" bold="true" align="center">DESTINATION</text>
            <text x="480" y="10" width="120" height="30" font-size="18" color="black" bold="true" align="center">GATE</text>
            <text x="620" y="10" width="150" height="30" font-size="18" color="black" bold="true" align="center">DEPARTURE</text>
            <text x="790" y="10" width="120" height="30" font-size="18" color="black" bold="true" align="center">STATUS</text>
            <text x="930" y="10" width="150" height="30" font-size="18" color="black" bold="true" align="center">AIRCRAFT</text>
            <text x="1100" y="10" width="120" height="30" font-size="18" color="black" bold="true" align="center">REMARKS</text>
        </panel>
        
        <!-- Dynamic Flight Rows Using XSLT -->
        <xsl:for-each select="rows/flights/flight[terminal=$terminal]">
            <panel x="0" y="{60 + (position() - 1) * 60}" width="1820" height="50">
                <xsl:attribute name="bgcolor">
                    <xsl:choose>
                        <xsl:when test="position() mod 2 = 0">darkblue</xsl:when>
                        <xsl:otherwise>darkgreen</xsl:otherwise>
                    </xsl:choose>
                </xsl:attribute>
                
                <!-- Flight Number -->
                <text x="20" y="10" width="120" height="30" 
                      color="yellow" font-size="18" bold="true" align="center">
                    <xsl:value-of select="flight_number"/>
                </text>
                
                <!-- Destination -->
                <text x="160" y="10" width="300" height="30" 
                      color="white" font-size="16" align="left">
                    <xsl:value-of select="destination"/> (<xsl:value-of select="airport_code"/>)
                </text>
                
                <!-- Gate -->
                <text x="480" y="10" width="120" height="30" 
                      color="white" font-size="18" align="center">
                    <xsl:value-of select="gate"/>
                </text>
                
                <!-- Departure Time -->
                <text x="620" y="10" width="150" height="30" 
                      color="white" font-size="18" align="center">
                    <xsl:value-of select="scheduled_departure"/>
                </text>
                
                <!-- Status with Conditional Formatting -->
                <text x="790" y="10" width="120" height="30" 
                      font-size="16" align="center" bold="true">
                    <xsl:attribute name="color">
                        <xsl:choose>
                            <xsl:when test="status='ON TIME'">green</xsl:when>
                            <xsl:when test="status='DELAYED'">orange</xsl:when>
                            <xsl:when test="status='CANCELLED'">red</xsl:when>
                            <xsl:when test="status='BOARDING'">cyan</xsl:when>
                            <xsl:otherwise>white</xsl:otherwise>
                        </xsl:choose>
                    </xsl:attribute>
                    <xsl:if test="status='DELAYED' or status='CANCELLED'">
                        <xsl:attribute name="blink">true</xsl:attribute>
                    </xsl:if>
                    <xsl:value-of select="status"/>
                </text>
                
                <!-- Aircraft Type -->
                <text x="930" y="10" width="150" height="30" 
                      color="lightblue" font-size="14" align="center">
                    <xsl:value-of select="aircraft_type"/>
                </text>
                
                <!-- Remarks with Conditional Coloring -->
                <text x="1100" y="10" width="120" height="30" 
                      font-size="14" align="center">
                    <xsl:attribute name="color">
                        <xsl:choose>
                            <xsl:when test="contains(remarks,'DELAY')">orange</xsl:when>
                            <xsl:when test="contains(remarks,'CANCEL')">red</xsl:when>
                            <xsl:otherwise>white</xsl:otherwise>
                        </xsl:choose>
                    </xsl:attribute>
                    <xsl:value-of select="remarks"/>
                </text>
            </panel>
        </xsl:for-each>
    </panel>
    
    <!-- Weather Information -->
    <weather id="terminal-weather" x="50" y="980" width="400" height="80"
             bgcolor="lightblue" border="all" border-color="darkblue" 
             border-width="2" corner-radius="10"
             font="Arial" font-size="14" color="darkblue">
    </weather>
    
    <!-- VMsg System Integration -->
    <marquee id="vmsg-system" x="500" y="980" width="1370" height="80"
             bgcolor="darkred" marquee-speed="100"
             border="all" border-color="red" border-width="2">
        <!-- VMsg content populated via XSLT -->
        <xsl:for-each select="$vmsg/msg">
            <text color="white" font-size="18" bold="true">
                <xsl:value-of select="text()"/>
            </text>
        </xsl:for-each>
    </marquee>
</page>

Best Practices & Guidelines

Performance Optimization

Efficient Element Usage

Use new-thread="true" for complex marquees to improve performance
Enable use-bitmap="true" for smooth scrolling on older hardware
Set appropriate quality levels based on display requirements
Minimize overlapping transparent elements

Memory Management

Set reasonable playcount values for media elements
Use media-events="true" for proper cleanup
Avoid excessive nested panels in rotating elements

Design Guidelines

Typography Best Practices

Use high contrast color combinations for readability
Minimum font size of 16px for general text, 12px for detailed information
Use Arial or Verdana for maximum legibility at distance
Bold text for important information and headers

Layout Recommendations

Maintain consistent margins and spacing
Use z-index values strategically for layering
Implement responsive design with auto-scale="true"
Group related content in panels for better organization

Animation Guidelines

Use moderate timing: 3–8 seconds for hold-time
Fade transitions should be 1–2 seconds maximum
Blinking should be reserved for critical alerts only
Test all animations at actual display resolution

Accessibility Considerations

Color and Contrast

Ensure sufficient contrast ratios for readability
Don't rely solely on color to convey information
Use text labels alongside color-coded status indicators

Text Sizing

Minimum 16px font size for standard viewing distances
Scale font sizes appropriately for display size and viewing distance
Use bold fonts for better visibility at distance

Animation Sensitivity

Avoid rapid blinking that could trigger seizures
Provide static alternatives for critical information
Use smooth transitions rather than jarring effects

Troubleshooting Guide

Common Issues and Solutions

Element Not Displaying

Check x, y coordinates are within page boundaries
Verify width and height are greater than 0
Ensure z-index doesn't place element behind others
Confirm source files exist for image/media elements

Text Formatting Problems

Verify font family is available on target system
Check color values are in correct format
Ensure width/height accommodate text content
Use wrap="true" for multi-line text

Animation Issues

Confirm timing values are reasonable (not too fast/slow)
Check that rotating panels have proper content
Verify media files are accessible and in supported formats
Use media-events="true" for proper media element behavior

Performance Problems

Enable bitmap rendering for complex marquees
Use separate threads for resource-intensive animations
Optimize image file sizes and formats
Reduce number of simultaneous animations

Validation Checklist

All required attributes present (id, dimensions)
File paths correct and accessible
Color values in valid format
Font families available on target system
Timing values appropriate for content
Z-index values properly layered
XSLT syntax valid for dynamic content
Parameter substitution working correctly
Media files in supported formats
Performance acceptable on target hardware

Quick Reference Tables

Color Format Reference

Format	Example	Description
Named	"red", "blue", "white"	Standard color names
Hex 6-digit	#FF0000	RGB hex notation
Hex 8-digit	#FFFF0000	ARGB hex with alpha
RGB	rgb(255,0,0)	RGB decimal notation
Special	"transparent"	Transparent color

Font Size Guidelines

Display Type	Recommended Size	Usage
Headers	32–48px	Main titles, gate numbers
Body Text	18–24px	Flight information, announcements
Detail Text	14–16px	Fine print, secondary information
Large Display	48–72px	Emergency alerts, flip boards
Ticker Text	16–20px	Marquee announcements

Element Hierarchy

Z-Index Range	Usage
0–2	Background images, base panels
3–5	Content panels, standard text
6–8	Important information, status displays
9–10	Alerts, emergency information
11+	Critical overlays, system messages

Transition Effects Reference

Effect	Best For	Performance
fade	General content	Good
slide	Panel transitions	Good
wipe	Image changes	Moderate
flipwarp	Special effects	Lower
linearfade	Smooth transitions	Good
pixelate	Artistic effects	Lower
random	Varied displays	Variable

This comprehensive documentation covers all available elements, attributes, and features in your FIDS Visual Page Designer system. Each section includes complete attribute references with detailed explanations and practical examples to help users create effective digital signage displays.