touchlink design themes reference guide · documents each of these design themes. this guide is a...

78
Reference Guide Extron® TouchLink Design Themes Control Systems 68-1951-01 Rev. A 01 11

Upload: others

Post on 10-Mar-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 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

Reference Guide

Extron® TouchLink™ Design Themes

Control Systems

68-1951-01 Rev. A01 11

Page 2: 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

Copyright© 2011 Extron Electronics. All rights reserved.

TrademarksAll trademarks mentioned in this guide are the property of their respective owners.

Page 3: 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

Contents

Introduction ......................................................... 1

Overview ...............................................................1Resource Kits ........................................................2

Icons Images ....................................................... 3Templates .............................................................3Using This Guide ...................................................4

Elements and Colors Table ................................. 4Fonts Table .......................................................... 4Template Layouts ............................................... 4

Flash Theme ......................................................... 5

Elements and Color Palette ..................................5Fonts ......................................................................8Flash Template Layouts ........................................9

TLP 700 ................................................................ 9TLP 350 .............................................................. 12

Jet Theme ............................................................ 13

Elements and Color Palette ................................13Fonts ....................................................................15Jet Template Layouts ..........................................16

TLP 700 .............................................................. 16TLP 350 .............................................................. 19

Power Theme ..................................................... 21

Elements and Color Palette ................................21Power Template Layouts ...................................24

TLP 700 .............................................................. 24TLP 350 .............................................................. 27

Speed Theme ..................................................... 29

Elements and Color Palette ................................29Speed Template Layouts .....................................32

TLP 700 .............................................................. 32TLP 350 .............................................................. 35

University Theme ............................................. 37

Elements ..............................................................37Fonts ....................................................................38University Template Layouts .............................39

TLP 700 .............................................................. 39TLP 350 .............................................................. 42

University Colors .................................................43

Vortex Black Theme ........................................ 47

Elements and Color Palette ................................47Fonts ....................................................................49Vortex Black Template Layouts ..........................50

TLP 700 .............................................................. 50TLP 350 .............................................................. 53

Vortex Blue Theme .......................................... 55

Elements and Color Palette ................................55Fonts ....................................................................57Vortex Blue Template Layouts ..........................58

TLP 700 .............................................................. 58TLP 350 .............................................................. 61

Vortex Green Theme ....................................... 63

Elements and Color Palette ................................63Fonts ....................................................................65Vortex Green Template Layouts .........................66

TLP 700 .............................................................. 66TLP 350 .............................................................. 69

Extron GUI Configurator Fonts .................. 71

Notes: ................................................................... 72

Contact Information ....................................... 74

Extron TouchLink Design Themes • Contents iii

Page 4: 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

Extron TouchLink Design Themes • Contents iv

Page 5: 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

Introduction

OverviewExtron® 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 JET

POWER

SPEED

UNIVERSITY VORTEX BLACK

VORTEX BLUE VORTEX GREEN

Extron TouchLink Design Themes • Introduction 1

Page 6: 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

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.

Resource Kits

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

Page 7: 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

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

Page 8: 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

Using This Guide

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.

Elements and Colors Table

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.

Fonts Table

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 Configurator. 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

Page 9: 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

Flash Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use For (an) Example, See...

a

b

c

d

Elements

flash_bkgd_dual.pngBackground for dual display and window display main pages — TLP 700

Figure 3flash_bkgd_window1.pngflash_bfgd_display1.png

Background for window main page. There is a similar dual display background — TLP 700

flash_background.pngBackground single, divisible room, and Video Conference main pages — TLP 700

bghFigure 5

flash_video.pngBackground for full pages such as DVD and VCR — TLP 700 and TLP 350

cFigure 11

flash_audio.pngPreset Selection and Audio Control pages — TLP 700 and TLP 350

dfFigures

2, 6

flash_wood.pngBackground for Preset Selection and Audio Control — TLP 700 d

flash_start.pngStart page with the power button in place — TLP 700

aFigure 7

flash_shutdown.pngBackground for start, starting up, shutting down, and confirmation pages — TLP 700 and TLP 350

a

flash_320px.pngBackground for Aux, Laptop, and PC — TLP 350

eFigure 10

flash_panel_leftside.pngLeft side panel, a right side panel is in the Resource Library — TLP 700

Not shown

flash_room1_sel.pngTab bar over the black background for Window display — TLP 700

Figure 2

title.pngBackground for titles such as DVD — TLP 700 and TLP 350

cde f

flash_vol_nsel.pngflash_volvert_nsel.png Horizontal volume bar on main page and

vertical volume bar on Audio Control page — TLP 700

bfg hjflash_vol_sel.png

flash_volvert_sel.png

Extron TouchLink Design Themes • Flash Theme 5

Page 10: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example, See...

e

f

g

h

i

Elements (Continued)

preset01_sel.png Preset Selection button (selected) — TLP 700 d

Preset01.pngPreset Selection button (not selected) — TLP 700

dfFigure 6

flash_start_nsel.pngPower on button (not selected) — TLP 700 and TLP 350 i

flash_input_nsel.pngA/V source button (not selected), use with A/V icons in Resources Library

bgh j

flash_laptop_nsel.pngA/V source button icon (not selected) on main page — TLP 700

flash_tuner_sel.pngA/V source button icon (selected) on main page — TLP 700 j

flash_transport_nsel.png Button (not selected) — TLP 700 and TLP 350 cgj

flash_transport_sel.png Buttons (selected) — TLP 700 and TLP 350 gFigure 5

flash_system_btn_nsel.pngSystem Off button (not selected) on main page — TLP 700

Not shown

flash_roomstatus.pngCombined and Individual button on status bar (not selected and selected) — TLP 700

Not shown

flash_dial_nsel.png Button (not selected) on Tuner page — TLP 700 j

flash_scroll-light_nsel.png Button (not selected) — TLP 700 and TLP 350 cFigure 4

flash_transport_drkblu_nsel.png

Freeze button (not selected) — TLP 700 and TLP 350

gFigure 5

Background Colors

211, 211, 211

105, 105, 105

D3D3D3

696969

Fill: Rectangle over background — TLP 700

Border: a

128, 128, 128

70, 130, 180

808080

4682B4

Fill: Rectangle around Audio Control buttons — TLP 700

Border: f

Button Colors

218, 226, 232

105, 105, 105

DAE2E8

696969

Fill: Buttons on status bar (not selected) — TLP 700

Border: b

49, 53, 58

255, 255, 255

31353A

FFFFFF

Fill: Back and Full Screen Video buttons (not selected) — TLP 700

Border: Whited

Extron TouchLink Design Themes • Flash Theme6

Page 11: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example, See...

j Button Colors (Continued)

134, 218, 255

255, 255, 255

86DAFF

FFFFFF

Fill: VC Conference and System off buttons (selected) — TLP 700

Border: Whiteb

134, 218, 255

70, 130, 180

86DAFF

4682B4

Fill: All buttons (selected except as noted) — TLP 700

Border: c

255, 0, 0

105, 105, 105

FF0000

C0C0C0

Fill: System Off button (not selected) — TLP 700

