David Jones

Geography 288 / Haptic Soundscapes Project

June 2002

Counties of Nevada: Sound Based Direction Finding Map

To Run:

http://soundscapes.geog.ucsb.edu/nevada/nevada.htm

Requirements

This map requires that Java be installed and enabled for the web browser. Client-side scripting must also be enabled. Users should also use Internet Explorer 5.5 or higher, it has not been tested with Netscape and may not work properly.

Synopsis

This map allows users to search for a specific county by entering the county they wish to search for into the textbox on the screen. The map then tells the user where to move the mouse with audio and visual feedback until the user is over the correct county. Users can also click on each county to get audio feedback about each county.

Background

One of the primary concerns with map information for blind or legally blind individuals is that it is very hard to locate specific points or areas, unless you already know where they are on the map. This is even truer of digital maps, and the Internet in general. How can one find a county, when they can’t even see the map they are supposed to be looking for the county on? They can’t. While this map does not address the entire problem present for blind users of the Internet, it does address the issue regarding how to find something on a map when you don’t know where it is.

The idea of a map that tells users where they are is not new. Dr. Dan Jacobson had developed a web-based map that told users where they were several years ago for his PhD research (Jacobson, 1999). His map used raster graphics with an image map to create the boundaries between objects, the best possible method available at the time. The scripting was done in Java. When the mouse was moved around, it ‘spoke’ to the user telling them where they were. It did not give actual directions.

Today

Today we have more advanced technology. Jacobson was limited by raster technology; we are not limited by this today. In our work on the Haptic SoundScapes Project we have been using Macromedia Flash extensively. It is just one of several commonly used vector technologies used in web pages. For this project, Scalable Vector Graphics (SVG) were used. They represent a new approach to web graphics, in that all graphics are defined in eXtensible Macro Language (XML). This means SVG graphics can be created in text editors such as Vi and Notepad to more traditional vector editing programs like Freehand and Illustrator. SVG also allows customization with JavaScript and cascading style sheets just like web pages.

The Map

The map is composed of five documents: the web page, sag document, external JavaScript file, java applet and the Cascading Style Sheet. Also referenced are the audio files, only called when needed. Essentially the map works by having the user type the name of a county they wish to look for. Once they press the button ‘Find’, they are vocally told where to move the mouse. At the same time, just above the screen written instructions are also given. As the user moves the mouse, they are told to move “right and down”, etc. Once they are over the county they are looking for, they are told to stop moving and that they have found the county. Users can also click on each county to get more information. Each part of the package is described in detail below:

Java Applet

The java applet is used to play all sound bites for the project. It is embedded in the bottom of the web page and provides functionality in JavaScript to directly play wav based audio files without having to first download the entire wav file. The applet wraps the java classes responsible for audio playback into an easy to use function call, allowing them to be used on the web.

Audio Files

The audio files are wav based files recorded at 8kbs, Mono, 16bit with an encoding type of GSM 6.10 ACM wav format. Syntrillium CoolEdit was used to record and edit the sound clips. All sound clips were cut to the smallest possible length and were amplified 20db. The resulting files were very small and averaged between 2-5 kilobytes each.

SVG Document and JavaScript file

