Immersion Web Designer

Contents

Introduction

How to...

  • Add a TouchSense Effect
  • Add TouchSense Support
  • Insert a TouchSense Logo
  • Add Sound Effects
  • Modify or Remove a Sensation/Sound
  • Alert a User to Install the Immersion Web Plugin
  • Toggle In-Page vs. External TouchSense Javascript

Troubleshooting

  • Test a Page's Sensations

Feedback

  • Reporting Bugs
  • Suggestions & Comments


Introduction

Immersion Web Designer is a Windows web-page/HTML editor that knows about the sense of touch. It allows you to add TouchSense™ support for force feedback and tactile feedback devices into your web pages. This is accomplished in any of the following three ways:

  • Play an effect as long as the cursor is over a certain link or image

  • Play an effect when the user clicks a certain link or image
  • Play an effect when the user double-clicks a certain link or image

Other than Immersion Web Designer's TouchSense support, Immersion Web Designer provides only common web-authoring capabilities. It is assumed that these features are well-known, so only the TouchSense support is described in this document.

Because Immersion Web Designer's web-authoring features are limited, it is suggested that a user develop a web page in a full-featured editor of his or her choice, then use Immersion Web Designer to infuse the page with TouchSense effects and sounds.

Immersion Web Designer was developed by Immersion Corporation (www.immersion.com).


Adding TouchSense

To add a TouchSense effect to an item in a web page, first you must open up the web page in Immersion Web Designer. Use File:New to create a new page or File:Open File... to open an existing page:

Once you have a web page open in Edit Mode (by default it is open in Edit Mode), right-click the hyperlink or image to which you want to add the touch sensation. A pop-up menu will appear with three different Javascript "events" to which you can link the sensation:

Event Pop-up Menu

Choose the event in the menu:

  • Mouse Over Properties: the touch sensation will be started when the cursor crosses onto the object (onmouseover). The touch sensation will also be stopped when the cursor leaves the object (onmouseout) if the "Stop effect/sound when cursor leaves object" checkbox on the Mouse Events dialog is checked.

  • Click Properties: the touch sensation will be started when the user clicks this object (onclick). The touch sensation will be stopped when the cursor leaves the object if the "Stop effect/sound when cursor leaves object" checkbox is checked.

  • Double-Click Properties: the touch sensation will be started when the user double-clicks this object (ondblclick). The touch sensation will be stopped when the cursor leaves the object if the "Stop effect/sound when cursor leaves object" checkbox is checked.

The first event is the most usual case. Note that TouchSense effects will continue to play to completion or until the page is unloaded from the browser if the "Stop effect/sound when cursor leaves object" checkbox is left unchecked. In these situations it is advisable not to use long or infinite-duration effects.

After choosing an event you see the Mouse Events dialog box:

The Mouse Events dialog box allows you to attach TouchSense effects and/or sounds to the event. Click the Select IFR... button and a file selection dialog will appear:

Open IFR Dialog

In this dialog you can select an .IFR file containing the effects you wish to use. As soon as an .IFR file is selected, Immersion Web Designer inserts two things into your web page:

  • Internal Javascript functions it will use to support playing of effects. This Javascript code calls a Plugin named ImmWeb to manage the sense of touch.

  • A small TouchSense logo. The presence of this logo indicates that the page supports TouchSense haptic technology and is also a link to the Immersion home page where information about TouchSense can be found. TouchSenseTechnology Logo You can choose either a logo with a solid white background or you can select a logo that is transparent and aliased for the page's background color .You may chose a location for the logo.

Once an .IFR file has been chosen for the project, the Mouse Events dialog will list all the sensations contained in that .IFR file:

Select the sensation you want to reference and click OK. Immersion Web Designer automatically modifies the page's HTML in such a way that the desired event over the image or hyperlink you have chosen triggers the selected effect.

Note that it is possible in this dialog to attach a different effect to each of the three mouse events for a given image or hyperlink .

Testing the Page's Sensations

Modifying or Removing a Sensation


Add TouchSense Support

By selecting the top menu item from the Touch menu, you choose to insert touch-enabling HTML and Javascript into your page. This code inserts a reference to the Immersion Web Plugin object (named "ImmWeb"), which delivers the sense of touch to your page, as well as Javascript which makes use of this plugin. If the touch-enabling code has already been inserted into the page during a previous session of Immersion Web Designer, the menu item will be disabled.

When you select Touch:Add TouchSense Support... , you must select an .IFR file which will provide the TouchSense effects for the page. Immersion Web Designer will prompt you to locate this file. An .IFR file must be selected for the touch-enabling code to be added to the page.

Note that Immersion Web Designer will also automatically insert this touch-enabling code when you first add a TouchSense sensation to an item on the web page. Once the touch-enabling code has been added to the page, the Add TouchSense Support... menu item will be disabled for the remainder of the Immersion Web Designer session.

