Activities/XoEditor/XoEditor.xml

From Sugar Labs
< Activities‎ | XoEditor
Revision as of 14:09, 5 April 2012 by Walter (talk | contribs) (Created page with "'''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 ---- <c...")
(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>



// 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=76998"