Activities/XoEditor/XoEditor.xml

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

 change the XO colors and shape

// 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

 <![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"; }	}

//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); }

]]> 



// SVG elements // begin backgrounds     // end background

// start XO group 

// XO-man background 

 // begin XO man     <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)" />