Border: gh

18, 128, 18

0, 0, 0

128012

000000

Fill: Power Down button (not selected) — TLP 700 and TLP 350

Border: a

222, 27, 27

0, 0, 0

DE1B1B

000000

Fill: Cancel button (not selected) — TLP 700 and TLP 350

Border:

0, 128, 0

192, 192, 192

008000

C0C0C0

Fill: VC Controls button (not selected) and selected — TLP 700

Border:

b255, 255, 0

192, 192, 192

FFFF00

C0C0C0

Fill: VC Controls button (not selected) and selected — TLP 700

Border:

0, 0, 255

192, 192, 192

0000FF

C0C0C0

Fill: VC Controls button (not selected) and selected — TLP 700

Border:

Extron TouchLink Design Themes • Flash Theme 7

Page 12: 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

Fonts

Font Size

Color RGB Code Hex Code Text for: For (an) Example, See...

Arial Bold

36 Black 0, 0, 0 000000 Logo banner — TLP 700 i Figure 7

22 Black 0, 0, 0 000000Full page headings, pop-up page headings, and text on pages such as shutting down — TLP 700 fgh

18 Blue 70, 130, 180 4682B4 Logo banner — TLP 350Figures

8, 9

16White 255, 255, 255 FFFFFF Labels on Audio Control page — TLP 700 f

Blue 70, 130, 180 4682B4 Text on pages such as Auxiliary — TLP 350 Figure 10

14

White 255, 255, 255 FFFFFF Labels over A/V source icons and button labels — TLP 700 bcg

Black 0, 0, 0 000000Text under power on button on start page — TLP 700 and TLP 350 i

Dim gray 105, 105, 105 696969Buttons (selected except as noted) — TLP 700 and TLP bc

Blue 70, 130, 180 4682B4Labels above buttons and text on pop-ups pages — TLP 700 g

12

Black 0, 0, 0 000000 Buttons (not selected) — TLP 700 and TLP 350

bDark green 0, 100, 0 006400

Call and Phone Book buttons (not selected) — TLP 700

Blue 70, 130, 180 4682B4Combined and Individual buttons on status bar — TLP 700

Not shown

Red 255, 0, 0 FF0000 End Call button (not selected) — TLP 700 b

11

White 255, 255, 255 FFFFFFSystem Off button (not selected) on status bar — TLP 700

bcgBlack 0, 0, 0 000000

Status bar buttons (not selected except as noted) — TLP 700

Dim gray 105, 105, 105 696969 Status bar buttons (selected) — TLP 700 b

Extron GUI Configurator

24White 255, 255, 255 FFFFFF

Button symbols and numbers (not selected) — TLP 700 and TLP 350 bcg

Dim Gray 105, 105, 105 696969Buttons symbols and numbers (selected) — TLP 700 and TLP 350

Figure 4

NOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Flash Theme8

Page 13: 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

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

Page 14: 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

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

Page 15: 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

Figure 6. Preset Selection page

Figure 7. Start page

Extron TouchLink Design Themes • Flash Theme 11

Page 16: 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

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

Page 17: 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

Jet Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use For (an) Example

See...

a

b

c

d

Elements

Jet_dual_bkgd.jpgBackground for dual display and window display main pages — TLP 700

dFigure 13

jet_bkgd.jpgBackground for single, divisible room, and video conference main pages — TLP 700

afFigure 15

jet_bkgr_nohead.pngBackground for Audio Control, DVD, Preset Selection, and VCR full pages

cFigures 16, 17

jet_bkgd.jpg Master page — TLP 700 afFigure 15

jet_start_bkgd.pngBackground for start, starting up, confirmation, and shutting down pages — TLP 700

bghFigure 14

jet_panel_center.png Master popup page — TLP 700 adef

jet_panel_rightside.jpgRight side panel, a left side panel is in the Resource Library — TLP 700

Not shown

jet_header.pngHeader for main page A/V sources — TLP 700

afFigure 15

jet_tab_nsel.png Rounded or square tabs (not selected and selected), for use with dual display and window main pages.

dFigure 13Jet_tabsq_sel.jpg

jet-volume_nsel.pngVolume bar on main page — TLP 700

adfFigure 13

jet-volume_sel.png

footer.png Footer on main page — TLP 700

Start_Button_nsel.png_1Power on, Combined, and Individual button (not selected) — TLP 700 and TLP 350

bFigure 12

Start_Button_sel.png_1Power on, Combined, and Individual buttons (selected) — TLP 700 and TLP 350

Figures 12, 18

Jet_pc_nsel.pngA/V source button icon (not selected) on main page — TLP 700

adf Figure 13

Jet_aux_sel.pngA/V source button icon (selected) on main page — TLP 700

adFigure 13

Extron TouchLink Design Themes • Jet Theme 13

Page 18: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example

See...

e

f

g

h

Elements (Continued)

jet_nsel.pngButton (not selected) — TLP 700 and TLP 350

cef Figure 13

jet_sel.png Button (selected) — TLP 700 and TLP 350 ch

preset05.pngPreset Selection button (not selected) — TLP 700

Figure 17

preset09.pngPreset Selection button (selected) — TLP 700

jet_85_grn.png

VC Control buttons (not selected) — TLP 700

fFigure 15

jet_85_orng.png

jet_85_blu-drk.png

jet_85_sel.png VC Control buttons (selected) — TLP 700 Not shown

jet_trnsprt_grn.pngPower Down button (not selected) — TLP 700 and TLP 350

gFigure 14

jet_trnsprt_red.pngCancel button (not selected) — TLP 700 and TLP 350

gh Figure 14

Background Colors

53, 55, 62

255, 255, 255

35373E

FFFFFF

Fill: Rectangle layer 1 fill over background — TLP 700

Border: Whitegh

48, 50, 56 67, 67, 75

303238

43434B

Fill: Rectangle layer 2 fill over layer 1, Audio Control boxes around buttons — TLP 700

Border:

bcFigure 16

53, 55, 62 2E2E2EFill: Rectangle fill around page names

such as AUX — TLP 700aef Figure 13

127, 133, 149 7F8595Fill: Background for full pages —

TLP 700 and TLP 350cgh Figure 16

Buttons Colors

0, 0, 0

255, 255, 255

000000

FFFFFF

Fill: TV icon button (not selected), Tuner page — TLP 700

Border: White

eFigure 13

255, 195, 0 FFC300Fill: TV icon button (selected), Tuner

page — TLP 700Border: Same as fill

e

Extron TouchLink Design Themes • Jet Theme14

Page 19: 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

Fonts

Font Size

Color RGB Code Hex Code

Text for: For (an) Example

See...

Arial Bold

36 Amber 255, 195, 0 FFC300 Logo banner — TLP 700 bFigure 12

20White 255, 255, 255 FFFFFF

Headings such as AUX — TLP 700 and logo banner — TLP 350 ae

Figure 19Amber 255, 195, 0 FFC300 Text on pop-up pages — TLP 700

18 White 255, 255, 255 FFFFFF Headings, such as AUX — TLP 350Figures 20, 21

16Amber 255, 195, 0 FFC300

