Crestron SW-VTPRO-E Reference Guide

Crestron VT Pro-e Design Notes

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.

Design Notes - DOC. 5850 DOs and DON’Ts for Designing Web Pages (With VisionTools™ Pro-e) •• 1

Design Notes Crestron VT Pro-e

Considerations

The special design considerations are presented in a DOs and DON’Ts format. They are as follows.

DO … Keep it Simple

Create a simple, but compact web page. Since web browsers display and refresh pages much slower than a touch
panel, web pages should be designed with simplicity and elegance in mind.

• Avoid clutter (non-functional object such as the border, text, or lines).

• Combine many objects into one or use a single background image instead of many different ones. For

example, create a single button with graphic properties rather than an image that covers a button.

• Combine many pages into a single page by making controls smaller and more closely spaced.

DO … Remember There are Differences

There are design and runtime differences between touchpanel and browser projects. Remember the following.

• Two new objects, dials and marquees, are available only in a browser project.

• The video object is only available on a touchpanel project. Video for a browser project will be available

at a future date.

• A browser project permits additional analog gauge and slider properties.

• Completely enable or disable unwanted objects on a web page. The practice of covering these objects

with subpages (as done in a touchpanel project) is ineffective with web pages because the subpage is
actually a window that can be moved.

DO … Be Concerned with Background Color and Transparency

Match the background color of circular and elliptical objects with the page or object they are covering. There is no
concept of transparent buttons in a web project. If a panel project containing transparent buttons is converted to a
web project, these buttons are given a default face color and the object underneath the button does not appear.

DO … Use Web-Acceptable Fonts

VT Pro-e provides support for Arial, Courier, Courier New, MS Sans Serif, MS Serif, and Times New Roman in
browser projects. Crestron Transport fonts are not supported, but as shown in the examples, images can be used in
place of the font. The default browser project font is Arial.

DO … Draw a Web Object Directly on a Page

Behavior of overlapping web objects in design mode is intricate. If overlapping web objects are necessary, a good
design practice that could guarantee proper operation is to create a new web object directly on a page and move it
over an existing web object. Also, keep in mind that once objects overlap, selection markers are not always visible
when selecting one of the web objects.

DO NOT … Expect a Web Object Click Thru

Overlapping objects create a wonderful environment in run mode. This method, referred to as a click thru, has
been used in touchpanel projects for years. However, a button on a web page can not be activated if it is covered
by another object such as an image. It may be better to combine two overlapping objects on a web page to avoid
click-thru problems.

DO NOT … Expect Similarities Among Web Browsers

Third party web browsers (i.e., Microsoft Internet Explorer and Netscape Navigator™) do not display web pages
the same way. Issues such as subpage positioning and control depth order are currently problems when viewed
with Navigator. Due to these issues, Crestron recommends Internet Explorer version 5.0. Keep in mind that web
pages work on all web browsers. Certain browsers handle web pages better than others.

DO NOT … Assume Subpage Assertion

Subpages do not assert automatically with a join number of zero as they do for touchpanels. A design solution may
be to assign a join number to a subpage and have it asserted high at all times.

2 •• DOs and DON’Ts for Designing Web Pages (With VisionTools™ Pro-e) Design Notes - DOC. 5850