10,505
edits
Changes
Jump to navigation
Jump to search
Activities/XoEditor/XoEditor.xml (view source)
Revision as of 14:09, 5 April 2012
, 14:09, 5 April 2012Created 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..."
'''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
----
<code>
<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>
</code>
----
<code>
<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>
</code>