Digitaluhr etwas anders
Eine Digitaluhr die etwas animiert ist beim Zahlenwechsel
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<title>Analogue/Digital Clock</title>
<script>
new Image().src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAACVJREFUKFNj/P///6NPDFQHcnwMDA8//qcRGqJGA8OaFgECNBYAGoZXXjOwCCkAAAAASUVORK5CYII=';//;
new Image().src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAABhJREFUGFdjZGj4z4ACgHxkhMIBqcUvDwAeIx9tuVr9PAAAAABJRU5ErkJggg==';//'./graphics/dot.png';
new Image().src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAAChJREFUKFNj/P//P2MjA9XB/3qgkQ3/aYVoZS7QxTQ0GhjWtDAdaCwAEc+7gw0o8VgAAAAASUVORK5CYII=';//;
</script>
</head>
<body onload="go()">
<canvas id="canvas1" height="110" width="350">
Sorry, your browser does not support the element so you cannot view this demo.
</canvas>
<script>
function go(){
var OFFSET_X = 20;
var OFFSET_Y = 15;
var imgLine = new Image();
imgLine.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAAChJREFUKFNj/P//P2MjA9XB/3qgkQ3/aYVoZS7QxTQ0GhjWtDAdaCwAEc+7gw0o8VgAAAAASUVORK5CYII=';//;
var imgBgLine = new Image();
imgBgLine.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAACVJREFUKFNj/P///6NPDFQHcnwMDA8//qcRGqJGA8OaFgECNBYAGoZXXjOwCCkAAAAASUVORK5CYII=';//'./graphics/bgline.png';
var imgDot = new Image();
imgDot.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAABhJREFUGFdjZGj4z4ACgHxkhMIBqcUvDwAeIx9tuVr9PAAAAABJRU5ErkJggg==';//;
var LINE_WIDTH = imgLine.height;
var LINE_LENGTH = imgLine.width;
var DOT_WIDTH = imgDot.width;
var GAP = 2 * DOT_WIDTH;
var TICKS_PER_SEC = 30;
var DIGIT_X_1 = OFFSET_X;
var DIGIT_X_2 = DIGIT_X_1 + (2 * LINE_WIDTH + LINE_LENGTH + GAP);
var DIGIT_X_3 = DIGIT_X_2 + (2 * LINE_WIDTH + LINE_LENGTH + 2 * GAP + DOT_WIDTH);
var DIGIT_X_4 = DIGIT_X_3 + (2 * LINE_WIDTH + LINE_LENGTH + GAP);
var DIGIT_X_5 = DIGIT_X_4 + (2 * LINE_WIDTH + LINE_LENGTH + 2 * GAP + DOT_WIDTH);
var DIGIT_X_6 = DIGIT_X_5 + (2 * LINE_WIDTH + LINE_LENGTH + GAP);
var DOT_X_1 = OFFSET_X + (3 * LINE_WIDTH + 2 * LINE_LENGTH + 2 * GAP);
var DOT_X_2 = DOT_X_1 + 2 * GAP + (3 * LINE_WIDTH + 2 * LINE_LENGTH + 2 * GAP);
var DOT_Y_1 = OFFSET_Y + (2 * LINE_LENGTH + 3 * LINE_WIDTH) / 4;
var DOT_Y_2 = OFFSET_Y + (2 * LINE_LENGTH + 3 * LINE_WIDTH) * 3 / 4 - DOT_WIDTH;
var X1 = 0;
var X2 = LINE_WIDTH + LINE_LENGTH;
var Y1 = 0;
var Y2 = LINE_WIDTH + LINE_LENGTH;
var Y3 = 2 * LINE_WIDTH + 2 * LINE_LENGTH;
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var WIDTH = Number(canvas.width);
var HEIGHT = Number(canvas.height);
function forEach(arr, fnDoThis){
var i=0, l=arr.length;
for(i=0; i<l; i++){
if (false===fnDoThis(i, arr[i])){
return;
}
}
}
function makeLine(x, y, degrees, scale, fnOnTickDoThis, imgObj){
var line = {};
var img = imgObj ? imgObj : imgLine;
var ox = x, oy = y, oDegrees = degrees, oScale = scale;
line.setPos = function(px,py){
x = px;
y = py;
}
line.move = function(dx, dy){
line.setPos(x + dx, y + dy);
};
line.setAngle = function(pDegrees){
degrees = pDegrees;
};
line.getAngle = function(){
return degrees;
};
line.setScale = function(pScale){
scale = pScale;
};
line.tick = function(tickValue){
fnOnTickDoThis && fnOnTickDoThis(line, tickValue);
};
line.draw = function(xOffset, yOffset){
ctx.save();
var radians = degrees * Math.PI / 180;
ctx.translate(x + xOffset, y + yOffset);
ctx.translate(-LINE_WIDTH/2, LINE_WIDTH/2);
ctx.rotate(radians);
ctx.translate(LINE_WIDTH/2, -LINE_WIDTH/2);
ctx.drawImage(img, 0, 0, LINE_LENGTH * scale, LINE_WIDTH);
ctx.restore();
};
return line;
}
function makeDigit(x, y){
var digit = {};
var lines = [];
digit.addLine = function(line){
lines.push(line);
};
digit.clearLines = function(){
lines = [];
};
digit.tick = function(tickValue){
forEach(lines, function(i,line){
line && line.tick(tickValue);
});
};
digit.draw = function(){
forEach(lines, function(i,line){
line && line.draw(x, y);
});
};
return digit;
}
var digitHour1 = makeDigit(DIGIT_X_1, OFFSET_Y);
var digitHour2 = makeDigit(DIGIT_X_2, OFFSET_Y);
var digitMin1 = makeDigit(DIGIT_X_3, OFFSET_Y);
var digitMin2 = makeDigit(DIGIT_X_4, OFFSET_Y);
var digitSec1 = makeDigit(DIGIT_X_5, OFFSET_Y);
var digitSec2 = makeDigit(DIGIT_X_6, OFFSET_Y);
var digits = [digitHour1, digitHour2, digitMin1, digitMin2, digitSec1, digitSec2];
var prevTime = getTimeParts();
var tick = 0;
setInterval(function(){
var tickValue = (tick % TICKS_PER_SEC) / TICKS_PER_SEC;
ctx.clearRect(0, 0,WIDTH,HEIGHT);
drawDots();
drawBgLines();
if (tickValue === 0){
var newTime = getTimeParts();
forEach(digits, function(i, digit){
var from = prevTime[i];
var to = newTime[i];
digit.clearLines();
var newLineArgLists = transforms[from][to];
if (!newLineArgLists){
newLineArgLists = transforms[to][to];
}
forEach(pickOne(newLineArgLists), function(i,newLineArgList){
digit.addLine(makeLine.apply(null, newLineArgList));
});
});
prevTime = newTime;
} else {
forEach(digits, function(i,digit){
digit.tick(tickValue);
});
}
forEach(digits, function(i,digit){
digit.draw();
});
tick++;
}, 1000 / TICKS_PER_SEC);
function drawBgLines(){
function drawBgDigit(xOffset){
makeLine(xOffset + X1, OFFSET_Y + Y1, 0, 1, null, imgBgLine).draw(0,0);
makeLine(xOffset + X1, OFFSET_Y + Y1, 90, 1, null, imgBgLine).draw(0,0);
makeLine(xOffset + X2, OFFSET_Y + Y1, 90, 1, null, imgBgLine).draw(0,0);
makeLine(xOffset + X1, OFFSET_Y + Y2, 0, 1, null, imgBgLine).draw(0,0);
makeLine(xOffset + X1, OFFSET_Y + Y2, 90, 1, null, imgBgLine).draw(0,0);
makeLine(xOffset + X2, OFFSET_Y + Y2, 90, 1, null, imgBgLine).draw(0,0);
makeLine(xOffset + X1, OFFSET_Y + Y3, 0, 1, null, imgBgLine).draw(0,0);
}
drawBgDigit(DIGIT_X_1);
drawBgDigit(DIGIT_X_2);
drawBgDigit(DIGIT_X_3);
drawBgDigit(DIGIT_X_4);
drawBgDigit(DIGIT_X_5);
drawBgDigit(DIGIT_X_6);
}
function drawDots(){
function drawDot(x, y){
ctx.save();
ctx.translate(x, y);
ctx.drawImage(imgDot, 0, 0, DOT_WIDTH, DOT_WIDTH);
ctx.restore();
}
drawDot(DOT_X_1, DOT_Y_1);
drawDot(DOT_X_1, DOT_Y_2);
drawDot(DOT_X_2, DOT_Y_1);
drawDot(DOT_X_2, DOT_Y_2);
}
function pickOne(arr){
var totalWeight = 0;
forEach(arr, function(i,item){
totalWeight += item.weight;
});
var i = Math.random() * totalWeight;
var weightSoFar = 0;
var selectedMoves;
forEach(arr, function(j,item){
weightSoFar += item.weight;
if (weightSoFar > i){
selectedMoves = item.lines;
return false;
}
});
return selectedMoves;
}
function getTimeParts(){
var parts = [];
var now = new Date();
var hours = now.getHours();
parts.push(Math.floor(hours / 10));
parts.push(hours % 10);
var mins = now.getMinutes();
parts.push(Math.floor(mins / 10));
parts.push(mins % 10);
var secs = now.getSeconds();
parts.push(Math.floor(secs / 10));
parts.push(secs % 10);
return parts;
}
var fnMoveDown = function(line){
line.move(0, (LINE_LENGTH + LINE_WIDTH) / TICKS_PER_SEC);
};
var fnMoveUp = function(line){
line.move(0, -(LINE_LENGTH + LINE_WIDTH) / TICKS_PER_SEC);
};
var fnMoveLeft = function(line){
line.move(-(LINE_LENGTH + LINE_WIDTH) / TICKS_PER_SEC, 0);
};
var fnMoveRight = function(line){
line.move((LINE_LENGTH + LINE_WIDTH) / TICKS_PER_SEC, 0);
};
var fnShrinkLeft = function(line, tickValue){
line.setScale(1 - tickValue);
};
var fnShrinkRight = function(line, tickValue){
fnMoveRight(line);
line.setScale(1 - tickValue);
};
var fnShrinkDown = function(line, tickValue){
fnMoveDown(line);
line.setScale(1 - tickValue);
};
var fnGrowLeft = function(line, tickValue){
fnMoveLeft(line);
line.setScale(tickValue);
};
var fnGrowRight = function(line, tickValue){
line.setScale(tickValue);
};
var fnRotateClockwise = function(line, tickValue){
var angle = line.getAngle();
line.setAngle(angle + (90 / TICKS_PER_SEC));
};
var fnRotateClockwise2 = function(line, tickValue){
var angle = line.getAngle();
line.setAngle(angle + (180 / TICKS_PER_SEC));
};
var fnRotateAntiClockwise = function(line, tickValue){
var angle = line.getAngle();
line.setAngle(angle - (90 / TICKS_PER_SEC));
};
var fnRotateAntiClockwise2 = function(line, tickValue){
var angle = line.getAngle();
line.setAngle(angle - (180 / TICKS_PER_SEC));
};
var transforms = {
'0' : {
'0' : [
{'weight' : 27, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
},{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, fnRotateClockwise],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X2, Y1, 90, 1, fnRotateClockwise],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X2, Y3,180, 1, fnRotateClockwise],
[X1, Y3,270, 1, fnRotateClockwise]
]
},{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y2,270, 1, fnRotateClockwise2],
[X1, Y2, 90, 1, fnMoveUp],
[X2, Y1, 90, 1, fnMoveDown],
[X2, Y2, 90, 1, fnRotateClockwise2],
[X1, Y3, 0, 1, null]
]
},{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, fnMoveDown],
[X2, Y1, 90, 1, fnMoveLeft],
[X1, Y2, 90, 1, fnMoveRight],
[X2, Y2, 90, 1, fnMoveUp],
[X1, Y3, 0, 1, null]
]
}
],
'1' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, fnShrinkRight],
[X1, Y1, 90, 1, fnMoveRight],
[X2, Y1, 90, 1, null],
[X1, Y2, 90, 1, fnMoveRight],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, fnShrinkRight]
]
}, {'weight' : 1, 'lines' : [
[X2, Y1,180, 1, fnRotateAntiClockwise],
[X1, Y2,270, 1, fnShrinkLeft],
[X1, Y2, 90, 1, fnShrinkLeft],
[X2, Y3,180, 1, fnRotateClockwise],
[X2, Y1, 90, 1, null],
[X2, Y2, 90, 1, null]
]
}
]
},
'1' : {
'1' : [
{'weight' : 18, 'lines' : [
[X2, Y1, 90, 1, null],
[X2, Y2, 90, 1, null]
]
},{'weight' : 1, 'lines' : [
[X2, Y2,270, 1, fnRotateAntiClockwise2],
[X2, Y2, 90, 1, fnMoveUp],
]
},{'weight' : 1, 'lines' : [
[X2, Y2, 90, 1, fnRotateClockwise2],
[X2, Y1, 90, 1, fnMoveDown]
]
}
],
'2' : [
{'weight' : 1, 'lines' : [
[X2, Y1, 0, 0, fnGrowLeft],
[X2, Y1, 90, 1, null],
[X2, Y2, 0, 0, fnGrowLeft],
[X2, Y2, 90, 1, fnMoveLeft],
[X2, Y3, 0, 0, fnGrowLeft]
]
},{'weight' : 1, 'lines' : [
[X2, Y1, 90, 1, fnRotateClockwise],
[X2, Y1, 90, 1, null],
[X2, Y2, 90, 1, fnRotateClockwise],
[X2, Y2, 90, 1, fnMoveLeft],
[X2, Y3,270, 1, fnRotateAntiClockwise]
]
}
]
},
'2' : {
'0' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, fnRotateAntiClockwise],
[X2, Y2,180, 1, fnRotateAntiClockwise],
[X1, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}
],
'2' : [
{'weight' : 9, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
},{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, fnShrinkLeft],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, fnShrinkLeft],
[X1, Y2, 0, 1, fnRotateClockwise],
[X2, Y2,180, 1, fnRotateClockwise],
[X1, Y3, 0, 1, null]
]
}
],
'3' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, fnMoveRight],
[X1, Y3, 0, 1, null]
]
}
]
},
'3' : {
'3' : [
{'weight' : 18, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X2, Y2, 90, 1, null],
[X2, Y2,180, 1, fnRotateClockwise],
[X2, Y2, 90, 1, fnRotateClockwise],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X2, Y2, 90, 1, null],
[X2, Y2,180, 1, fnRotateAntiClockwise],
[X2, Y2,270, 1, fnRotateAntiClockwise],
[X1, Y3, 0, 1, null]
]
}
],
'4' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, fnRotateClockwise],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, fnShrinkRight]
]
}
]
},
'4' : {
'4' : [
{'weight' : 9, 'lines' : [
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, fnMoveDown],
[X2, Y2,180, 1, fnRotateClockwise],
[X2, Y2, 90, 1, fnRotateClockwise]
]
}
],
'5' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, fnRotateClockwise],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X2, Y3, 0, 0, fnGrowLeft]
]
}
]
},
'5' : {
'0' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y2,180, 1, fnRotateClockwise],
[X1, Y2, 0, 1, fnRotateClockwise],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}
],
'5' : [
{'weight' : 9, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 0, 1, fnRotateClockwise],
[X1, Y1, 90, 1, fnShrinkLeft],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, fnShrinkLeft],
[X2, Y2,180, 1, fnRotateAntiClockwise],
[X1, Y3, 0, 1, null]
]
}
],
'6' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y2, 0, 1, fnRotateClockwise],
[X2, Y2, 90, 0, null],
[X1, Y3, 0, 1, null]
]
}
]
},
'6' : {
'6' : [
{'weight' : 27, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, fnRotateClockwise],
[X1, Y1, 0, 0, fnGrowRight],
[X1, Y1, 90, 1, fnShrinkLeft],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X1, Y2, 0, 1, fnRotateClockwise],
[X1, Y3,270, 1, fnRotateClockwise],
[X2, Y3,180, 1, fnRotateClockwise],
[X2, Y2, 90, 1, fnRotateClockwise]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X1, Y2, 90, 1, fnRotateAntiClockwise],
[X1, Y3, 0, 1, fnRotateAntiClockwise],
[X2, Y3,270, 1, fnRotateAntiClockwise],
[X2, Y2,180, 1, fnRotateAntiClockwise]
]
}
],
'7' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, fnMoveRight],
[X1, Y2, 0, 1, fnShrinkRight],
[X1, Y2, 90, 1, fnMoveRight],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, fnShrinkRight]
]
}
]
},
'7' : {
'7' : [
{'weight' : 9, 'lines' : [
[X1, Y1, 0, 1, null],
[X2, Y1, 90, 1, null],
[X2, Y2, 90, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X2, Y1,180, 0, fnGrowRight],
[X2, Y1,180, 1, fnRotateAntiClockwise],
[X2, Y1, 90, 1, fnMoveDown],
[X2, Y2, 90, 1, fnShrinkDown]
]
}
],
'8' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 0, 1, fnRotateClockwise],
[X2, Y1, 90, 1, null],
[X2, Y2, 0, 0, fnGrowLeft],
[X2, Y2, 90, 1, fnMoveLeft],
[X2, Y2, 90, 1, null],
[X2, Y3, 0, 0, fnGrowLeft]
]
}
]
},
'8' : {
'8' : [
{'weight' : 18, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, fnMoveDown],
[X2, Y1, 90, 1, null],
[X2, Y1, 90, 1, fnMoveLeft],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 0, 1, fnRotateClockwise],
[X1, Y1, 90, 1, fnShrinkLeft],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, fnShrinkLeft],
[X1, Y2, 90, 1, null],
[X2, Y2, 90, 1, null],
[X2, Y2, 90, 1, fnRotateClockwise],
[X1, Y3, 0, 1, null]
]
}
],
'9' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, fnMoveRight],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X1, Y2, 90, 1, fnRotateAntiClockwise],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}
]
},
'9' : {
'9' : [
{'weight' : 18, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y2,270, 1, fnRotateAntiClockwise],
[X2, Y2,270, 0, fnGrowRight],
[X2, Y2,180, 1, fnRotateAntiClockwise],
[X2, Y2, 90, 1, fnShrinkLeft],
[X1, Y3, 0, 1, null]
]
}, {'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, fnShrinkLeft],
[X1, Y1, 90, 1, fnShrinkLeft],
[X2, Y1, 90, 1, null],
[X2, Y1, 90, 1, fnRotateClockwise],
[X1, Y2, 0, 1, null],
[X1, Y2, 0, 1, fnRotateAntiClockwise],
[X1, Y2, 0, 1, null],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}
],
'0' : [
{'weight' : 1, 'lines' : [
[X1, Y1, 0, 1, null],
[X1, Y1, 90, 1, null],
[X2, Y1, 90, 1, null],
[X1, Y2, 0, 1, fnRotateClockwise],
[X2, Y2, 90, 1, null],
[X1, Y3, 0, 1, null]
]
}
]
}
};
}
</script>
</body>
</html>