Headings, display tab, and window tab (not selected) — TLP 700 d

Figure 13Black 0, 0, 0 000000

Headings, display tab, and window tab (selected)— TLP 700

14

Amber 255, 195, 0 FFC300Text under the power on button on the start page, labels, and text on the freeze button — TLP 700 and text — TLP 350

bFigure 18

Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350cef

Figure 21Black 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350

13 White 255, 255, 255 FFFFFFPower Down and Cancel buttons (not selected) — TLP 700 and TLP 350

ghFigure 14

12 White 255, 255, 255 FFFFFF Status bar buttons (not selected) — TLP 700 adf

Figure 13

Black 0, 0, 0 000000 Status bar buttons (selected) — TLP 700 fFigure 15

Extron GUI Configurator

48Black 0, 0, 0 000000

Power on symbol (selected) — TLP 700 and TLP 350

Figure 18

Blue 10, 170, 240 0AAAF0Power on symbol (not selected) — TLP 700 and TLP 350 b

24Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350 ef

Figure 16

Black 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350 Not shown

18 Amber 255, 195, 0 FFC300 Volume icons on status bar — TLP 700 dfFigure 13

NOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Jet Theme 15

Page 20: 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

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

Page 21: 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

Figure 14. Confirmation 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

Page 22: 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

Figure 16. Audio Control page

Figure 17. Preset Selection page

Extron TouchLink Design Themes • Jet Theme18

Page 23: 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

TLP 350

Figure 18. Start page Figure 19. Laptop page

Figure 20. DVD page Figure 21. DVD page, Video selected

Extron TouchLink Design Themes • Jet Theme 19

Page 24: 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

Extron TouchLink Design Themes • Jet Theme20

Page 25: 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

Power Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use For (an) Example, See...

a

b

c

d

Elements

power_bkgd_nohead.png Background for main page — TLP 700 Not shown

Power_guic_bkgd.png Master page background — TLP 700 afFigure 23

Power_guic_room1_sel.jpgBackground for dual display and window display main pages — TLP 700

Figure 22

pwr_bkgd-320240.pngMaster page and main page background — TLP 350

Figures 29, 30, 31

start_bkgd.pngBackground for start, starting up, confirmation, and shutting down pages — TLP 700

biFigures 25, 28

popbkgd2.pngBackground for pop-up pages — TLP 700 and TLP 350 ch

power_sidepanel_left.pngLeft side panel, a right side panel is in the Resource Library — TLP 700

Not shown

power_footer.png Status bar on the main page — TLP 700

afFigure 23

power_header.pngHeader for main page A/V sources — TLP 700

Volume_ON_horizontal.jpgVolume bar on main page — TLP 700

Volume_OFFhorizontal.jpg

Power_noicon_small.jpg A/V source button icon — TLP 700

Power-Laptop.png A/V source button icon — TLP 700

preset01.pngPreset Selection button (not selected) — TLP 700 g

Figure 27preset02_sel.png

Preset Selection button (selected) — TLP 700

Background Colors

Transparent

255, 255, 255

FFFFFF

Fill: Rectangle layer 1 over background — TLP 700

Border: White bFigure 25105, 105, 105

133, 133, 133

696969

858585

Fill: Rectangle layer 2 over layer 1 — TLP 700

Border:

Extron TouchLink Design Themes • Power Theme 21

Page 26: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example, See...

e

f

g

h

i

Background Colors (Continued)

36, 36, 36 242424Fill: Background for full pages; label

fill for Preset Selection — TLP 700Border: None

de

29, 204, 73 1DCC49Fill: Vertical volume bar on Audio

Control page — TLP 700d

Figure 24121, 121, 121192, 192, 192

797979C0C0C0

Fill: Rectangle around Audio Control buttons — TLP 700

Border:

Button Colors

26, 26, 31

Transparent

1A1A1F

Fill: A/V source icon fill (not selected) — TLP 700

Border: Transparentaf

135, 206, 250

Transparent

87CEFA

Fill: A/V source icon fill (selected) — TLP 700

Border: Transparent

36, 43, 63

169, 169, 169

242B3F

A9A9A9

Fill: Buttons (not selected) — TLP 700 and TLP 350

Border:

de g

105, 105, 105

169, 169, 169

696969

A9A9A9

Fill: Buttons (not selected) — TLP 700 and TLP 350

Border: ae

56, 56, 56

169, 169, 169

383838

A9A9A9

Fill: Buttons (not selected) — TLP 700 and TLP 350

Border: c

49, 53, 58

255, 255, 255

31353A

FFFFFF

Fill: Back and Full Screen Video buttons (not selected) — TLP 700 and TLP 350

Border: White

ad

0, 255, 2550, 128, 128

00FFFF008080

Fill: Buttons (selected except as noted) — TLP 700 and TLP 350

Border: e

211, 211, 211169, 169, 169

D3D3D3A9A9A9

Fill: Buttons — TLP 700Border: c

178, 34, 34

192, 192, 192

B22222

C0C0C0

Fill: System Off button (not selected) — TLP 700

Fill: a

220, 20, 60 DC143CFill: System Off button (selected) —

TLP 700Border: Same as fill

f

18, 128, 18

0, 0, 0

128012

000000

Fill: Power Down button (not selected) — TLP 700 and TLP 350

Border: Figure 25

222, 27, 27 0, 0, 0

DE1B1B

000000

Fill: Cancel button (not selected) — TLP 700 and TLP 350

Border:

40, 86, 128

192, 192, 192

285680

C0C0C0

Fill: Freeze button (not selected) — TLP 700 and TLP 350

Border: Figure 23

0, 128, 0

192, 192 ,192

008000

C0C0C0

Fill: VC Control button (not selected and selected) — TLP 700

Border: h

Extron TouchLink Design Themes • Power Theme22

Page 27: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example, See...

Button Colors (Continued)

255, 255, 0

192, 192 ,192

FFFF00

C0C0C0

Fill: VC Controls button (not selected and selected) — TLP 700

Border:

h

0, 0, 255

192, 192 ,192

0000FF

C0C0C0

Fill: VC Controls button (not selected and selected) — TLP 700

Border:

36, 43, 63

0, 128, 128

242B3F

008080

Fill: Call button (not selected) on VC Controls — TLP 700

Border:

36, 43, 63

189, 0, 0

242B3F

BD0000

Fill: End Call button (not selected) on VC Controls — TLP 700

Border:

FontsFont Size

Color RGB Code Hex Code

Text for: For (an) Example, See...

Arial Bold

36 White 255, 255, 255 FFFFFF Logo banner — TLP 700 i

20 White 255, 255, 255 FFFFFFFull page headings, pop-up page headings, text on pages such as starting up — TLP 700 and logo banner — TLP 350

afgh

16 White 255, 255, 255 FFFFFFText on pop-up pages — TLP 700 and full page headings — TLP 350 defg

14

White 255, 255, 255 FFFFFF A/V source labels, start page labels, Power Down and Cancel buttons — TLP 700 and TLP 350

Figures 29, 30

Dark blue 13, 13, 60 0D0D3C Volume on status bar — TLP 700 af

