What is an SVG?

An SVG is a vector graphic that is described by its XML file. That means, for example, that each shape may be created or manipulated by simply modifying the XML descriptive text. I use the open source Inkscape software to create my base graphics.

About this Tutorial

The intent is to create a simple SVG with layers (groups in SVG) and then show or hide those layers dependent upon user actions on a web page. The demonstrated example may be viewed at bd-designs.com. All links in this post and all references used to develop the demonstration may be found via my delicious. Let’s get started.

The SVG Drawing

Create the drawing

1. Import a scanned drawing into layer1 of a new Inkscape drawing
2. Add a layer for the head
   1. Use the oval drawing tool to draw the head as a simple vector shape
3. Add a layer for the body
   1. Use the Bezier curves tool to draw the body sides
   2. Use the oval tool to draw the body bottom
4. Continue to add layers and vector shapes until the drawing with colors is complete
5. Delete layer1, the layer with the scanned bitmap
6. Save the file

Derive Layer Information from SVG

An SVG is a XML formatted text file. This means it may be viewed and edited in any basic text editor. For this demonstration, we are interested in only a few of the XML fields.

The <g>…</g> tag means group in SVG and is similar to the concept of layers when drawing. The id is the name of the group. Make a note of all of the groups and relate them to the layers you created in your drawing, shown by inkscape:label.

Set Scale and Viewbox

How your image appears in an HTML page is controlled by a number of settings, both in SVG and in HTML. For this demonstration, the whole SVG should appear in the page and its size will be set by HTML. Therefore in SVG set:

• viewBox=”0 0 width height”
• width=100%”
• height=”100%”

The width and height attributes already exist but you may have to add the viewBox attribute just after width and height.

The HTML Page

The intent of the page is to show how to draw a ballerina. The various steps are to be shown in an accordion menu. When each step is clicked, the drawing should show the layers associated with that step. When a user clicks back any number of steps, those subsequent layers should be hidden. This is done using the jQuery UI Accordion and svgweb.

Load the Libraries

In head place the following or similar code:

<script src="svgweb/src/svg.js" data-path="svgweb/src/"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Set the On-Load Actions

In head place the following or similar code:

<script>
  $(document).ready(function() {
    // SET THE UI ACCORDION
    // TO JQUERY UI
    $("#accordion").accordion();

    // ACCESS THE SVG ON LOAD
    // TO SVGWEB
    window.addEventListener('SVGLoad', function() {
      var doc = document.getElementById('ballerina').contentDocument;
      // GET THE SVG ELEMENT
      var lay_head = doc.getElementById('layer2');
      ... other layers
      // SET THE SVG ELEMENT'S ATTRIBUTE
      var attr = 'display:none';
      lay_head.setAttribute('style', attr);
      ... other attribute sets
    }, false);
   });
</script>

At this point, the document is ready to have its accordion menu fully implemented in HTML and the SVG may be displayed in its initial conditions. Some modifications to the above javascript will be needed later but lets move on to  the HTML portion.

Accordion Container

The markup of your accordion container needs pairs of headers and content panels:

<div id="accordion">
  <h3><a href="#"><b>Introduction</b></a></h3>
    <div><p>Here you will learn how to draw a ballerina.</p></div>
  <h3><a href="#"><b>Step 1: Head</b></a></h3>
    <div><p>Draw a circle.</p></div>
  ... more accordion items
</div>

Image Object

If you are working with HTML 5, you may insert an SVG image directly but I find it more familiar to use the object tag. The object HTML must make exceptions for earlier versions of IE. The width and height set here are the actual display width and heights. If the viewBox was properly set earlier, the SVG will scale to fit the dimensions set here.

<!--[if !IE]>-->
  <object data="images/ballerina04.svg" type="image/svg+xml" id="ballerina" width="282" height="416">
<!--<![endif]-->
<!--[if lt IE 9]>
  <object src="images/ballerina04.svg" classid="image/svg+xml" width="282" height="416" id="ballerina">
