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.
- 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.
- 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.
- This ECMAscript file defines most of the instrument classes.
- 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
v path commands are preceded by
whitespace. Some of my examples had commas separating the
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
Thanks to Jeff, I have now corrected the dial definitions so that the ticks are visible on all of them.
Instruments.svg?interval=10 should run close to
5 times faster than the default, and
would have one update every second.