Dim gray 105, 105, 105 696969Buttons (selected, except as noted) — TLP 700 and TLP 350 e

Light blue 155, 213, 250 9BD5FA Text on bottom of start page — TLP 700 i

12

White 255, 255, 255 FFFFFFStatus bar buttons, labels near buttons and A/V sources — TLP 700 and text below power button on start page, Confirmation page buttons — TLP 350

adf

Light blue 155, 213, 250 9BD5FA Text on bottom of start page — TLP 350 Figure 28

Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 350 Figure 31

Maroon 128, 0, 0 800000 System Off button (selected) on status bar — TLP 700 fExtron GUI Configurator

36 White 255, 255, 255 FFFFFF Power on symbol — TLP 700 and TLP 350 i

24

Dark blue 13, 13, 60 0D0D3CButton symbols and numbers (not selected) — TLP 700 and TLP 350 h

White 255, 255, 255 FFFFFF Button symbols and numbers (not selected) — TLP 700 and TLP 350 aceh

Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 700 and TLP 350 iNOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Power Theme 23

Page 28: 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

Power Template Layouts

TLP 700

Figure 22. Dual Display main page: Display 1, DVD selected, and DVD pop-up displayed in the dynamic area

Figure 23. Main page, Doc Cam selected, Doc Cam pop-up displayed in the dynamic area, and Audio Mute selected

Extron TouchLink Design Themes • Power Theme24

Page 29: 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

Figure 24. Audio Control page

Figure 25. Confirmation page

Extron TouchLink Design Themes • Power Theme 25

Page 30: 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

Figure 26. DVD full page, Title selected

Figure 27. Preset Selection page

Extron TouchLink Design Themes • Power Theme26

Page 31: 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

TLP 350

Figure 28. Start page Figure 29. PC page

Figure 30. DVD page Figure 31. DVD page, play selected

Extron TouchLink Design Themes • Power Theme 27

Page 32: 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

Extron TouchLink Design Themes • Power Theme28

Page 33: 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

Speed Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

a

b

c

d

Elements

speed_bkgd.pngBackground for main pages with header — TLP 700

abiFigure 33

bkgd_speed4.pngMaster main page with footer bar — TLP 700

speed_bkgd_nohead.pngBackground page for full size pages — TLP 700 g

speed_bkgd_320px.png Background for main page — TLP 350d

Figures 38, 39

speed_panel_leftside.pngLeft side panel, a right side panel is in the resource library — TLP 700

Not shown

speed_header.pngHeader bar for main pages A/V sources — TLP 700

abbkgd_footer.png Status bar on the main page — TLP 700

Volume_ON_horizontal.jpgVolume bar on main page — TLP 700

Volume_OFF_horizontal.jpg

preset01.pngPreset Selection button (not selected) — TLP 700

Figure 37

preset01_sel.png Preset Selection button (selected) — TLP 700

laptop_trans_80px.png A/V source button icon — TLP 700 ab

Background Colors

63, 87, 130 3F5782Fill: Full page background — TLP 700

and TLP 350

e21, 42, 79

255, 255, 255

152A4F

FFFFFF

Fill: Rectangle layer 1 over full page background — TLP 700

Border: White

19, 38, 71

44, 63, 96

132647

2C3F60

Fill: Rectangle layer 2 over layer 1 — TLP 700

Border: f

Extron TouchLink Design Themes • Speed Theme 29

Page 34: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

e

f

g

h

i

Background Colors (Continued)

10, 29, 69

37, 68, 125

0A1D45

25447D

Fill: Rectangle layer 1 over Background start page — TLP 700

Border: f

2, 17, 66 021142Fill: Label fill, such as Audio Control,

Doc Cam, DVD, and VC Controls — TLP 700

ghi

Button Colors

0, 194, 194 00C2C2Fill: Dual display and window display

pages tabs (selected) — TLP 700a

Figure 35169, 169, 169 A9A9A9

Fill: Dual display and window display pages tabs (not selected) — TLP 700

7, 22, 70 071646Fill: Combined and Individual buttons

on status bar of divisible room main page — TLP 700

Not shown

29, 204, 73 1DCC49Fill: Audio Control volume level bar —

TLP 700 g

65, 105, 225 4169E1Fill: A/V source button background (not

selected) — TLP 700 abi

18, 128, 18

0, 0, 0

128012

000000

Fill: Power Down button (not selected) — TLP 700 and TLP 350

Border: eFigure 40222, 27, 27

0, 0, 0

DE1B1B

000000

Fill: Cancel button (not selected) — TLP 700 and TLP 350

Border:

211, 211, 211

169, 169, 169

D3D3D3

A9A9A9

Fill: Button (not selected) — TLP 700 and TLP 350

Border: bdg

105, 105, 105

169, 169, 169

696969

A9A9A9

Fill: Button (not selected) — TLP 700 and TLP 350

Border: abi

0, 255, 255

0, 128, 128

00FFFF

008080

Fill: Buttons (selected, except as noted) — TLP 700 and TLP 350

Border:

135, 206, 250

135, 206, 235

87CEFA

87CEEB

Fill: Power on button (not selected) — TLP 700 and TLP 350

Border: f

178, 34, 34

192, 192, 192

B22222 C0C0C0

Fill: System Off button (not selected) — TLP 700

Border:

abFigure 33

220, 20, 60 DC143CFill: System Off button (selected) —

TLP 700 Border: Same as fill

i

49, 53, 58 255, 255, 255

31353A

FFFFFF

Fill: Full Screen Video and Back buttons — TLP 700

Border: Whitegi

40, 86, 128 192, 192, 192

285680

C0C0C0

Fill: Freeze button (not selected) — TLP 700

Border: h

Extron TouchLink Design Themes • Speed Theme30

Page 35: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

Button Colors (Continued)

0, 128, 0

192,192,192

008000

C0C0C0

Fill: VC Controls button (not selected and selected) — TLP 700

Border:

i255, 255, 0

192,192,192

FFFF00

C0C0C0

Fill: VC Controls button (not selected and selected) — TLP 700

Border:

0, 0, 255

192,192,192

0000FF

C0C0C0

Fill: VC Controls button (not selected and selected) — TLP 700

Border:

FontsFont Size

Color RGB Code Hex Code

Text for: For (an) Example,

See...

Arial Bold

36

White 255, 255, 255 FFFFFF

Logo banner — TLP 700 f20 Logo banner — TLP 350 Not shown

16 Display and Window tabs, A/V Sources label, pop-up page headings, text on pop-up pages — TLP 700 abdi

14

Light blue 155, 213, 250 9BD5FA Text on start page — TLP 700 f

Black 0, 0, 0 000000Combined and Individual (selected and not selected) on divisible room start page — TLP 700

Not shown

White 255, 255, 255 FFFFFFLabels above or on buttons, A/V Sources labels, below power on button on start page — TLP 700 cf

Dark blue 13, 13, 60 0D0D3C Buttons and Volume on status bar — TLP 700 abCrimson 128, 0, 0 800000 System Off button (selected) — TLP 700