Touch:Add TouchSense Support... must be selected, or an effect must be associated with a mouse event on an object (image, link) in the page, in order to enable the other menu items in the Touch menu:

  • Alert User to Install Immersion Web Plugin and

  • Use External Javascript (.js) Files


Adding Sound

Immersion Web Designer makes it just as simple to add sound to an object in your web page as it does to add a sensation. However, it is important to note that in order to add the Javascript coding necessary to run the sound effect, you will need to select an .IFR file and add a sensation to the object as well.

To add sound, first you must open up the web page you wish to modify in Immersion Web Designer. Use File:New to create a new page or File:Open File... to open an existing page:

Once you have a web page open, right-click the link or image to which you wish to add the sound. A pop-up menu will appear with three different Javascript "events" you can tie the sound to:

Event Pop-up Menu

Choose the event in the menu:

  • Mouse Over Properties: the sound effect will be started when the cursor crosses onto the object (onmouseover). The sound will also be stopped when the cursor leaves the object (onmouseout) if the "Stop effect/sound when cursor leaves object" checkbox on the Mouse Events dialog is checked.

  • Click Properties: the sound effect will be started when the user clicks this object (onclick). The sound will be stopped when the cursor leaves the object if the "Stop effect/sound when cursor leaves object" checkbox is checked.

  • Double-Click Properties: the sound effect will be started when the user double-clicks this object (ondblclick). The sound will be stopped when the cursor leaves the object if the "Stop effect/sound when cursor leaves object" checkbox is checked.

The first event is the most usual case. Note that sound effects will continue to play to completion or until the page is unloaded from the browser if the "Stop effect/sound when cursor leaves object" checkbox is left unchecked. In these situations it is advisable not to use long or infinite-duration effects.

After choosing an event you see the Mouse Events dialog box:

The Mouse Events dialog box allows you to attach sounds, as well as TouchSense effects to the event. Click the Add WAV... button and a file selection dialog will appear:

Open IFR Dialog

In this dialog, you can select a .WAV file containing the sound effect you wish to use.

Once a .WAV file has been chosen for the object, the Mouse Events dialog will list it in the Play Sound: selection box and then allow you to add more .WAV files. As you select each one, you can play it by clicking the Test button below the selection box:

Note that only one sound effect can be added per mouse event for each object (image or hyperlink).

Note that when you have chosen your sound effect, you must also choose an .IFR file in order to add touch sensations to the image or link (see Adding TouchSense for more help); .IFR file selection is also required for the Immersion Web Designer to add the necessary Javascript to play sounds to the web page. Once the .IFR file is selected, click OK and Immersion Web Designer will automatically modify the page's HTML source code in such a way that the chosen mouse event triggers the selected sound and effect.

Modifying or Removing a Sound


Context Menu

A little pop-up menu that appears when you right-click on an image or hyperlink object in Immersion Web Designer. The standard menu gives you the option to attach touch sensations or sounds to the object by way of three different Javascript Events.

Note: To get an alternative context menu, which has other standard Windows menu items instead of the event-related ones, Ctrl-right-click on an object.


Event, Javascript

In Javascript programming, an event is a message that is sent to an object whenever something happens. Once an HTML page loads, any script-based activity must be triggered by an event. With only a couple of notable exceptions, such as the event triggered by the complete loading of a page and its supporting files, all events are caused by user interaction with the document and its contents.

For example, when you click on a button, the "onClick" event is sent to that button, and any code that is specified to be executed on a click event will be executed.

Javascript Events play an integral role in bringing TouchSense technology to your web page. The Immersion Web Designer utilizes three different types of events:

  • onclick (a Mouse Click Property)
  • ondblclick (a Mouse Double-Click Property)
  • onmouseover (a Mouse Over Property)

    Note: When "Stop effect/sound when cursor leaves object" is checked in the Mouse Events Dialog box, the onmouseout event is used as well.


Mouse Events Dialog

The Mouse Events dialog allows you to edit the touch and sound properties of an event associated with a web page object. It is brought up by right-clicking a web page item such as a hyperlink or image:

See Also:

  • Adding TouchSense with the Mouse Events Dialog Box

  • Modifying & Removing TouchSense with the Mouse Events Dialog Box
  • Adding Sound with the Mouse Events Dialog Box

Event Tabs:

For each event there is a tabbed dialog where you can select an effect or a sound for that event.

  • Over Object: the TouchSense effect will be started when the cursor crosses onto the object (onmouseover). The effect will also be stopped when the cursor leaves the object (onmouseout) if the "Stop effect/sound when cursor leaves object" checkbox is checked.

  • Click Object: the TouchSense effect will be started when the user clicks this object (onclick). The effect will also be stopped when the cursor leaves the object (onmouseout) if the "Stop effect/sound when cursor leaves object" checkbox is checked.

  • Double-click Object: the TouchSense effect will be started when the user double-clicks this object (ondblclick). The effect will also be stopped when the cursor leaves the object (onmouseout) if the "Stop effect/sound when cursor leaves object" checkbox is checked.

