diff options
Diffstat (limited to 'html/.svn/text-base/xo-color.xml.svn-base')
| -rw-r--r-- | html/.svn/text-base/xo-color.xml.svn-base | 964 |
1 files changed, 964 insertions, 0 deletions
diff --git a/html/.svn/text-base/xo-color.xml.svn-base b/html/.svn/text-base/xo-color.xml.svn-base new file mode 100644 index 0000000..3fb9cee --- /dev/null +++ b/html/.svn/text-base/xo-color.xml.svn-base @@ -0,0 +1,964 @@ +<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 28 June 2007 +// 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 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"); + } else { + e.setAttribute("visibility","hidden"); + } + e = evt.target.ownerDocument.getElementById("backgroundW"); + if( a == 0 ) + { + e.setAttribute("visibility","visible"); + } else { + e.setAttribute("visibility","hidden"); + } + e = evt.target.ownerDocument.getElementById("backgroundL"); + if( a == 1 ) + { + e.setAttribute("visibility","visible"); + } else { + e.setAttribute("visibility","hidden"); + } + e = evt.target.ownerDocument.getElementById("backgroundM"); + if( a == 2 ) + { + e.setAttribute("visibility","visible"); + } else { + e.setAttribute("visibility","hidden"); + } + e = evt.target.ownerDocument.getElementById("backgroundK"); + if( a == 3 ) + { + e.setAttribute("visibility","visible"); + } 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 + x = evt.clientX; + x = x * 1.43; + y = evt.clientY; + y = y * 1.43; + + 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; + + 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); +} + +]]> +</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)"> + + +// 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)"> +<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> |