iDark green 0, 100, 00 006400 Call, Phone Book buttons (not selected) — TLP 700

Red 255, 0, 0 FF0000 End Call button (not selected) — TLP 700

Dim gray 105, 105, 105 696969 Buttons (selected, except as noted) — TLP 700 b13 White 255, 255, 255 FFFFFF Button labels (not selected) — TLP 700 af

12

White 255, 255, 255 FFFFFF Text on pages such as Aux — TLP 350 Figure 38

Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 350 Figure 41

Light blue 155, 213, 250 9BD5FA Text on start page — TLP 350 Not shown

10 Dark blue 13, 13, 60 0D0D3CText above Combined button on status bar for divisible room — TLP 700

Not shown

Extron GUI Configurator Font

48 Black 0, 0, 0 000000 Power on symbol on Start page — TLP 700 f36 Black 0, 0, 0 000000 Power on symbol on Start page — TLP 350 Not shown

24

Dark blue 13, 13, 60 0D0D3CButton symbols and numbers (not selected) — TLP 700 and TLP 350 bdf

White 255, 255, 255 FFFFFFButton symbols and numbers (not selected) — TLP 700 and TLP 350 ci

Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 700 and TLP 350 hNOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Speed Theme 31

Page 36: 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

Speed Template Layouts

TLP 700

Figure 32. Master Page

Figure 33. Main Page, DVD Selected and DVD Popup Displayed

Extron TouchLink Design Themes • Speed Theme32

Page 37: 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

Figure 34. DVD Full Page

Figure 35. Dual Display main page: Display 1, Laptop selected, and Laptop pop-up displayed in the dynamic area

Extron TouchLink Design Themes • Speed Theme 33

Page 38: 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

Figure 36. Audio Control page

Figure 37. Preset Selection page

Extron TouchLink Design Themes • Speed Theme34

Page 39: 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

TLP 350

Figure 38. Auxiliary page Figure 39. Doc Cam page

Figure 40. Confirmation page Figure 41. DVD page, stop selected

Extron TouchLink Design Themes • Speed Theme 35

Page 40: 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

Extron TouchLink Design Themes • Speed Theme36

Page 41: 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

University Theme

Elements

Swatch File Name Use For (an) Example,

See...

a

b

c

d

Elements

bkgd_nohead.jpgBackground for main and Audio Control pages — TLP 700

abeFigure 46

Start_blgd.jpgBackground for start, starting up, confirmation, and shutting down pages — TLP 700

d

panel_center.png Background for pop-up pages — TLP 700ae

Figures 42, 44

panel.png_2Left side panel, a right side panel is in the Resource Library — TLP 700

Not shown

footer.png Status bar on main page — TLP 700ae

Figures 42, 44

jet-volume_nsel.pngVolume bar on main page — TLP 700

jet-volume_sel.png

vortex_jet_nsel.pngButton (not selected) — TLP 700 and TLP 350

abFigure 46

Start_Button_nsel.png_1Start button (not selected) — TLP 700 and TLP 350

c Figures 43, 48

University_120_55_sel.jpgStart button (selected) — TLP 700 and TLP 350

Figure 43, 48

transport_sel png Buttons (selected) — TLP 700 and TLP 350 beFigure 45

University_85_drk.png

VC Control button (not selected) — TLP 700

e

University_85_grn.png

University_85_orng.png

University_85_sel.png VC Control button (selected) — TLP 700

Extron TouchLink Design Themes • University Theme 37

Page 42: 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

Swatch File Name Use For (an) Example,

See...

e Elements (Continued)

University_Trnsprt_grn.png

Power Down button (not selected) — TLP 700 and TLP 350 d

University_Trnsprt_red.pngCancel button (not selected) — TLP 700 and TLP 350

d Figure 45

systemoff_nsel.jpg System Off button (not selected) — TLP 700 abeFigure 44

Back.pngBack and Full Screen Video buttons — TLP 700

bFigures 44, 46

FontsFont Size

Color RGB Code Hex Code

Text for: For (an) Example,

See...

Arial Bold

36 White 255, 255, 255 FFFFFF Logo banner — TLP 700 c

20 White 255, 255, 255 FFFFFFFull page heading, pop-up page heading, and text on pages such as starting up — TLP 700 and Logo banner for TLP 350.

abd Figure 48

16 Blue 134, 247, 254 86F7FE Dual display and window tabs — TLP 700 Figure 44

14

White 255, 255, 255 FFFFFFButtons on confirmation page and page names, such as DVD, text on pages, labels near buttons — TLP 700 and text on start page — TLP 350

abd

Amber 255, 195, 0 FFC300 Label near buttons and Freeze button — TLP 700 Figure 42

Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350

abeBlack 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350

12White 255, 255, 255 FFFFFF Status bar buttons (not selected) — TLP 700

Black 0, 0, 0 000000 Status bar buttons (selected) — TLP 700

11

Blue 10, 170, 240 0AAAF0 Buttons (not selected), VC Controls — TLP 700

eGreen 0, 255, 0 00FF00 Call and Phone Book buttons (not selected) — TLP 700

Red 255, 0, 0 FF0000 End Call (not selected) — TLP 700

Black 0, 0, 0 000000 VC Controls center buttons (selected) — TLP 700

Extron GUI Configurator

48White 255, 255, 255 FFFFFF Power on button (not selected) — TLP 700 cBlack 0, 0, 0 000000 Power on button (selected) — TLP 700 Not shown

38White 255, 255, 255 FFFFFF Power on button (not selected) — TLP 350 Figure 48

Black 0, 0, 0 000000 Power on button (selected) — TLP 350 Not shown

18 Amber 255, 195, 0 FFC300 Volume icons — TLP 700 Figures 42, 44

24Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350 Figure 42

Black 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350 cNOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • University Theme38

Page 43: 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

University Template Layouts

TLP 700

Figure 42. Main page, Tuner selected, and Tuner pop-up displayed in the dynamic area

Figure 43. Start page, divisible room, Combined selected

Extron TouchLink Design Themes • University Theme 39

Page 44: 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

Figure 44. Dual Display main page: Display 1, VCR selected, and VCR pop-up displayed in the dynamic area

Figure 45. Confirmation page, Power Down selected

Extron TouchLink Design Themes • University Theme40

Page 45: 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

Figure 46. Audio Control page, Mic down arrow selected

Figure 47. Shutting down page

Extron TouchLink Design Themes • University Theme 41

Page 46: 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

TLP 350

Figure 48. Start page Figure 49. Shutting Down page

Figure 50. DVD page Figure 51. DVD page, Video selected

Extron TouchLink Design Themes • University Theme42

Page 47: 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

University ColorsThe University Resources Kit provides graphic elements in a variety of colors. The following tables show the options available in each color category.

BlueOption 1 Option 2 Option 3 Option 4

Panel Center

Start Background

Start Button

Transport Button

GrayOption 1 Option 2 Option 3

Panel Center

Start Background

Start Button

Transport Button

GreenOption 1 Option 2 Option 3

Panel Center

Start Background

Start Button

Transport Button

Extron TouchLink Design Themes • University Theme 43

Page 48: 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

