Differential D6851 Diff 18064 plasmoid/contents/ui/TopBarAnim.qml

Changeset View

Standalone View

plasmoid/contents/ui/TopBarAnim.qml

1	import QtQuick 2.0	1	import QtQuick 2.0
2		2
3	Item {	3	Item {
4		4
5	anchors.fill: parent	5	property alias topanimrun: seqrun.running
6		6
7	property bool arrowFormState: false	7	//anchors.fill: parent
8	function toggle() { arrowFormState = !arrowFormState }	8	function wsistalking() {
9		9	if(statusId.visible == true){
10	property bool wsocketRunning: false	10	numanimtest.running = true
11	function wsocrunninganimtoggle() { wsocketRunning = !wsocketRunning,	11	seqrun.running = false
12	onrunninanim.running = true; }
13
14	property bool wsocketError: false
15	function wsocerroranimtoggle() { wsocketError = !wsocketError,
16	onerroranim.running = true; }
17
18	property bool wsocketClosed: false
19	function wsocclosedanimtoggle() { wsocketClosed = !wsocketClosed }
20
21	property bool wsocketMsg: false
22	function wsocmsganimtoggle() { onmsganim.running = true; }
23
24
25	StateGroup {
26	id: lineanimstategrp
27	states: [
28	State {
29	name: "runninganimstate"
30	when: wsocketRunning
31	PropertyChanges { anchors.leftMargin: -50; target: canvasleftline }
32	PropertyChanges { anchors.rightMargin: -50; target: canvasrightline }
33	},
34
35	State {
36	name: "erroranimstate"
37	when: wsocketError
38	PropertyChanges { anchors.leftMargin: -50; target: canvasleftline }
39	PropertyChanges { anchors.rightMargin: -50; target: canvasrightline }
40	},
41
42	State {
43	name: "closedanimstate"
44	when: wsocketClosed
45	PropertyChanges { anchors.leftMargin: 0; target: canvasleftline }
46	PropertyChanges { anchors.rightMargin: 0; target: canvasrightline }
47	},
48
49	State {
50	name: "msganimstate"
51	when: wsocketMsg
52	PropertyChanges { anchors.leftMargin: -50; target: canvasleftline }
53	PropertyChanges { anchors.rightMargin: -50; target: canvasrightline }
54	}	12	}
55	]	13	else if(statusId.visible == false){
56		14	seqrun.running = true
57	transitions: Transition {	15	canvasmiddlegraphics.visible = !canvasmiddlegraphics.visible
58	PropertyAnimation {
59	property: "anchors.leftMargin"
60	easing.type: Easing.Linear
61	duration: 500
62	}	16	}
63	PropertyAnimation {
64	property: "anchors.rightMargin"
65	easing.type: Easing.Linear
66	duration: 500
67	}	17	}
68		18
69	onRunningChanged:{	19	function showstatsId() {
70	if( running === false) {	20	canvasmiddlegraphics.opacity = 0
71	lineanimstategrp.state = "closedanimstate"	21	statusId.visible = true
72	}
73	}	22	}
74		23
75	}	24	SequentialAnimation{
76	}	25	id: numanimtest
77		26
78	SequentialAnimation {	27	SequentialAnimation {
79	id: onrunninanim	28
80	PropertyAnimation {	29	PropertyAnimation {
81	target: canvascentergraphic	30	id: n1test
82	property: "fillStyle"	31	target: statusId
83	to: "green"	32	property: "opacity"
84	duration: 1	33	from: 1;
		34	to: 0;
		35	duration: 3000
85	}	36	}
		37
86	PropertyAnimation {	38	PropertyAnimation {
87	target: canvascentergraphic	39	id: n1testr
88	property: "fillStyle"	40	target: statusId
89	to: "grey"	41	property: "visible"
90	duration: 1000	42	from: true;
91	}	43	to: false;
		44	duration: 2000
92	}	45	}
93		46
94	SequentialAnimation {
95	id: onerroranim
96	PropertyAnimation {	47	PropertyAnimation {
97	target: canvascentergraphic	48	id: n1testn
98	property: "fillStyle"	49	target: statusId
99	to: "red"	50	property: "opacity"
100	duration: 1	51	from: 0;
		52	to: 1;
		53	duration: 20
101	}	54	}
102	PropertyAnimation {	55	}
103	target: canvascentergraphic	56
104	property: "fillStyle"	57	NumberAnimation{
105	to: "grey"	58	id: n2testop
106	duration: 500	59	target: canvasmiddlegraphics
		60	property: "opacity"
		61	from: 0;
		62	to: 1;
		63	duration: 300
107	}	64	}
108	}	65	}
109		66
110	SequentialAnimation {	67	SequentialAnimation {
111	id: onmsganim	68	id: seqrun
		69
112	ParallelAnimation{	70	ParallelAnimation {
113	PropertyAnimation {	71	NumberAnimation{
114	target: canvasleftline	72	target: canvasmiddlegraphics
115	property: "anchors.leftMargin"	73	property: "i"
116	from: 0	74	from: -50
117	to: -50	75	to: -70
118	duration: 200	76	duration: 200
119	}	77	}
120		78
121	PropertyAnimation {	79	SequentialAnimation {
122	target: canvasrightline	80	loops: 10
123	property: "anchors.rightMargin"	81
		82	ParallelAnimation {
		83	NumberAnimation{
		84	target: canvasmiddlegraphics
		85	property: "amplitude"
124	from: 0	86	from: 0
125	to: -50	87	to: 10 + Math.floor(Math.random() * 6) + 1
126	duration: 200	88	duration: 12
		89	}
127	}	90	}
128		91
129	PropertyAnimation {	92	ParallelAnimation {
130	target: canvascentergraphic	93	NumberAnimation{
131	property: "fillStyle"	94	target: canvasmiddlegraphics
132	to: "blue"	95	property: "amplitude"
133	duration: 10	96	from: 10
		97	to: 16 + Math.floor(Math.random() * 2) + 1
		98	duration: 12
		99
134	}	100	}
135	}	101	}
136		102
137	ParallelAnimation{	103	ParallelAnimation{
138	PropertyAnimation {	104	NumberAnimation{
139	target: canvasleftline	105	target: canvasmiddlegraphics
140	property: "anchors.leftMargin"	106	property: "amplitude"
141	from: - 50	107	from: 16 + Math.floor(Math.random() * 2) + 1
142	to: 0	108	to: 10 + Math.floor(Math.random() * 6) + 1
143	duration: 200	109	duration: 12
		110	}
144	}	111	}
145		112
146	PropertyAnimation {	113	ParallelAnimation {
147	target: canvasrightline	114	NumberAnimation{
148	property: "anchors.rightMargin"	115	target: canvasmiddlegraphics
149	from: - 50	116	property: "amplitude"
		117	from: 10 + Math.floor(Math.random() / 6) + 1
150	to: 0	118	to: 0
151	duration: 200	119	duration: 12
152	}	120	}
153		121
154	PropertyAnimation {
155	target: canvascentergraphic
156	property: "fillStyle"
157	to: "grey"
158	duration: 1000
159	}	122	}
160	}	123	}
161	}	124	}
162		125
163	Canvas {	126	ParallelAnimation {
164	id:canvasleftline
165	anchors.left: parent.left
166	anchors.right: parent.right
167	anchors.top: parent.top
168	anchors.bottom: parent.bottom
169
170	property color strokeStyle: Qt.darker(fillStyle, 1.4)
171	property color fillStyle: "lightgrey" // red
172	property int lineWidth: 1
173	property bool fill: false
174	property bool stroke: false
175	property real alpha: 1.0
176	property real scale : 1
177	property real rotate : 0
178	antialiasing: true
179
180	onLineWidthChanged:requestPaint();
181	onFillChanged:requestPaint();
182	onStrokeChanged:requestPaint();
183	onScaleChanged:requestPaint();
184	onRotateChanged:requestPaint();
185
186	renderTarget: Canvas.FramebufferObject
187	renderStrategy: Canvas.Cooperative
188
189
190	onPaint: {
191	var ctxside = canvasleftline.getContext('2d');
192	var left = 0
193	var right = width / 2
194	var offleftcenter = width * 0.30
195	var offrightcenter = width * 0.58
196	var vCenter = height * 0.5
197	var vDelta = height / 2
198		127
199	ctxside.save();	128	PropertyAnimation {
200	ctxside.clearRect(0, 0, canvasleftline.width, canvasleftline.height);	129	target: canvasmiddlegraphics
201	ctxside.globalAlpha = canvasleftline.alpha;	130	property: "visible"
202	ctxside.strokeStyle = canvasleftline.strokeStyle;	131	from: true
203	ctxside.fillStyle = canvasleftline.fillStyle;	132	to: false
204	ctxside.lineWidth = canvasleftline.lineWidth;	133	duration: 20
205	ctxside.scale(canvasleftline.scale, canvasleftline.scale);
206	ctxside.rotate(canvasleftline.rotate);
207
208	//Left Line
209	ctxside.beginPath()
210	ctxside.moveTo(offleftcenter, vCenter)
211	ctxside.lineTo(left, vCenter)
212	ctxside.stroke()
213
214	if (canvasleftline.fill)
215	ctxside.fill();
216	if (canvasleftline.stroke)
217	ctxside.stroke();
218	ctxside.restore();
219	}
220	}	134	}
221
222	Canvas {
223	id:canvasrightline
224	anchors.left: parent.left
225	anchors.right: parent.right
226	anchors.top: parent.top
227	anchors.bottom: parent.bottom
228
229	property color strokeStyle: Qt.darker(fillStyle, 1.4)
230	property color fillStyle: "lightgrey" // red
231	property int lineWidth: 1
232	property bool fill: false
233	property bool stroke: false
234	property real alpha: 1.0
235	property real scale : 1
236	property real rotate : 0
237	antialiasing: true
238
239	onLineWidthChanged:requestPaint();
240	onFillChanged:requestPaint();
241	onStrokeChanged:requestPaint();
242	onScaleChanged:requestPaint();
243	onRotateChanged:requestPaint();
244
245	renderTarget: Canvas.FramebufferObject
246	renderStrategy: Canvas.Cooperative
247
248
249	onPaint: {
250	var ctxside = canvasrightline.getContext('2d');
251	var left = 0
252	var right = width
253	var offleftcenter = width * 0.30
254	var offrightcenter = width / 1.65
255	var vCenter = height * 0.5
256	var vDelta = height / 6
257
258	ctxside.save();
259	ctxside.clearRect(0, 0, canvasrightline.width, canvasrightline.height);
260	ctxside.globalAlpha = canvasrightline.alpha;
261	ctxside.strokeStyle = canvasrightline.strokeStyle;
262	ctxside.fillStyle = canvasrightline.fillStyle;
263	ctxside.lineWidth = canvasrightline.lineWidth;
264	ctxside.scale(canvasrightline.scale, canvasrightline.scale);
265	ctxside.rotate(canvasrightline.rotate);
266
267	//Right Line
268	ctxside.beginPath()
269	ctxside.moveTo(offrightcenter, vCenter)
270	ctxside.lineTo(right, vCenter)
271	ctxside.stroke()
272
273	if (canvasrightline.fill)
274	ctxside.fill();
275	if (canvasrightline.stroke)
276	ctxside.stroke();
277	ctxside.restore();
278	}	135	}
279	}	136	}
280		137
281	Canvas {	138	Canvas {
282	id:canvasleftgraphic	139	id:canvasmiddlegraphics
283	width: 100	140	width: parent.width
284	height: 150	141	height: parent.height
285	anchors.verticalCenter: canvasleftline.verticalCenter	142	anchors.verticalCenter: parent.verticalCenter
286	anchors.horizontalCenter: canvasleftline.horizontalCenter	143	anchors.horizontalCenter: parent.horizontalCenter
287	anchors.horizontalCenterOffset: -35;	144	visible: true
288	anchors.verticalCenterOffset: 0;	145	opacity: 0
289	//anchors.left: canvasleftline.left	146
290		147	property color strokeStyle: Qt.darker(fillStyle, 1.5)
291	property color strokeStyle: Qt.darker(fillStyle, 1.4)	148	property color fillStyle: Qt.darker("deepskyblue", 1.1)
292	property color fillStyle: "lightgrey" // red	149	property real lineWidth: 1.6
293	property int lineWidth: 1	150	property bool fill: true
294	property bool fill: false
295	property bool stroke: false	151	property bool stroke: false
296	property real alpha: 1.0	152	property real alpha: 1.0
297	property real scale : 1	153	property real scale : 1
298	property real rotate : 0	154	property real rotate : 0
		155	property real i: -50
		156	property real waveSpeed: 10
		157	property real amplitude: 0
299	antialiasing: true	158	antialiasing: true
		159	smooth: true
300		160
301	onLineWidthChanged:requestPaint();	161	onLineWidthChanged:requestPaint();
302	onFillChanged:requestPaint();	162	onFillChanged:requestPaint();
303	onStrokeChanged:requestPaint();	163	onStrokeChanged:requestPaint();
304	onScaleChanged:requestPaint();	164	onScaleChanged:requestPaint();
305	onRotateChanged:requestPaint();	165	onRotateChanged:requestPaint();
		166	onIChanged: requestPaint();
306		167
307	renderTarget: Canvas.FramebufferObject	168	renderTarget: Canvas.FramebufferObject
308	renderStrategy: Canvas.Cooperative	169	renderStrategy: Canvas.Cooperative
309		170
310		171
311	onPaint: {	172	onPaint: {
312	var ctxside = canvasleftgraphic.getContext('2d');	173	var ctxside = canvasmiddlegraphics.getContext('2d');
313	var offleftcenter = width * 0.27	174	var hCenter = width * 0.5
314	var offrightcenter = width * 0.58
315	var vCenter = height * 0.5	175	var vCenter = height * 0.5
316	var vDelta = height / 6	176	var size = 12
317		177	var period = 15;
318	ctxside.save();	178	var dotSpeed = 5;
319	ctxside.clearRect(0, 0, canvasleftgraphic.width, canvasleftgraphic.height);	179
320	ctxside.globalAlpha = canvasleftgraphic.alpha;	180	function draw_line(i){
321	ctxside.strokeStyle = canvasleftgraphic.strokeStyle;	181	var oStartx=10;
322	ctxside.fillStyle = canvasleftgraphic.fillStyle;	182	var oStarty=( height / 2 )
323	ctxside.lineWidth = canvasleftgraphic.lineWidth;
324	ctxside.scale(canvasleftgraphic.scale, canvasleftgraphic.scale);
325	ctxside.rotate(canvasleftgraphic.rotate);
326	ctxside.lineJoin = "bevel";
327
328	//Left Logo
329	ctxside.beginPath();	183	ctxside.beginPath();
330	ctxside.moveTo(offleftcenter + 20, vCenter - 30);	184	ctxside.moveTo( oStartx, oStarty + amplitude * Math.sin( x / period + ( i / 5 ) ) );
331	ctxside.lineTo(offleftcenter + 0, vCenter);	185	ctxside.lineWidth = 1;
332	ctxside.lineTo(offleftcenter + 20, vCenter + 30);	186	ctxside.strokeStyle = 'steelblue';
333	ctxside.lineTo(offleftcenter + 20, vCenter + 30);
334	ctxside.lineTo(offleftcenter + 05, vCenter);
335	ctxside.lineTo(offleftcenter + 20, vCenter - 30);
336	ctxside.closePath();
337	ctxside.fill();
338	ctxside.stroke();
339		187
340	ctxside.beginPath();	188	for(var Vx = oStartx; Vx < width * 0.8; Vx++) {
341	ctxside.moveTo(offleftcenter + 20, vCenter + 30);
342	ctxside.lineTo(offleftcenter + 30, vCenter + 30);
343	ctxside.moveTo(offleftcenter + 20, vCenter - 30);
344	ctxside.lineTo(offleftcenter + 30, vCenter - 30);
345	ctxside.stroke();
346		189
347	if (canvasleftgraphic.fill)	190	var Vy = amplitude * Math.sin( Vx / period + ( i / 5 + Math.floor(Math.random() * 2) + 0));
348	ctxside.fill();	191	ctxside.lineTo( oStartx + Vx, oStarty + Vy);
349	if (canvasleftgraphic.stroke)
350	ctxside.stroke();
351	ctxside.restore();
352	}
353	}	192	}
354		193
355	Canvas {
356	id:canvasrightgraphic
357	width: 300
358	height: 150
359	anchors.verticalCenter: canvasrightline.verticalCenter
360	anchors.horizontalCenter: canvasrightline.horizontalCenter
361	anchors.horizontalCenterOffset: 0;
362	anchors.verticalCenterOffset: 0;
363	//anchors.left: canvasleftline.left
364
365	property color strokeStyle: Qt.darker(fillStyle, 1.4)
366	property color fillStyle: "lightgrey" // red
367	property int lineWidth: 1
368	property bool fill: true
369	property bool stroke: true
370	property real alpha: 1.0
371	property real scale : 1
372	property real rotate : 0
373	antialiasing: true
374
375	onLineWidthChanged:requestPaint();
376	onFillChanged:requestPaint();
377	onStrokeChanged:requestPaint();
378	onScaleChanged:requestPaint();
379	onRotateChanged:requestPaint();
380
381	renderTarget: Canvas.FramebufferObject
382	renderStrategy: Canvas.Cooperative
383
384
385	onPaint: {
386	var ctxside = canvasrightgraphic.getContext('2d');
387	var offleftcenter = width * 0.30
388	var offrightcenter = width * 0.58
389	var vCenter = height * 0.5
390	var vDelta = height / 6
391
392	ctxside.save();
393	ctxside.clearRect(0, 0, canvasrightgraphic.width, canvasrightgraphic.height);
394	ctxside.globalAlpha = canvasrightgraphic.alpha;
395	ctxside.strokeStyle = canvasrightgraphic.strokeStyle;
396	ctxside.fillStyle = canvasrightgraphic.fillStyle;
397	ctxside.lineWidth = canvasrightgraphic.lineWidth;
398	ctxside.scale(canvasrightgraphic.scale, canvasrightgraphic.scale);
399	ctxside.rotate(canvasrightgraphic.rotate);
400	ctxside.lineJoin = "bevel";
401
402	//Right Logo
403	ctxside.beginPath();
404	ctxside.moveTo(offleftcenter + 70, vCenter - 30);
405	ctxside.lineTo(offleftcenter + 90, vCenter);
406	ctxside.lineTo(offleftcenter + 70, vCenter + 30);
407	ctxside.lineTo(offleftcenter + 70, vCenter + 30);
408	ctxside.lineTo(offleftcenter + 85, vCenter);
409	ctxside.lineTo(offleftcenter + 70, vCenter - 30);
410	ctxside.closePath();
411	ctxside.fill();
412	ctxside.stroke();	194	ctxside.stroke();
		195	}
413		196
414	ctxside.beginPath();	197	function render(){
415	ctxside.moveTo(offleftcenter + 70, vCenter + 30);	198	var st = i
416	ctxside.lineTo(offleftcenter + 60, vCenter + 30);	199	ctxside.clearRect(0, 0, width, height);
417	ctxside.moveTo(offleftcenter + 70, vCenter - 30);	200	draw_line(st)
418	ctxside.lineTo(offleftcenter + 60, vCenter - 30);
419	ctxside.fill();
420	ctxside.stroke();
421		201
422	if (canvasrightgraphic.fill)
423	ctxside.fill();
424	if (canvasrightgraphic.stroke)
425	ctxside.stroke();
426	ctxside.restore();
427	}	202	}
		203	render();
428	}	204	}
429		205
430	Canvas {
431	id:canvascentergraphic
432	width: parent.width
433	height: parent.height
434	anchors.verticalCenter: parent.verticalCenter
435	anchors.horizontalCenter: parent.horizontalCenter
436	anchors.horizontalCenterOffset: 0;
437	anchors.verticalCenterOffset: 0;
438	//anchors.left: canvasleftline.left
439
440	property color strokeStyle: Qt.darker(fillStyle, 1.4)
441	property color fillStyle: "lightgrey" // red
442	property int lineWidth: 1
443	property bool fill: false
444	property bool stroke: false
445	property real alpha: 1.0
446	property real scale : 1
447	property real rotate : 0
448	antialiasing: true
449
450	onLineWidthChanged:requestPaint();
451	onFillChanged:requestPaint();
452	onStrokeChanged:requestPaint();
453	onScaleChanged:requestPaint();
454	onRotateChanged:requestPaint();
455	onFillStyleChanged:requestPaint();
456
457	renderTarget: Canvas.FramebufferObject
458	renderStrategy: Canvas.Cooperative
459
460
461	onPaint: {
462	var ctxcircle = canvascentergraphic.getContext('2d');
463	var offleftcenter = width / 2
464	var offrightcenter = width / 2
465	var vCenter = height * 0.5
466	var vDelta = height / 6
467
468	ctxcircle.save();
469	ctxcircle.clearRect(0, 0, canvascentergraphic.width, canvascentergraphic.height);
470	ctxcircle.globalAlpha = canvascentergraphic.alpha;
471	ctxcircle.strokeStyle = canvascentergraphic.strokeStyle;
472	ctxcircle.fillStyle = canvascentergraphic.fillStyle;
473	ctxcircle.lineWidth = canvascentergraphic.lineWidth;
474	ctxcircle.scale(canvascentergraphic.scale, canvascentergraphic.scale);
475	ctxcircle.rotate(canvascentergraphic.rotate);
476
477	//Top Row
478	ctxcircle.beginPath();
479	ctxcircle.arc(offleftcenter - 10, vCenter - 30, 1, 10 * Math.PI, false);
480	ctxcircle.fill();
481	ctxcircle.closePath();
482	ctxcircle.stroke();
483
484	ctxcircle.beginPath();
485	ctxcircle.arc(offleftcenter - 20, vCenter - 30, 1, 10 * Math.PI, false);
486	ctxcircle.fill();
487	ctxcircle.closePath();
488	ctxcircle.stroke();
489
490	//Second Row
491
492	ctxcircle.beginPath();
493	ctxcircle.arc(offleftcenter - 30, vCenter - 20, 1, 10 * Math.PI, false);
494	ctxcircle.fill();
495	ctxcircle.closePath();
496	ctxcircle.stroke();
497
498	ctxcircle.beginPath();
499	ctxcircle.arc(offleftcenter - 20, vCenter - 20, 2, 10 * Math.PI, false);
500	ctxcircle.fill();
501	ctxcircle.closePath();
502	ctxcircle.stroke();
503
504	ctxcircle.beginPath();
505	ctxcircle.arc(offleftcenter - 10, vCenter - 20, 2, 10 * Math.PI, false);
506	ctxcircle.fill();
507	ctxcircle.closePath();
508	ctxcircle.stroke();
509
510	ctxcircle.beginPath();
511	ctxcircle.arc(offleftcenter - 0, vCenter - 20, 1, 10 * Math.PI, false);
512	ctxcircle.fill();
513	ctxcircle.closePath();
514	ctxcircle.stroke();
515
516	//Third Row
517	ctxcircle.beginPath();
518	ctxcircle.arc(offleftcenter - 40, vCenter - 10, 1, 10 * Math.PI, false);
519	ctxcircle.fill();
520	ctxcircle.closePath();
521	ctxcircle.stroke();
522
523	ctxcircle.beginPath();
524	ctxcircle.arc(offleftcenter - 30, vCenter - 10, 2, 10 * Math.PI, false);
525	ctxcircle.fill();
526	ctxcircle.closePath();
527	ctxcircle.stroke();
528
529	ctxcircle.beginPath();
530	ctxcircle.arc(offleftcenter - 20, vCenter - 10, 2, 10 * Math.PI, false);
531	ctxcircle.fill();
532	ctxcircle.closePath();
533	ctxcircle.stroke();
534
535	ctxcircle.beginPath();
536	ctxcircle.arc(offleftcenter - 10, vCenter - 10, 2, 10 * Math.PI, false);
537	ctxcircle.fill();
538	ctxcircle.closePath();
539	ctxcircle.stroke();
540
541	ctxcircle.beginPath();
542	ctxcircle.arc(offleftcenter, vCenter - 10, 2, 10 * Math.PI, false);
543	ctxcircle.fill();
544	ctxcircle.closePath();
545	ctxcircle.stroke();
546
547	ctxcircle.beginPath();
548	ctxcircle.arc(offleftcenter + 10, vCenter - 10, 1, 10 * Math.PI, false);
549	ctxcircle.fill();
550	ctxcircle.closePath();
551	ctxcircle.stroke();
552
553	//Fourth Row
554	ctxcircle.beginPath();
555	ctxcircle.arc(offleftcenter - 45, vCenter - 0, 1, 10 * Math.PI, false);
556	ctxcircle.fill();
557	ctxcircle.closePath();
558	ctxcircle.stroke();
559
560	ctxcircle.beginPath();
561	ctxcircle.arc(offleftcenter - 30, vCenter - 0, 2, 10 * Math.PI, false);
562	ctxcircle.fill();
563	ctxcircle.closePath();
564	ctxcircle.stroke();
565
566	ctxcircle.beginPath();
567	ctxcircle.arc(offleftcenter - 20, vCenter - 0, 2, 10 * Math.PI, false);
568	ctxcircle.fill();
569	ctxcircle.closePath();
570	ctxcircle.stroke();
571
572	ctxcircle.beginPath();
573	ctxcircle.arc(offleftcenter - 10, vCenter - 0, 2, 10 * Math.PI, false);
574	ctxcircle.fill();
575	ctxcircle.closePath();
576	ctxcircle.stroke();
577
578	ctxcircle.beginPath();
579	ctxcircle.arc(offleftcenter - 0, vCenter - 0, 2, 10 * Math.PI, false);
580	ctxcircle.fill();
581	ctxcircle.closePath();
582	ctxcircle.stroke();
583
584	ctxcircle.beginPath();
585	ctxcircle.arc(offleftcenter + 15, vCenter - 0, 1, 10 * Math.PI, false);
586	ctxcircle.fill();
587	ctxcircle.closePath();
588	ctxcircle.stroke();
589
590	//Fifth Row
591
592	ctxcircle.beginPath();
593	ctxcircle.arc(offleftcenter - 40, vCenter + 10, 1, 10 * Math.PI, false);
594	ctxcircle.fill();
595	ctxcircle.closePath();
596	ctxcircle.stroke();
597
598	ctxcircle.beginPath();
599	ctxcircle.arc(offleftcenter - 30, vCenter + 10, 2, 10 * Math.PI, false);
600	ctxcircle.fill();
601	ctxcircle.closePath();
602	ctxcircle.stroke();
603
604	ctxcircle.beginPath();
605	ctxcircle.arc(offleftcenter - 20, vCenter + 10, 2, 10 * Math.PI, false);
606	ctxcircle.fill();
607	ctxcircle.closePath();
608	ctxcircle.stroke();
609
610	ctxcircle.beginPath();
611	ctxcircle.arc(offleftcenter - 10, vCenter + 10, 2, 10 * Math.PI, false);
612	ctxcircle.fill();
613	ctxcircle.closePath();
614	ctxcircle.stroke();
615
616	ctxcircle.beginPath();
617	ctxcircle.arc(offleftcenter - 0, vCenter + 10, 2, 10 * Math.PI, false);
618	ctxcircle.fill();
619	ctxcircle.closePath();
620	ctxcircle.stroke();
621
622	ctxcircle.beginPath();
623	ctxcircle.arc(offleftcenter + 10, vCenter + 10, 1, 10 * Math.PI, false);
624	ctxcircle.fill();
625	ctxcircle.closePath();
626	ctxcircle.stroke();
627
628	//Sixth Row
629
630	ctxcircle.beginPath();
631	ctxcircle.arc(offleftcenter - 30, vCenter + 20, 1, 10 * Math.PI, false);
632	ctxcircle.fill();
633	ctxcircle.closePath();
634	ctxcircle.stroke();
635
636	ctxcircle.beginPath();
637	ctxcircle.arc(offleftcenter - 20, vCenter + 20, 2, 10 * Math.PI, false);
638	ctxcircle.fill();
639	ctxcircle.closePath();
640	ctxcircle.stroke();
641
642	ctxcircle.beginPath();
643	ctxcircle.arc(offleftcenter - 10, vCenter + 20, 2, 10 * Math.PI, false);
644	ctxcircle.fill();
645	ctxcircle.closePath();
646	ctxcircle.stroke();
647
648	ctxcircle.beginPath();
649	ctxcircle.arc(offleftcenter, vCenter + 20, 1, 10 * Math.PI, false);
650	ctxcircle.fill();
651	ctxcircle.closePath();
652	ctxcircle.stroke();
653
654	//Last Row
655	ctxcircle.beginPath();
656	ctxcircle.arc(offleftcenter - 20, vCenter + 30, 1, 10 * Math.PI, false);
657	ctxcircle.fill();
658	ctxcircle.closePath();
659	ctxcircle.stroke();
660
661	ctxcircle.beginPath();
662	ctxcircle.arc(offleftcenter - 10, vCenter + 30, 1, 10 * Math.PI, false);
663	ctxcircle.fill();
664	ctxcircle.closePath();
665	ctxcircle.stroke();
666
667
668	if (canvascentergraphic.fill)
669	ctxcircle.fill();
670	if (canvascentergraphic.stroke)
671	ctxcircle.stroke();
672	ctxcircle.restore();
673	}
674	}	206	}
		207
675	}	208	}