<![endif]-->
<!--[if gte IE 9]>
  <object data="images/ballerina04.svg" type="image/svg+xml" width="282" height="416" id="ballerina">
<![endif]-->
  </object>

Toggle Layers

Once this point is reached, the document successfully displays the accordion menu and the SVG graphic in its initialized state. What is missing, is the ability to change the layers displayed depending on the accordion menu selected. More specifically, we need to act upon the change event of the accordion menu and that action depends upon which menu is active. Conveniently, the jQuery accordion menu provides just what we need.

// GET THE INDEX OF THE ACTIVE MENU OPTION
var active = $( ".selector" ).accordion( "option", "active" );

and

// CALLBACK FUNCTION TO ACT ON THE CHANGE EVENT
$( ".selector" ).accordion({
  change: function(event, ui) { ... }
});

Its time to put it all together and modify the previously created call to create the accordion menu:

// SET THE UI ACCORDION
// TO JQUERY UI
$("#accordion").accordion({
  change: function(event, ui) {
    var active = $('#accordion').accordion('option', 'active');
    // active is a 0-based index to the active menu option
    // MANIPULATE THE SVG
    // GET SVG OBJECTS
    var obj = document.getElementById('ballerina');
    var doc = obj.contentDocument;
    var lay_head = doc.getElementById('layer2');
    var lay_body = doc.getElementById('layer3');
    ... other layers

    // SET SVG ATTRIBUTES
    var attr = 'display:inline';
    switch(active){
      case 1:
        lay_head.setAttribute('style', attr);
        break;
      case 2:
        lay_body.setAttribute('style', attr);
        break;
      ... other cases
    }

    // SET SVG ATTRIBUTES = HIDE
    var attr = 'display:none';
    switch(active){
      case 0:
        lay_head.setAttribute('style', attr);
      case 1:
        lay_body.setAttribute('style', attr);
      ... other cases
    }
  }
});

Conclusion

The page is now complete with basic interactivity. Please do view the source of the example page, it has the full, working code for that menu and that image. I am certain you will think of many uses for layered SVG images and that is just a sample of what can be done using SVG and javascript.

Changelog

1. FIX: Shortcodes within an inlined post are now processed. Uses do_shortcode().
2. FIX: Comment metadata now shows correct number of comments made.
3. NEW: Change code convention to shortcode which allows use of the standard shortcode functions. Old insert methods are deprecated but will still work.
4. NEW: Recursive inlining now allowed when using new shortcode styling. Protection against infinite loop coded.
5. NEW Added the showcontent attribute to control display of the post’s content.

Shortcode convention

Users will mainly notice that the code used to inline a post has been updated to the shortcode convention.

[ggisinlinepost id="%id" attribute1="%attr1" attribute2="%attr2"]

The previous code convention while deprecated will still work: [-ggis-inlinepost id=”%id” titletag=”%tag”-].

Usage is covered on the ggis-inlinepost page.

1. FIX: Correct paragraph/newline formatting.
2. NEW: Inlined post now recognizes the ‘more’ shortcode.
3. NEW: If a post requires a password, the password entry form will be displayed.
4. UPDATE: Improved display of metadata.

The metadata uses the following CSS classes for display:

• entry-meta
• meta-sep
• meta-prep

Please post your questions or comments on this post here.

App::import() only includes the file. So you would new to create a new instance every time. This is not recommended

ClassRegistry::init() loads the file, adds the instance to the a object map and returns the instance. This is an easy and convenient way to access models.

Controller::loadModel(); Uses ClassRegistry::init() adds the model to a property of the controller and also allows persistModel to be enabled.

While you “can” do any of these things, you should ask yourself why you are creating dependencies on models that are not natural to the controller. If you “have” to do use any of these, then I would do so in reverse order of the way i described them. IE, Controller::loadModel() then CR::init() and actually I never use App::import() for models.

