Activities/XoEditor/XoEditor.xml

From Sugar Labs
< Activities‎ | XoEditor
Revision as of 14:10, 5 April 2012 by Walter (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: Since we do not currently support .XML file types in the wiki, you'll have to copy the text below and save it to a file with a .xml suffix, e.g., xoeditor.xml 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>change the XO colors and shape</title>

<!--
Author: Walter Bender (walter@laptop.org)
(CC-PD) Public Domain (do what you want to do...)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
-->




// SVG version of OLPC XO man color changer and shape shifter
// Created by: Walter Bender (walter@laptop.org) on 27 January 2007
// Last modified by: Walter Bender (walter@laptop.org) on 26 May 2009
// Color tool designed in memory of: Nat Jacobson
// ajax hooks: Erik Blankinship (erikb@mediamods.com) on 15 August 2007

<script type="text/javascript">
<![CDATA[
         var screenW = 1200, screenH = 900;

         var fillcolors = [
         // red, orange, yellow, green, blue, purple
         "rgb(255,43,52)", "rgb(255,143,0)", "rgb(248,232,0)", "rgb(0,234,17)", "rgb(0,160,255)", "rgb(172,50,255)"
         ];

         var strokecolors = [
	 // M A+ C- C C+ A-
	 // dark fill
	 // red
         "rgb(178,0,8)", "rgb(154,82,0)", "rgb(128,117,0)", "rgb(0,128,9)", "rgb(0,88,140)", "rgb(94,0,140)",
	 // orange
         "rgb(154,82,0)", "rgb(128,117,0)", "rgb(0,128,9)", "rgb(0,88,140)", "rgb(94,0,140)", "rgb(178,0,8)",
	 // yellow
         "rgb(128,117,0)", "rgb(0,128,9)", "rgb(0,88,140)", "rgb(94,0,140)", "rgb(178,0,8)", "rgb(154,82,0)",
	 // green
         "rgb(0,128,9)", "rgb(0,88,140)", "rgb(94,0,140)", "rgb(178,0,8)", "rgb(154,82,0)", "rgb(128,117,0)",
	 // blue
         "rgb(0,88,140)", "rgb(94,0,140)", "rgb(178,0,8)", "rgb(154,82,0)", "rgb(128,117,0)", "rgb(0,128,9)",
	 // purple
         "rgb(94,0,140)", "rgb(178,0,8)", "rgb(154,82,0)", "rgb(128,117,0)", "rgb(0,128,9)", "rgb(0,88,140)",

         // medium fill
	 // red
         "rgb(230,0,10)", "rgb(255,143,0)", "rgb(190,158,0)", "rgb(0,178,13)", "rgb(0,95,228)", "rgb(127,0,191)",
	 // orange
         "rgb(201,126,0)", "rgb(190,158,0)", "rgb(0,178,13)", "rgb(0,95,228)", "rgb(167,0,255)", "rgb(255,43,52)",
	 // yellow
         "rgb(190,158,0)", "rgb(0,234,17)", "rgb(0,160,255)", "rgb(172,50,255)", "rgb(255,43,52)", "rgb(255,143,0)",
	 // green
         "rgb(0,178,13)", "rgb(0,95,228)", "rgb(127,0,191)", "rgb(255,43,52)", "rgb(255,143,0)", "rgb(190,158,0)",
	 // blue
         "rgb(0,95,228)", "rgb(153,0,230)", "rgb(255,43,52)", "rgb(255,143,0)", "rgb(190,158,0)", "rgb(0,178,13)",
	 // purple
         "rgb(127,0,191)", "rgb(255,43,52)", "rgb(255,143,0)", "rgb(190,158,0)", "rgb(0,178,13)", "rgb(0,95,228)",

	 // light fill
	 // red
         "rgb(255,173,206)", "rgb(255,193,105)", "rgb(248,232,0)", "rgb(139,255,122)", "rgb(188,205,255)", "rgb(209,163,255)",
	 // orange
         "rgb(255,193,105)", "rgb(248,232,0)", "rgb(139,255,122)", "rgb(188,205,255)", "rgb(209,163,255)", "rgb(255,173,206)",
	 // yellow
         "rgb(255,250,0)", "rgb(139,255,122)", "rgb(188,206,255)", "rgb(209,163,255)", "rgb(255,173,206)", "rgb(255,193,105)",
	 // green
         "rgb(139,255,122)", "rgb(188,205,255)", "rgb(209,163,255)", "rgb(255,173,206)", "rgb(255,193,105)", "rgb(248,232,0)",
	 // blue
         "rgb(188,205,255)", "rgb(209,163,255)", "rgb(255,173,206)", "rgb(255,193,105)", "rgb(248,232,0)", "rgb(139,255,122)",
	 // purple
         "rgb(209,163,255)", "rgb(255,173,206)", "rgb(255,193,105)", "rgb(248,232,0)", "rgb(139,255,122)", "rgb(188,205,255)"
         ];

// stroke values
var strokeLight = 2;
var strokeMedium = 1;
var strokeDark = 0;
var strokeCurrent = strokeMedium;

//
var flip = 0;
var square = 0;
var xoff = 0;
var yoff = 2;

// color variables
var strokeH = 0;
var fillH = 0;

// Sugar stuff
// gridbox centers
var grid = [37.5, 112.5, 187.5, 262.5, 337.5, 412.5, 485.5, 562.5, 637.5, 712.5, 785.5, 862.5, 937.5, 1012.5, 1087.5, 1162.5];
var radius = 22.5;
var strokeW = 9.5;

var circlex1 = [0,1,2,3,4,5];
var circley1 = [0,1,2,3,4,5];
var circlex2 = [0,1,2,3,4,5];
var circley2 = [0,1,2,3,4,5];
var circlex3 = [0,1,2,3,4,5];
var circley3 = [0,1,2,3,4,5];
var circlex4 = [0,1,2,3,4,5];
var circley4 = [0,1,2,3,4,5];
var circlex5 = [0,1,2,3,4,5];
var circley5 = [0,1,2,3,4,5];
var circlex6 = [0,1,2,3,4,5];
var circley6 = [0,1,2,3,4,5];

// Stuff needed for moving the xo man end and knot points
var xoL1X1=554.5;
var xoL1Y1=448;
var xoL1X2=645.5;
var xoL1Y2=357;
var xoL1K1X=580;
var xoL1K1Y=420.5;
var xoL1K2X=620;
var xoL1K2Y=380.5;
var xoL2X1=554.5;
var xoL2Y1=357;
var xoL2X2=645.5;
var xoL2Y2=448;
var xoL2K1X=580;
var xoL2K1Y=380.5;
var xoL2K2X=620;
var xoL2K2Y=420.5;
var xoCX=600;
var xoCY=318.5;
var xoL1X1Reset=554.5;
var xoL1Y1Reset=448;
var xoL1X2Reset=645.5;
var xoL1Y2Reset=357;
var xoL1K1XReset=580;
var xoL1K1YReset=420.5;
var xoL1K2XReset=620;
var xoL1K2YReset=380.5;
var xoL2X1Reset=554.5;
var xoL2Y1Reset=357;
var xoL2X2Reset=645.5;
var xoL2Y2Reset=448;
var xoL2K1XReset=580;
var xoL2K1YReset=380.5;
var xoL2K2XReset=620;
var xoL2K2YReset=420.5;
var xoCXReset=600;
var xoCYReset=318.5;
var xoCenterX = (xoL1X1+xoL1X2)/2;
var xoCenterY = (xoL1Y1+xoL1Y2)/2;
var moveOn=0;
var moveID="";

// calculate circle coordinates
function sincos (evt) {
var a;
var i;
var r1=75;
var r2=245;
var cx = [0,1,2,3,4,5];
var cy = [0,1,2,3,4,5];


  for( i=0; i< 6; i++ )
  {
    a = 1.05;
    a *= i;
    cx[i] = 600-r2*Math.sin(a);
    cy[i] = 375-r2*Math.cos(a);
  }

  for( i=0; i< 6; i++ )
  {
    a = 1.05;
    a *= i;
    circlex1[i] = r1*Math.sin(a)+cx[0];
    circley1[i] = r1*Math.cos(a)+cy[0];
    circlex2[i] = r1*Math.sin(a)+cx[1];
    circley2[i] = r1*Math.cos(a)+cy[1];
    circlex3[i] = r1*Math.sin(a)+cx[2];
    circley3[i] = r1*Math.cos(a)+cy[2];
    circlex4[i] = r1*Math.sin(a)+cx[3];
    circley4[i] = r1*Math.cos(a)+cy[3];
    circlex5[i] = r1*Math.sin(a)+cx[4];
    circley5[i] = r1*Math.cos(a)+cy[4];
    circlex6[i] = r1*Math.sin(a)+cx[5];
    circley6[i] = r1*Math.cos(a)+cy[5];
  }
}

function positionButton(evt,id,x,y) {
  e  = evt.target.ownerDocument.getElementById(id);
  e.setAttribute("cx",grid[x]);
  e.setAttribute("cy",grid[y]);
}

function positionButtonOffset(evt,id,x,y) {
  if( y < 0 ) { y+=6; }
  e  = evt.target.ownerDocument.getElementById(id);
  e.setAttribute("cx",grid[x+xoff]);
  e.setAttribute("cy",grid[y+yoff]);
}

function positionCircle(evt,id,r,a) {
  if( a > -1 && a < 6 )
  {
    e  = evt.target.ownerDocument.getElementById(id);
    switch (r)
    {
      case 0:
        e.setAttribute("cx",circlex1[a]);
        e.setAttribute("cy",circley1[a]);
        break;
      case 1:
        e.setAttribute("cx",circlex2[a]);
        e.setAttribute("cy",circley2[a]);
        break;
      case 2:
        e.setAttribute("cx",circlex3[a]);
        e.setAttribute("cy",circley3[a]);
        break;
      case 3:
        e.setAttribute("cx",circlex4[a]);
        e.setAttribute("cy",circley4[a]);
        break;
      case 4:
        e.setAttribute("cx",circlex5[a]);
        e.setAttribute("cy",circley5[a]);
        break;
      case 5:
        e.setAttribute("cx",circlex6[a]);
        e.setAttribute("cy",circley6[a]);
        break;
      default :
      }
  }
}

function buttonInit(evt) {
  if( square == 1 )
  {
	buttonInitSquare(evt);
  } else {
	buttonInitHex(evt);
  }

}

// scale and position buttons in circles
function buttonInitHex(evt) {

  positionCircle(evt,"X",0,0);

  positionCircle(evt,"R",0,0);
  positionCircle(evt,"YR",1,1);
  positionCircle(evt,"Y",2,2);
  positionCircle(evt,"G",3,3);
  positionCircle(evt,"B",4,4);
  positionCircle(evt,"P",5,5);

  positionCircle(evt,"RAm",0,1);
  positionCircle(evt,"YRAm",1,2);
  positionCircle(evt,"YAm",2,3);
  positionCircle(evt,"GAm",3,4);
  positionCircle(evt,"BAm",4,5);
  positionCircle(evt,"PAm",5,0);

  positionCircle(evt,"RCp",0,2);
  positionCircle(evt,"YRCp",1,3);
  positionCircle(evt,"YCp",2,4);
  positionCircle(evt,"GCp",3,5);
  positionCircle(evt,"BCp",4,0);
  positionCircle(evt,"PCp",5,1);

  positionCircle(evt,"RC",0,3);
  positionCircle(evt,"YRC",1,4);
  positionCircle(evt,"YC",2,5);
  positionCircle(evt,"GC",3,0);
  positionCircle(evt,"BC",4,1);
  positionCircle(evt,"PC",5,2);

  positionCircle(evt,"RCm",0,4);
  positionCircle(evt,"YRCm",1,5);
  positionCircle(evt,"YCm",2,0);
  positionCircle(evt,"GCm",3,1);
  positionCircle(evt,"BCm",4,2);
  positionCircle(evt,"PCm",5,3);

  positionCircle(evt,"RAp",0,5);
  positionCircle(evt,"YRAp",1,0);
  positionCircle(evt,"YAp",2,1);
  positionCircle(evt,"GAp",3,2);
  positionCircle(evt,"BAp",4,3);
  positionCircle(evt,"PAp",5,4);
}

// scale and position buttons on grid (col,row)
function buttonInitSquare(evt) {

  positionButtonOffset(evt,"X",0,0);

  positionButtonOffset(evt,   "R",0,0);
  positionButtonOffset(evt,  "YR",5,5);
  positionButtonOffset(evt,   "Y",4,4);
  positionButtonOffset(evt,   "G",3,3);
  positionButtonOffset(evt,   "B",2,2);
  positionButtonOffset(evt,   "P",1,1);

  positionButtonOffset(evt, "RAm",0,1);
  positionButtonOffset(evt,"YRAm",5,0);
  positionButtonOffset(evt, "YAm",4,5);
  positionButtonOffset(evt, "GAm",3,4);
  positionButtonOffset(evt, "BAm",2,3);
  positionButtonOffset(evt, "PAm",1,2);

  positionButtonOffset(evt, "RCp",0,2);
  positionButtonOffset(evt,"YRCp",5,1);
  positionButtonOffset(evt, "YCp",4,0);
  positionButtonOffset(evt, "GCp",3,5);
  positionButtonOffset(evt, "BCp",2,4);
  positionButtonOffset(evt, "PCp",1,3);

  positionButtonOffset(evt,  "RC",0,3);
  positionButtonOffset(evt, "YRC",5,2);
  positionButtonOffset(evt,  "YC",4,1);
  positionButtonOffset(evt,  "GC",3,0);
  positionButtonOffset(evt,  "BC",2,5);
  positionButtonOffset(evt,  "PC",1,4);

  positionButtonOffset(evt, "RCm",0,4);
  positionButtonOffset(evt,"YRCm",5,3);
  positionButtonOffset(evt, "YCm",4,2);
  positionButtonOffset(evt, "GCm",3,1);
  positionButtonOffset(evt, "BCm",2,0);
  positionButtonOffset(evt, "PCm",1,5);

  positionButtonOffset(evt, "RAp",0,5);
  positionButtonOffset(evt,"YRAp",5,4);
  positionButtonOffset(evt, "YAp",4,3);
  positionButtonOffset(evt, "GAp",3,2);
  positionButtonOffset(evt, "BAp",2,1);
  positionButtonOffset(evt, "PAp",1,0);
}

// recompute button color
// fill hue is 0,1,2,3,4,5 for r,o,y,g,b,p
// stroke hue is 0,1,2,3,4,5 for m,a+,c-,c,c+,a- plus an offset of 6*fillhue and 36*valuelevel
function colorButton(evt,id,fh,sh,sv) {
var e;
  e = evt.target.ownerDocument.getElementById(id);
  if( flip == 0 )
  {
    e.setAttribute("stroke",strokecolors[fh*6+sv*36+sh]);
    e.setAttribute("fill",fillcolors[fh]);
  } else {
    e.setAttribute("fill",strokecolors[fh*6+sv*36+sh]);
    e.setAttribute("stroke",fillcolors[fh]);
  }
}

// update XO man and all buttons based on current hue and value
function colorUpdate(evt) {
var e;
var tmp;

  // update XO Man
  colorButton(evt,"Circle",fillH,strokeH,strokeCurrent);
  colorButton(evt,"iconCircle",fillH,strokeH,strokeCurrent);
  if( flip == 0 )
  {
    e = evt.target.ownerDocument.getElementById("Line1");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("Line2");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("Fill1");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("Fill2");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("iconLine1");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("iconLine2");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("iconFill1");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("iconFill2");
    e.setAttribute("stroke",fillcolors[fillH]);
  } else {
    e = evt.target.ownerDocument.getElementById("Line1");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("Line2");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("Fill1");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("Fill2");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("iconLine1");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("iconLine2");
    e.setAttribute("stroke",fillcolors[fillH]);
    e = evt.target.ownerDocument.getElementById("iconFill1");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
    e = evt.target.ownerDocument.getElementById("iconFill2");
    e.setAttribute("stroke",strokecolors[fillH*6+strokeCurrent*36+strokeH]);
  }

  tmp = flip;
  flip = 0;
  colorButton(evt,"vd",fillH,strokeH,strokeDark);
  colorButton(evt,"vm",fillH,strokeH,strokeMedium);
  colorButton(evt,"vl",fillH,strokeH,strokeLight);
  flip = 1;
  colorButton(evt,"vdf",fillH,strokeH,strokeDark);
  colorButton(evt,"vmf",fillH,strokeH,strokeMedium);
  flip = tmp;

  colorButton(evt,"R",0,0,strokeCurrent);
  colorButton(evt,"YR",1,0,strokeCurrent);
  colorButton(evt,"Y",2,0,strokeCurrent);
  colorButton(evt,"G",3,0,strokeCurrent);
  colorButton(evt,"B",4,0,strokeCurrent);
  colorButton(evt,"P",5,0,strokeCurrent);
  colorButton(evt,"RAp",0,1,strokeCurrent);
  colorButton(evt,"YRAp",1,1,strokeCurrent);
  colorButton(evt,"YAp",2,1,strokeCurrent);
  colorButton(evt,"GAp",3,1,strokeCurrent);
  colorButton(evt,"BAp",4,1,strokeCurrent);
  colorButton(evt,"PAp",5,1,strokeCurrent);
  colorButton(evt,"RCm",0,2,strokeCurrent);
  colorButton(evt,"YRCm",1,2,strokeCurrent);
  colorButton(evt,"YCm",2,2,strokeCurrent);
  colorButton(evt,"GCm",3,2,strokeCurrent);
  colorButton(evt,"BCm",4,2,strokeCurrent);
  colorButton(evt,"PCm",5,2,strokeCurrent);
  colorButton(evt,"RC",0,3,strokeCurrent);
  colorButton(evt,"YRC",1,3,strokeCurrent);
  colorButton(evt,"YC",2,3,strokeCurrent);
  colorButton(evt,"GC",3,3,strokeCurrent);
  colorButton(evt,"BC",4,3,strokeCurrent);
  colorButton(evt,"PC",5,3,strokeCurrent);
  colorButton(evt,"RCp",0,4,strokeCurrent);
  colorButton(evt,"YRCp",1,4,strokeCurrent);
  colorButton(evt,"YCp",2,4,strokeCurrent);
  colorButton(evt,"GCp",3,4,strokeCurrent);
  colorButton(evt,"BCp",4,4,strokeCurrent);
  colorButton(evt,"PCp",5,4,strokeCurrent);
  colorButton(evt,"RAm",0,5,strokeCurrent);
  colorButton(evt,"YRAm",1,5,strokeCurrent);
  colorButton(evt,"YAm",2,5,strokeCurrent);
  colorButton(evt,"GAm",3,5,strokeCurrent);
  colorButton(evt,"BAm",4,5,strokeCurrent);
  colorButton(evt,"PAm",5,5,strokeCurrent);

  saveXo()
}

function saveXo( )
{
	var upXoDude = document.getElementById('upXo');
	var xos = "";
	for (var i=0; i<upXoDude.childNodes.length; i++)
	{	xoi = upXoDude.childNodes[i];
		if (xoi.nodeType == 1)
		{	xos = xos + "<" + xoi.nodeName + " ";
			for (var j=0; j<xoi.attributes.length; j++)
			{	xoj = xoi.attributes[j];
				xos = xos + xoj.nodeName + "=\"" + xoj.nodeValue + "\" ";
			}
			xos = xos+ "/>";
		}
	}

	//alert( xos );
	new Ajax.Request( 'saveXo', {method:'get', parameters:'upXo='+xos} );
}

// individual button functions
function updater(evt,fh,dh,a) {
  fillHUndo = fillH;
  fillH = fh;
  strokeHUndo = strokeH;
  strokeH = dh;
  if( square == 1 )
  {
  // a complete kludge because the order of the grid
  // does not reflect the order of the delta hues
    switch(fh)
    {
    case 0:
      if( dh > 0 ) { dh = 6-dh; }
      positionButtonOffset(evt,"X",0,dh);
      break;
    case 1:
      positionButtonOffset(evt,"X",5,5-dh);
      break;
    case 2:
      positionButtonOffset(evt,"X",4,4-dh);
      break;
    case 3:
      positionButtonOffset(evt,"X",3,3-dh);
      break;
    case 4:
      positionButtonOffset(evt,"X",2,2-dh);
      break;
    case 5:
      positionButtonOffset(evt,"X",1,1-dh);
      break;
    }
  } else {
  // a kludge of a different sort fo the similar reasons as above
    positionCircle(evt,"X",fh,a);
  }
  colorUpdate(evt);
}

function valueDark(evt) {
  strokeCurrent = strokeDark;
  flip = 0;
  e = evt.target.ownerDocument.getElementById("bgd");
  e.setAttribute("visibility","visible");
  e = evt.target.ownerDocument.getElementById("bgdf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgm");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgmf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgl");
  e.setAttribute("visibility","hidden");
  colorUpdate(evt);
}

function valueDarkFlip(evt) {
  strokeCurrent = strokeDark;
  flip = 1;
  e = evt.target.ownerDocument.getElementById("bgd");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgdf");
  e.setAttribute("visibility","visible");
  e = evt.target.ownerDocument.getElementById("bgm");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgmf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgl");
  e.setAttribute("visibility","hidden");
  colorUpdate(evt);
}

function valueMedium(evt) {
  strokeCurrent = strokeMedium;
  flip = 0;
  e = evt.target.ownerDocument.getElementById("bgd");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgdf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgm");
  e.setAttribute("visibility","visible");
  e = evt.target.ownerDocument.getElementById("bgmf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgl");
  e.setAttribute("visibility","hidden");
  colorUpdate(evt);
}

function valueMediumFlip(evt) {
  strokeCurrent = strokeMedium;
  flip = 1;
  e = evt.target.ownerDocument.getElementById("bgd");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgdf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgm");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgmf");
  e.setAttribute("visibility","visible");
  e = evt.target.ownerDocument.getElementById("bgl");
  e.setAttribute("visibility","hidden");
  colorUpdate(evt);
}

function valueLight(evt) {
  strokeCurrent = strokeLight;
  flip = 0;
  e = evt.target.ownerDocument.getElementById("bgd");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgdf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgm");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgmf");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bgl");
  e.setAttribute("visibility","visible");
  colorUpdate(evt);
}

function hexGrid(evt) {
  square = 0;
  e = evt.target.ownerDocument.getElementById("bgsq");
  e.setAttribute("visibility","hidden");
  e = evt.target.ownerDocument.getElementById("bghex");
  e.setAttribute("visibility","visible");
  buttonInit(evt);
}

function sqGrid(evt) {
  square = 1;
  e = evt.target.ownerDocument.getElementById("bgsq");
  e.setAttribute("visibility","visible");
  e = evt.target.ownerDocument.getElementById("bghex");
  e.setAttribute("visibility","hidden");
  buttonInit(evt);
}

function background(evt,a) {
  e = evt.target.ownerDocument.getElementById("backgroundW");
  if( a == 0 )
  {
    e.setAttribute("visibility","visible");
    e = evt.target.ownerDocument.getElementById("backgroundXO");
    e.setAttribute("fill","rgb(255,255,255)");
  } else {
    e.setAttribute("visibility","hidden");
  }
  e = evt.target.ownerDocument.getElementById("backgroundL");
  if( a == 1 )
  {
    e.setAttribute("visibility","visible");
    e = evt.target.ownerDocument.getElementById("backgroundXO");
    e.setAttribute("fill","rgb(231,231,233)");
  } else {
    e.setAttribute("visibility","hidden");
  }
  e = evt.target.ownerDocument.getElementById("backgroundM");
  if( a == 2 )
  {
    e.setAttribute("visibility","visible");
    e = evt.target.ownerDocument.getElementById("backgroundXO");
    e.setAttribute("fill","rgb(76,77,79)");
  } else {
    e.setAttribute("visibility","hidden");
  }
  e = evt.target.ownerDocument.getElementById("backgroundK");
  if( a == 3 )
  {
    e.setAttribute("visibility","visible");
    e = evt.target.ownerDocument.getElementById("backgroundXO");
    e.setAttribute("fill","rgb(0,0,0)");
  } else {
    e.setAttribute("visibility","hidden");
  }
}


// the rest of these functions are for moving knot points
function showpoints(evt)
{
var e;

  e = evt.target.ownerDocument.getElementById("L1Knot1");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL1K1X);
  e.setAttribute("cy",xoL1K1Y);
  e = evt.target.ownerDocument.getElementById("L1Knot2");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL1K2X);
  e.setAttribute("cy",xoL1K2Y);
  e = evt.target.ownerDocument.getElementById("L2Knot1");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL2K1X);
  e.setAttribute("cy",xoL2K1Y);
  e = evt.target.ownerDocument.getElementById("L2Knot2");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL2K2X);
  e.setAttribute("cy",xoL2K2Y);
  e = evt.target.ownerDocument.getElementById("L1End1");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL1X1);
  e.setAttribute("cy",xoL1Y1);
  e = evt.target.ownerDocument.getElementById("L2End1");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL2X1);
  e.setAttribute("cy",xoL2Y1);
  e = evt.target.ownerDocument.getElementById("L1End2");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL1X2);
  e.setAttribute("cy",xoL1Y2);
  e = evt.target.ownerDocument.getElementById("L2End2");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoL2X2);
  e.setAttribute("cy",xoL2Y2);
  e = evt.target.ownerDocument.getElementById("Center");
  e.setAttribute("visibility", "visible");
  e.setAttribute("cx",xoCX);
  e.setAttribute("cy",xoCY);
}