OrangeOption 1 Option 2 Option 3

Panel Center

Start Background

Start Button

Transport Button

RedOption 1 Option 2 Option 3 Option 4 Option 5

Panel Center

Start Background

Start Button

Transport Button

TanOption 1 Option 2 Option 3 Option 4

Panel Center

Start Background

Start Button

Transport Button

Extron TouchLink Design Themes • University Theme44

Page 49: 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

VioletOption 1 Option 2 Option 3

Panel Center

Start Background

Start Button

Transport Button

YellowOption 1 Option 2 Option 3 Option 4

Panel Center

Start Background

Start Button

Transport Button

Black, Gold, and White

Black WhiteGold

Option 1 Option 2

Panel Center

Start Background

Start Button

Transport Button

Selected State OptionsBeige Blue Green Violet Yellow

Extron TouchLink Design Themes • University Theme 45

Page 50: 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

Extron TouchLink Design Themes • University Theme46

Page 51: 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

Vortex Black Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

a

b

c

d

Elements

vortex_black_bkgd_nofooter.png

Background for Audio Controls, VCR, and DVD pages — TLP 700

cdFigure 53

vortex_black_dual_bkgd.png

Background for dual display and window display main page — TLP 700

Figure 54

vortex-black-start_bkgd.png

Background for starting up, confirmation, and shutting down pages — TLP 700 af i

vortex_black_bkgd.png Background for master page — TLP 700 bFigure 52

vortex_black_panel_leftside.png

Left side panel, a similar right side panel is included in the Resource Library — TLP 700

Not shown

vortex_black_footer.png Status bar on the main page — TLP 700 bFigure 52

vortex_black_room_btn_nsel.png

Background for dual display and window display, not selected — TLP 700

Figure 54

vortex_black_room_btn_sel.png

Background for dual, and window display, selected — TLP 700

Figure 54

vortex_black_vol_nsel.pngVolume bar on main page — TLP 700 c

Figure 52vortex_vol_sel.png

vortex-black_trns_nsel.png

Button (not selected) — TLP 700 and TLP 350

dgFigure 52

vortex_black_scrl_nsel.pngButton (not selected) — TLP 700 and TLP 350

vortex_black_trns_sel.pngButtons (selected, except as noted) — TLP 700 and TLP 350

Figure 52

preset07_sel.pngPreset Selection button (not selected) — TLP 700 e

Figure 57preset10_sel.png Preset Selection button (selected) — TLP 700

Extron TouchLink Design Themes • Vortex Black Theme 47

Page 52: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

e

f

g

h

i

Elements (continued)

Black_start_button.pngPower on button (not selected) — TLP 700 and TLP 350

Not shown

Black_Start_Button_sel.png

Power on button (selected) — TLP 700 and TLP 350 i

vortex_trnsprt_grn.png Power Down button — TLP 700 and TLP 350 fFigure 60

vortex_trnsprt_red.png Cancel button — TLP 700 and TLP 350f

Figures 60, 61

vortex_black_input_160_nsel.jpg

Back and Full Screen Video buttons (not selected) — TLP 700 de

vortex_black_input_160_sel.jpg

Back and Full Screen Video buttons (selected) — TLP 700

Not shown

vortex_fav_blu.png

VC Control button (not selected) — TLP 700 gvortex_fav_grn.png

vortex_fav_orng.png

vortex_fav_vortx_blue_sel.png

VC Control button (selected) — TLP 700 Not shown

vortex_footer_red.png System Off button on main pageb

Figures 52, 54

Background Colors

77, 77, 77 4D4D4DFill: Background for full pages —

TLP 700 and TLP 350 adfh

30, 30, 30

128, 128, 128

1E1E1E

808080

Fill: Rectangle layer 1 and around Audio Control buttons — TLP 700 and TLP 350

Border:

acfFigure 55

27, 27, 2752, 52, 52

1B1B1B 343434

Fill: Rectangular layer 2 fill — TLP 700Border:

afFigure 55

0, 0, 0 000000Fill: Background for page labels —

TLP 700 cegh

Button Colors

16, 16, 16 101010Fill: More button — TLP 350Border: Same as fill

Figure 59

Extron TouchLink Design Themes • Vortex Black Theme48

Page 53: 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

Fonts

Font Size

Color RGB Code Hex Code

Text for: For (an) Example, See...

Arial Bold

36

White 255, 255, 255 FFFFFF

Logo banner — TLP 700 and TLP 350 i

20 Starting up, shutting down, confirmation pages — TLP 700

Figure 55

16 Dual display and Window tabs — TLP 700 Figure 54

14

White 255, 255, 255 FFFFFFPage names, such as Audio Control pop-up pages with text only such as Laptop — TLP 700 ceg

Dark blue 2, 44, 84 022C54Buttons (selected, except as noted) — TLP 700 and TLP 350

eFigure 52

12 White 255, 255, 255 FFFFFFLabels below A/V sources and Volume in status bar — TLP 700 b

11

Dark blue 2, 44, 84 022C54System Off, Audio Mute, and Audio Control (selected) in status bar — TLP 700 and TLP 350

Figure 52

White 255, 255, 255 FFFFFF Buttons on status bar — TLP 700 and TLP 350 bFigure 54

Extron GUI Configurator

48 White 255, 255, 255 FFFFFF

Power on button (not selected) — TLP 700 and TLP 350

Not shown

Dark blue 2, 44, 84 022C54 Power on button (selected) — TLP 700 and TLP 350 i

24

White 255, 255, 255 FFFFFF Buttons (not selected) — TLP 700 and TLP 350 dg

Dark blue 2, 44, 84 022C54 Buttons (selected) — TLP 700 and TLP 350 eFigure 52

18 White 255, 255, 255 FFFFFF Volume icons — TLP 7000 bFigure 54

NOTE: See the Extron GUI Configurator Font section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Vortex Black Theme 49

Page 54: 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

Vortex Black Template Layouts

TLP 700

Figure 52. Main page, Doc Cam selected, and Doc Cam pop-up displayed in the dynamic area

Figure 53. Audio Control page

Extron TouchLink Design Themes • Vortex Black Theme50

Page 55: 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

Figure 54. Dual Display main page: Display 1, an A/V source has not been selected

Figure 55. Starting up page

Extron TouchLink Design Themes • Vortex Black Theme 51

Page 56: 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

Figure 56. DVD full page

Figure 57. Preset Selection page

Extron TouchLink Design Themes • Vortex Black Theme52

Page 57: 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

TLP 350

Figure 58. Auxiliary page Figure 59. Doc Cam page

Figure 60. Confirmation page Figure 61. Confirmation page, Power Down selected

Extron TouchLink Design Themes • Vortex Black Theme 53

Page 58: 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

Extron TouchLink Design Themes • Vortex Black Theme54

Page 59: 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

Vortex Blue Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use RefNo.

a

b

c

d

Elements

vortex_blue_nofooter_bkgd.png

Background for Audio Control, DVD, and Preset Selections — TLP 700 cef

vortex_blue_start_bkgd.pngBackground for starting up, shutting down, and confirmation pages — TLP 700

Not shown

