3. Sensors and Channels: SVG Maps


[ Prev ] [ Index ] [ Next ]

JavaScript Functions

There are three JavaScript functions that are built ino the SVG maps:

Adding Sensors to Map

To add interactivity to a sensor on the map in Inkscape:

1. Make sure that all the elements of the sensor that you want to change color are paths. For example, seismometers have a component that is a rectangle object in inkscape. To convert this to a path, select the object then on the menu bar go to Path > Object to Path.
2. Make sure the visual components are all in a group in Inkscape. Be careful not to group the components more than once, i.e. place a group into a group, since this will throw off the ability to highlight the sensor.
3. Once the sensor is properly grouped, select the sensor and on the menu bar go to Object > Object Properties. This will bring up a menu for all the attributes of your sensor group.
4. Set the "Id" of the sensor to the channel name corresponding to the sensor.
5. Open the "Interactivity" section of the menu. Set "onmouseover" to writeText(this.id), "onmouseout" to writeDefault(), "onmousedown" to lookupChannel(this.id). An faster way to do this, especially when adding interactivity to multiple sensors, is to open the .svg file in a text editor. Find the group tag corresponding to your sensor by searching for the channel name. Then, you can paste in three lines to the end of the group tag. For example, a group tag with full interactivity will look like:

	<g
		   id="H1:PEM-CS_TEMP_BSC3_ITMX"
		   transform="matrix(0.55252063,0,0,0.59289668,453.12844,201.55477)"
		   inkscape:label="#g5710"
		   onmouseover="writeText(this.id)"
		   onmouseout="writeDefault()"
		   onmousedown="lookupChannel(this.id)">