sr-visualizer v1.0.13

VisualCube TS

Fork of VisualCube, a great Rubik's cube svg image generator. This version is a javascript library that can be used to embed Rubik's cube images in a page, without pre-rendering an image server side.

Most of the original Author's logic remains the same. It has just been moved around into files to help it be a bit more readable. Some typing has also been added.

Logic to determine sticker color and apply algorithms was mostly added as part of this project to work with the original structure. Code for the simulator to apply algorithms is unique to this project and was not ported over from the original php version.

Installation

Install the package using npm

npm install --save sr-visualizer

Usage

Import the module

import * as SRVisualizer from 'sr-visualizer'

Render a cube by calling cubePNG() and passing in an html element to render the image inside.

SRVisualizer.cubePNG(document.getElementById('element-id'))

Default options can be overridden by passing in options to cube. For example you can render higher order cubes. Detailed description for all options will be provided below.

SRVisualizer.cubePNG(element, {
  cubeSize: 4, // 4x4 cube
  width: 500,  // width/height of the svg
  height: 500
})

If you don't want to rebuild all of the configs for your existing images using the php scripts you can provide the url as your options. They will automatically be parsed and applied to the rendered cube.

SRVisualizer.cubePNG(element, 'visualcube.php?pzl=4&size=500')

Alternatively you can render the raw SVG element by calling cubeSVG() the same way you would cubePNG()

SRVisualizer.cubeSVG(element)

Alternative Usage

If you aren't using webpack or something similar to bundle your application and manage your imports you can include the javascript file on your page manually. But you also need to include svg.js (^2.7.1).

<script src="path/to/svg.js"></script>
<script src="path/to/visualcube/dist/bundle/srVisualizer.min.js"></script>

then you can access the library from window['sr-visualizer']. However, you loose some of the benefits from the typings index.d.ts. Enums like Face, Axis, and Mask will be unavailable.

Also be aware that you must wait for the DOM to be ready before rendering any cube images. You can do this with jQuery's $(document).ready() function, or just listen for the DOMContentLoaded event before rendering an image.

document.addEventListener("DOMContentLoaded", function(event) { 
  let SRVisualizer = window['sr-visualizer'];
  SRVisualizer.cubePNG(document.getElementById('example'))
});

Examples

Default

cubePNG(element)

Plan View

cubePNG(element, {
  view: 'plan'
})

Color Schemes

showcasing japanese color scheme

import {cubePNG, Face} from 'sr-visualizer'

cubePNG(element, {
  algorithm: 'M2 E2 S2',
  colorScheme: {
    [Face.U]: '#0000F2',
    [Face.R]: '#FFA100',
    [Face.F]: '#00D800',
    [Face.D]: '#FFFFFF',
    [Face.L]: '#EE0000',
    [Face.B]: '#FEFE00'
  }
})

Transparency

import {cubePNG, Face} from 'sr-visualizer'

cubePNG(element, {
  cubeOpacity: 12,
  stickerOpacity: 50
})

Masking

only showing the last layer

import {cubePNG, Masking} from 'sr-visualizer'

cubePNG(element, {
  mask: Masking.LL
})

Rotation

import {cubePNG, Axis} from 'sr-visualizer'

cubePNG(element, {
  viewportRotations: [
    [Axis.X, -34]
  ]
})

Big Cubes

cubePNG(element, {
  cubeSize: 5,
  algorithm: 'R U Uw2 Bw\' Dw L\' F\' Lw\' Dw Lw\' B Lw2 Bw B2 U2 L\' Fw Rw D\' Rw\' Bw D\' Rw2 L2 B L2 Bw L B\' R\' F\' R\' B\' Dw2 Lw2 D2 Dw\' B Lw L\' R\' Fw Uw2 R2 Bw\' Lw\' B R L\' Dw2 F D2 Bw\' U\' Uw F\' B R\' D2 Bw2'
})

Arrows

cubePNG(element, {
  arrows: 'U0U2,U2U8,U8U0,R6R2R0-s8-i5-yellow'
})

OR

cubePNG(element, {
  arrows: [
    {
      s1: { face: Face.U  n: 0 },
      s2: { face: Face.U, n: 2 },
      scale: 10
    },
    {
      s1: { face: Face.U  n: 2 },
      s2: { face: Face.U, n: 8 },
      scale: 10
    },
    {
      s1: { face: Face.U  n: 8 },
      s2: { face: Face.U, n: 0 },
      scale: 10
    },
    {
      s1: { face: Face.R  n: 6 },
      s2: { face: Face.R, n: 2 },
      s3: { face: Face.R, n: 0 },
      scale: 8,
      influence: 5,
      color: 'yellow'
    },
  ]
});

Documentation

Here is a table of the supported options

Still need to implement from Cride5's version

• Facelet Definition (Defines the cube state in terms of facelet positions)
• Configurable default arrow color
• Transparent view
• Cookie configurable variables

Publishing

> npm run build # compile and bundle assets to `/dist/bundle`
> tsc # compile build assets to `/dist/lib`
> npm publish