Update Graphic example

Summary

The Update Graphic example updates a SVG graphic when it receives an event. The event is parsed by a javascript xml parser.

Description

The figure below shows two browsers, the Source Browser and the Destination Browser. The Source Browser can send an event to the Event Router in the format of a http request. The Destination Browser is listening for events published to the Event Router. The Event Router forwards each event received from the Source Browser to the Destination Browser. When the Destination Browser receives the event, it parses the event, and depending on the value of the event data it updates an SVG graphic.

Deployment and running

Deploy mis-pushlets.war (the Event Router) and updateGraphic.war to your application server (see deployment instructions).
Open the destination browser.
Send a "color update" event to the destination browser:
yourServerURL/mis-pushlets/servlet/mislet?eventTopic=updateGraphic&eventType=UPDATE_COLOR&eventSource=sourceBrowser&id=source&color=red
yourServerURL/mis-pushlets/servlet/mislet?eventTopic=updateGraphic&eventType=UPDATE_COLOR&eventSource=sourceBrowser&id=destination&color=blue
yourServerURL/mis-pushlets/servlet/mislet?eventTopic=updateGraphic&eventType=UPDATE_COLOR&eventSource=sourceBrowser&id=topicUpdateGraphic&color=green
Send a "color reset" event to the destination browser:
yourServerURL/mis-pushlets/servlet/mislet?eventTopic=updateGraphic&eventType=RESET_COLOR&eventSource=sourceBrowser

Explanation

Updating a SVG Graphic in the browser when an event is received
View illustration in a new browser window
The illustration shows the most important code snippets and the files involved. When the file index.html is loaded in the Destination Browser it will receive XML events from the Event Router. Index.html embeds the SVG file updateGraphic.svg. This SVG file imports 2 javascript libraries: xml.js and eventsToActions.js. Xml.js is a javascript xml parser (originating from "XML for script, see tools. It is needed by eventsToActions.js. The latter is responsible for the translation of events in graphical updates of the SVG objects. The illustration shows 4 major steps.

  1. The first step is the receival of an event from the Event Router. The 'onPush(event)' method in index.html is called.
  2. The onPush function calls the handleEvent(event) method that is part of the eventsToActions.js file.
  3. The handleEvent(event) method uses the xml parser from xml.js to create a document object model of the event. Subsequently it extracts the relevant parameters from the event (in this example id and color).
  4. The handleEvent method calls the javascript function setColor(id, color). This function is part of the interface of the svg document. The svg document will set the color of the object with the given id to the specified color.
The MIS contains a tool, the mis-monitor, that assists in generating javascript code, and automatically imports (generated) javascript libraries in your SVG documents. This is explained in other examples.