function hidepoints(evt)
{
  e = evt.target.ownerDocument.getElementById("L1Knot1");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L1Knot2");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L2Knot1");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L2Knot2");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L1End1");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L1End2");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L2End1");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("L2End2");
  e.setAttribute("visibility", "hidden");
  e = evt.target.ownerDocument.getElementById("Center");
  e.setAttribute("visibility", "hidden");
}

// moves are constrained by level and restricted to XO box
function move(evt)
{
var x,y;

  if( moveOn == 1 )
  {
    //bug, see: http://dev.laptop.org/ticket/1657
    //need to test on an XO, but the following code seems to do the correct thing in jhbuild

    x = evt.clientX;
    if( screen.width < 1200 )
    {
      x *= 1200;
      x /= screen.width;
    }
    y = evt.clientY;
    if( screen.height < 900 )
    {
      y *= 900;
      y /= screen.height;
    }

    if( x < (xoCenterX-80) ) { x = xoCenterX-80; }
    if( x > (xoCenterX+80) ) { x = xoCenterX+80; }
    if( y < (xoCenterY-100) ) { y = xoCenterY-100; }
    if( y > (xoCenterY+80) ) { y = xoCenterY+80; }
    e = evt.target.ownerDocument.getElementById(moveID);
      e.setAttribute("cx",x);
      e.setAttribute("cy",y);
      switch (moveID)
      {
      case "Center":
        xoCX = x;
        xoCY = y;
        break;
      case "L1End1":
        xoL1X1 = x;
        xoL1Y1 = y;
        break;
      case "L1End2":
        xoL1X2 = x;
        xoL1Y2 = y;
        break;
      case "L2End1":
        xoL2X1 = x;
        xoL2Y1 = y;
        break;
      case "L2End2":
        xoL2X2 = x;
        xoL2Y2 = y;
        break;
      case "L1Knot1":
        xoL1K1X = x;
        xoL1K1Y = y;
        break;
      case "L1Knot2":
        xoL1K2X = x;
        xoL1K2Y = y;
        break;
      case "L2Knot1":
        xoL2K1X = x;
        xoL2K1Y = y;
        break;
      case "L2Knot2":
        xoL2K2X = x;
        xoL2K2Y = y;
        break;
      default :
      }
  }
}