What does it do?

Cloud Words allows for the upload and analysis of plain text and MS Word files. MS Word files are converted to plain text for the analysis. The analysis simply does a count total for each word in the file. A simple word count is actually not very useful since the most common words will dominate the count list. The most common words are generally not very useful for understanding the contents of a document. “THE” is the single word found most often in documents.

In order to improve the usefulness of the word count, some filtering must be done. For this POC, I am only applying a single filter though for real-life usage I would recommend additional filters. The filter used in this POC removes the 200 most common words from the word count. This count is saved and associated with the file.

The clouds are created from the word counts. A composite cloud, which sums the counts from all the files, displays the top 100 words in a cloud. Each file’s cloud displays the top 50 words. In the cloud, the order of the words is randomized and the size of the word is mathematically related to its count total.

Clicking a word shows all files that word is found in. The files are listed in word frequency order and the count is displayed.

Best comparison usage

This is a very simple solution and therefore it is very easy to get poor or unbalanced results. For the best results, follow these suggestions:

1. Documents should be of similar length
2. Documents should have a similar formatting purpose (letter vs report)
3. Each document should have a reasonable word distribution

To illustrate my meaning, I will review some testing documents I used and how they affected the results. I used 5 documents: one 1-page letter, one 1-page conversational policy, one 2-page conversational policy, one 1-page executive summary, and one 6-page retention of records policy. The retention of records policy completely overwhelmed all the other documents. This was due to its length but also due to its repetition of key words such as “year”.

Recommended improvements

The word count process works well. Improvements can be made in cleaning the resulting word counts and making them more useful. This could be done by a few processes:

1. Additional filters applied to the word count list
   • Aggregate plural and singular forms
   • Removal of MS Word formatting clues
   • User added white list words – must include in count
   • User added black list words – must exclude from count
2. Statistical monitoring
   • Ensure each document has a reasonable word distribution
   • Statistically weight word count by document length

Some improvements to the cloud display could also be made. These include:

1. Show list of word contexts when hovering over word
2. Allow white list or key word list highlighting in cloud – different color perhaps
3. Highlight words that are found in a comparison document. This could be a job description or call for papers.

A WinXP laptop is my where I write most of my code and the files are then uploaded to a FreeBSD server. I do not and have never owned a Mac. Usually for this type of action, I would run grep or sed on my FreeBSD server but instead decided to try Windows Grep. I ran Windows Grep with the proper regular expressions and voila, my PHP start tags were updated. Next, the files were uploaded to a new server for testing. ERRORS, errors everywhere.

About half of the updated files were kicking out errors or failing completely. The failed files were rather random and the code looked just fine in the editor. What was going on?

Comments not recognized by PHP

Digging a little it became obvious that the comments were not being properly recognized by PHP. Multi-line comments were fine but not the single line comments.

// This type of comment would cause all following
// lines to also be viewed as a comment.

/* This type of comment worked fine and as expected.
*/

Try searching for this type of prolem in Google and you will find NOTHING. I dug into my php.ini files, read relevant PHP documentation, searched many different terms, spent a few hours on IRC, and reformatted code. Nothing worked.

Finally I thought, well maybe my character encoding is incorrect (getting desparate by now). So I fired up my code in Notepad++, went to view the character encoding and noticed that the file was in Mac format. Huh? Well now, that could be a problem so I changed the file to Windows format, uploaded it to the server, and it worked!

Proper text format conversions

Windows uses a pair of CR and LF characters to terminate lines. UNIX (Including Linux and FreeBSD) uses an LF character only. Apple uses a CR character only. Time to dig into the text toolbox. On my FreeBSD, I have used the win2unix tool before, this time, I would use mac2unix. Sorry Windows, this type of work is much easier done in FreeBSD.

Uploaded all of my files to FreeBSD, ran mac2unix on all files, and then downloaded the files back to Windows. Comments in PHP now work as expected.

