SVG Instrumentation

• Main
 
• ThinAir
 
• WSDL
 
• HTTPtest
 
• Signup
 
• httpGrab
 
• SynchTools
 
• PilotFORTH
 
• QuickDecision
 
• SVG Projects

• Intro
·
• SVG Concentration
·
• SVG SlideShow
·
• SVG Instrumentation
·
• SVG Maze Maker
·
• SVG Dots
·
• SVG Play

Some of my earliest work with SVG involved graphing data summarized from log files. In SVG Essentials, there was an example of a Weather Data page that would be updated by regenerating the page with XSLT. This approach seemed interesting, but did not really grab my attention.

Later, I was contracted to produce a dynamic display using SVG and the Batik Java library. In that system, SVG was only used to set up the base graphics. All of the interaction was performed in Java code.

After that project was over I began experimenting with dynamic controls that are defined in SVG and ECMAscript. Unfortunately, I'm still not very good at graphic design. This means the instruments are a little plain. But I have added a reasonable amount of functionality.

Demo

Instruments.svg

The demo code updates its data randomly without using an outside source of data. This demo updates the instruments directly without using the data feed protocol that I'm working on.

asv_patch.es

I developed this code using Batik's browser for viewing. Unfortunately, the Adobe SVG Viewer does not support quite as complete a version of the ECMAscript spec. I developed this code to correct some of the missing features that I needed.

Instruments.es

This ECMAscript file defines most of the instrument classes.

StripChart.es

This ECMAscript file defines the StripChart class.

I've finally had the time to clean up this code a bit to work with FireFox as well as the Adobe plugin and Squiggle. There are a few issues with the FireFox implementation that I haven't been able to resolve yet. But, the code is mostly consistent across the three viewers I've targeted. The FireFox inconsistencies I'm fighting at the moment are:

• the ticks on the dials are not showing up, even though mostly equivalent code on the bar gauges displays fine
• the right justified labels on the strip charts are not lined up

Jeffrey David experimented with the intruments demo and found the problem that broke the ticks on the dials. Apparently, in FireFox, these ticks only display if the h and v path commands are preceded by whitespace. Some of my examples had commas separating the h or v from the commands preceding them. The way I had learned SVG, commands and parts of commands could be separated by either whitespace or commas. In many places, these separators were optional. However, according to the SVG 1.1 spec, the only thing allowed between commands is optional whitespace.

Thanks to Jeff, I have now corrected the dial definitions so that the ticks are visible on all of them.

As part of an effort to compare the speed of different JavaScript implementations, I've added the ability to change the speed at which the instrument simulation runs. If you append the parameter interval=n as a parameter to the SVG file, it changes the refresh wait time for the animation. The parameter must be a positive integer. It represents the number of milliseconds between new data points. The default is 50.

For example, Instruments.svg?interval=10 should run close to 5 times faster than the default, and Instruments.svg?interval=1000 would have one update every second.