function setID (evt, id)
{
  moveID = id;
}

function startmove(evt)
{
  moveOn = 1;
}

function stopmove(evt)
{
  moveOn = 0;
  moveID = "";
  e = evt.target.ownerDocument.getElementById("Circle");
  e.setAttribute("cx",xoCX);
  e.setAttribute("cy",xoCY);
  e = evt.target.ownerDocument.getElementById("Line1");
  e.setAttribute("d", "M"+xoL1X1+","+xoL1Y1+" C"+xoL1K1X+","+xoL1K1Y+" "+xoL1K2X+","+xoL1K2Y+" "+xoL1X2+","+xoL1Y2);
  e = evt.target.ownerDocument.getElementById("Fill1");
  e.setAttribute("d", "M"+xoL1X1+","+xoL1Y1+" C"+xoL1K1X+","+xoL1K1Y+" "+xoL1K2X+","+xoL1K2Y+" "+xoL1X2+","+xoL1Y2);
  e = evt.target.ownerDocument.getElementById("Line2");
  e.setAttribute("d", "M"+xoL2X1+","+xoL2Y1+" C"+xoL2K1X+","+xoL2K1Y+" "+xoL2K2X+","+xoL2K2Y+" "+xoL2X2+","+xoL2Y2);
  e = evt.target.ownerDocument.getElementById("Fill2");
  e.setAttribute("d", "M"+xoL2X1+","+xoL2Y1+" C"+xoL2K1X+","+xoL2K1Y+" "+xoL2K2X+","+xoL2K2Y+" "+xoL2X2+","+xoL2Y2);
}