As a side note: It is important to be aware that text files should be uploaded in your FTP client in ASCII format. This allows for the automatic conversion between the different file formats.

American Red Cross in Southeastern Wisconsin – Provides relief to victims of disasters and helps people prevent, prepare for, and respond to emergencies in Dodge, Kenosha, Milwaukee, Ozaukee, Racine, Walworth, and Waukesha Counties.

Milwaukee Achiever Literacy Services – Inspires and empowers adult learners to gain the skills necessary to enrich their lives through education and training in an atmosphere of mutual acceptance and respect.

If you have any comments or questions, please add them here.

//UPDATE 5/11/2010

Usage is convered on the ggis-inlinepost page.

Installation

1. Download the latest version of the plugin here
3. Install via the standard Joomla interface
4. Enable the plugin
5. Minimal parameters may be set by clicking the plugin in the Plugin Manager

Basic usage (either the catid or the secid, not both, is required)

{ggis-scdesc catid=”10″} or
{ggis-scdesc secid=”10″}

Example of usage with parameters

{ggis-scdesc catid=”10″ showtitle=”0″ showname=”0″ showdesc=”1″}

Parameters:

• catid: id of category
• secid: id of section
• showtitle: Show the linked title(0/1, default=0)
• showname: Show the name(0/1, default=0)
• showdesc: Show the description(0/1, default=1)

Where to get it?

This is currently not a public release but if you are interested in it, please drop a comment on this article.

Expected Usage

This module was developed for a very specific usage and has not been developed or tested beyond that. I do however, see a wide variety of applications for this module. A client wished to display offsite class locations by county in a tabbed box. Additionally; the person editing the locations, while familiar with the basic editor interface on the front-end, was not expected to handle much complexity in layout.

Structural setup

1. Create a section named Section Locations
2. Create categories under Section Locations for each class type, ie.
   • Category Lifeguarding Locations
   • Category Lifeguarding Instructor Locations
   • Category Water Safety Instructor Locations
3. Under each category, create an article for each county listing that county’s offsite class locations, ie.
   • Article Dane County
   • Article Dodge County
   • Article Milwaukee County
   • Article Waukesha County
4. Control the display of the county articles by setting the publish flag

The outline of the above should be similar to:

1. Section Locations
   1. Category Lifeguarding Locations
      1. Article Dane County
      2. Article Dodge County
      3. Article Milwaukee County
      4. Article Waukesha County
   2. Category Lifeguarding Instructor Locations
      1. Article Dane County
      2. Article Dodge County
      3. Article Milwaukee County
      4. Article Waukesha County
   3. Category Water Safety Instructor Locations
      1. Article Dane County
      2. Article Dodge County
      3. Article Milwaukee County
      4. Article Waukesha County

Make it easy for the editor

1. Add a menu item to the user’s menu that links directly to Section Locations
   • This gives the editor easy access to the offsite class locations articles

Using the module

1. Use the mod_ggis-tabnews module that pulls all articles in a category and properly formats and outputs them
2. Make a copy of the module for each category
   • For the example’s case, 3 copies
3. Rename the copies
   • Tabbed Lifeguarding
   • Tabbed Lifeguard Instructor
   • Tabbed Water Safety Instructor
4. Assign each copy a unique position. This is easily done by typing your unique position into the Postion dropdown when editing the module.
   • lifeguard_locations
   • lifeguardinstructor_locations
   • watersafetyinstructor_locations
5. Set the module’s parameters as appropriate. Especially set either the Section ID or the Category ID.

Displaying the module

For the example, the module is intended to display in an article. That is why a unique, non-templated position was used in step 4 above. Modules may displaye
d in any article using Joomla’s loadposition plugin. In our example, there are 3 descriptive articles titled;

• Lifeguarding
• Lifeguard Instructor
• Water Safety Instructor

To display the module in the Lifeguarding article, include the plugin text where you wish the module to appear.

• (loadposition lifeguard_locations}