Extron Electronics Extron TouchLink User Manual
Extron® TouchLink™
Design Themes
Reference Guide
Control Systems
68-1951-01 Rev. A
01 11
Copyright
© 2011 Extron Electronics. All rights reserved.
Trademarks
All trademarks mentioned in this guide are the property of their respective owners.
Contents
Introduction ......................................................... 1
Overview ...............................................................1
Resource Kits ........................................................ 2
Icons Images ....................................................... 3
Templates ............................................................. 3
Using This Guide ...................................................4
Elements and Colors Table ................................. 4
Fonts Table .......................................................... 4
Template Layouts ............................................... 4
Flash Theme ......................................................... 5
Elements and Color Palette .................................. 5
Fonts ...................................................................... 8
Flash Template Layouts ........................................9
TLP 700 ................................................................ 9
TLP 350 .............................................................. 12
Jet Theme ............................................................ 13
Elements and Color Palette ................................ 13
Fonts .................................................................... 15
Jet Template Layouts .......................................... 16
TLP 700 .............................................................. 16
TLP 350 .............................................................. 19
Power Theme ..................................................... 21
Elements and Color Palette ................................ 21
Power Template Layouts ................................... 24
TLP 700 .............................................................. 24
TLP 350 .............................................................. 27
University Theme ............................................. 37
Elements .............................................................. 37
Fonts .................................................................... 38
University Template Layouts ............................. 39
TLP 700 .............................................................. 39
TLP 350 .............................................................. 42
University Colors .................................................43
Vortex Black Theme ........................................ 47
Elements and Color Palette ................................ 47
Fonts .................................................................... 49
Vortex Black Template Layouts .......................... 50
TLP 700 .............................................................. 50
TLP 350 .............................................................. 53
Vortex Blue Theme .......................................... 55
Elements and Color Palette ................................ 55
Fonts .................................................................... 57
Vortex Blue Template Layouts ..........................58
TLP 700 .............................................................. 58
TLP 350 .............................................................. 61
Vortex Green Theme ....................................... 63
Elements and Color Palette ................................ 63
Fonts .................................................................... 65
Vortex Green Template Layouts ......................... 66
TLP 700 .............................................................. 66
TLP 350 .............................................................. 69
Speed Theme ..................................................... 29
Elements and Color Palette ................................ 29
Speed Template Layouts .....................................32
TLP 700 .............................................................. 32
TLP 350 .............................................................. 35
Extron GUI Configurator Fonts .................. 71
Notes: ................................................................... 72
Contact Information ....................................... 74
Extron TouchLink Design Themes • Contents iii
Extron TouchLink Design Themes • Contents iv
Introduction
Overview
Extron® has developed a series of pre-configured design themes to help streamline and
accelerate the TouchLink™ user interface development process. Each design theme is a
complete collection of graphical elements used to create a cohesive-looking user interface.
At the time of this publication, Extron offers eight unique themes, including:
FLASH
POWER
UNIVERSITY
JET
SPEED
VORTEX BLACK
VORTEX BLUE
VORTEX GREEN
Extron TouchLink Design Themes • Introduction 1
Resource Kits
The Extron TouchLink Design Themes Reference Guide documents each of these design
themes. This guide is a valuable resource for any TouchLink graphical user interface developer
wanting to maintain a consistent, professional look with the Extron TouchLink design themes.
A resource kit is a complete themed collection of graphic elements and sound files that a
graphical user interface developer can download from the Extron website. They provide the
developer everything needed to make a consistent and cohesive user interface based on one
of the Extron design themes.
The graphic elements include:
• Backgrounds
• Headers
• Side Bars
• Footers
• Pop-up Backgrounds
• Button graphics in both their selected (on) and not selected (off) states
Audio files that can be used for feedback are also included. Each resource kit has a substantial
library of universal TV icons, as well as, common A/V icons that match the selected theme.
Figure 1. Using Resource Kit Elements
Extron TouchLink Design Themes • Introduction2
Icons Images
A/V Icons
Each theme resource kit has more than 70 themed basic A/V icons. Some examples of the
these icons are:
TV Icons
The theme resource library has more than 350 worldwide TV network icons. Some examples
of these icons are:
Templates
A template is a ready-to-use file imported into the Extron GUI Configurator software that
allows one to quickly develop a TouchLink Graphical User Interface project. When starting
a project the developer is first given the choice of what theme to use determined by the
application for the system. The developer then has the option to use the templates “as-is”
or modify them to create new pages. Elements and icons in the resource kits are included as
part of the template package. Several templates are available for download from the Extron
website.
Extron TouchLink Design Themes • Introduction 3
Using This Guide
Elements and Colors Table
Fonts Table
Tables throughout this guide show the elements and colors that make up a specific theme. To
the left of the Elements and Color Palette table are thumbnail images of the template pages
illustrating how these are used. All element files are in .png or .jpg formats. Several, but not
all, element files are shown.
NOTE: Each thumbnail image has a number that corresponds to the reference numbers
in the right column of the “Elements and Colors Palette” and the “Fonts” tables.
This table may be one to three sections depending on the theme.
• Elements — This section provides examples of design elements that are in both the
resource kit and in the template.
• Background Colors — This section provides RGB and HEX color codes for backgrounds
used in theme templates.
• Button Colors — This section provides RGB and HEX color codes for buttons used in
theme templates.
For each theme, this table lists the font sizes and colors used in a theme. Two font types are
used throughout: Arial Bold and Extron® GUI Congurator. The table gives examples of how
each font is used in a theme.
Template Layouts
Additional TLP 700 and TLP 350 template layout examples follow the tables for each theme.
Extron TouchLink Design Themes • Introduction4
Flash Theme
Elements and Color Palette
a
b
c
Swatch RGB Code or
File Name
Elements
flash_bkgd_dual.png
flash_bkgd_window1.png
flash_bfgd_display1.png
flash_background.png
flash_video.png
flash_audio.png
flash_wood.png
flash_start.png
flash_shutdown.png
Hex
Code
Use For (an)
Background for dual display and window
display main pages — TLP 700
Background for window main page. There is
a similar dual display background — TLP 700
Background single, divisible room, and Video
Conference main pages — TLP 700
Background for full pages such as DVD and
VCR — TLP 700 and TLP 350
Preset Selection and Audio Control pages —
TLP 700 and TLP 350
Background for Preset Selection and Audio
Control — TLP 700
Start page with the power button in place —
TLP 700
Background for start, starting up, shutting
down, and confirmation pages — TLP 700
and TLP 350
Example,
See...
Figure 3
bgh
Figure 5
c
Figure 11
df
Figures
2, 6
d
a
Figure 7
a
d
flash_320px.png
flash_panel_leftside.png
flash_room1_sel.png
title.png
flash_vol_nsel.png
flash_volvert_nsel.png
flash_vol_sel.png
flash_volvert_sel.png
Background for Aux, Laptop, and PC —
TLP 350
Left side panel, a right side panel is in the
Resource Library — TLP 700
Tab bar over the black background for
Window display — TLP 700
Background for titles such as DVD — TLP 700
and TLP 350
Horizontal volume bar on main page and
vertical volume bar on Audio Control page —
TLP 700
Extron TouchLink Design Themes • Flash Theme
Figure 10
Figure 2
cde
bfg
e
Not
shown
f
hj
5
Swatch RGB Code or
File Name
Hex
Code
Use For (an)
Example,
See...
e
f
g
Elements (Continued)
preset01_sel.png Preset Selection button (selected) — TLP 700
Preset01.png
flash_start_nsel.png
flash_input_nsel.png
flash_laptop_nsel.png
flash_tuner_sel.png
flash_transport_nsel.png Button (not selected) — TLP 700 and TLP 350
flash_transport_sel.png Buttons (selected) — TLP 700 and TLP 350
Preset Selection button (not selected) —
TLP 700
Power on button (not selected) — TLP 700
and TLP 350
A/V source button (not selected), use with
A/V icons in Resources Library
A/V source button icon (not selected) on main
page — TLP 700
A/V source button icon (selected) on main
page — TLP 700
d
df
Figure 6
i
bgh
j
j
cgj
g
Figure 5
flash_system_btn_nsel.png
flash_roomstatus.png
h
Background Colors
i
Button Colors
flash_dial_nsel.png
flash_scroll-light_nsel.png
flash_transport_drkblu_
nsel.png
211, 211, 211
105, 105, 105
128, 128, 128
70, 130, 180
218, 226, 232
105, 105, 105
49, 53, 58
255, 255, 255
D3D3D3
696969
808080
4682B4
DAE2E8
696969
31353A
FFFFFF
System Off button (not selected) on main
page — TLP 700
Combined and Individual button on status bar
(not selected and selected) — TLP 700
Button (not selected) on Tuner page —
TLP 700
Button (not selected) — TLP 700 and TLP 350
Freeze button (not selected) — TLP 700 and
TLP 350
Fill: Rectangle over background —
Border:
Fill: Rectangle around Audio Control
Border:
Fill: Buttons on status bar (not selected)
Border:
Fill: Back and Full Screen Video buttons
Border: White
TLP 700
buttons
— TLP 700
— TLP 700
(not selected)
— TLP 700
Not
shown
Not
shown
j
c
Figure 4
g
Figure 5
a
f
b
d
Extron TouchLink Design Themes • Flash Theme6
Swatch RGB Code or
File Name
Hex
Code
Use For (an)
Example,
See...
j
Button Colors (Continued)
134, 218, 255
255, 255, 255
134, 218, 255
70, 130, 180
255, 0, 0
105, 105, 105
18, 128, 18
0, 0, 0
222, 27, 27
0, 0, 0
0, 128, 0
192, 192, 192
255, 255, 0
192, 192, 192
0, 0, 255
192, 192, 192
86DAFF
FFFFFF
86DAFF
4682B4
FF0000
C0C0C0
128012
000000
DE1B1B
000000
008000
C0C0C0
FFFF00
C0C0C0
0000FF
C0C0C0
Fill: VC Conference and System off
Border: White
Fill: All buttons (selected except as
Border:
Fill: System Off button (not selected) —
Border:
Fill: Power Down button (not selected)
Border:
Fill: Cancel button (not selected) —
Border:
Fill: VC Controls button (not selected)
Border:
Fill: VC Controls button (not selected)
Border:
Fill: VC Controls button (not selected)
Border:
buttons (selected)
noted)
— TLP 700
TLP 700
— TLP 700 and TLP 350
TLP 700 and TLP 350
and selected
and selected
and selected
— TLP 700
— TLP 700
— TLP 700
— TLP 700
b
c
gh
a
b
Extron TouchLink Design Themes • Flash Theme 7
Fonts
Font
Arial Bold
Color RGB Code Hex Code Text for: For (an)
Size
Black 0, 0, 0 000000 Logo banner — TLP 700
36
Black 0, 0, 0 000000
22
Blue 70, 130, 180 4682B4
18
White 255, 255, 255 FFFFFF
Full page headings, pop-up page headings, and
text on pages such as shutting down — TLP 700
Logo banner — TLP 350
Labels on Audio Control page — TLP 700
Example,
See...
i
Figure 7
fgh
Figures
8, 9
f
16
Blue 70, 130, 180 4682B4
White 255, 255, 255 FFFFFF
Black 0, 0, 0 000000
14
Dim gray 105, 105, 105 696969
Blue 70, 130, 180 4682B4
Black 0, 0, 0 000000 Buttons (not selected) — TLP 700 and TLP 350
Dark green 0, 100, 0 006400
12
Blue 70, 130, 180 4682B4
Red 255, 0, 0 FF0000 End Call button (not selected) — TLP 700
White 255, 255, 255 FFFFFF
Black 0, 0, 0 000000
11
Text on pages such as Auxiliary — TLP 350
Labels over A/V source icons and button labels
— TLP 700
Text under power on button on start page —
TLP 700 and TLP 350
Buttons (selected except as noted) — TLP 700
and TLP
Labels above buttons and text on pop-ups pages
— TLP 700
Call and Phone Book buttons (not selected) —
TLP 700
Combined and Individual buttons on status bar
— TLP 700
System Off button (not selected) on status bar
— TLP 700
Status bar buttons (not selected except as noted)
— TLP 700
Figure 10
bcg
i
bc
g
b
Not shown
b
bcg
Dim gray 105, 105, 105 696969 Status bar buttons (selected) — TLP 700
Extron GUI Congurator
White 255, 255, 255 FFFFFF
24
Dim Gray 105, 105, 105 696969
NOTE:
See the Extron GUI Congurator Fonts section for symbols and keyboard equivalents.
Button symbols and numbers (not selected) —
TLP 700 and TLP 350
Buttons symbols and numbers (selected) —
TLP 700 and TLP 350
b
bcg
Figure 4
Extron TouchLink Design Themes • Flash Theme8
Flash Template Layouts
TLP 700
Figure 2. Audio Control page
Figure 3. Dual Display main page: Display 1, VCR selected, and VCR pop-up displayed
in the dynamic area
Extron TouchLink Design Themes • Flash Theme 9
Figure 4. DVD full page, Back selected
Figure 5. Main page, Doc Cam selected, and Doc Cam pop-up displayed in the
dynamic area
Extron TouchLink Design Themes • Flash Theme10
Figure 6. Preset Selection page
Figure 7. Start page
Extron TouchLink Design Themes • Flash Theme 11
TLP 350
Figure 8. Start page Figure 9. Start page, power on selected
Figure 10. Auxiliary page
Figure 11. DVD page, Video selected
Extron TouchLink Design Themes • Flash Theme12
Jet Theme
Elements and Color Palette
a
b
c
Swatch RGB Code or
File Name
Elements
Jet_dual_bkgd.jpg
jet_bkgd.jpg
jet_bkgr_nohead.png
jet_bkgd.jpg Master page — TLP 700
jet_start_bkgd.png
jet_panel_center.png Master popup page — TLP 700
jet_panel_rightside.jpg
jet_header.png
jet_tab_nsel.png
Jet_tabsq_sel.jpg
Hex
Code
Use For (an)
Background for dual display and window
display main pages — TLP 700
Background for single, divisible room, and
video conference main pages — TLP 700
Background for Audio Control, DVD,
Preset Selection, and VCR full pages
Example
See...
d
Figure 13
af
Figure 15
c
Figures
16, 17
af
Figure 15
Background for start, starting up,
confirmation, and shutting down pages
— TLP 700
bgh
Figure 14
adef
Right side panel, a left side panel is in the
Resource Library — TLP 700
Header for main page A/V sources
— TLP 700
Rounded or square tabs (not selected and
selected), for use with dual display and
window main pages.
Not shown
af
Figure 15
d
Figure 13
d
jet-volume_nsel.png
jet-volume_sel.png
footer.png Footer on main page — TLP 700
Start_Button_nsel.png_1
Start_Button_sel.png_1
Jet_pc_nsel.png
Jet_aux_sel.png
Volume bar on main page — TLP 700
Power on, Combined, and Individual
button (not selected) — TLP 700 and
TLP 350
Power on, Combined, and Individual
buttons (selected) — TLP 700 and TLP 350
A/V source button icon (not selected) on
main page — TLP 700
A/V source button icon (selected) on main
page — TLP 700
Extron TouchLink Design Themes • Jet Theme
adf
Figure 13
b
Figure 12
Figures
12, 18
adf
Figure 13
ad
Figure 13
13
e
Swatch RGB Code or
File Name
Elements (Continued)
Hex
Code
Use For (an)
Example
See...
f
g
h
jet_nsel.png
jet_sel.png Button (selected) — TLP 700 and TLP 350
preset05.png
preset09.png
jet_85_grn.png
jet_85_orng.png
jet_85_blu-drk.png
jet_85_sel.png VC Control buttons (selected) — TLP 700 Not shown
jet_trnsprt_grn.png
jet_trnsprt_red.png
Button (not selected) — TLP 700 and
TLP 350
Preset Selection button (not selected) —
TLP 700
Preset Selection button (selected) —
TLP 700
VC Control buttons (not selected) —
TLP 700
Power Down button (not selected) —
TLP 700 and TLP 350
Cancel button (not selected) — TLP 700
and TLP 350
cef
Figure 13
ch
Figure 17
f
Figure 15
g
Figure 14
gh
Figure 14
Background Colors
Buttons Colors
53, 55, 62
255, 255, 255
48, 50, 56
67, 67, 75
53, 55, 62 2E2E2E
127, 133, 149 7F8595
0, 0, 0
255, 255, 255
255, 195, 0 FFC300
35373E
FFFFFF
303238
43434B
000000
FFFFFF
Fill: Rectangle layer 1 fill over
background — TLP 700
Border: White
Fill: Rectangle layer 2 fill over layer
1, Audio Control boxes around
buttons — TLP 700
Border:
Fill: Rectangle fill around page names
such as AUX — TLP 700
Fill: Background for full pages —
TLP 700 and TLP 350
Fill: TV icon button (not selected),
Tuner page — TLP 700
Border: White
Fill: TV icon button (selected), Tuner
page — TLP 700
Border: Same as fill
gh
bc
Figure 16
aef
Figure 13
cgh
Figure 16
e
Figure 13
e
Extron TouchLink Design Themes • Jet Theme14
Fonts
Font
Size
Arial Bold
Color RGB Code Hex
Code
Text for: For (an)
Example
See...
Amber 255, 195, 0 FFC300 Logo banner — TLP 700
36
White 255, 255, 255 FFFFFF
20
Amber 255, 195, 0 FFC300 Text on pop-up pages — TLP 700
White 255, 255, 255 FFFFFF Headings, such as AUX — TLP 350
18
Amber 255, 195, 0 FFC300
16
Black 0, 0, 0 000000
Amber 255, 195, 0 FFC300
14
Blue 10, 170, 240 0AAAF0
Headings such as AUX — TLP 700 and logo
banner — TLP 350
Headings, display tab, and window tab (not
selected) — TLP 700
Headings, display tab, and window tab
(selected)— TLP 700
Text under the power on button on the start
page, labels, and text on the freeze button —
TLP 700 and text — TLP 350
Buttons (not selected) — TLP 700 and TLP 350
b
Figure 12
ae
Figure 19
Figures
20, 21
d
Figure 13
b
Figure 18
cef
Black 0, 0, 0 000000
White 255, 255, 255 FFFFFF
13
White 255, 255, 255 FFFFFF Status bar buttons (not selected) — TLP 700
Buttons (selected) — TLP 700 and TLP 350
Power Down and Cancel buttons (not selected) —
TLP 700 and TLP 350
12
Black 0, 0, 0 000000
Extron GUI Congurator
Black 0, 0, 0 000000
48
Blue 10, 170, 240 0AAAF0
Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350
Status bar buttons (selected) — TLP 700
Power on symbol (selected) — TLP 700 and
TLP 350
Power on symbol (not selected) — TLP 700 and
TLP 350
24
Black 0, 0, 0 000000
Buttons (selected) — TLP 700 and TLP 350 Not shown
Figure 21
gh
Figure 14
adf
Figure 13
f
Figure 15
Figure 18
b
ef
Figure 16
Amber 255, 195, 0 FFC300 Volume icons on status bar — TLP 700
18
NOTE:
See the Extron GUI Congurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Jet Theme 15
df
Figure 13
Jet Template Layouts
TLP 700
Figure 12. Start page, divisible room, Combined selected
Figure 13. Multi window main page, Window 2, Tuner selected, and Tuner pop-up
displayed in the dynamic area
Extron TouchLink Design Themes • Jet Theme16
Figure 14. Conrmation page
Figure 15. Main page, VC Controls selected, and Video Conference pop-up displayed
in the dynamic area
Extron TouchLink Design Themes • Jet Theme 17
Figure 16. Audio Control page
Figure 17. Preset Selection page
Extron TouchLink Design Themes • Jet Theme18
TLP 350
Figure 18. Start page
Figure 20. DVD page Figure 21. DVD page, Video selected
Figure 19. Laptop page
Extron TouchLink Design Themes • Jet Theme 19
Extron TouchLink Design Themes • Jet Theme20
Loading...