function resetXO (evt)
{
xoL1X1=xoL1X1Reset;
xoL1Y1=xoL1Y1Reset;
xoL1X2=xoL1X2Reset;
xoL1Y2=xoL1Y2Reset;
xoL1K1X=xoL1K1XReset;
xoL1K1Y=xoL1K1YReset;
xoL1K2X=xoL1K2XReset;
xoL1K2Y=xoL1K2YReset;
xoL2X1=xoL2X1Reset;
xoL2Y1=xoL2Y1Reset;
xoL2X2=xoL2X2Reset;
xoL2Y2=xoL2Y2Reset;
xoL2K1X=xoL2K1XReset;
xoL2K1Y=xoL2K1YReset;
xoL2K2X=xoL2K2XReset;
xoL2K2Y=xoL2K2YReset;
xoCX=xoCXReset;
xoCY=xoCYReset;

stopmove(evt);
}

]]>
</script>
<script src="prototype.js" type="text/javascript"></script>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www,w3,org/1999/xlink" onload="colorUpdate(evt); sincos(evt); buttonInit(evt)" viewBox="0 0 1200 900">


// SVG elements
// begin backgrounds
  <rect id="backgroundM" width="1200" height="900" x="0" y="0" fill="rgb(76,77,79)" stroke="rgb(76,77,79)" stroke-width="1" visibility="hidden" />
  <rect id="backgroundL" width="1200" height="900" x="0" y="0" fill="rgb(231,231,233)" stroke="rgb(231,231,233)" stroke-width="1" visibility="hidden"  />
  <rect id="backgroundW" width="1200" height="900" x="0" y="0" fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" visibility="hidden" />
  <rect id="backgroundK" width="1200" height="900" x="0" y="0" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" visibility="visible"  />
