Images

The images of the blocks used with JSCode are made using the Scalable Vector Graphics (SVG) format. We use svg so we can easily change the look of the images.

The image for the On block looks like this.

On

We generated this image by writing an svg file for the image and then converting the svg into a png file.

Source for the svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
                              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="87" height="64">
  <desc>On</desc>
  <g>
    <rect stroke="black" fill="forestgreen" rx="5px" y="0px" x="0px" width="80px" height="60px"/>
    <rect stroke="black" fill="yellow" y="55px" x="10px" width="60px" height="8px"/>
    <rect stroke="black" fill="forestgreen" y="9px" x="77px" width="9px" height="42px"/>
    <text fill="white" x="30" y="24">On</text>
    <text fill="white" x="26" y="36">[AC]</text>
  </g>
</svg>

  1. edit the svg
  2. review it
  3. create the png

edit the svg

You can use editors that know about svg to edit your image. We designed the blocks svg to be easy to hand edit so you can easily use any text editor to edit the svg files. We have used WordPad on Windows and gedit on Linux. You can use any text editor that saves in plain text, UTF-8 or unicode. (fixme: say this better)

review it

Look at what you created. You can view the svg with many viewers. Look at the list at ??? We use Squiggle from the Batik svg project. It's fun to play with the svg, viewing the image then editing a parameter then clicking refresh in Squiggle to see what our change did.

You can move the text around or change the color of the block or the text. You can change the shape of the block, but that requires updating the xslt stylesheet that generates program listings in svg.

Look at the svg file basicBlockV3.svg. We use this file to build other files. If we wanted another basic block we would copy the file to a new file and edit the new file. It has 4 lines of text with the first two indented. This makes it a little easier to start working with where we want to put any text.

  http://www.w3.org/TR/SVG/types.html#ColorKeywords

create the png

Once you are ready to display your image, you save the image to a .png file. We use the rasterizer tool that's also included in the Batik project.

  java -jar /tools/batik/xml-batik/batik-1.5/batik-rasterizer.jar on1.svg

Our svg files are named on1.svg, off1.svg etc. We name files that we are testing on2.svg or offX3.svg and then rename to <block>1.svg if we update the file. The batik rasterizer will generate on1.png from on1.svg and the web pages use <block>1.png images.


On eeyore

cd /ggf/robots/tools/jsImages/shapes
java -jar /ggf/tools/batik/xml-batik/batik-1.5/batik-rasterizer.jar basic/on1.svg

this will create cd /ggf/robots/tools/jsImages/shapes/basic/on1.png



IN ANOTHER PAGE

Why do we use the file formats svg and png?

Why svg
  editable graphics
 
Why png
  transparency
  compression


Design
  CSS
  a page has one stack - less to calculate


CSS
  show how to use
  and xsl style

Amaya
DOM viewer in Squiggle

References:

SVG
  http://www.w3.org/Graphics/SVG/Overview.htm8

PNG
  http://www.w3.org/TR/REC-png.html
  http://www.libpng.org/pub/png/

gedit
  http://gedit.sourceforge.net/