vortex-blue.pngBackground for single display main page — TLP 700

agFigure 66

vortex_blue_dual.pngBackground for dual display and multi window — TLP 700

Figure 64

vortex_blue_panel_leftside.png

Left side panel, a similar right side panel is included in the Resource Library — TLP 700

Not shown

vortex_blue_footer.png Status bar on the main page — TLP 700ag

Figures 64, 66

vortex_blue_start_nsel.pngBackground for the Power on button (not selected) — TLP 700 and TLP 350 b

vortex_blue_start_sel.pngBackground for the Power on button (selected) — TLP 700 and TLP 350

Figure 70

vortex_blue_room_nsel.pngSource bar, dual, and window display (not selected) — TLP 700

agFigures 64, 66

vortex_blue_room_sel.pngSource bar, dual, and window display (selected) — TLP 700

Vortex_Blue_Vol_NS.pngVolume bar on main page — TLP 700

Vortex_Blue_Vol_S.png

vortex_blue.png Audio Control buttons — TLP 700 c

vortex_blue_trns_nsel.png Buttons (not selected) — TLP 700 and TLP 350

ehvortex_blue_scrl_nsel.png Buttons (not selected) — TLP 700 and TLP 350

Extron TouchLink Design Themes • Vortex Blue Theme 55

Page 60: 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

Swatch RGB Code or File Name

Hex Code

Use RefNo.

e

f

g

h

i

Elements (Continued)

vortex_-blue_trns_sel.png Buttons (selected) — TLP 700 and TLP 350 eFigure 71

Start_Button_nsel.pngPower on button (not selected) — TLP 700 and TLP 350

Not shown

Start_Button_sel.pngPower on button (selected) — TLP 700 and TLP 350

Figure 70

vortex_blue_dvd_nsel.jpgDVD A/V source icon example from — TLP 700 and TLP 350 resource library ag

vortex_blue_laptop_sel.jpg Laptop A/V source icon — TLP 700 and TLP 350 a

vortex_trnsprt_grn.pngGreen Power Down button on Confirmation page — TLP 700 and TLP 350

ivortex_trnsprt_red.png

Red Cancel button on Confirmation page — TLP 700 and TLP 350

vortex_fav_blu.png

VC Control button (not selected) — TLP 700 gvortex_fav_grn.png

vortex_fav_orng.png

vortex_fav_vortx_blue_sel.png

VC Control button (not selected) — TLP 700Not

shown

vortex_footer_red.png System Off button on Master page — TLP 700g

Figures 64, 66

Background Colors

146, 175, 202 92AFCAFill: Background for full pages — TLP 700

and TLP 350

cdi28, 70, 108

255, 255, 255

1C466C

FFFFFF

Fill: Label background, and rectangle layer 1, and around Audio Control buttons — TLP 700 and TLP 350

Border: White (Audio Control only)

25, 63, 9750, 88, 122

193F6132587A

Fill: Rectangle layer 2 — TLP 700Border: d

Button Colors

28, 70, 108

255, 255, 255

1C466C

FFFFFF

Fill: Back button (not selected) — TLP 700 and TLP 350

Border: Whitec

126, 177, 222

192, 192, 192

7EB1DE C0C0C0

Fill: Buttons (not selected) — TLP 700 and TLP 350

Border: a

Extron TouchLink Design Themes • Vortex Blue Theme56

Page 61: 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

Fonts

Font Size

Color RGB Code Hex Code

Text for: For (an) Example, See...

Arial Bold

36

White 255, 255, 255 FFFFFF

Logo banner — TLP 700 Not shown

20 Text on starting up and shutting down pages — TLP 700 and logo banner — TLP 350

bFigure 70

16 Page names text only such as Auxiliary — TLP 350 c

14

White 255, 255, 255 FFFFFFSome buttons — TLP 700, Power Down and Cancel buttons (not selected) — TLP 700 and TLP 350

a

Dark green 0, 100, 0 006400 Power Down and Cancel buttons (selected) d

Blue 28, 70, 108 1C466CButtons (selected, except as noted) — TLP 700 and TLP 350, and text on pages such as Laptop — TLP 350

fFigure 68

Light blue 205, 220, 234 CDDCEAFreeze button (not selected) — TLP 700 and TLP 350

hFigure 71

12 White 255, 255, 255 FFFFFFLabels under A/V Source icons, labels beneath buttons, and buttons on status bar a

Extron GUI Configurator

36

White 255, 255, 255 FFFFFF

Power on symbol Figure 70

24 Button symbols and numbers (not selected) ceg

18 Volume icons ag

24 Blue 28, 70, 108 1C466CButton symbols and numbers (not selected and selected) aeh

NOTE: See the Extron GUI Configurator Font section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Vortex Blue Theme 57

Page 62: 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

Vortex Blue Template Layouts

TLP 700

Figure 62. Audio Control page

Figure 63. Confirmation page, Power Down selected

Extron TouchLink Design Themes • Vortex Blue Theme58

Page 63: 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

Figure 64. Dual Display main page: Display 1, Tuner selected, and Tuner pop-up displayed in the dynamic area

Figure 65. Shutting down page

Extron TouchLink Design Themes • Vortex Blue Theme 59

Page 64: 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

Figure 66. Main page, VC Controls selected, and Video Conference displayed in the dynamic area

Figure 67. Preset Selection page

Extron TouchLink Design Themes • Vortex Blue Theme60

Page 65: 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

TLP 350

Figure 68. Laptop page Figure 69. Confirmation page

Figure 70. Start page, power on selected

Figure 71. Doc Cam page, Auto selected

Extron TouchLink Design Themes • Vortex Blue Theme 61

Page 66: 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

Extron TouchLink Design Themes • Vortex Blue Theme62

Page 67: 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

Vortex Green Theme

Elements and Color Palette

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

a

b

c

d

Elements

vortex_grn_bkgd_nofooter.jpg

Background for full size pages, including main page — TLP 700

cde f

vortex_grn_panel_leftside.png

Left side panel, a similar right side panel is in the resource library — TLP 700

Not shown

vortex_grn_start_bkgd.png Background for start page — TLP 700 a

vortex_grn_dual.pngBackground for master page, dual, and multi window display — TLP 700

bvortex-grn_room_nsel.pngA/V Source background for main page, dual, and window display (not selected) — TLP 700

vortex_vol_sel.pngvortex_grn_room_sel.png

A/V Source background for main page, dual, and multi window display (selected) — TLP 700

vortex_grn_vol_nsel.pngVolume bar on main page — TLP 700 bf

Figure 73vortex_vol_sel.png

vortex_grn_footer.png Status bar on the main page — TLP 700 b

vortex_grn_start_nsel.pngPower on button (not selected) — TLP 700 and TLP 350 a

vortex_grn_input_nsel.jpgvortex-grn_trns_nsel.png

Buttons (not selected) — TLP 700 and TLP 350 (NOTE: vortex-grn_trns_nsel.png is a small version of vortex_grn_input_nsel.jpg)

cfFigure 73

vortex_trnsprt_grn_lite.jpg Tuner buttons — TLP 700 i

