This article is the third in a series of four
- Introduction to karma.js
- Comparing HTML 5 Canvas and SVG
- This article, Digging into Inkscape
- JavaScript and SVG
In the previous two tutorials I introduced you to the karma.js library and to working with HTML 5 <canvas> and <svg>. In this tutorial, I will walk you through creating a geography lesson from scratch using Inkscape. Tutorial #4 will cover manipulating our SVG graphics using JavaScript
This lesson will teach how user the location of the different
states of the country Uruguay.
I confess, I did not create this lesson from scratch. The excellent original “Conozco a Uruguay” (I know Uruguay) was created by Gabriel Eirea and his friends at CeibalJam!, a grassroots organization developing educational software for Uruguay’s nationwide OLPC
implementation. The original version of Conozco a Uruguay was written entirely in Python, using the excellent pygame library, a python wrapper around the animation library SDL. Why rewrite it using HTML5 and JavaScript? The reasoning is simple. CeibalJam! spends a lot of its time teaching Uruguayan volunteers how to write educational software using Python. At the same time, there are a large number of web developers in Uruguay who could start developing with Karma with only minimal training. This situtation holds true for Nepal as well. We spend a lot of our time teaching developers how to program in flash when there are lots of local developers who already know HTML and JavaScript.
The Plot
A poor alien has crash-landed on earth. The pieces of his spaceship have scattered across Uruguay. The user must help him locate the correct state where individual pieces are located. Once all the parts are found, the friendly alien can fly home.
Before we go any further please play the game at least once. You can browse all the source code for this example here.
How we are going to do it
We will have three main graphical elements, a political map of Uruguay, a spaceship, and an alien that asks the user questions. We will use SVG images for all three. The main action through out this application will be alternately showing and hiding text that happens to be superimposed on graphical images. SVG particularly shines in
this use case.
Section 1: Digging into Inkscape
In creating the Karma version of Conozco, I cheated. I didn’t create all the graphics from hand. In fact I didn’t draw a single one of them. I converted the original .png images to .svg using inkscape’s Trace Bitmap feature. I added a few images such as the help and exit icons. Those are GNOME icons that I copied.
You may find this section frustrating if you have never used inkscape before. I highly recommend you run throught the Inkscape Basic tutorial. You can find it through the Help menu in inkscape. Help > Tutorials > Inkscape:Basic
Step 1: Convert the map
File > Import
Choose the image in folder tutorial3/mapStates.png
Path > Trace Bitmap
Select Edge Detection and then click OK
Tracing out the map
The Trace Bitmap dialog doesn’t close automatically so just click the X in the upper right corner.
Now click on your image and drag it to the right. You have two maps! The one on top is the SVG version. The one below is the old png. Delete the one below it.
The one below is png and the one on top SVG
You may find that the white rectangle does not line up with your map. You can fix this with File > Document Properties then click the button “Fit Page to Selection.”
Fit the page to the map
Step 2: Create the Capitals and the States
The great thing about SVG is that you don’t have to remember any x,y coordinates. Just put something on the map, set the element ID, and you can always access it later using a CSS selector statement.
Let’s create the marker for the state capitals
Click the button with the circle icon in the left vertical tool bar, then create a little circle
Next, right click on your circle and choose the option “Fill and Stroke”
At the fill tab, set all values to 255, to fill the circle with white
Set the color for the fill
Then go to the “Stroke paint” tab, make the R, G, and B values 0, 0, 0
Set the color for the Stroke/Outline
Now drag your little capital into place on the map.
Drag onto map
Click the “Text” icon on the left vertical toolbar. We are going to create two <text> fields, one for the state and one for the state capital. Make sure the font size isn’t too big for the area you highlighted
Create the text elements
Step 3: Add element ids and class names to the states and capital cities
Click on the icon you created for the capital, then click on the icon “Edit XML Tree” in the upper menu bar.
Edit the XML Tree manually
Highlight the “id” attribute in the upper right box. Then type in a new id in the bottom blank area. MAKE SURE YOU CLICK SET otherwise your change will not stick.
Set the id to “cap” + yourCapitalName
Set the element id
Now we are going to create a new attribute “class”
Go to the box where there currently is id and type “class” in its place. For the value, type in:
capital city yourCapitalName yourStateName
make sure you click SET!
Type in class names
Repeat the above for your capital icons
Set the id’s for all the capital text areas with “text” + CapitalName
and the id’s for the States with “textDept” + YourStateName. Using
these prefixes and camelCase consistently will save your tuckus later.
For each state text area, add the following class names
text dept yourStateName yourCapitalName
For each capital text area, add the following class names
text capital yourCapitalName
You may notice that I use “dept” frequently. That is because Uruguay calls their states “departamentos.” It was easier for me to continue using their convention rather than using “state.”
I can’t overstate the importance of setting the id and class properties correctly and to do it consistently.
Using these properties I can do operations such as the following
//hide all text on the map
$('.text', k.svg.capitals.root).css('display', 'none');
//show the text only for yourState and yourCapital
$('.text.yourStateName', k.svg.capitals.root).css('display', 'block');
Wow! Them css selectors aRrrre powerful stuff!
Step 4: Put it into the directory assets/svg
If you haven’t created a project folder yet, now is a good time. Here is a good template
mykarma/
assets/
audio/
svg/
css/
js/
Step 5: Convert the alien
File > Import choose alien.png
Path > Trace Bitmap…
Go to the area “Multiple Scans: create groups of paths” and select the option “Colors”
Next Click OK.
Trace the Colors
Delete the image underneath as you did before.
Delete the Image Below
Step 6: Create the Word Bubble
Click the button “Create Rectangles and Squares” and drag out a nice big rectangle
Create the Word Bubble
Give the rectangle nice rounded corners, set the values in the Rx and Ry boxes to 50
Round the corners
If you can’t see the Rx and Ry boxes, click the “Create Rectangles and Square” box again
Click on Text in the left vertical icon bar and type some text in the word bubble area. Make text area as big as the word bubble.
Create the Text Area
Go to File > Document Properties and click “Fit Page to Selection”
Fit the page to your image
Save your SVG as alien.svg and close Inkscape
Step 7: Text Don’T Wrap in SVG! A Beautiful Hack
In previous, tutorial I explained that inkscape does not support word wrapping in <text> elements. Let’s put into practice the hack I discussed last time.
Open up alien.svg in a text editor
Go to the portion of your file with the text in it. If it is
surrounded with <flowPara> tag, it should be fine. Leave it as
it is. If it is in a <text> element, delete the entire <text> element and replace it with the following:
<text>
<foreignObject
id="textHack">
<xhtml:body>
<xhtml:div
id="alienQuestion"
style="font-size:20px"></xhtml:div>
</xhtml:body>
</foreignObject>
</text>
Step 8: Convert the spaceship
There may be a much easier way to do this. If you know of one, please leave a comment.
Import ship.png
Path > Trace Bitmap
Select Multiple Scan, Grays and click OK
Multiple Scans with Grayscale
Drag out your grayscale version of the rocket
In the left vertical bar, click paint bucket
Select the red color from the lower color bar
Pick a color
dump paint into the left wing in the grayscale image, then drag it away
Paint the Wing
Drag out the wing
repeat for the rest of the space ship to reassemble your ship
Delete the original image and the grayscale
Highlight each individual piece of the ship then choose “Edit the XML tree” and set the id
Set the Id on the left wing
There are other SVG images in the Karma version of Conozco a Uruguay but there is nothing more advanced in them than what we have covered so far. Whatever you do, please put all the your SVG elements into the folder assets/svg/
Next up is manipulating SVG using JavaScript.
