Crestron VisionTools Pro-e - User Manual

Crestron VT Pro-e Design Notes
Design Notes - DOC. 5850 DOs and DON’Ts for Designing Web Pages (With VisionTools™ Pro-e) •• 1
DOs and DON’Ts for Designing Web
Pages (With VisionTools™ Pro-e)
Introduction
Just as special consideration must be made when designing pages for different touchpanel models, web page
development using Crestron e-control™ with VisionTools™ Pro-e (VT Pro-e) requires forethought. Particular
preparation is due to the special circumstances and behavioral differences in both design and runtime that exist
between touchpanel and browser projects. Of course, if a designer has no intentions of converting to or creating
web pages with VT Pro-e, there is no impact. However, if there is a potential that existing touchpanel pages may
be converted to a web page or an experienced designer is creating their first browser project, the information in
this document is priceless. Keeping in mind the points made in this document, a designer can save valuable time
by avoiding the pitfalls of familiarizing oneself with application improvements and fully take advantage of all the
beneficial web page development features offered by VT Pro-e.
Illustrative Examples
To illustrate the worthy lessons presented in this document, the following five example projects are available from
the Crestron ControlCD (Version 6.1 or later) or from Download page (VTPRO-E Library) of the Crestron
website (www.crestron.com).
PanelDesign.vtp
This is a sample panel project which contains the general functionality achieved by all five projects. It contains
comments to point out unique control features specific to touchpanels.
PanelDesignToBrowser.vtp
This sample web project represents an exact converted copy of PanelDesign.vtp. The project is filled with
comments explaining how the conversion was achieved using VT Pro-e.
BrowserAndPanel.vtp
This is a sample web project introducing a web design which is applicable to both browsers and touchpanels. It is
an example of a design that is suitable for both environments.
BrowserDesign.vtp
This is a sample web project design with web pages in mind. The project takes advantage of the features available
when designing web pages by combining multiple pages and giving a true web page feel to the project.
BrowserDesignAgain.vtp
This is another sample web project with similar functionality, but an alternative design.

Summary

Introduction to Web Page Design Considerations

Illustrative Example Projects

PanelDesign.vtp

Sample project showing general functionality and touchpanel-specific controls.

PanelDesignToBrowser.vtp

Converted project with comments on the conversion process using VT Pro-e.

BrowserAndPanel.vtp

Web design applicable to both browsers and touchpanels.

BrowserDesign.vtp

Web-focused design leveraging multiple pages for a true web page feel.

BrowserDesignAgain.vtp

Another web project with similar functionality but an alternative design.

Key Design Considerations for Web Pages

DO: Keep it Simple

Design simple, compact web pages for better browser performance and elegance.

DO: Remember Design and Runtime Differences

Acknowledge design/runtime differences between touchpanel and browser projects.

DO: Address Background Color and Transparency

Match background colors; transparent buttons behave differently in web projects.

DO: Use Web-Acceptable Fonts

Utilize supported fonts like Arial, Courier, etc.; Crestron Transport fonts are not supported.

DO: Draw Web Objects Directly on a Page

Draw objects directly on pages to ensure proper operation with overlapping elements.

DO NOT: Expect Web Object Click Thru

Avoid click-thru issues by combining overlapping objects or redesigning.

DO NOT: Expect Similarities Among Web Browsers

Be aware of cross-browser display differences; Internet Explorer 5.0 is recommended.

DO NOT: Assume Subpage Assertion

Subpages do not assert automatically like on touchpanels; assign join numbers.

Crestron VisionTools Pro-e Specifications