Blog Entry

(View Disclaimer)

During BrainShare 2010, the Novell Operations Center team actually did perform a demo where farm animals were made to be partially 508-compliant.

For those new to 508-compliance, this is basically a spec used to certify 
whether or not applications are accessible to people with disabilities. 

The goal of the demo was really to show the flexibility and versatility of our visualization engine. In Novell Operations Center, the visualization engine uses SVG as the rendering format for all views. This allows the user to import virtually any existing clipart or content into their views in order to create powerful dashboards. For example, in this demo, we imported an existing open-clipart drawing of a cartoon cow. We then added state (color) rendering to the cow that was driven by the actual state of a NOC element. Next, we brought 508-compliance into the demo by explaining that persons with color blindness cannot rely on color alone in a dashboard in order to indicate the actual state of an element. To get around this issue, we rendered the element’s state using a textual representation of the actual state.

Consider the following dashboard showing this technique that mixes color and textual state representations:

Let us now show how to go about creating a 508-compliant farm animal nodestyle.

Creating Custom Nodestyles with Novell Operations Center

As mentioned earlier, the NOC visualization engine allows the user to bring in virtually any SVG content to be used as the building blocks for a nodestyle. We will now demonstrate the following:

1) Import an existing SVG clipart item into a NOC nodestyle
2) Add dynamic color tinting of the nodestyle based on an element’s state
3) Add textual representation of the element’s state.

Import an existing SVG clipart item into a NOC nodestyle

Let’s start by creating a new nodestyle by importing an existing clipart item. First, under the “Administration” branch in the NOC Client, we’ll right-click a folder under the “Nodes” folder and select “Create Node Style…”:

Selecting this menu option presents the following dialog to supply a new name.

Enter the new name “508Cow” and click “OK”. We are then presented with a nodestyle editor that is initialized with a default nodestyle. Since we want to use existing clipart as the nodestyle content, select the “Open…” menu option from the top-level “File” menu. We will use the sample SVG clipart drawing for “lemmling_Cartoon_cow.svg” as shown here:

After importing the SVG file, the view will look something like the following:

Add dynamic color tinting of the nodestyle based on an element’s state

At this point, we can begin to attach element state to parts of the nodestyle. Let’s say we want the current element state to be reflected as the overall color of the cow’s body. We can do this by using the “Flattened Selection Mode” tool in the nodestyle editor:

 
“Flattened Selection Mode” is just a helper tool to allow the user to select 
any SVG item in a given drawing.  The tool ignores all SVG grouping layers and 
can drill directly to the item clicked in the drawing.  This alleviates the user from
having to navigate through many layers in order to select a given SVG item.

Select this toolbar option and then click on the white part of the cow’s head. This will result in a selection that looks like the following:

Now, using our editor palette, we can “bind” the element’s state to the “fill” color of the cow’s head. Select the checkbox in the palette to add the fill binding which will result in the following:

The state is reflected as GREEN at this time since the current nodestyle element itself is in an “OK” state. When this nodestyle is used in other views, the fill color will change accordingly. Repeat the same steps in order to add the same tinting to the cow’s body. Additionally, we’ll add a caption to the nodestyle via the “Customize”menu available on the editor’s background right-click context menu. We’ll now have something like the following:

Add textual representation of the element’s state

At this point we have constructed a captioned nodestyle that indicates an element’s state. This nodestyle can be used in any drawing to represent an actual NOC element. Let’s go ahead now and add a textual representation of an element’s state to the nodestyle. Our goal is to create a “callout” that makes the cow appear to “speak” the state of an element. We’ll accomplish this by bringing in additional clipart for a “callout” and just add a SVG text item on top of that clipart. I’ve already imported the “callout” clipart into my system and we’ll just drag that clipart onto the background so that we can work with it. Here is the view after inserting the new clipart item:

Now, we need to add text to the drawing. Select the “Text” tool from the drawing toolbar and click the drawing background to insert a text item. Give the text a default starting value such as “Starting”. This allows us to click on the text in the drawing. Now, right-click on the text item in the drawing and select the following menu: “Customize -> Add Binding -> VALUE…”

This will bring up the following dialog:

Select “Element Property” as the item and then select “condition name” as the property to use. Click “OK” and the view will appears as follows:

The text item should now be displayed as “OK” since the current element state is “OK” (green). We can now move both the callout clipart and the text item to make the cow appear to speak the condition. Select both items in the view and move them to look like the following:

Note that the callout clipart has also been resized. Here is a simple view of this nodestyle used in a sample view:

Extra Credit

We can take this feature one step further. If you remember from the beginning of this article, we showed two cows of different states. The cow that was green was actually saying “I’m Gouda!!!” instead of the state name of “OK”. This can be accomplished by adding a second text item to the drawing and using the editor’s state visibility filtering option. Repeat the steps given earlier to add a second text item to the view, but this time do not link the text value to the element’s state. Instead, just give the text a value of “I’m Gouda!!!”. Select the new text item and utilize the palette’s state visibility tool to only show that text when the element state is “OK” (green).

Now, select the original text item that reflects the element state text and set that text to only show when the element’s state is anything OTHER than “OK” (green).

Note:  these visibility filters are not in effect while the view is in edit-mode.  
This is by design to allow the user to modify the items regardless of the 
current element’s state.   Once the view switches into view-mode, the filters 
will be applied.

Now, move the new text item so that it is right on top of the previous text item. They will overlap while in edit-mode, but will look correct in view-mode. If we save our changes and switch back to our view, we now see something like the following:

I hope that this article helps to show how easily a user can import existing SVG clipart for use in their visualization dashboards.

Disclaimer: As with everything else at Cool Solutions, this content is definitely not supported by Novell (so don't even think of calling Support if you try something and it blows up).

It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test, test, test before you do anything drastic with it.