Only one effect and one sound may be associated with each event for a given object in the page.

Play Effect List

Lists all the TouchSense effects available in the currently selected .IFR file. The item that is highlighted indicates the effect that will play when the specified mouse event occurs on this object.

Select IFR...

Allows you to select the .IFR file to use. Once an .IFR file is selected, its contained effects populate the Play Effect List. Once selected, the .IFR file for the page cannot be altered. Only a single .IFR file may be used for each page created with Immersion Web Designer.

Play Sound List

Lists all the sounds (.WAV files) that the web page knows about. The item that is highlighted indicates the sound that will play when the specified mouse event occurs on this object.

Add WAV...

Allows you to select a new sound (.WAV file) to use in the web page. Once selected, the sound is added to the Play Sound List.

Test

Plays the currently highlighted sound in the Play Sound List.

Stop effect/sound when cursor leaves object

If this box is checked, the effect and/or sound triggered by the current mouse event will be shut off when the user's cursor leaves the triggering object. If the box is unchecked, the effect will continue to play to completion. It is a good idea to always check this option if the effect being triggered is infinite.


Modifying or Removing a Sensation/Sound

To make modifications to the TouchSense sensation and/or sound attached to a hyperlink or image object, right-click on the object to bring up the Mouse Events Dialog box, select a different sensation or sound for the desired mouse event, and click OK.

To remove an effect or sound for a given event, select "<none>" in its effect list and/or sound list.


Testing a Page's Sensations

A sensation can be tested directly in Immersion Web Designer by switching from Edit Mode to Browse Mode. This is done either by unchecking View:Edit Mode or by unclicking the "Toggle edit mode" button ( [image]) in the toolbar. No editing of the page can occur in Browse mode - return to Edit mode to make changes to effects or other page contents.

Browse Mode in Immersion Web Designer displays the page approximately as it would appear in Microsoft Internet Explorer. To check the page's behavior and appearance in another type of browser, such as Netscape Navigator, the desired browser must be used directly. Remember to install the Immersion Web Plugin for Netscape if you will be testing your pages in Navigator or Communicator.

To test a sensation directly in a specific external browser, first save the web page (File:Save or File:Save As File...) and make sure you have a force-feedback device connected. Then run the desired web browser and open the saved page. For example, you can select File:Open... in Internet Explorer followed by clicking the Browse... button to locate the web page.


Touch Menu

The Touch Menu

Add TouchSense Support...

Inserts Javascript into your page to reference and make calls to the ImmWeb object, which delivers the sense of touch to your page. Alerts you and is disabled if this Javascript has already been inserted. This item must be selected (or a TouchSense effect added) in order to enable the remaining items in the Touch menu.

Before the Javascript can be inserted into a page, you must select an .IFR file to retrieve the TouchSense effects from. Immersion Web Designer will prompt you to locate this file. Once an .IFR file has been selected, the TouchSense Logo Dialog appears, allowing you to select the style and location of the Immersion TouchSense logo which is automatically added to your touch-enabled web page.

Note that Immersion Web Designer will automatically carry out the actions associated with this menu item when you first add a TouchSense sensation to an image or hyperlink on the web page, if Add TouchSense Support... has not previously been selected.

Alert User to Install Immersion Web Plugin

When this item is checked, users viewing your page will be alerted if they do not have the Immersion Web Plugin installed on their systems. Along with a TouchSense device, the Immersion Web Plugin is necessary for a user to be able to feel touch sensations on an enabled web page. If the user decides not to install the plugin, forces and sounds in the page are turned off, but otherwise the page will appear normal. As long as the user continues not to have the correct plugin installed, the alert message will appear each time the page is loaded.

If this item is unchecked, users viewing your page will not be alerted if they do not have the Immersion Web Plugin installed. Forces and sounds in the page will still be turned off, but this process will be invisible to the user browsing the page.

By default, users will be alerted. To turn off the alerts, uncheck this menu item.

This menu item is disabled until touch-enabling Javascript is added to the page either via the Add TouchSense Support... menu item or by adding a touch sensation to an object on the page.

Use External Javascript (.js) Files

This item specifies whether the Javascript necessary to feel touch sensations on the page is written directly into the page itself, or is contained in external .JS files which are referenced from within the page.

Inline Javascript, or Javascript written directly into the page, allows the touch-enabled web page to be viewed either online or offline, when a user is not connected to the Internet. However, there is a lot of Javascript which must be added, and this will make the source of your page rather long.