vortex_grn_input_sel.jpgvortex-grn_trns_sel.png

Buttons (selected) — TLP 700 and TLP 350 (NOTE: vortex-grn_trns_sel.png is a small version of vortex_grn_input_sel.jpg)

cfFigure 73

vortex-grn_scrl_nsel.pngFreeze button (not selected) — TLP 700 and TLP 350 f

Extron TouchLink Design Themes • Vortex Green Theme 63

Page 68: 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

Swatch RGB Code or File Name

Hex Code

Use For (an) Example,

See...

e

f

g

h

i

Elements (Continued)

preset04.jpgPreset Selection button (not selected) — TLP 700

Figure 76preset09_sel.jpg Preset Selection button (selected) — TLP 700

Vortex_grn_blueray.jpg Blu-ray A/V source icon example — TLP 700bf

Figure 73vortex_grn_cam_sel.jpg

Camera A/V source icon selected example — TLP 700

vortex_trnsprt_grn.pngGreen Power Down button on Confirmation page — TLP 700 and TLP 350

dvortex_trnsprt_red.png

Red Cancel button on Confirmation page — TLP 700 and TLP 350

vortex_fav_blu.png VC Control button (not selected) — TLP 700

gvortex_fav_grn.png VC Control button (not selected) — TLP 700

vortex_fav_orng.png VC Control button (not selected) — TLP 700

vortex_fav_vortx_blue_sel.png

VC Control button (selected) — TLP 700Not

shown

vortex_footer_red.pngSystem Off button on Master page — TLP 700 f

Background Colors

100, 136, 141 64888DFill: Background fill, full pages —

TLP 700 and TLP 350bcfg

28, 45, 48 1C2D30 Fill: Label background fill — TLP 700Border: None dh

28, 45, 48

255, 255, 255

1C2D30

FFFFFF

Fill: Rectangle layer 1 and around Audio Control buttons — TLP 700 and TLP 350

Border: White

c

25, 41, 4350, 66, 68

19292B324244

Fill: Rectangular layer 2 — TLP 700Border: h

Extron TouchLink Design Themes • Vortex Green Theme64

Page 69: 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

Fonts

Font Size

Color RGB Code Hex Code

Text for: For (an)Example,

See...

Arial Bold

36 Dark green 28, 45, 48 1C2D30 Logo banner — TLP 700 a

20 White 255, 255, 255 FFFFFFConfirmation, starting up, and shutting down text — TLP700 and Logo banner — TLP 300 h

16 White 255, 255, 255 FFFFFF Dual Display 1 and 2 and Window 1 and 2 tabs b

14

White 255, 255, 255 FFFFFF Buttons (not selected, except as noted) and labels befFigure 72

Black 0, 0, 0 000000 Freeze button fFigure 78

Dark green 28, 45, 48 1C2D30 Buttons (selected, except as noted) fi

12 White 255, 255, 255 FFFFFF Status bar buttonsbf

Figure 7311 White 255, 255, 255 FFFFFF A/V icons, status bar text

Extron GUI Configurator

48White 255, 255, 255 FFFFFF Power on symbol (not selected) a

Dark green 28, 45, 48 1C2D30 Power on symbol (selected) Figure 81

28 White 255, 255, 255 FFFFFF Button symbols ab

18 White 255, 255, 255 FFFFFF Volume icons on status bar bf

NOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.

Extron TouchLink Design Themes • Vortex Green Theme 65

Page 70: 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

Vortex Green Template Layouts

TLP 700

Figure 72. Audio Control page

Figure 73. Main page, Doc Cam selected, Doc Cam pop-up displayed in the dynamic area, and Normal button selected

Extron TouchLink Design Themes • Vortex Green Theme66

Page 71: 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

Figure 74. VCR full page

Figure 75. Shutting down page

Extron TouchLink Design Themes • Vortex Green Theme 67

Page 72: 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

Figure 76. Preset Selection page

Figure 77. Confirmation page

Extron TouchLink Design Themes • Vortex Green Theme68

Page 73: 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

TLP 350

Figure 78. Don Cam page Figure 79. Laptop page

Figure 80. Start page Figure 81. Start page, power on selected

Extron TouchLink Design Themes • Vortex Green Theme 69

Page 74: 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

Extron TouchLink Design Themes • Vortex Green Theme70

Page 75: 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

Extron GUI Configurator Fonts

The following is a complete list of the Extron GUI Configurator fonts and the keyboard letter or character equivalent.

Sym

bo

l

Ch

ara

cters

Desc

rip

tio

n

Sym

bo

l

Ch

ara

cters

Desc

rip

tio

n

Sym

bo

l

Ch

ara

cters

Desc

rip

tio

n

Sym

bo

l

Ch

ara

cters

Desc

rip

tio

n

Sym

bo

l

Ch

ara

cters

Desc

rip

tio

n

Nu

mb

ers

a a Rewind l l Power w w Arrow Left % % Aux - - Minus 1 1

b b Fast Forward m m Audio x x Arrow Up & & PC : : Video Conf 2 2

c c Previous n n Close y y Arrow Down * * Star ; ; Audio 3 3

d d Next o o Open z z Return ( ( Reject < < Back 4 4

e e Step Back p pVolume Down F F Security Cam ) ) OK > > Play 5 5

f f Step Forward q q Volume Up G G Volume Off } } Doc Cam ? ? Record 6 6

g g Eject r r Jump to Start U U Microphone ^ ^ Lectern , ,Tuner (comma) 7 7

h h Scroll Up s s Jump to End ` `Server(back quote) + + Plus . .

Audio Conf (period) 8 8

i i Scroll Down t t Pause ! ! Laptop | | Step ‘/ / Blu-ray 9 9

j j Scroll Left u u Wall Plate @ @ Stop ] ] DVD VCR u ‘VCR (single quote) 0 0

k k Scroll Right v v Arrow Right # # Pound $ $ DVD

NOTE: Use only lowercase letters. Three exceptions are:• Uppercase F (F, Security Cam)• Uppercase G (G, Volume Off)• Uppercase U (U, Microphone)

Extron TouchLink Design Themes • Extron GUI Configurator Font 71

Page 76: 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

Notes:

Extron TouchLink Design Themes • Notes72

Page 77: 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

Extron TouchLink Design Themes 73

Page 78: 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

Extron USA - WestHeadquarters

+800.633.9876Inside USA/Canada Only

+1.714.491.1500+1.714.491.1517 FAX

Extron USA - East

+800.633.9876Inside USA/Canada Only

+1.919.863.1794+1.919.863.1797 FAX

Extron Europe

+800.3987.6673Inside Europe Only

+31.33.453.4040+31.33.453.4050 FAX

Extron Asia

+800.7339.8766Inside Asia Only

+65.6383.4400+65.6383.4664 FAX

Extron Japan

+81.3.3511.7655+81.3.3511.7656 FAX

Extron China

+400.883.1568Inside China Only

+86.21.3760.1568+86.21.3760.1566 FAX

Extron Middle East

+971.4.2991800+971.4.2991880 FAX

© 2011 Extron Electronics. All rights reserved. www.extron.com