// end background

// start XO group
<g onmouseover="showpoints(evt)" onmouseout="hidepoints(evt)" onmousedown="startmove(evt)" onmouseup="stopmove(evt)" onmousemove="move(evt)" onkeyup="textProcess(evt)">

// XO-man background
<rect id="backgroundXO" width="240" height="260" x="480" y="250" fill="rgb(0,0,0)" stroke="none" visibility="visible" />

<g id="upXo"> // begin XO man
<path id="Line1" d="M645.5,357 C600,400.5 600,400.5 554.5,448" stroke="rgb(216,75,24)" stroke-width="37" stroke-linecap="round" fill="none" visibility="visible" />
<path id="Line2" d="M645.5,448 C600,400.5 600,400.5 554.5,357" stroke="rgb(216,75,24)" stroke-width="37" stroke-linecap="round" fill="none" visibility="visible" />
<path id="Fill1" d="M645.5,357 C600,400.5 600,400.5 554.5,448" stroke="rgb(52,192,210)" stroke-width="19" stroke-linecap="round" fill="none" visibility="visible" />
<path id="Fill2" d="M645.5,448 C600,400.5 600,400.5 554.5,357" stroke="rgb(52,192,210)" stroke-width="19" stroke-linecap="round" fill="none" visibility="visible" />
<circle id="Circle" cx="600" cy="318.5" r="28.5" fill="rgb(52,192,210)" stroke="rgb(216,75,24)" stroke-width="9" visibility="visible" />
</g>  // end XO man
<g>
// knot points
<circle id="L1Knot1" cx="112.5" cy="112.5" r="12" fill="rgb(255,255,0)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L1Knot1')" />
<circle id="L1Knot2" cx="112.5" cy="112.5" r="12" fill="rgb(255,255,0)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L1Knot2')" />
<circle id="L2Knot1" cx="112.5" cy="112.5" r="12" fill="rgb(255,0,255)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L2Knot1')" />
<circle id="L2Knot2" cx="112.5" cy="112.5" r="12" fill="rgb(255,0,255)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L2Knot2')" />
// end points
<circle id="L1End1" cx="112.5" cy="112.5" r="12" fill="rgb(255,255,0)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L1End1')" />
<circle id="L1End2" cx="112.5" cy="112.5" r="12" fill="rgb(255,255,0)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L1End2')" />
<circle id="L2End1" cx="112.5" cy="112.5" r="12" fill="rgb(255,0,255)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L2End1')" />
<circle id="L2End2" cx="112.5" cy="112.5" r="12" fill="rgb(255,0,255)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'L2End2')" />
// center point
<circle id="Center" cx="112.5" cy="112.5" r="12" fill="rgb(0,255,255)" stroke="rgb(0,0,0)" stroke-width="3" visibility="hidden" onmousedown="setID(evt,'Center')" />
// end knot points
</g>
</g>
// end XO group

