Manual

ManualsBrandsExtron Electronics ManualsComputer AccessoriesExtron TouchLink

Reference Guide

Extron® TouchLink

™

Design Themes

Control Systems

68-1951-01 Rev. A

01 11

Summary of content (78 pages)

PAGE 1
Reference Guide Control Systems Extron TouchLink™ Design Themes ® 68-1951-01 Rev.
PAGE 3
Contents Introduction.......................................................... 1 University Theme.............................................. 37 Overview................................................................1 Resource Kits .........................................................2 Icons Images........................................................ 3 Templates ..............................................................3 Using This Guide....................................................
PAGE 4
Extron TouchLink Design Themes • Contents iv
PAGE 5
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.
PAGE 6
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.
PAGE 7
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.
PAGE 8
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.
PAGE 9
Flash Theme Elements and Color Palette Swatch a RGB Code or File Name Hex Code Use For (an) Example, See... Elements flash_bkgd_dual.png Background for dual display and window display main pages — TLP 700 flash_bkgd_window1.png flash_bfgd_display1.png Background for window main page. There is a similar dual display background — TLP 700 flash_background.png Background single, divisible room, and Video Conference main pages — TLP 700 Figure 5 flash_video.
PAGE 10
Swatch e f g RGB Code or File Name Hex Code Use For (an) Example, See... Elements (Continued) preset01_sel.png Preset Selection button (selected) — TLP 700 Preset01.png Preset Selection button (not selected) — TLP 700 flash_start_nsel.png Power on button (not selected) — TLP 700 and TLP 350 flash_input_nsel.png A/V source button (not selected), use with A/V icons in Resources Library d df Figure 6 i bgh j flash_laptop_nsel.
PAGE 11
Swatch j RGB Code or File Name Hex Code Use For (an) Example, See...
PAGE 12
Fonts Font Size Color RGB Code Hex Code Text for: For (an) Example, See...
PAGE 13
Flash Template Layouts TLP 700 Figure 2. Audio Control page Figure 3.
PAGE 14
10 Figure 4. DVD full page, Back selected Figure 5.
PAGE 15
Figure 6. Preset Selection page Figure 7.
PAGE 16
TLP 350 Figure 8. Start page Figure 10. Auxiliary page 12 Extron TouchLink Design Themes • Flash Theme Figure 9. Start page, power on selected Figure 11.
PAGE 17
Jet Theme Elements and Color Palette Swatch a b c RGB Code or File Name Hex Code Use Elements d Jet_dual_bkgd.jpg Background for dual display and window display main pages — TLP 700 Figure 13 jet_bkgd.jpg Background for single, divisible room, and video conference main pages — TLP 700 Figure 15 jet_bkgr_nohead.png Background for Audio Control, DVD, Preset Selection, and VCR full pages jet_bkgd.jpg Master page — TLP 700 jet_start_bkgd.
PAGE 18
Swatch e f RGB Code or File Name Hex Code Use For (an) Example See... Elements (Continued) jet_nsel.png Button (not selected) — TLP 700 and TLP 350 jet_sel.png Button (selected) — TLP 700 and TLP 350 preset05.png Preset Selection button (not selected) — TLP 700 preset09.png Preset Selection button (selected) — TLP 700 cef Figure 13 ch Figure 17 jet_85_grn.png g f VC Control buttons (not selected) — TLP 700 Figure 15 jet_85_sel.
PAGE 19
Fonts Font Size Color RGB Code Hex Code Text for: Amber 255, 195, 0 FFC300 Logo banner — TLP 700 White 255, 255, 255 FFFFFF Headings such as AUX — TLP 700 and logo banner — TLP 350 Amber 255, 195, 0 FFC300 Text on pop-up pages — TLP 700 White 255, 255, 255 FFFFFF Headings, such as AUX — TLP 350 Amber 255, 195, 0 FFC300 Headings, display tab, and window tab (not selected) — TLP 700 Black 0, 0, 0 000000 Headings, display tab, and window tab (selected)— TLP 700 Amber 255, 195, 0
PAGE 20
Jet Template Layouts TLP 700 16 Figure 12. Start page, divisible room, Combined selected Figure 13.
PAGE 21
Figure 14. Confirmation page Figure 15.
PAGE 22
18 Figure 16. Audio Control page Figure 17.
PAGE 23
TLP 350 Figure 18. Start page Figure 19. Laptop page Figure 20. DVD page Figure 21.
PAGE 24
20 Extron TouchLink Design Themes • Jet Theme
PAGE 25
Power Theme Elements and Color Palette Swatch a b c d RGB Code or File Name Hex Code Use For (an) Example, See... Elements power_bkgd_nohead.png Background for main page — TLP 700 Power_guic_bkgd.png Master page background — TLP 700 Power_guic_room1_sel.jpg Background for dual display and window display main pages — TLP 700 Figure 22 pwr_bkgd-320240.png Master page and main page background — TLP 350 Figures 29, 30, 31 start_bkgd.
PAGE 26
Swatch e RGB Code or File Name Hex Code Use For (an) Example, See...
PAGE 27
Swatch RGB Code or File Name Hex Code Use 255, 255, 0 FFFF00 Fill: 192, 192 ,192 C0C0C0 Border: 0, 0, 255 0000FF Fill: 192, 192 ,192 C0C0C0 Border: 36, 43, 63 242B3F Fill: 0, 128, 128 008080 Border: 36, 43, 63 242B3F Fill: 189, 0, 0 BD0000 Border: For (an) Example, See...
PAGE 28
Power Template Layouts TLP 700 24 Figure 22. Dual Display main page: Display 1, DVD selected, and DVD pop-up displayed in the dynamic area Figure 23.
PAGE 29
Figure 24. Audio Control page Figure 25.
PAGE 30
26 Figure 26. DVD full page, Title selected Figure 27.
PAGE 31
TLP 350 Figure 28. Start page Figure 29. PC page Figure 30. DVD page Figure 31.
PAGE 32
28 Extron TouchLink Design Themes • Power Theme
PAGE 33
Speed Theme Elements and Color Palette Swatch a b c RGB Code or File Name Hex Code For (an) Example, See... Elements speed_bkgd.png Background for main pages with header — TLP 700 bkgd_speed4.png Master main page with footer bar — TLP 700 speed_bkgd_nohead.png Background page for full size pages — TLP 700 g speed_bkgd_320px.png Background for main page — TLP 350 Figures 38, 39 speed_panel_leftside.png Left side panel, a right side panel is in the resource library — TLP 700 speed_header.
PAGE 34
Swatch e RGB Code or File Name Hex Code Use For (an) Example, See...
PAGE 35
Swatch RGB Code or File Name Hex Code Use For (an) Example, See...
PAGE 36
Speed Template Layouts TLP 700 32 Figure 32. Master Page Figure 33.
PAGE 37
Figure 34. DVD Full Page Figure 35.
PAGE 38
34 Figure 36. Audio Control page Figure 37.
PAGE 39
TLP 350 Figure 38. Auxiliary page Figure 39. Doc Cam page Figure 40. Confirmation page Figure 41.
PAGE 40
36 Extron TouchLink Design Themes • Speed Theme
PAGE 41
University Theme Elements Swatch a File Name Use bkgd_nohead.jpg Background for main and Audio Control pages — TLP 700 Start_blgd.jpg Background for start, starting up, confirmation, and shutting down pages — TLP 700 panel_center.png Background for pop-up pages — TLP 700 panel.png_2 Left side panel, a right side panel is in the Resource Library — TLP 700 footer.png Status bar on main page — TLP 700 Elements b jet-volume_nsel.
PAGE 42
Swatch e File Name Use For (an) Example, See... Elements (Continued) University_Trnsprt_grn. png Power Down button (not selected) — TLP 700 and TLP 350 University_Trnsprt_red.png Cancel button (not selected) — TLP 700 and TLP 350 systemoff_nsel.jpg System Off button (not selected) — TLP 700 Back.png Back and Full Screen Video buttons — TLP 700 d d Figure 45 abe Figure 44 b Figures 44, 46 Fonts Font Size Color RGB Code Hex Code Text for: For (an) Example, See...
PAGE 43
University Template Layouts TLP 700 Figure 42. Main page, Tuner selected, and Tuner pop-up displayed in the dynamic area Figure 43.
PAGE 44
40 Figure 44. Dual Display main page: Display 1, VCR selected, and VCR pop-up displayed in the dynamic area Figure 45.
PAGE 45
Figure 46. Audio Control page, Mic down arrow selected Figure 47.
PAGE 46
TLP 350 42 Figure 48. Start page Figure 49. Shutting Down page Figure 50. DVD page Figure 51.
PAGE 47
University Colors The University Resources Kit provides graphic elements in a variety of colors. The following tables show the options available in each color category.
PAGE 48
Orange Option 1 Option 2 Option 3 Panel Center Start Background Start Button Transport Button Red Option 1 Option 2 Option 3 Option 4 Option 5 Panel Center Start Background Start Button Transport Button Tan Option 1 Panel Center Start Background Start Button Transport Button 44 Extron TouchLink Design Themes • University Theme Option 2 Option 3 Option 4
PAGE 49
Violet Option 1 Option 2 Option 3 Panel Center Start Background Start Button Transport Button Yellow Option 1 Option 2 Option 3 Option 4 Panel Center Start Background Start Button Transport Button Black, Gold, and White Black White Gold Option 1 Option 2 Panel Center Start Background Start Button Transport Button Selected State Options Beige Blue Green Violet Yellow Extron TouchLink Design Themes • University Theme 45
PAGE 50
46 Extron TouchLink Design Themes • University Theme
PAGE 51
Vortex Black Theme Elements and Color Palette Swatch a b c RGB Code or File Name Hex Code For (an) Example, See... Elements cd vortex_black_bkgd_ nofooter.png Background for Audio Controls, VCR, and DVD pages — TLP 700 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.
PAGE 52
Swatch e f RGB Code or File Name Hex Code Use For (an) Example, See... Elements (continued) Black_start_button.png Power 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 vortex_trnsprt_red.png Cancel button — TLP 700 and TLP 350 Figures 60, 61 vortex_black_input_160_ nsel.
PAGE 53
Fonts Font Size Color RGB Code Hex Code Text for: For (an) Example, See...
PAGE 54
Vortex Black Template Layouts TLP 700 50 Figure 52. Main page, Doc Cam selected, and Doc Cam pop-up displayed in the dynamic area Figure 53.
PAGE 55
Figure 54. Dual Display main page: Display 1, an A/V source has not been selected Figure 55.
PAGE 56
52 Figure 56. DVD full page Figure 57.
PAGE 57
TLP 350 Figure 58. Auxiliary page Figure 59. Doc Cam page Figure 60. Confirmation page Figure 61.
PAGE 58
54 Extron TouchLink Design Themes • Vortex Black Theme
PAGE 59
Vortex Blue Theme Elements and Color Palette Swatch a RGB Code or File Name Hex Code d Ref No. Elements vortex_blue_nofooter_ bkgd.png Background for Audio Control, DVD, and Preset Selections — TLP 700 cef vortex_blue_start_bkgd.png Background for starting up, shutting down, and confirmation pages — TLP 700 Not shown vortex-blue.png Background for single display main page — TLP 700 Figure 66 vortex_blue_dual.
PAGE 60
Swatch e f g RGB Code or File Name Hex Code Use Ref No. Elements (Continued) e vortex_-blue_trns_sel.png Buttons (selected) — TLP 700 and TLP 350 Start_Button_nsel.png Power on button (not selected) — TLP 700 and TLP 350 Start_Button_sel.png Power on button (selected) — TLP 700 and TLP 350 vortex_blue_dvd_nsel.jpg DVD 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.
PAGE 61
Fonts Font Size Color RGB Code Hex Code Text for: For (an) Example, See...
PAGE 62
Vortex Blue Template Layouts TLP 700 58 Figure 62. Audio Control page Figure 63.
PAGE 63
Figure 64. Dual Display main page: Display 1, Tuner selected, and Tuner pop-up displayed in the dynamic area Figure 65.
PAGE 64
60 Figure 66. Main page, VC Controls selected, and Video Conference displayed in the dynamic area Figure 67.
PAGE 65
TLP 350 Figure 68. Laptop page Figure 69. Confirmation page Figure 70. Start page, power on selected Figure 71.
PAGE 66
62 Extron TouchLink Design Themes • Vortex Blue Theme
PAGE 67
Vortex Green Theme Elements and Color Palette Swatch a b c RGB Code or File Name Hex Code For (an) Example, See... Elements vortex_grn_bkgd_nofooter. jpg Background for full size pages, including main page — TLP 700 vortex_grn_panel_leftside. png Left side panel, a similar right side panel is in the resource library — TLP 700 vortex_grn_start_bkgd.png Background for start page — TLP 700 vortex_grn_dual.
PAGE 68
Swatch RGB Code or File Name Hex Code Use For (an) Example, See... Elements (Continued) e f g preset04.jpg Preset Selection button (not selected) — TLP 700 preset09_sel.jpg Preset Selection button (selected) — TLP 700 Vortex_grn_blueray.jpg Blu-ray A/V source icon example — TLP 700 vortex_grn_cam_sel.jpg Camera A/V source icon selected example — TLP 700 vortex_trnsprt_grn.png Green Power Down button on Confirmation page — TLP 700 and TLP 350 vortex_trnsprt_red.
PAGE 69
Fonts Font Size Color RGB Code Hex Code Text for: For (an) Example, See...
PAGE 70
Vortex Green Template Layouts TLP 700 66 Figure 72. Audio Control page Figure 73.
PAGE 71
Figure 74. VCR full page Figure 75.
PAGE 72
68 Figure 76. Preset Selection page Figure 77.
PAGE 73
TLP 350 Figure 78. Don Cam page Figure 79. Laptop page Figure 80. Start page Figure 81.
PAGE 74
70 Extron TouchLink Design Themes • Vortex Green Theme
PAGE 75
Extron GUI Configurator Fonts Description Symbol Characters Description Symbol Characters Description Symbol Characters Description Symbol Characters a Rewind l l Power w w Arrow Left % % Aux - - Minus 1 1 b c d b Fast Forward m Audio Arrow Up PC Video Conf y Arrow Down * Star ; Audio d Next o Open z Return ( Reject < Back 2 3 4 2 Close : ; < : n & * ( & Previous x y z x c m n o F F Security Cam ) ) OK > > Play 5 5 G G Volume Off
PAGE 76
Notes: 72 Extron TouchLink Design Themes • Notes
PAGE 77
Extron TouchLink Design Themes 73
PAGE 78
Extron USA - West Extron USA - East Extron Europe Extron Asia Extron Japan Extron China Extron Middle East +800.633.9876 Inside USA/Canada Only +800.633.9876 Inside USA/Canada Only +800.3987.6673 Inside Europe Only +800.7339.8766 Inside Asia Only +81.3.3511.7655 +81.3.3511.7656 FAX +400.883.1568 Inside China Only +971.4.2991800 +971.4.2991880 FAX +1.714.491.1500 +1.714.491.1517 FAX +1.919.863.1794 +1.919.863.1797 FAX +31.33.453.4040 +31.33.453.4050 FAX +65.6383.4400 +65.6383.