External Javascript, or Javascript contained in external .JS files and referenced from within the page, requires that your page be viewed by a user with a connection to the internet. The .JS files which are referenced reside at the www.immersion.com domain. Selecting this option minimizes the amount of source code inserted directly into your page to add TouchSense support.

Note that toggling from Inline Javascript (the default option; the item is unchecked) to External Javascript (the item is checked) will erase any changes made manually to the Javascript code since it was added automatically by Immersion Web Designer. If you have made changes to the touch-enabling Javascript code, and you wish to save these changes, you should not choose to Use External Javascript Files.

This menu item is disabled until touch-enabling Javascript is added to the page either via the Add TouchSense Support... menu item or by adding a touch sensation to an object on the page.


IFR Files

.IFR files are TouchSense effect resource files created by Immersion Studio and used in many TouchSense-enabled games and applications. Immersion Studio, an editor for the individual touch sensations saved in .IFR files, is downloadable from the web.

A single .IFR file can contain many different individual and compound force feedback effects and touch sensations. In Immersion Web Designer, only one .IFR file may be specified per touch-enabled page. This means that all effects which are desired on a particular page must be contained within that page's one .IFR file.

An .IFR file may be edited in Immersion Studio to add additional desired effects, if necessary. An .IFR file is like an image or sound file, in that it may be edited independently of the web page which uses it, and may be used by multiple web pages.


TouchSense Logo Dialog

The Immersion TouchSenseTechnology logo on your page lets your users know that this page contains touch sensations they can experience. A TouchSense logo of your choice is added to every page which is touch-enabled with Immersion Web Designer.

Select Touch:Add TouchSense Support... to bring up the TouchSense Logo dialog box ( after selecting an .IFR file), which allows you to insert a logo into your page:

You can select Use Logo with Solid White Background or you may choose to have a transparent logo aliased to match the background color of your page by selecting Match Logo to Background Color. Select Auto Match to have Immersion Web Designer automatically determine the page's background color or choose Select Color to custom select the color. You may also enter the value for the color in the RGB Value edit box. The logos are aliased for web safe colors only, so if you choose a color that is not one of these web safe colors, the closest matching color will be selected.

Choose the radio button representing the location you want the logo to appear on the page. By clicking OK, the logo will be inserted in this location.

The logo has its own TouchSense effect. Once a logo is selected, it cannot be changed.

You may find out more about Immersion's logos at the Immersion Brand Center , located at:

http://www.immersion.com/brand.html


Reporting Bugs

If you experience something you think might be a bug in Immersion Web Designer, please report it by sending a message to bugs@immersion.com. In the message, please describe to the best of your abilities what happened, what you did prior to the error, any error messages the Immersion Web Designer gave you (the error number in the message can be very helpful as well), what version of Immersion Web Designer you have (can be accessed from "About Immersion Web Designer" under the HELP tab on the toolbar), and whether or not you have been successfull at duplicating the error. Please also let us know what kind of computer you have, which operating system you're using, and anything else you think might be relevant.

Your email will be forwarded to our engineering staff and will be most useful in helping us streamline future versions of the Immersion Web Designer. Unless additional information is needed, you will not receive a direct response.


Suggestions & Comments

All applications are subject to the praise and criticism of their consumers. If you come up with an idea of how you'd like our software to work differently, we at Immersion welcome your input. Please send all suggestions and comments to suggest@immersion.com

Your email will be forwarded to our engineering staff. All ideas for enhancement will be marked for consideration in future versions of Immersion Web Designer. Unless additional information is needed, you will not receive a direct response.


Click Properties

A Javascript Event that occurs when the user clicks the left mouse button on the object.


Double-Click Properties

A Javascript Event that occurs when the user double-clicks the left mouse button on the object.


Mouse Over Properties

A Javascript Event that occurs when the user moves the mouse pointer into the object. It does not repeat unless the user moves the mouse pointer out of the object and then back into it.


Immweb ActiveX Control

Immersion Web Plugin

The Immersion Web ActiveX Control for Microsoft Internet Explorer and Immersion Web Netscape Plugin for Netscape Navigator allow Web developers to directly control TouchSense devices from Web pages. Each of these add-ons, generically known as an Immersion Web Plugin, offers a level of control that is quite close to that of the Immersion Foundation Classes, upon which it is based.

IMMWEB.OCX is the filename of the ActiveX control utilized by Immersion Web Designer, and which is at the heart of the Immersion Web Plugin for both Internet Explorer and Navigator. This ActiveX control allows programs written in Javascript, Visual Basic, and other programming languages to communicate with the Immersion Foundation Classes, which in turn communicate with a TouchSense device, commanding it to play the desired touch effects at the right times.

Online, the latest version of the Immersion Web Plugin can be downloaded from the Immersion Corporation web site.