// "cursor"
<circle id="X" title="X" alt="X marks the spot" cx="0" cy="0" r="36" stroke="rgb(160,160,160)" fill="rgb(160,160,160)" stroke-width="9.5" visibility="visible" />

// color buttons
<circle id="R" title="red" alt="red fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,0,0,0)" visibility="visible" />
<circle id="YR" title="orange" alt="orange fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,1,0,1)" visibility="visible" />
<circle id="Y" title="yellow" alt="yellow fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,2,0,2)" visibility="visible" />
<circle id="G" title="green" alt="green fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,3,0,3)" visibility="visible" />
<circle id="B" title="blue" alt="blue fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,4,0,4)" visibility="visible" />
<circle id="P" title="purple" alt="purple fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,5,0,5)" visibility="visible" />

<circle id="RC" title="red" alt="red fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,0,3,3)" visibility="visible" />
<circle id="YRC" title="orange" alt="orange fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,1,3,4)" visibility="visible" />
<circle id="YC" title="yellow" alt="yellow fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,2,3,5)" visibility="visible" />
<circle id="GC" title="green" alt="green fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,3,3,0)" visibility="visible" />
<circle id="BC" title="blue" alt="blue fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,4,3,1)" visibility="visible" />
<circle id="PC" title="purple" alt="purple fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,5,3,2)" visibility="visible" />

