Repository navigation
Expand file tree
/
Copy pathanimcubejs.html
More file actions
3701 lines (3321 loc) · 223 KB
/
Copy pathanimcubejs.html
File metadata and controls
3701 lines (3321 loc) · 223 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en"><head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Easy to use, highly configurable and nicely looking 2x2x2 - 7x7x7 Rubik's Cube & Supercube interactive 3D simulator.">
<link rel="icon" href="sources/images/favicon.ico" type="image/x-icon">
<title>AnimCubeJS - the Rubik's Cube Animation Simulator</title>
<script src="AnimCube3.js"></script>
<script src="config.js"></script>
<script src="AnimCube2.js" async></script>
<script src="AnimCube4.js" async></script>
<script src="AnimCube5.js" async></script>
<script src="AnimCube6.js" async></script>
<script src="AnimCube7.js" async></script>
<style>
body, html {
font-family: Arial, Helvetica, sans-serif;
margin: 0px 5%;
}
.cube {display: inline-block}
.td td {padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px}
.responsive-table {max-width: 100%; overflow: auto;}
.sections {padding:4px; background-color:#CCCCCC;}
.sections-parameters {padding:4px; background-color:#DDDDDD;}
.center {text-align:center;}
.justify {text-align:justify;}
.justify-li-margin ul li {margin: 18px 0px;}
.overflow {overflow:auto; white-space: pre;}
.pre-overflow {white-space: pre;}
.btn:active { background-color: #dddddd;}
.button-to-center {text-align:center}
p {
text-align: justify;
text-justify: inter-word;
}
a:link {color: #2d0d74;}
a:visited {color: #006400;}
a:link:hover {color: green;}
hr.hr {width: 80%; margin: 1.4em auto;}
button::-moz-focus-inner {border: 0;}
pre, code {white-space: pre-wrap; word-wrap: break-word;}
.showhide {
border: 2px solid #bbbbbb;
border-radius: 15px;
border-style: dashed;
margin: 15px 0px 0px;
padding: 10px;
display: none;
}
.btn {
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: left;
height: auto;
width: 90%;
border-radius: 15px;
background: #ffffff;
padding: 0px;
border: 1px solid #bbbbbb;
outline: none;
padding-top: 6px;
padding-bottom: 6px;
}
.img {
padding: 4px 0 0px;
width: 20px;
}
#toc_container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 0px 18px 6px;
width: auto;
}
.toc_title {
font-weight: 600;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
padding: 0;
margin: 6px;
}
th{
font-weight: normal;
}
/* .nowrap {white-space: nowrap;} */
</style>
</head>
<body>
<br>
<table width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr><td height="1" bgcolor="#E6F4FF"></td></tr>
<tr><td height="1" bgcolor="#DDEEF8"></td></tr>
<tr><td height="1" bgcolor="#D6E4F0"></td></tr>
<tr><td height="3" bgcolor="#CCDDEE"></td></tr>
<tr><td bgcolor="#CCDDEE" align="center"><font size="+1"><b>Modern 3D JavaScript
Simulator for Animating the Rubik's Cube</b></font></td></tr>
<tr><td height="3" bgcolor="#CCDDEE"></td></tr>
<tr><td height="1" bgcolor="#BBCCDD"></td></tr>
<tr><td height="1" bgcolor="#AABBCC"></td></tr>
<tr><td height="1" bgcolor="#99AABB"></td></tr>
<tr><td height="1" bgcolor="#778899"></td></tr>
</tbody></table>
<p class="center"><b>AnimCubeJS (formerly AnimCube)</b></p>
<p class="center"><b>AnimCube created by <a href="https://github.com/josef-jelinek" target="_new">Josef Jelínek</a>
(2001 - 2004)</b></p>
<p class="center"><b>AnimCubeJS created by <a href="https://mfeather1.github.io/3ColorCube/" target="_new">Michael Feather</a> (old versions: 2015 - 2019, current version: 2021)</b></p>
<p class="center"><b>AnimCubeJS 4x4x4 - 7x7x7 3D graphics core improvement by <a href="https://rubiksbylogic.com/" target="_new">Marcelo Falcão de Oliveira</a> (2023)</b></p>
<div class="responsive-table">
<table width="99%"><tr><td width="33%">
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href=#introduction>Introduction</a></li>
<li><a href=#download>Download</a></li>
<li><a href=#controls>Controls</a></li>
<li><a href=#usage>Using Simulator in Web Pages</a></li>
<li><a href=#parameters>Parameters</a></li>
<li><a href=#enhancement>Enhancement</a></li>
</ul>
</div>
</td><td width="33%">
<center><div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move={Cube in ...} R U' L F U' {... cube in ...} R2 U2 R U R' {... cube ...} U2 D' L D {... pattern} F2 L2 U&initrevmove=#&bgcolor=FFFFFF&butbgcolor=99AACC&demo={AnimCubeJS}zzUuzz{by M%2E Feather %26 J%2E Jel%C3%ADnek}d'D'UE'D'{}D'E'U&movetext=5&metric=2&fonttype=0&snap=1&buttonheight=20")</script></div></center>
</td>
<td width="33%">
</tr></table>
</div>
<div id="introduction" class="sections"><b><i>Introduction</i></b></div>
<p>Purpose of this simulator:</p>
<div class="justify"><ul>
<li>This JavaScript (JS) simulator is aimed at showing animation of Rubik's Cube
manipulation.</li>
<li>The simulator was initially created as Java applet (called <a href="old/sources/AnimCube/index.html" target="_new">AnimCube</a>)
by Josef Jelínek because of the problems with existing applets at that time
(2001). Features of AnimCubeJS simulator (the port from AnimCube to AnimCubeJS was made by Michael Feather) try to address and solve some of the
problems. However, the simulator evolved much further than its
predecessors and a user can now choose what fits his/her needs.</li>
</ul></div>
<div id="evolution" class="button-to-center">
<button id=showHideButton16 onclick="showHideFunc(16,1)" class=btn>
<table border=0 class=nowrap width=100%>
<tr>
<td width=20%> <img id=showHideImage16 src=sources/images/down.png class=img alt=></td>
<td width=60% style=text-align:center><a id=showHideHeading16>Show AnimCubeJS evolution</a></td>
<td width=20%></td>
</tr>
</table>
</button>
</div>
<div class=showhide id=showHideText16>
</div>
<p>Main features of this simulator:</p>
<div class="justify"><ul>
<li>Open source, free, lightweight & compact piece of <a href="https://github.com/cubing/AnimCubeJS" target="_new">fully
readable plain JavaScript</a> code.</li>
<li>AnimCube was available only for the 3x3x3 Rubik's Cube. AnimCubeJS is
available for the 2x2x2, 3x3x3, 4x4x4, 5x5x5, 6x6x6 and 7x7x7 Rubik's Cubes,
as well as 2x2x2 - 7x7x7 Supercubes. The 7x7x7 cube was contributed by
Marcelo Falcão de Oliveira (in collaboration with Michael Feather).</li>
<li>Larger cube sizes 8x8x8, 9x9x9 ... NxNxN can be created by modifying the existing program.</li>
<li>The simulator is known to be working not only in personal web pages (e.g. powered
by a content management system), but also in internet forum posts and native
mobile/web apps.</li>
<li>Compatibility with all modern web browsers.</li>
<li>Manipulation & control actions are working on mobile devices. Retina display is
supported. Responsive-layout cubes can be easily designed.</li>
<li>Outstanding performance in comparison with similar Rubik's Cube simulators.
Consumption of the processor time is reduced and more simulators can
animate simultaneously without noticeable slow-down.</li>
<li>Very flexible settings specified directly in the web page
where the simulator is placed. Both graphical appearance and functionality can be easily adjusted.
Multiple cubing notations are supported.</li>
<li>Natural and sensitive manipulation with separate
cube layers (even inner ones) as well as the entire cube. The 3x3x3 simulator supports
many types of single turns: one outer layer or center layer
separately, two adjacent or opposite layers simultaneously, and whole-cube rotations.</li>
<li>The simulator is displayed in configurable perspective projection in order
to present the cube in a more realistic way.</li>
<li>Perspective projection uses bilinear interpolation to
display inner face points for the sake of rendering efficiency/speed.</li>
<li>Normally hidden facelets (stickers) can be shown by means of
projection of facelets to the planes near the cube.</li>
<li>AnimCubeJS is fully backward compatible with its AnimCube Java applet predecessor.</li>
</ul></div>
<p><i>Note:</i> Native anti-aliasing was not used in the original AnimCube Java applet
because it was not generally supported by the web browsers back then. Nowadays, modern
web browsers are using native anti-aliasing in order to draw smoother facelet edges.
</p><p><i>Note:</i> To make this simulator work you need a JavaScript-enabled
web browser. JavaScript in your web browser is currently <a id=a1></a><noscript>disabled (see how to <a href="https://www.computerhope.com/issues/ch000891.htm" target="_new">enable JavaScript</a>).</noscript>
</p>
<div id="download" class="sections"><b><i>Download</i></b></div>
<p>The program is classified as free and open-source software, and you can use the cube simulator in your web pages.
In order to do so, download one (or more) of the files below. Supercubes are included by default.</p>
<p><a href="sources/zip/2x2x2-AnimCubeJS.zip">2x2x2 AnimCubeJS simulator
<code>.zip</code> file</a> (19 kB)</p>
<p><a href="sources/zip/3x3x3-AnimCubeJS.zip">3x3x3 AnimCubeJS simulator
<code>.zip</code> file</a> (20 kB)</p>
<p><a href="sources/zip/4x4x4-AnimCubeJS.zip">4x4x4 AnimCubeJS simulator
<code>.zip</code> file</a> (21 kB)</p>
<p><a href="sources/zip/5x5x5-AnimCubeJS.zip">5x5x5 AnimCubeJS simulator
<code>.zip</code> file</a> (21 kB)</p>
<p><a href="sources/zip/6x6x6-AnimCubeJS.zip">6x6x6 AnimCubeJS simulator
<code>.zip</code> file</a> (21 kB)</p>
<p><a href="sources/zip/7x7x7-AnimCubeJS.zip">7x7x7 AnimCubeJS simulator
<code>.zip</code> file</a> (23 kB)</p>
<p>
You can choose from 2 different versions of AnimCubeJS. Click on the button below for details.
</p>
<div class="button-to-center">
<button id=showHideButton1 onclick="showHideFunc(1,0)" class=btn>
<table border=0 class=nowrap width=100%>
<tr>
<td width=20%> <img id=showHideImage1 src=sources/images/down.png class=img alt=></td>
<td width=60% style=text-align:center><a id=showHideHeading1>Show AnimCubeJS version differences</a></td>
<td width=20%></td>
</tr>
</table>
</button>
</div>
<div class=showhide id=showHideText1>
<p>
Notable differences between the current and <a href="old/animcubejs.html" target="_new">the old version of AnimCubeJS</a>:
</p>
<ol>
<li>Vanilla JS is used in the current version, GWT & Apache Ant are used in the old version to generate AnimCubeJS script.</li><br>
<li>AnimCubeJS script is only loaded once in the current version, loading a file for each cube to be displayed is needed in the old version.</li><br>
<li>Div & script are used to display a cube in the current version, iframe is used to display a cube in the old version.</li><br>
<li>No cube.html or mouse.js files are needed in the current version, cube.html is needed (mouse.js is optional) in the old version.</li><br>
<li>Simulators work offline by default when using HTML buttons to manipulate the cube as long as .txt configuration file is not used in the current version,
simulators do not work offline by default when using HTML buttons to manipulate the cube in the old version (regardless of whether configuration file is used or not).</li><br>
<li>Not all parameters and parameter values are supported in the old version as opposed to the current version.</li>
</ol>
<p>
Another difference is that the old documentation is using bLazy script to lazy-load the simulators. Although not necessary, you can still use bLazy in the current version. Here's how:
</p>
<hr>
bLazy notes
<hr>
<pre>
With the current AnimCubeJS version there is no need to load a file for each
cube to be displayed on a web-page, it only takes a function call to
render a cube. Optimally, bLazy (or other software) would have an option
for calling a function as opposed to loading a file. However, an alternative
is to make a file that calls the function, the following shows an
implementation using file callAnimCube3.js:
<div style="width:200px; height:200px">
<script class="b-lazy" data-src="callAnimCube3.js?param=value&..." async></script>
</div>
There is one additional requirement, the following CSS is on the bLazy
demo page and without it the script loading does not work:
.b-lazy, video {
display:inline-block;
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}
https://dinbror.dk/blazy/examples/?ref=blog#script
The above CSS causes problems when used with animcubejs.html so this
modification can be used instead:
.b-lazy {display:inline-block; height:1px; width:1px;}
The "wrap" div, which eliminates page scrolling while rotating the cube
on mobile devices, can be used used with the "container" option as shown:
<script>var bLazy = new Blazy({container:'#wrap'})</script>
For IE11 to work with AnimCubeJS/bLazy, it must have the following
third-party software included in the web-page which provides backward
compatibility for older browsers:
<script src="currentScript.js"></script>
</pre><br>
<hr>
callAnimCube3.js
<hr>
<pre>
(function(){
if (document.currentScript != null)
AnimCube3(document.currentScript.src.split('?')[1]);
})();
</pre><br>
<hr>
currentScript.js
<hr>
<pre>
/* This file is included for use with AnimCubeJS to provide backward
compatibility for IE11 when using bLazy. A limitation of
currentScript.js is that each parameter list (i.e. the part after
callAnimCube3.js?) must be unique to display cubes properly.
To use, include in web-page as shown:
<script src="currentScript.js"></script>
*/
// Source: https://github.com/amiller-gh/currentScript-polyfill
// document.currentScript polyfill by Adam Miller
// The MIT License (MIT)
(function (document) {
var currentScript = 'currentScript';
// If browser needs currentScript polyfill, add get currentScript() to the document object
if (!(currentScript in document)) {
Object.defineProperty(document, currentScript, {
get: function () {
// IE 8-10 support script readyState
// IE 11+ support stack trace
try {
throw new Error();
}
catch (err) {
// Find the second match for the "at" string to get file src url from stack.
// Specifically works with the format of stack traces in IE.
var i = 0,
stackDetails = (/.*at [^(]*\((.*):(.+):(.+)\)$/ig).exec(err.stack),
scriptLocation = (stackDetails && stackDetails[1]) || false,
line = (stackDetails && stackDetails[2]) || false,
currentLocation = document.location.href.replace(document.location.hash, ''),
pageSource,
inlineScriptSourceRegExp,
inlineScriptSource,
scripts = document.getElementsByTagName('script'); // Live NodeList collection
if (scriptLocation === currentLocation) {
pageSource = document.documentElement.outerHTML;
inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
}
for (; i < scripts.length; i++) {
// If ready state is interactive, return the script tag
if (scripts[i].readyState === 'interactive') {
return scripts[i];
}
// If src matches, return the script tag
if (scripts[i].src === scriptLocation) {
return scripts[i];
}
// If inline source matches, return the script tag
if (
scriptLocation === currentLocation &&
scripts[i].innerHTML &&
scripts[i].innerHTML.trim() === inlineScriptSource
) {
return scripts[i];
}
}
// If no match, return null
return null;
}
}
});
}
})(document);
</pre><br>
<hr>
Safari notes
<hr>
<pre>
With the current AnimCubeJS version, the ms-windows version of Safari (5.1)
does not work with bLazy because it is missing the currentScript function
which became available starting with version 8 as can be seen here:
https://caniuse.com/?search=currentscript
There are two other possible solutions:
1. bLazy (or other software) could provide an option for calling a
function instead of loading a file which would eliminate the need for
the currentScript function
2. The third-party software "currentScript.js", which currently does not
work for Safari 5.1, could be modified
------------------------------------------------------------------------
Safari 5.1 is missing the function requestAnimationFrame so third-party
software "requestAnimationFrame.js" can be used to provide
backward compatibility. To use, include in web-page as shown:
<script src="requestAnimationFrame.js"></script>
The requestAnimationFrame function became available starting with
version 6 as can be seen here:
https://caniuse.com/requestanimationframe
</pre><br>
<hr>
requestAnimationFrame.js
<hr>
<pre>
/* This file is included for use with AnimCubeJS to provide backward
compatibility for Safari v5.1 (in ms-windows). To use, include
in web-page as shown:
<script src="requestAnimationFrame.js"></script>
*/
// https://gist.github.com/paulirish/1579671
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
</pre>
</div>
<p>
Web developers can download the <a href="https://github.com/cubing/AnimCubeJS" target="_new">GitHub repository</a>
containing source code and documentation for both AnimCubeJS versions.
</p>
<div id="controls" class="sections"><b><i>Controls</i></b></div>
<p>Controls of the simulator are quite intuitive. You can rotate the whole cube
as well as twist separate layers using mouse (finger in the case of a touch
screen). To twist separated layer, pick one and use dragging in natural direction (with the
left mouse button being pressed). To rotate the whole
cube, use the right mouse button or drag from a near point outside the cube image
(the latter option is also applicable to touch screens). The possibility to twist a layer can
be disabled in a web page, then only the whole-cube rotation is allowed. You can
control the animation by buttons in the button bar. Animation can be immediately set to
any position using the progress bar (if present)
just above the button bar (which can be reduced or totally hidden).</p>
<center><div class="cube" style="width:60%; height:200px"> <script>AnimCube3("colorscheme=wygbor&move=RU'LFU'R2U2RUR'U2D'LDF2L2U&initrevmove=#&bgcolor=FFFFFF&butbgcolor=99AACC&fonttype=0&snap=1&buttonheight=20&textsize=16")</script></div></center>
<p>The progress bar consists of two components, namely:</p>
<ol><li>background / trough (with a surrounding border)</li>
<li>slider (part that moves)</li></ol>
<p>Animation can be applied more times, as well as interleaved with direct manipulation to allow a user
to experiment if he/she wants to. Unless otherwise stated, the first button (Rewind) always clears the current cube rotation, twisted layers, mirroring
and executed turns (if applicable) to the simulator's initial configuration.
The middle button has two purposes: when the animation is playing, it will stop it;
when the animation is stopped, it mirrors the cube view to allow a
user to experiment with symmetrical cases. The cube can be rotated by mouse /
finger even if the animation is started. If you press a button in the middle of
an animated layer twist, the twist is finished immediately and the new requested action is started.</p>
<p>
In the <a href="#enhancement">Enhancement</a> section you will find how to activate keyboard input
to enter moves by typing letters. You can also duplicate the functionality of the button bar using JavaScript buttons.
</p>
<div id="usage" class="sections"><b><i>Using Simulator in Web Pages</i></b></div>
<br>
<div class="button-to-center">
<button id=showHideButton12 onclick="showHideFunc(12,0)" class=btn>
<table border=0 class=nowrap width=100%>
<tr>
<td width=20%> <img id=showHideImage12 src=sources/images/down.png class=img alt=></td>
<td width=60% style=text-align:center><a id=showHideHeading12>Show the simplest HTML page using the simulator</a></td>
<td width=20%></td>
</tr>
</table>
</button>
</div>
<div class=showhide id=showHideText12>
<pre>
<!DOCTYPE html>
<html>
<head>
<script src="AnimCube3.js"></script>
</head>
<body>
<div style="width:200px; height:219px">
<script>AnimCube3("move=RUR'URU2R'U2&initrevmove=#")</script>
</div>
</body>
</html>
</pre>
<p>
The result of the code above can be seen <a href="example.html" target="_new">here</a>. Explanation in detail follows below.
</p>
</div>
<p>To use the simulator in your own web pages, start by adding the following line to the HTML head section.</p>
<pre><code><script src="AnimCubeX.js"></script></code></pre>
<p><i>Note:</i> In the code above, replace "X" by the cube size you downloaded - e.g. <code>AnimCube2.js</code> means the 2x2x2 simulator will be displayed,
<code>AnimCube7.js</code> means the 7x7x7 simulator will be displayed.
</p>
<p>Next, add the following code in the HTML file to the place where you want the simulator to be displayed. Do not forget to replace "X" there as well.</p>
<pre><code><div class="cube" style="width:160px; height:179px">
<script>AnimCubeX("parameters")</script>
</div></code></pre>
<p>
Optionally, add the following line to your CSS.</p>
<pre><code>.cube {display: inline-block;}</code></pre>
<p>Make sure to declare parameters as follows: <code>name=value</code>, and separate parameter declarations with <code>&</code> symbol.
</p>
<p>
Extract downloaded <code>.zip</code> file to see the <code>AnimCubeX.js</code> file.
</p>
<p>Make sure to include the source <code>AnimCubeX.js</code> file in the directory/folder referenced in the HTML head section of your web page.</p>
<p>Cube's (div's) width and height are arbitrary and can be flexibly adjusted.
For the best appearance the height should be equal to width + value of the button height + 6 (6 being the height of the progress bar) if the button bar is displayed,
and width if the button bar is hidden or only the Rewind button is displayed. The button height is configurable, default value
of it is 13 pixels.</p>
<p>Examples for cubes with the button bar:</p>
<pre>
Button
Width Height Height
----- ------ ------
181 13 200
200 13 219
277 17 300
300 17 323
</pre>
<div class="button-to-center">
<button id=showHideButton4 onclick="showHideFunc(4,0)" class=btn>
<table border=0 class=nowrap width=100%>
<tr>
<td width=20%> <img id=showHideImage4 src=sources/images/down.png class=img alt=></td>
<td width=60% style=text-align:center><a id=showHideHeading4>Show additional comments</a></td>
<td width=20%></td>
</tr>
</table>
</button>
</div>
<div class=showhide id=showHideText4>
<ol>
<li><p>The "best appearance" recommendation above maximizes the magnification of the cube for a given width which also minimizes the space around the cube inside the div
(from which a rotation can be initiated).</p></li>
<li><p>With regard to customizing, increasing the width (from "best appearance" recommendation above) widens the button bar and also the amount
of space around the cube inside the div, while maintaining the same magnification of the cube.</p></li>
<li><p>If the width is already wider than the "best appearance" recommendation above (as in width = height for example) then increasing
the (div's) height will increase the magnification of the cube until height = width + button height + 6, at which point further increases
in height no longer increase the magnification of the cube but instead add space above & below the cube inside the div.</p></li>
</ol>
</div>
<p><i>Examples:</i> The following two simulators are showing the intro-simulator
(not in demo mode) with different aspect ratios (width and height).</p>
<p>First cube (div) has the following attribute: <code>style="width:250px; height:150px"</code>, second cube (div) has the following attribute:
<code>style="width:150px; height:250px"</code>.
</p>
<div>
<div class="cube" style="width:250px; height:150px"> <script>AnimCube3("colorscheme=wygbor&move=R U' L F U' R2 U2 R U R' U2 D' L D F2 L2 U&initrevmove=#&bgcolor=FFFFFF&butbgcolor=99AACC&movetext=5&metric=2&fonttype=0&snap=1&buttonheight=20")</script></div>
<div class="cube" style="width:150px; height:250px"> <script>AnimCube3("colorscheme=wygbor&move=R U' L F U' R2 U2 R U R' U2 D' L D F2 L2 U&initrevmove=#&bgcolor=FFFFFF&butbgcolor=99AACC&movetext=5&metric=2&fonttype=0&snap=1&buttonheight=20")</script></div>
</div>
<p>
You can also use percent units to set the div's width, which might keep a bigger area of
control buttons resulting in more comfortable tapping on mobile devices. The cube (div) below has the following
attribute: <code>style="width:100%; height:150px"</code>. See a different approach for implementing fully responsive-layout cubes as outlined in the
<a href="#enhancement">Enhancement</a> section.
</p>
<div>
<div class="cube" style="width:100%; height:150px"> <script>AnimCube3("colorscheme=wygbor&move=R U' L F U' R2 U2 R U R' U2 D' L D F2 L2 U&initrevmove=#&bgcolor=FFFFFF&butbgcolor=99AACC&movetext=5&metric=2&fonttype=0&snap=1&buttonheight=20")</script></div>
</div>
<p>Next sections are describing all parameters and their possible values. Every parameter
is optional so the simplest possible call is made using <code><script>AnimCubeX("")</script></code>
(i.e. with no parameters at all).</p>
<div id="parameters" class="sections"><b><i>Parameters</i></b></div>
<p>There are 47 customizable parameters. They are listed below in the order corresponding to their occurrence in the
documentation. The best way to understand their meaning is to experiment with example simulators provided in the
description of each parameter.</p>
<p>
<a href="sources/codes/enhancement/parameters/config_tool.html" target="_new">AnimCubeJS Configuration Tool</a> is
a nice and easy way for creating simulators with the desired functionality. By
<a href="sources/codes/enhancement/parameters/create.html" target="_new">declaring parameters online</a> (it actually
works even offline) you can build a simulator and then share it using a URL link.
</p>
<div class="button-to-center">
<button id=showHideButton13 onclick="showHideFunc(13,0)" class=btn>
<table border=0 class=nowrap width=100%>
<tr>
<td width=20%> <img id=showHideImage13 src=sources/images/down.png class=img alt=></td>
<td width=60% style=text-align:center><a id=showHideHeading13>Show parameters in alphabetical order</a></td>
<td width=20%></td>
</tr>
</table>
</button>
</div>
<div class=showhide id=showHideText13>
<p>
<code><a href="#align">parameter name: align | value: 0 - 99</a><br>
<a href="#bgcolor">parameter name: bgcolor | value: hexadecimal color</a><br>
<a href="#borderwidth">parameter name: borderwidth | value: 0 - 20</a><br>
<a href="#butbgcolor">parameter name: butbgcolor | value: hexadecimal color</a><br>
<a href="#butsymbolscale">parameter name: butsymbolscale | value: 0.5 - 2.5</a><br>
<a href="#buttonbar">parameter name: buttonbar | value: 0 - 2</a><br>
<a href="#buttonheight">parameter name: buttonheight | value: 9 - 25</a><br>
<a href="#clickprogress">parameter name: clickprogress | value: 0 or 1</a><br>
<a href="#colors">parameter name: colors | value: hexadecimal color string</a><br>
<a href="#colorscheme">parameter name: colorscheme | value: 6 color codes</a><br>
<a href="#config">parameter name: config | value: .txt file</a><br>
<a href="#counter">parameter name: counter | value: 0 or 1</a><br>
<a href="#cubecolor">parameter name: cubecolor | value: hexadecimal color</a><br>
<a href="#demo">parameter name: demo | value: string from move character set, random or #</a><br>
<a href="#doublespeed">parameter name: doublespeed | value: natural number</a><br>
<a href="#edit">parameter name: edit | value: 0 or 1</a><br>
<a href="#facelets">parameter name: facelets | value: string of color codes</a><br>
<a href="#fonttype">parameter name: fonttype | value: 0 or 1</a><br>
<a href="#gabbacolors">parameter name: gabbacolors | value: 0 or 1</a><br>
<a href="#hint">parameter name: hint | value: natural number</a><br>
<a href="#hintborder">parameter name: hintborder | value: 0 or 1</a><br>
<a href="#hinthoriz">parameter name: hinthoriz | value: decimal number greater than 0</a><br>
<a href="#hintvert">parameter name: hintvert | value: decimal number greater than 0</a><br>
<a href="#initmove">parameter name: initmove | value: string from move character set, random or #</a><br>
<a href="#initrevmove">parameter name: initrevmove | value: string from move character set, random or #</a><br>
<a href="#metric">parameter name: metric | value: 0 - 3</a><br>
<a href="#move">parameter name: move | value: string from move character set or random</a><br>
<a href="#movetext">parameter name: movetext | value: 0 - 6</a> (for 3x3x3 only, other cube sizes: 0, 1, 5 or 6)<br>
<a href="#movetextspace">parameter name: movetextspace | value: 0 or 1</a><br>
<a href="#perspective">parameter name: perspective | value: natural number</a><br>
<a href="#pos">parameter name: pos | value: string of Lars Petrus' color codes</a><br>
<a href="#position">parameter name: position | value: R, U, F, L, D and/or B string</a><br>
<a href="#randmoves">parameter name: randmoves | value: natural number</a><br>
<a href="#repeat">parameter name: repeat | value: 0 or 1</a><br>
<a href="#scale">parameter name: scale | value: natural number</a><br>
<a href="#scramble">parameter name: scramble | value: 0 - 2</a><br>
<a href="#scw">parameter name: scw | value: 0 - 2</a><br>
<a href="#sign">parameter name: sign | value: 0 or 1</a><br>
<a href="#slidercolor">parameter name: slidercolor | value: hexadecimal color</a><br>
<a href="#snap">parameter name: snap | value: 0 or 1</a><br>
<a href="#speed">parameter name: speed | value: natural number</a><br>
<a href="#supercube">parameter name: supercube | value: 0 or 1</a><br>
<a href="#superfacelets">parameter name: superfacelets | value: 0 - 3 string</a><br>
<a href="#textsize">parameter name: textsize | value: 5 - 40</a><br>
<a href="#troughcolor">parameter name: troughcolor | value: hexadecimal color</a><br>
<a href="#wca">parameter name: wca | value: 0 or 1</a><br>
<a href="#yz">parameter name: yz | value: 0 or 1</a></code></p>
</div>
<p>
<code><a href="#config">parameter name: config | value: .txt file</a><br>
<a href="#bgcolor">parameter name: bgcolor | value: hexadecimal color</a><br>
<a href="#cubecolor">parameter name: cubecolor | value: hexadecimal color</a><br>
<a href="#butbgcolor">parameter name: butbgcolor | value: hexadecimal color</a><br>
<a href="#slidercolor">parameter name: slidercolor | value: hexadecimal color</a><br>
<a href="#troughcolor">parameter name: troughcolor | value: hexadecimal color</a><br>
<a href="#clickprogress">parameter name: clickprogress | value: 0 or 1</a><br>
<a href="#snap">parameter name: snap | value: 0 or 1</a><br>
<a href="#buttonbar">parameter name: buttonbar | value: 0 - 2</a><br>
<a href="#buttonheight">parameter name: buttonheight | value: 9 - 25</a><br>
<a href="#butsymbolscale">parameter name: butsymbolscale | value: 0.5 - 2.5</a><br>
<a href="#repeat">parameter name: repeat | value: 0 or 1</a><br>
<a href="#edit">parameter name: edit | value: 0 or 1</a><br>
<a href="#speed">parameter name: speed | value: natural number</a><br>
<a href="#doublespeed">parameter name: doublespeed | value: natural number</a><br>
<a href="#position">parameter name: position | value: R, U, F, L, D and/or B string</a><br>
<a href="#scale">parameter name: scale | value: natural number</a><br>
<a href="#align">parameter name: align | value: 0 - 99</a><br>
<a href="#hint">parameter name: hint | value: natural number</a><br>
<a href="#hinthoriz">parameter name: hinthoriz | value: decimal number greater than 0</a><br>
<a href="#hintvert">parameter name: hintvert | value: decimal number greater than 0</a><br>
<a href="#hintborder">parameter name: hintborder | value: 0 or 1</a><br>
<a href="#perspective">parameter name: perspective | value: natural number</a><br>
<a href="#borderwidth">parameter name: borderwidth | value: 0 - 20</a><br>
<a href="#move">parameter name: move | value: string from move character set or random</a><br>
<a href="#movetext">parameter name: movetext | value: 0 - 6</a> (for 3x3x3 only, other cube sizes: 0, 1, 5 or 6)<br>
<a href="#movetextspace">parameter name: movetextspace | value: 0 or 1</a><br>
<a href="#yz">parameter name: yz | value: 0 or 1</a><br>
<a href="#sign">parameter name: sign | value: 0 or 1</a><br>
<a href="#wca">parameter name: wca | value: 0 or 1</a><br>
<a href="#initmove">parameter name: initmove | value: string from move character set, random or #</a><br>
<a href="#initrevmove">parameter name: initrevmove | value: string from move character set, random or #</a><br>
<a href="#demo">parameter name: demo | value: string from move character set, random or #</a><br>
<a href="#metric">parameter name: metric | value: 0 - 3</a><br>
<a href="#counter">parameter name: counter | value: 0 or 1</a><br>
<a href="#fonttype">parameter name: fonttype | value: 0 or 1</a><br>
<a href="#textsize">parameter name: textsize | value: 5 - 40</a><br>
<a href="#facelets">parameter name: facelets | value: string of color codes</a><br>
<a href="#colorscheme">parameter name: colorscheme | value: 6 color codes</a><br>
<a href="#colors">parameter name: colors | value: hexadecimal color string</a><br>
<a href="#pos">parameter name: pos | value: string of Lars Petrus' color codes</a><br>
<a href="#supercube">parameter name: supercube | value: 0 or 1</a><br>
<a href="#superfacelets">parameter name: superfacelets | value: 0 - 3 string</a><br>
<a href="#scw">parameter name: scw | value: 0 - 2</a><br>
<a href="#gabbacolors">parameter name: gabbacolors | value: 0 or 1</a><br>
<a href="#scramble">parameter name: scramble | value: 0 - 2</a><br>
<a href="#randmoves">parameter name: randmoves | value: natural number</a></code></p>
<div class="sections-parameters"><a name="config"></a><b><code>config</code> parameter</b></div>
<p>This parameter may simplify page maintenance and enables a user to
modify behavior of multiple simulators in a page by the modification of one
configuration file.
</p>
<p>The <code>config</code> parameter takes the file name (with a <code>.txt</code> suffix) as a value. The file
location has to be specified relative to the location of the HTML document that
uses it. This restriction is set to unify the functionality on both internet and
local locations. The file format is simple. It consists of lines, each
specifying chosen value of a particular parameter. Each line starts with the
parameter name followed by the equal sign "<code>=</code>" and the rest of line
contains the parameter value. White-space characters can be used to surround the
parameter name and value. All values specified in the configuration file can be
overwritten by simulator parameters declared in the HTML document (web page). That is, simulator parameters
declared in the web page are prioritized over the parameters specified in the configuration file.
</p><p><i>Example:</i> <code>AnimCube3("config=AnimCube3.txt")</code> sets all
parameters to the ones found in the file "<code><a href="AnimCube3.txt" target="_new">AnimCube3.txt</a></code>".
The file contents can be of the following form:
</p><pre><code> bgcolor=ffffff
butbgcolor=99eebb
movetext=1</code></pre>
<p>These settings set some of the background colors and enable text
displaying for all simulators with this <code>config</code> parameter. The following first
two simulators have only six parameters declared (<code>config</code>, <code><a href="#colorscheme">colorscheme</a></code>, <code><a href="#move">move</a></code>,
<code><a href="#initrevmove">initrevmove</a></code>, <code><a href="#snap">snap</a></code> and <code><a href="#buttonheight">buttonheight</a></code>),
and differ only in the <code>move</code> parameter values. The third simulator has the same parameters and values as the first one, except for missing the
<code>config</code> parameter.
</p>
<div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&config=AnimCube3.txt&move=Ra Fa Ra Fa Ra Fa&initrevmove=#&snap=1&buttonheight=20")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&config=AnimCube3.txt&move=Ra Fa Ra' Fa' Ra Fa&initrevmove=#&snap=1&buttonheight=20")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=Ra Fa Ra Fa Ra Fa&initrevmove=#&snap=1&buttonheight=20")</script></div>
</div>
<p>
<i>Note:</i> The configuration file name used to have a <code>.cfg</code> suffix in the original AnimCube Java applet documentation.
Here, the <code>.txt</code> suffix has been chosen as an alternative to demonstrate that there is no requirement that the
configuration file extension must be <code>.cfg</code>. You should be able to see the contents of the "AnimCube3.txt" file linked
above right in the web browser. In this particular case you would not be able to see the contents of the "AnimCube3.cfg" file
right in the web browser. Both file types work the same in terms of simulator functionality.</p>
<p>
<i>Note:</i> Due to browser implementations of the same-origin policy, the <code>.txt</code> configuration file will not work
locally if the web page containing AnimCubeJS simulator is accessed via file://..., use http://...
on local web server (such as Apache or IIS) instead. However, there is a way to use a configuration file
without getting it from the server.</p>
<div class="button-to-center">
<button id=showHideButton15 onclick="showHideFunc(15,0)" class=btn>
<table border=0 class=nowrap width=100%>
<tr>
<td width=20%> <img id=showHideImage15 src=sources/images/down.png class=img alt=></td>
<td width=60% style=text-align:center><a id=showHideHeading15>Show how to do it</a></td>
<td width=20%></td>
</tr>
</table>
</button>
</div>
<div class=showhide id=showHideText15>
<p>
All that is needed is to define a variable in a web page, and then use it in each call to <code>AnimCubeX</code>.
Access the following two simulators via file://..., and compare them with the first two simulators above.
</p>
<div>
<div id=s15c1 class="cube" style="width:160px; height:186px"></div>
<div id=s15c2 class="cube" style="width:160px; height:186px"></div>
</div>
<p>
While the first pair of simulators is getting a configuration file ("AnimCube.txt") from the server,
the second pair of simulators is getting the "<a href="config.js" target="_new">config.js</a>" file
containing the "config" variable from the web client. Note that the file formats are different.
</p>
<p>
Add the following line to the HTML head section rigth after the <code><script src="AnimCubeX.js"></script></code>:
</p>
<pre><code><script src="config.js"></script></code></pre>
<p>Make sure to include the source <code>config.js</code> file in the directory/folder referenced in the HTML
head section of your web page. Next, add the following code in the HTML file to the place where you want the simulator to be displayed.</p>
<pre><code><div...>
<script>AnimCubeX(config + "&parameters")</script>
</div></code></pre>
<p>
Do not forget to replace "X" by the cube size.
</p>
</div>
<br>
<div class="sections-parameters"><a name="bgcolor"></a><b><code>bgcolor</code> parameter</b></div>
<p>The <code>bgcolor</code> parameter determines the background color of the
simulator. This parameter can be set to the background color of your web page in
order to avoid visual color collisions. The value of the parameter consists of six hex digits and
is case insensitive. The meaning of these digits is equal to the RGB color
specification in HTML. If this parameter is missing, the color
is set to middle gray (the default value is '<code>808080</code>'). The move counter is outlined to allow good visibility for
any color. You can hide it using the <code><a href="#counter">counter</a></code> parameter.
</p>
<p>
There is also a possibility to use transparent background which gives flexibility when setting
color gradient or personalized image/video as a web page background. Details about transparency can
be found in the <a href="#enhancement">Enhancement</a> section.
</p>
</p><p><i>Examples:</i> <code>AnimCube3("bgcolor=ff0000")</code> sets the background color to red. The second simulator is an
example of the default <code>bgcolor</code> parameter value.
</p>
<div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&bgcolor=ff0000&move=M2E2S2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=M2E2S2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
</div>
<p>
<i>Note:</i> On the two cubes above you can notice different border colors for both the button bar and the progress bar,
as well as different slider color in the progress bar. The reason for the former is discussed in
the <code><a href="#butbgcolor">butbgcolor</a></code> parameter section, the reason for the latter is discussed
in the <code><a href="#slidercolor">slidercolor</a></code> parameter section.
</p>
<div class="sections-parameters"><a name="cubecolor"></a><b><code>cubecolor</code> parameter</b></div>
<p><i>Note:</i> This parameter is not supported in the original AnimCube Java applet.</p>
<p>Using the <code>cubecolor</code> parameter you can adjust the body color of the cube (the
color of plastic on a real cube). It has the same value format as the <code><a href="#bgcolor">bgcolor</a></code>
parameter. The default value is '<code>000000</code>' which is black. To avoid possible color collisions between the stickers
and the body of the cube, set the <code><a href="#facelets">facelets</a></code>, <code><a href="#colorscheme">colorscheme</a></code> or
<code><a href="#colors">colors</a></code> parameter to appropriate value.
</p><p><i>Examples:</i> <code>AnimCube3("cubecolor=ffffff&colorscheme=kygbor")</code> sets the cube color to white along with black stickers.
The second simulator is an example of the default <code>cubecolor</code> parameter value along with white stickers.
</p><div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=kygbor&cubecolor=ffffff&move=M2'E2'S2'&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=M2'E2'S2'&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
</div><br>
<div class="sections-parameters"><a name="butbgcolor"></a><b><code>butbgcolor</code> parameter</b></div>
<p>The <code>butbgcolor</code> parameter determines the background color of the control
buttons in the button bar. It is very similar to the <code><a href="#bgcolor">bgcolor</a></code> parameter and has the same value
format. If this parameter is missing, the color of the buttons is set to the value
of the <code>bgcolor</code> parameter. The button symbols are outlined to allow good
visibility for any color.
</p><p><i>Examples:</i> <code>AnimCube3("butbgcolor=00ff00")</code> sets the background color
of the buttons in the button bar to green. The second simulator is an example of the default <code>butbgcolor</code> parameter value.
</p><div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&butbgcolor=00ff00&move=Rs2Us2Fs2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=Rs2Us2Fs2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
</div><p>
<i>Note:</i> The border color for both the button bar and the progress bar toggles between black and white, depending on the
<code>butbgcolor</code> parameter. If the <code>butbgcolor</code> parameter is not set then it depends on the
<code>bgcolor</code> parameter. If neither of these two is set then the border color is black (because the default value of the
<code>bgcolor</code> parameter represents a lighter color).</p>
<div class="sections-parameters"><a name="slidercolor"></a><b><code>slidercolor</code> parameter</b></div>
<p><i>Note:</i> This parameter is not supported in the original AnimCube Java applet.</p>
<p>The <code>slidercolor</code> parameter determines the color of the slider in the progress bar.
The value of the parameter consists of six hex digits and
is case insensitive. The meaning of these digits is equal to the RGB color
specification in HTML.
If this parameter is missing, the color of the slider is set to black or white, depending on the
<code><a href="#bgcolor">bgcolor</a></code> parameter.
</p><p><i>Examples:</i> <code>AnimCube3("slidercolor=ffff00")</code> sets the slider color to yellow. The second
simulator is an example of the default <code>slidercolor</code> parameter value.
</p><div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=U2 D2' F2 B2' L2 R2'&slidercolor=ffff00&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=U2 D2' F2 B2' L2 R2'&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
</div><br>
<div class="sections-parameters"><a name="troughcolor"></a><b><code>troughcolor</code> parameter</b></div>
<p><i>Note:</i> This parameter is not supported in the original AnimCube Java applet.</p>
<p>Using the <code>troughcolor</code> parameter you can adjust the background (trough) color of the progress bar.
It has the same value format as the <code><a href="#slidercolor">slidercolor</a></code> parameter. The progress bar background color
defaults to a darker shade of the <code><a href="#bgcolor">bgcolor</a></code> parameter.
</p><p><i>Examples:</i> <code>AnimCube3("troughcolor=0000ff")</code> sets the background of the progress bar to blue. The second
simulator is an example of the default <code>troughcolor</code> parameter value.
</p><div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&troughcolor=0000ff&move=U2' D2 F2' B2 L2' R2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&move=U2' D2 F2' B2 L2' R2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
</div>
<p><i>Note:</i> Initially, the name of this parameter was "sliderbgcolor". For
setting the progress bar background color either <code>troughcolor</code>
or <code>sliderbgcolor</code> can be used.</p>
<div class="sections-parameters"><a name="clickprogress"></a><b><code>clickprogress</code> parameter</b></div>
<p><i>Note:</i> This parameter is not supported in the original AnimCube Java applet.</p>
<p>With this parameter you can control an advance of a move sequence by clicking the progress bar.
There are two possible parameter values: '<code>0</code>' and '<code>1</code>' (the default value is '<code>1</code>').
If set to '<code>0</code>' then clicking on trough of the progress bar will not advance
through the move sequence - this is to avoid inadvertently messing up the
playback of a sequence while single-stepping through it.
The difference can be seen on the following cubes. If you click on trough of the progress
bar on the first cube, the move sequence will advance (and the second one will not).
</p><p><i>Examples:</i> <code>AnimCube3("clickprogress=1")</code> and <code>AnimCube3("clickprogress=0")</code> have
the following effect on the simulators.
</p><div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&clickprogress=1&move=U2D2F2B2R2L2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
<div class="cube" style="width:160px; height:186px"> <script>AnimCube3("colorscheme=wygbor&clickprogress=0&move=U2D2F2B2R2L2&initmove=#&snap=1&buttonheight=20&textsize=16")</script></div>
</div>
<p><i>Note:</i> To reduce unintentional tapping on trough of the progress bar especially on mobile devices, enlargement of the area of control buttons in the button bar by
means of percent usage - as described in the <a href="#usage">Using Simulator in Web Pages</a> section - could be useful. Another option is to increase the value of the