The map itself was created from USGS GIS county data imported into Adobe Illustrator. The map was then edited in Adobe Illustrator, where a title was added and the original colors were applied. The document was then exported as a SVG document. It was then opened in Microsoft Interdev, a multilingual web programming application. As SVG documents are text based, it’s fairly easy to figure out their structure. Once each counties path was located it was given an id that is used by both the SVG document and the html page as an object reference in JavaScript. An xlink (like a #include in html) was added to the SVG document that referenced an external JavaScript file (.js). This allowed the JavaScript for the SVG document to be clearly written in a separate file. This is done for clarity only, as the JavaScript could have been embedded in the SVG document.

For each county a function was written that played the appropriate sound clip for each county. The function called the exposed JavaScript functions of the java applet in the html page. These were attached to the mouseclick event in the SVG document with the onclick event holder in each SVG path object. This means that when the user clicks Humboldt County in the SVG document, the audio file announcing they clicked Humboldt county plays.

Functions were also created that returned the mouse position to the html page. While the mouse is in the SVG document, the html page cannot locate the mouse. The two coordinate systems are also different. Thus, to find the position of the mouse from the html page, when the mouse is in the SVG document requires a function that can be called from the html page.

Finally, a function was created for the mouseover event that redraws the polygon underneath the mouse in red with a yellow boundary. The function also sets a global variable (global to the SVG document only) that identifies which county the mouse is over. Another function, which can be called from the html page, retrieves the value from the global variable. A function created for the mouseout event redraws the polygon with a tan fill and a black border.

In the SVG document itself, a rectangle was added to use as a guide for the mouse position. This was done, because if there are no objects in an area of the SVG document, the mouse cannot be tracked. By placing a rectangle the size of the document in the document, the mouse can be tracked anywhere in the document. The rectangle was set to a clear fill and border.

Web page

The html page was created with Microsoft Interdev. The SVG document and the java applet were embedded in the page and a textbox with button was added to the page. The textbox and button are given ids to use with referencing in JavaScript.

A function was written that played an introduction to the page and was attached to the onload event of the web page.

To enable searching for a county, several functions and arrays were constructed. Three arrays were created, the first containing a list of all the counties, the second and third containing approximate SVG document coordinates of the center of each county. The coordinates were calculated with a temporary function in the SVG document. A search initialization function was then created. This function was attached to the html button onclick event. The function converts the text entered into the textbox into lower case and checks to see if it matches one of the counties in the array. If it does not, it calls a wav file, which indicates to the user they have not entered a real county to search for. If it does match, then the function gets the SVG documents object model and activates the SVG event onmousemove of each polygon in the SVG document. It also turns on the html onmousemove event. These events need to be activated in order to call functions dependent on mouse tracking written in both the html and SVG documents.

Once the initialization function has run, both the html and SVG documents wait for mouse movement. When the mouse moves in the html document, it fires the onmousemove event which triggers a function in the web page that tells the user to move the mouse near the middle of the page to begin searching. This causes the user to move out of the html page and into the SVG document. Once the onmousemove event listener is turned on, every time the mouse moves, the event fires. Since we don’t want the instructions played over and over, they are set on a timer to only play once every second. This gives the user time to move the mouse far enough that they are likely to get a different instruction next time.

When the onmousemove event fires when the mouse is moving within the SVG document, a function somewhat similar to the html function is called. This function also calculates the time difference to play instructions only once per second, but does far more. It calls the functions written in the JavaScript file attached to the SVG document that track the mouse. Once it has the mouse position within the SVG document, it calls the function that returns which county the mouse is in. Using this information, the correct coordinates of the center of the county in which the user is looking for is extracted from the array. Subtracting the two calculates whether the user needs to move the mouse left, right or up,down. Audio files for each of the four directions are then played. If the mouse position returns the same county as the county being search for, then the search is over and the user has found the county. An audio file indicating to stop moving and they have found the county is played. At the same time, if the county has been located, the onmousemove events are disabled for both the SVG document and the web page. Finally, the county is colored yellow to indicate success.

Cascading Style Sheet

The cascading style sheet (css) is used to control the appearance of text in the html document. I was thought it would also be used in the SVG document, but was not. It uses class ids applied to <p>’s. In the css page, each attribute is defined such as font (Arial, Times New Roman, etc), font size, text alignment, etc.

Discussion

The overall effect of this map is ‘cool’. The fact that it works is pretty amazing since I had never worked with SVG documents prior to this project. However, how useful it really is undecided. For sighted persons, the novelty will wear off after a few minutes of using the map. This is why I also included visual effects. To see if the blind could really use this map or vision impaired would require actual testing, which, given the scope of this project was not possible. However, this project demonstrated the usefulness of Scalable Vector Graphics in projects like this one. Finally, one issue that is a large barrier to the use of this map by blind individuals is the required typing of the county they wish to search for. To make it truly accessible by the blind, this would have to be converted to a vocal system, not text based.

SVG is a useful graphic format. Overall, once you understand the structure of SVG documents, they are not hard to work with. They also have an advantage over flash documents in that they are easily editable from any text editor and can be programmed with JavaScript, the same language used in html. In fact, you can even call functions from the html in the SVG and from the SVG document in the html (as we did). One downside of SVG versus flash that I can see is that for very large documents, because SVG is text based, there will be a performance issue, since executing binary instructions is much faster. It also allows anybody to steal your work and modify it since its open source.

Acknowledgements

I would like to thank Andreas Neumann of the Department of Cartography, Swiss Federal Institute of Technology for advice on some SVG issues. His examples were also very helpful.

References

Jacobson, Dan, 1999. Exploring Geographies of Blindess: Learning, Reading and Communicating Geographic Space. Queens University of Belfast, Belfast.

Neumann, Andreas. 2002. www.carto.net. Various SVG map samples.