<circle id="RCp" title="red" alt="red fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,0,4,2)" visibility="visible" />
<circle id="YRCp" title="orange" alt="orange fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,1,4,3)" visibility="visible" />
<circle id="YCp" title="yellow" alt="yellow fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,2,4,4)" visibility="visible" />
<circle id="GCp" title="green" alt="green fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,3,4,5)" visibility="visible" />
<circle id="BCp" title="blue" alt="blue fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,4,4,0)" visibility="visible" />
<circle id="PCp" title="purple" alt="purple fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,5,4,1)" visibility="visible" />

<circle id="RCm" title="red" alt="red fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,0,2,4)" visibility="visible" />
<circle id="YRCm" title="orange" alt="orange fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,1,2,5)" visibility="visible" />
<circle id="YCm" title="yellow" alt="yellow fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,2,2,0)" visibility="visible" />
<circle id="GCm" title="green" alt="green fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,3,2,1)" visibility="visible" />
<circle id="BCm" title="blue" alt="blue fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,4,2,2)" visibility="visible" />
<circle id="PCm" title="purple" alt="purple fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,5,2,3)" visibility="visible" />

<circle id="RAp" title="red" alt="red fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,0,1,5)" visibility="visible" />
<circle id="YRAp" title="orange" alt="orange fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,1,1,0)" visibility="visible" />
<circle id="YAp" title="yellow" alt="yellow fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,2,1,1)" visibility="visible" />
<circle id="GAp" title="green" alt="green fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,3,1,2)" visibility="visible" />
<circle id="BAp" title="blue" alt="blue fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,4,1,3)" visibility="visible" />
<circle id="PAp" title="purple" alt="purple fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,5,1,4)" visibility="visible" />

