VirtualCube JavaScript Applet

With the VirtualCube JavaScript Applet you can integrate interactive Rubik's Cube-like puzzles into your HTML page. The virtual cubes can be rotated and twisted.

Examples

Pocket Cube

Rubik's Cube

Tests

Tests

Usage

The VirtualCube JavaScript Applet consists of the following files:

virtualcube.js
This file contains the JavaScript code.
virtualcube.css
This is an optional stylesheet file which you can change to alter the appearance of the VirtualCube JavaScript Applet.

You can include these files with the following code into your HTML page:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="lib/virtualcube.js"></script>
  <link href="style/virtualcube.css" rel="stylesheet" type="text/css">
</head>
<body>
  ...
</body>
</html>

Once you have include these files you can include a virtual Rubik's Cube anywhere in the body of your HTML page using the following code:


  <div class="virtualcube" 
       kind="RubiksCube" 
       stickersImage="img/RubiksCube_512.gif"></div>
This code has the following meaning:
class="virtualcube"
The VirtualCube JavaScript Applet is inserted into all div-Elements with the class "virtualcube". You can have more than one div-Element of this class in your HTML page.
kind="RubiksCube"
Specifies the desired cube model. You can specify RubiksCube or PocketCube.
stickersImage="img/RubiksCube_512.gif"
Specifies an image which is applied on the stickers of the cube.

Supported Attributes

The div-element may have the following attributes:

rendercontext name Selects the rendering context to be used, "webgl" or "2d". Default: "webgl"
alpha int Vertical orientation of the cube, -90..+90. Default: "-25"
beta int Horizontal orientation of the cube, -90..+90. Default: "45"
colorlist [name=]int, ... RGB color list. Each entry consists of an optional name and a RGB value. Default:"r=#ffd200,u=#003373,f=#8c000f,l=#f8f8f8,d=#00732f,b=#ff4600"
facelist name, ... Maps colors from the color map to the faces of the cube; 6 integer values or color names; r, u, f, l, d, b. Default: "0,1,2,3,4,5"
kind name Specifies the desired cube model: RubiksCube or PocketCube. Default: "RubiksCube"
script string Script. Default value: "".
initscript string This script is used to initialize the cube, and when the reset button is pressed. If you don't specify this parameter, no script is used.
partlist name, ... List of visible parts. Default: "urf,dfr,ubr,drb,ulb,dbl,ufl,dlf,ru,rf,rd,...,center"

Unsupported Attributes

The following attributes are not supported:

scriptmacros id=script, ... Defines macros for use in script and initscript. The identifier of the macro and the script assigned to the macro can be put into quotes. Since a script notation may make use of '=' and ',', you can quote the id and the script with a quote character of your choice, for example: ", ', ยด. Default value: "".
autoPlay boolean Set this to true, to start the player automatically. Default: "false"
cube string Name of a cube in the resource file. If you don't specify this parameter, the default cube of the resource file is used.
debug boolean Set this to 'true' to print debug informations on the console. Default: false.
displayLines int Number of lines of the Script display: set to 0 to switch the display off. Default: 1
locale language Locale, for example "en", "de", "fr".
notation string Name of a notation in the resource file. If you don't specify this parameter, the default notation of the resource file is used.
resourceFile URL Address of a Cube Markup XML resource file. This file can be Zip-compressed to improve the startup time of the applet. The file extension must be .xml or .zip.
resourceData xml Cube Markup XML resource data.
scaleFactor float Scale factor. Default: "1.0"
scriptType string The type of the script: "solver" or "generator". Default: "solver".
scriptProgress int Position of the progress bar. Default value: end of script if scriptType is 'generator', 0 if script type is "solver".
showPlayer boolean Set this to false, to hide the player. Default: true
showInfo boolean Set this to true, to display an info field on the right of the player. Default: false
showController boolean Set this to false, to hide the controller of the player. Default: true
showScrambleButton boolean Set this to false, to hide the scramble button. Default: true
showResetButton boolean Set this to false, to hide the reset button. Default: true.
showSettingsButton boolean Set this to false, to hide the settings button. Default: true
stickerList name, ... Maps colors from the color map to the stickers of the cube; (layerCount * layerCount * 6) integer values; right, up, front, left, down, back. Default: "0 0 0 0 0 0 0 0 0, 1 1 1 1 1 1 1 1 1, 2 2 2 2 2 2 2 2 2, 3 3 3 3 3 3 3 3 3 3, 4 4 4 4 4 4 4 4 4, 5 5 5 5 5 5 5 5 5"
stickerBevel int Beveling of stickers image on each sticker. Default: 2
stickersRightList (name|int), ... Maps colors from the color table to the stickers on the side of the cube; 9 integer values. Default: "r r r, r r r, r r r"
stickersUpList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 integer values. Default: "u u u, u u u, u u u"
stickersFrontList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 integer values. Default: "f f f, f f f, f f f"
stickersLeftList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 integer values. Default: "l l l, l l l, l l l"
stickersDownList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 integer values. Default: "d d d, d d d, d d d"
stickersBackList (name|int), ... Maps colors from the color map to the stickers on the side of the cube; 9 integer values. Default: "b b b, b b b, b b b"
twistDuration int Duration of a quarter-turn twist in milliseconds. Default: "400"
visibleParts name, ... List of visible parts. Default: "urf,dfr,ubr,drb,ulb,dbl,ufl,dlf,ru,rf,rd,...,center"

License Terms

Creative Commons License
VirtualCube JavaScript Applet by Werner Randelshofer is licensed under a Creative Commons Attribution 4.0 International License.