<circle id="RAm" title="red" alt="red fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,0,5,1)" visibility="visible" />
<circle id="YRAm" title="orange" alt="orange fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,1,5,2)" visibility="visible" />
<circle id="YAm" title="yellow" alt="yellow fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,2,5,3)" visibility="visible" />
<circle id="GAm" title="green" alt="green fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,3,5,4)" visibility="visible" />
<circle id="BAm" title="blue" alt="blue fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,4,5,5)" visibility="visible" />
<circle id="PAm" title="purple" alt="purple fill" cx="0" cy="0" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="updater(evt,5,5,0)" visibility="visible" />

// controls
<rect id="bgd" width="75" height="75" x="0" y="0" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="hidden" />
<rect id="bgdf" width="75" height="75" x="75" y="0" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="hidden" />
<rect id="bgm" width="75" height="75" x="150" y="0" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="visible" />
<rect id="bgmf" width="75" height="75" x="225" y="0" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="hidden" />
<rect id="bgl" width="75" height="75" x="300" y="0" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="hidden" />
<circle id="vd" title="dark" alt="dark stroke" cx="37.5" cy="37.5" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="valueDark(evt)" visibility="visible" />
<circle id="vdf" title="darkflip" alt="dark flip" cx="112.5" cy="37.5" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="valueDarkFlip(evt)" visibility="visible" />
<circle id="vm" title="medium" alt="medium stroke" cx="187.5" cy="37.5" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="valueMedium(evt)" visibility="visible" />
<circle id="vmf" title="mediumflip" alt="medium flip" cx="262.5" cy="37.5" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="valueMediumFlip(evt)" visibility="visible" />
<circle id="vl" title="light" alt="light stroke" cx="337.5" cy="37.5" r="22.5" stroke="rgb(0,0,0)" fill="rgb(0,0,0)" stroke-width="9.5" onclick="valueLight(evt)" visibility="visible" />

<rect id="bghex" width="75" height="75" x="150" y="675" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="visible" />
<rect id="bgsq" width="75" height="75" x="75" y="675" fill="rgb(160,160,160)" stroke="rgb(160,160,160)" stroke-width="1" visibility="hidden" />
<circle id="hex" title="hex grid" alt="hex grid" cx="187.5" cy="712.5" r="22.5" stroke="rgb(100,100,100)" fill="rgb(100,100,100)" stroke-width="9.5" onclick="hexGrid(evt)" visibility="visible" />
<rect id="sq" title="square grid" alt="square gird"  width="45" height="45" x="90" y="690" fill="rgb(100,100,100)" stroke="rgb(100,100,100)" stroke-width="1" onclick="sqGrid(evt)" visibility="visible" />

<g onclick="resetXO(evt)"> // begin XO man icon
<path id="iconLine1" d="M53,700 C37.5,715.5 37.5,715.5 22,731" stroke="rgb(230,0,10)" stroke-width="11.5" stroke-linecap="round" fill="none" visibility="visible" />
<path id="iconLine2" d="M53,731 C37.5,715.5 37.5,715.5 22,700" stroke="rgb(230,0,10)" stroke-width="11.5" stroke-linecap="round" fill="none" visibility="visible" />
<path id="iconFill1" d="M53,700 C37.5,715.5 37.5,715.5 22,731" stroke="rgb(255,43,52)" stroke-width="4.5" stroke-linecap="round" fill="none" visibility="visible" />
<path id="iconFill2" d="M53,731 C37.5,715.5 37.5,715.5 22,700" stroke="rgb(255,43,52)" stroke-width="4.5" stroke-linecap="round" fill="none" visibility="visible" />
<circle id="iconCircle" cx="37.5" cy="690" r="8" fill="rgb(255,43,52)" stroke="rgb(230,0,10)" stroke-width="3.5" visibility="visible" />
</g>  // end XO man icon

// background controls

<rect id="icon" width="75" height="75" x="1125" y="0" fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" visibility="visible" onclick="background(evt,0)" />
<rect id="icon" width="75" height="75" x="1050" y="0" fill="rgb(231,231,233)" stroke="rgb(231,231,233)" stroke-width="1" visibility="visible" onclick="background(evt,1)" />
<rect id="icon" width="75" height="75" x="975" y="0" fill="rgb(76,77,79)" stroke="rgb(76,77,79)" stroke-width="1" visibility="visible" onclick="background(evt,2)" />
<rect id="icon" width="75" height="75" x="900" y="0" fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" visibility="visible" onclick="background(evt,3)" />
</svg>
</body>
</html>
Retrieved from "https://wiki.sugarlabs.org/index.php?title=Activities/XoEditor/XoEditor.xml&oldid=76999"