This uses a css3 to make an SVG cube from a SVG panel. The buttons allow you to try different parameters. The front, left, etc svg's are just linked to panel.svg
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/grass.png b/grass.png
deleted file mode 100644
index 14c5c7d..0000000
Binary files a/grass.png and /dev/null differ
diff --git a/images/gui.png b/images/gui.png
new file mode 100755
index 0000000..7f0e2a8
Binary files /dev/null and b/images/gui.png differ
diff --git a/images/input.png b/images/input.png
new file mode 100755
index 0000000..d6befd0
Binary files /dev/null and b/images/input.png differ
diff --git a/images/result.png b/images/result.png
new file mode 100755
index 0000000..08df8c9
Binary files /dev/null and b/images/result.png differ
diff --git a/back.svg b/inputs/back.svg
old mode 100644
new mode 100755
similarity index 100%
rename from back.svg
rename to inputs/back.svg
diff --git a/bottom.svg b/inputs/bottom.svg
old mode 100644
new mode 100755
similarity index 100%
rename from bottom.svg
rename to inputs/bottom.svg
diff --git a/front.svg b/inputs/front.svg
old mode 100644
new mode 100755
similarity index 100%
rename from front.svg
rename to inputs/front.svg
diff --git a/left.svg b/inputs/left.svg
old mode 100644
new mode 100755
similarity index 100%
rename from left.svg
rename to inputs/left.svg
diff --git a/panels.svg b/inputs/panels.svg
old mode 100644
new mode 100755
similarity index 100%
rename from panels.svg
rename to inputs/panels.svg
diff --git a/right.svg b/inputs/right.svg
old mode 100644
new mode 100755
similarity index 100%
rename from right.svg
rename to inputs/right.svg
diff --git a/top.svg b/inputs/top.svg
old mode 100644
new mode 100755
similarity index 100%
rename from top.svg
rename to inputs/top.svg
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..f654c18
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "gen-svg-cube",
+ "version": "0.0.5",
+ "description": "Render and download svg cubes using webdriver",
+ "main": "render.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "start": "node render.js"
+ },
+ "repository": "git@gitlab.com:wassname/svg2Cube.git",
+ "author": "wassname@wassname.org",
+ "private": true,
+ "license": "ISC",
+ "dependencies": {
+ "fs": "0.0.2",
+ "globby": "^4.0.0",
+ "path": "^0.12.7",
+ "snapsvg": "^0.4.0",
+ "webdriverio": "^3.4.0"
+ }
+}
diff --git a/projectSVG (3rd copy).js b/projectSVG (3rd copy).js
deleted file mode 100644
index 33017ed..0000000
--- a/projectSVG (3rd copy).js
+++ /dev/null
@@ -1,457 +0,0 @@
-'use strict';
-
-try{
- var Snap = require('snapsvg');
-} catch(e) {};
-var SvgCube = function (options) {
-
- // Inputs and options
- var defaultOptions = {
- angle: 30,
- size: 64,
- verbose: false,
- // outline
- drawOutline: true,
- drawShading: true,
- clipCircle: false,
- stroke: {
- "arrow-end": 'none',
- "stroke": 'black', // stroke color for outline
- "stroke-width": Math.sqrt(options.size)/2, // outline width
- "stroke-linecap": "round",
- "stroke-linejoin": "round",
- "fill": "none",
- },
- // cube
- flatten: 0, // fraction to vertically flatten the cube
- topUrl: '', // url for image in top of cuve
- topRot: 0, // rotation of top image in degrees
- topShad: 0, // shading for top
- leftUrl: '',
- leftRot: 0,
- leftShad: 0.1,
- rightUrl: '',
- rightRot: 0,
- rightShad: 0.3,
- svgNS: "http://www.w3.org/2000/svg",
- padding: 0,
- }
-
- // add defaults, 2 levels deep
- options = options || {};
- for (var opt in defaultOptions){
- if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)){
- options[opt] = defaultOptions[opt];
- }
- for (var opt2 in defaultOptions[opt]){
- if (defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)){
- options[opt][opt2] = defaultOptions[opt][opt2];
- }
- }
- }
- this.options = options
-
- this.angle = options.angle
-
- this.w = options.size; // input image width
- this.h = options.size;
- this.f = options.flatten
-
- this.rot = this.angle * Math.PI / 180
- this.padding = options.padding; // pading fraction
-
-
- this.cw = this.w; // we will keep same width but change height
- this.ch = (1 + this.padding) * (this.h / 2 + this.h * Math.tan(this.rot)) -this.h/2*(1-this.f); //canvas height full
-
- // create SVG element
- this.paper = Snap(this.cw, this.ch);
- this.svg=this.paper.node
- var o = this.options;
-
- var style = document.createElement('style');
- this.paper.defs.appendChild(style)
- var styleStr = ` `
- console.log(styleStr);
- style.innerHTML= styleStr
-
-}
-
-/* drawing measurements as a function of padding */
-SvgCube.prototype.measurements= function(p){
- if (p===undefined){
- p=0;
- }
-
- var f = this.options.flatten
-
- var tBox = this.imageT.getBBox()
- var lBox = this.imageL.getBBox()
- var rBox = this.imageR.getBBox()
-
- return {
- // measurements
- uf : 1-f,
- p : 0, // lw/2, // padding
-
- tw: this.cw-p/2, // right side. adjust by half line thickness to keep line in canvas
- th: tBox.height-p/2, // height of square, and dist to middle
-
- mw: this.cw/2, // middle x
- mh: tBox.height/2, // middle of top square
-
- bh: 0+p/2, // top of picture, bottom y
- bw: 0+p/2, // left of picture, bottom of x
-
- sw: this.cw-p/2,// bottom of cube
- sh: this.ch-p/2, // right of cube
-
- lq: -tBox.height/2+this.ch-p/2, // lower quarter of height
- uq: tBox.height/2+p/2 // upper quarter
- }
-}
-
-
-/*
- * Adds a svg transform to an element, the transform has the origin of
- * xi,yi fraction of the element, so 0.5,0.5 is the middle,
- * unlike normalsvg it adds transforms in order of application not reverse order
- * Usage: svgTransform(elementImage,'rotate',[45],0.5,0.5)
- * This would rotate 45 degrees around center of image
- */
-SvgCube.prototype.svgTransform = function (element, op, inputs, xi, yi) {
- if (isNaN(xi)) {
- xi = 0.5;
- }
- if (isNaN(yi)) {
- yi = 0.5;
- }
- var svgBox = this.svg.getClientRects()[0]
- // this.paper.getBBox()
- var cbox = element.getBoundingClientRect();
- var x = cbox.left + xi * cbox.width -svgBox.left;
- var y = cbox.top + yi * cbox.height -svgBox.top;
- //
- var matrix = this.svg.createSVGMatrix()
- matrix = matrix.translate(x, y)
- matrix = matrix[op].apply(matrix, inputs);
- matrix = matrix.translate(-x, -y);
-
- var transform = this.svg.createSVGTransform();
- transform.setMatrix(matrix);
- //element.transform.baseVal.appendItem(transform); // for reverse order
- element.transform.baseVal.insertItemBefore(transform, 0) // normal order
-}
-
-/*
- * transform an element to be the left of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toLeft = function (element, angle, xi, yi) {
- // half it's width
- xi = 0
- yi = 1
- if (this.f>0){
- this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5)
- }
- this.svgTransform(element, 'translate', [-1, -1]) // pixel adjustment HACK
- this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi)
- // skew it, in degrees
- this.svgTransform(element, 'skewY', [angle], xi, yi)
-
-}
-
-/*
- * transform an element to be the right of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toRight = function (element, angle, xi, yi) {
- xi = 1
- yi = 1
- if (this.f>0){
- this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5)
- }
- this.svgTransform(element, 'translate', [-1, -2]) // pixel adjustment HACK
- // half it's width to fiit in canvas
- this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi)
- // skew it
- this.svgTransform(element, 'skewY', [-angle], xi, yi)
-
-}
-
-/*
- * transform an element to be the top of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toTop = function (element, angle, xi, yi) {
- var rot = angle * Math.PI / 180;
- this.svgTransform(element, 'translate', [-2, -1]) // pixel adjustment HACK
-
- // rotate so it's a diamond
- this.svgTransform(element, 'rotate', [45], xi, yi)
- // squish - along x axis to fit in canvas, along y axis for perspective change
- this.svgTransform(element, 'scaleNonUniform', [Math.sin(45 * Math.PI / 180), Math.tan(rot) * Math.sin(45 * Math.PI / 180)], xi, yi)
-}
-
-SvgCube.prototype.moveTop = function (element) {
- // align top of cube with top of canvas
- var cbox = element.getBoundingClientRect();
- this.svgTransform(element, 'translate', [-cbox.left + this.pPx, -cbox.top + this.pPx])
-}
-
-/*
- * align left of cube with top,
- * fit upper-left of left panel with middle-left of top panel
- */
-SvgCube.prototype.moveLeft = function (elem, elemT) {
- var cboxL = elem.getBoundingClientRect();
- var cboxT = elemT.getBoundingClientRect();
- // align left
- var x = cboxT.left - cboxL.left
- // align top of left with half height of
- var y = cboxT.top - cboxL.top + cboxT.height / 2
- this.svgTransform(elem, 'translate', [x, y])
-}
-
-/*
- * align right of cube with top,
- * fit upper-right of right panel with middle-right of top panel
- */
-SvgCube.prototype.moveRight = function (elem, elemT) {
- // line up left with top, move to half tops height, and to align left
- var cboxL = elem.getBoundingClientRect();
- var cboxT = elemT.getBoundingClientRect();
-
- // align right with right
- var x = cboxT.right - cboxL.right
-
- // align top of left with half height of
- var y = cboxT.top - cboxL.top + cboxT.height / 2
- this.svgTransform(elem, 'translate', [x, y])
-}
-
-/* draw outline get line color from option.strokeColor, and width from options.stroke-width */
-SvgCube.prototype.drawOutline = function(lw){
- lw=lw||this.options.stroke["stroke-width"];
- var ms = this.measurements(lw/2)
-
-
- var tb = this.imageT.getBBox()
- var lb = this.imageL.getBBox()
- var rb = this.imageR.getBBox()
-
- // Draw outline of top
- var strTop=
- 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom
- 'L'+ms.bw +' '+ms.mh+' '+ // left
- 'L'+ms.mw +' '+ms.bh+ ' '+ // top
- 'L'+ms.tw +' '+ms.mh+' '+ // right
- 'Z' // close
- var pathTop = this.paper.path(strTop);
-
- // // outline of left
- var strLeft=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.bw +' '+ms.uq+' '+ // left top
- 'L'+ms.bw +' '+ms.lq+' '+ // left bottom
- 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom
- 'Z'
- var pathLeft = this.paper.path(strLeft);
- //
- // right
- var strRight=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom
- 'L'+ms.tw +' '+ms.lq+' '+ // right bottom
- 'L'+ms.tw +' '+ms.uq+' '+ // right top
- 'Z' // close
- var pathRight = this.paper.path(strRight);
-
- // join into set
- var pathGroup = this.paper.group();
- pathGroup.append(pathTop);
- pathGroup.append(pathLeft);
- pathGroup.append(pathRight);
-
- // set attrs from options
- // ref http://raphaeljs.com/reference.html#Element.attr
- var blackList = ['url','target','src','title']
- for (var a in this.options.stroke){
- if (this.options.stroke.hasOwnProperty(a) && blackList.indexOf(a)<0){
- pathGroup.attr(a,this.options.stroke[a]);
- }
- }
- this.outline=pathGroup;
-}
-
-
-/* draw outline get line color from option.strokeColor, and width from options.stroke-width */
-SvgCube.prototype.drawShading = function(lw){
- lw=lw||this.options.stroke["stroke-width"];
- var ms = this.measurements(0);
- var pathGroup = this.paper.g();
-
- var strTop=
- 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom
- 'L'+ms.bw +' '+ms.mh+' '+ // left
- 'L'+ms.mw +' '+ms.bh+ ' '+ // top
- 'L'+ms.tw +' '+ms.mh+' '+ // right
- 'Z' // close
- var pathTop = this.paper.path(strTop);
- pathGroup.append(pathTop);
-
- // outline of left
- var strLeft=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.bw +' '+ms.uq+' '+ // left top
- 'L'+ms.bw +' '+ms.lq+' '+ // left bottom
- 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom
- 'Z'
- var pathLeft = this.paper.path(strLeft);
- pathGroup.append(pathLeft);
-
- // last line from middle down
- var strRight=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom
- 'L'+ms.tw +' '+ms.lq+' '+ // right bottom
- 'L'+ms.tw +' '+ms.uq+' '+ // right top
- 'Z' // close
- var pathRight = this.paper.path(strRight);
- pathGroup.append(pathRight);
-
-
- // style the set
- pathGroup.attr({
- 'stroke': 'none',
- 'fill': 'black',
- 'stroke-width': 0,
- 'stroke-opacity': 0,
- 'stroke-linecap': 'round',
- 'stroke-linejoin': 'round'
- });
- // shade each side, 0 is no shading, 1 is black
- pathTop.attr({'fill-opacity': this.options.topShad});
- pathLeft.attr({'fill-opacity': this.options.leftShad});
- pathRight.attr({'fill-opacity': this.options.rightShad});
- this.shading=pathGroup;
-
-}
-
-/*clip the cube using an elipse to give rounded corners */
-SvgCube.prototype.clipCircle = function(amount){
- var cp = document.createElementNS("http://www.w3.org/2000/svg","clipPath")
- cp.id="cp";
- var rxc=51+4*(1-this.f)*(1-this.f);
- var ryc=50-2/Math.sqrt(1-this.f);
- cp.innerHTML = ''
- this.paper.node.getElementsByTagName("defs")[0].appendChild(cp);
- this.paper.node.setAttribute("clip-path","url(#cp)");
-}
-
-
-/* returns svg string */
-SvgCube.prototype.toSVG = function(){
- var svg3 = this.paper.toString();
- //var svg = this.paper.node.outerHTML;
- //var svg2 = xmlserializer.serializeToString(this.paper.node);
- if (this.paper.node.attributes.getNamedItem("clip-path")){
- // patch svg export to add clip
- // HACK I have to add these manually to the export sadly as raphael.export doesn't handle them and also misses some recent change to canvas
- svg3=svg3.replace("
- .cube, .cube .face, .cube .face * {
- height: ${o.size}px;
- width: ${o.size}px;
- }
- .cube {
- position: absolute;
- background-color: #f66;
-
- -webkit-transform: translate(${this.cw/2}px,${0*this.ch/2}px) perspective(${o.perspective}px) rotateX(${o.angle}deg) rotateX(${o.rotateX}deg) rotateY(${o.rotateY}deg) rotateZ(${o.rotateZ}deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
- }
-
-
- .cube * {
- transform-origin: 0% 100%;
- }
-
- .cube2 .top {
- position: relative;
- -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
-
- }
- .cube2 .left {
- -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
- position: absolute;
-
- }
- .cube2 .right {
- -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
- position: absolute;
- }
- `
- console.log(styleStr);
- style.innerHTML= styleStr
-
-}
-
-/* drawing measurements as a function of padding */
-SvgCube.prototype.measurements= function(p){
- if (p===undefined){
- p=0;
- }
-
- var f = this.options.flatten
-
- var tBox = this.imageT.getBBox()
- var lBox = this.imageL.getBBox()
- var rBox = this.imageR.getBBox()
-
- return {
- // measurements
- uf : 1-f,
- p : 0, // lw/2, // padding
-
- tw: this.cw-p/2, // right side. adjust by half line thickness to keep line in canvas
- th: tBox.height-p/2, // height of square, and dist to middle
-
- mw: this.cw/2, // middle x
- mh: tBox.height/2, // middle of top square
-
- bh: 0+p/2, // top of picture, bottom y
- bw: 0+p/2, // left of picture, bottom of x
-
- sw: this.cw-p/2,// bottom of cube
- sh: this.ch-p/2, // right of cube
-
- lq: -tBox.height/2+this.ch-p/2, // lower quarter of height
- uq: tBox.height/2+p/2 // upper quarter
- }
-}
-
-
-/*
- * Adds a svg transform to an element, the transform has the origin of
- * xi,yi fraction of the element, so 0.5,0.5 is the middle,
- * unlike normalsvg it adds transforms in order of application not reverse order
- * Usage: svgTransform(elementImage,'rotate',[45],0.5,0.5)
- * This would rotate 45 degrees around center of image
- */
-SvgCube.prototype.svgTransform = function (element, op, inputs, xi, yi) {
- if (isNaN(xi)) {
- xi = 0.5;
- }
- if (isNaN(yi)) {
- yi = 0.5;
- }
- var svgBox = this.svg.getClientRects()[0]
- // this.paper.getBBox()
- var cbox = element.getBoundingClientRect();
- var x = cbox.left + xi * cbox.width -svgBox.left;
- var y = cbox.top + yi * cbox.height -svgBox.top;
- //
- var matrix = this.svg.createSVGMatrix()
- matrix = matrix.translate(x, y)
- matrix = matrix[op].apply(matrix, inputs);
- matrix = matrix.translate(-x, -y);
-
- var transform = this.svg.createSVGTransform();
- transform.setMatrix(matrix);
- //element.transform.baseVal.appendItem(transform); // for reverse order
- element.transform.baseVal.insertItemBefore(transform, 0) // normal order
-}
-
-/*
- * transform an element to be the left of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toLeft = function (element, angle, xi, yi) {
- // half it's width
- xi = 0
- yi = 1
- if (this.f>0){
- this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5)
- }
- this.svgTransform(element, 'translate', [-1, -1]) // pixel adjustment HACK
- this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi)
- // skew it, in degrees
- this.svgTransform(element, 'skewY', [angle], xi, yi)
-
-}
-
-/*
- * transform an element to be the right of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toRight = function (element, angle, xi, yi) {
- xi = 1
- yi = 1
- if (this.f>0){
- this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5)
- }
- this.svgTransform(element, 'translate', [-1, -2]) // pixel adjustment HACK
- // half it's width to fiit in canvas
- this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi)
- // skew it
- this.svgTransform(element, 'skewY', [-angle], xi, yi)
-
-}
-
-/*
- * transform an element to be the top of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toTop = function (element, angle, xi, yi) {
- var rot = angle * Math.PI / 180;
- this.svgTransform(element, 'translate', [-2, -1]) // pixel adjustment HACK
-
- // rotate so it's a diamond
- this.svgTransform(element, 'rotate', [45], xi, yi)
- // squish - along x axis to fit in canvas, along y axis for perspective change
- this.svgTransform(element, 'scaleNonUniform', [Math.sin(45 * Math.PI / 180), Math.tan(rot) * Math.sin(45 * Math.PI / 180)], xi, yi)
-}
-
-SvgCube.prototype.moveTop = function (element) {
- // align top of cube with top of canvas
- var cbox = element.getBoundingClientRect();
- this.svgTransform(element, 'translate', [-cbox.left + this.pPx, -cbox.top + this.pPx])
-}
-
-/*
- * align left of cube with top,
- * fit upper-left of left panel with middle-left of top panel
- */
-SvgCube.prototype.moveLeft = function (elem, elemT) {
- var cboxL = elem.getBoundingClientRect();
- var cboxT = elemT.getBoundingClientRect();
- // align left
- var x = cboxT.left - cboxL.left
- // align top of left with half height of
- var y = cboxT.top - cboxL.top + cboxT.height / 2
- this.svgTransform(elem, 'translate', [x, y])
-}
-
-/*
- * align right of cube with top,
- * fit upper-right of right panel with middle-right of top panel
- */
-SvgCube.prototype.moveRight = function (elem, elemT) {
- // line up left with top, move to half tops height, and to align left
- var cboxL = elem.getBoundingClientRect();
- var cboxT = elemT.getBoundingClientRect();
-
- // align right with right
- var x = cboxT.right - cboxL.right
-
- // align top of left with half height of
- var y = cboxT.top - cboxL.top + cboxT.height / 2
- this.svgTransform(elem, 'translate', [x, y])
-}
-
-/* draw outline get line color from option.strokeColor, and width from options.stroke-width */
-SvgCube.prototype.drawOutline = function(lw){
- lw=lw||this.options.stroke["stroke-width"];
- var ms = this.measurements(lw/2)
-
-
- var tb = this.imageT.getBBox()
- var lb = this.imageL.getBBox()
- var rb = this.imageR.getBBox()
-
- // Draw outline of top
- var strTop=
- 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom
- 'L'+ms.bw +' '+ms.mh+' '+ // left
- 'L'+ms.mw +' '+ms.bh+ ' '+ // top
- 'L'+ms.tw +' '+ms.mh+' '+ // right
- 'Z' // close
- var pathTop = this.paper.path(strTop);
-
- // // outline of left
- var strLeft=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.bw +' '+ms.uq+' '+ // left top
- 'L'+ms.bw +' '+ms.lq+' '+ // left bottom
- 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom
- 'Z'
- var pathLeft = this.paper.path(strLeft);
- //
- // right
- var strRight=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom
- 'L'+ms.tw +' '+ms.lq+' '+ // right bottom
- 'L'+ms.tw +' '+ms.uq+' '+ // right top
- 'Z' // close
- var pathRight = this.paper.path(strRight);
-
- // join into set
- var pathGroup = this.paper.group();
- pathGroup.append(pathTop);
- pathGroup.append(pathLeft);
- pathGroup.append(pathRight);
-
- // set attrs from options
- // ref http://raphaeljs.com/reference.html#Element.attr
- var blackList = ['url','target','src','title']
- for (var a in this.options.stroke){
- if (this.options.stroke.hasOwnProperty(a) && blackList.indexOf(a)<0){
- pathGroup.attr(a,this.options.stroke[a]);
- }
- }
- this.outline=pathGroup;
-}
-
-
-/* draw outline get line color from option.strokeColor, and width from options.stroke-width */
-SvgCube.prototype.drawShading = function(lw){
- lw=lw||this.options.stroke["stroke-width"];
- var ms = this.measurements(0);
- var pathGroup = this.paper.g();
-
- var strTop=
- 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom
- 'L'+ms.bw +' '+ms.mh+' '+ // left
- 'L'+ms.mw +' '+ms.bh+ ' '+ // top
- 'L'+ms.tw +' '+ms.mh+' '+ // right
- 'Z' // close
- var pathTop = this.paper.path(strTop);
- pathGroup.append(pathTop);
-
- // outline of left
- var strLeft=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.bw +' '+ms.uq+' '+ // left top
- 'L'+ms.bw +' '+ms.lq+' '+ // left bottom
- 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom
- 'Z'
- var pathLeft = this.paper.path(strLeft);
- pathGroup.append(pathLeft);
-
- // last line from middle down
- var strRight=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom
- 'L'+ms.tw +' '+ms.lq+' '+ // right bottom
- 'L'+ms.tw +' '+ms.uq+' '+ // right top
- 'Z' // close
- var pathRight = this.paper.path(strRight);
- pathGroup.append(pathRight);
-
-
- // style the set
- pathGroup.attr({
- 'stroke': 'none',
- 'fill': 'black',
- 'stroke-width': 0,
- 'stroke-opacity': 0,
- 'stroke-linecap': 'round',
- 'stroke-linejoin': 'round'
- });
- // shade each side, 0 is no shading, 1 is black
- pathTop.attr({'fill-opacity': this.options.topShad});
- pathLeft.attr({'fill-opacity': this.options.leftShad});
- pathRight.attr({'fill-opacity': this.options.rightShad});
- this.shading=pathGroup;
-
-}
-
-/*clip the cube using an elipse to give rounded corners */
-SvgCube.prototype.clipCircle = function(amount){
- var cp = document.createElementNS("http://www.w3.org/2000/svg","clipPath")
- cp.id="cp";
- var rxc=51+4*(1-this.f)*(1-this.f);
- var ryc=50-2/Math.sqrt(1-this.f);
- cp.innerHTML = ''
- this.paper.node.getElementsByTagName("defs")[0].appendChild(cp);
- this.paper.node.setAttribute("clip-path","url(#cp)");
-}
-
-
-/* returns svg string */
-SvgCube.prototype.toSVG = function(){
- var svg3 = this.paper.toString();
- //var svg = this.paper.node.outerHTML;
- //var svg2 = xmlserializer.serializeToString(this.paper.node);
- if (this.paper.node.attributes.getNamedItem("clip-path")){
- // patch svg export to add clip
- // HACK I have to add these manually to the export sadly as raphael.export doesn't handle them and also misses some recent change to canvas
- svg3=svg3.replace("
- .cube, .cube .face, .cube .face * {
- height: ${o.size}px;
- width: ${o.size}px;
- }
- .cube {
- position: absolute;
- background-color: #f66;
- -webkit-transform: translate(${o.size/2}px,${0}px);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
- transform: rotateX(${o.angle}deg) scaleY(${o.flatten});
- }
-
- .cube * {
- transform-origin: 0% 100%;
- }
-
- .cube2 .top {
- position: relative;
- -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(0deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
-
- }
- .cube2 .left {
- -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateX(90deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
- position: absolute;
-
- }
- .cube2 .right {
- -webkit-transform: rotateX(45deg) rotateZ(-45deg) rotateY(90deg);
- -webkit-transform-style: preserve-3d;
- -webkit-transition: .25s;
- position: absolute;
- }
- `
- console.log(styleStr);
- style.innerHTML= styleStr
-
-}
-
-/* drawing measurements as a function of padding */
-SvgCube.prototype.measurements= function(p){
- if (p===undefined){
- p=0;
- }
-
- var f = this.options.flatten
-
- var tBox = this.imageT.getBBox()
- var lBox = this.imageL.getBBox()
- var rBox = this.imageR.getBBox()
-
- return {
- // measurements
- uf : 1-f,
- p : 0, // lw/2, // padding
-
- tw: this.cw-p/2, // right side. adjust by half line thickness to keep line in canvas
- th: tBox.height-p/2, // height of square, and dist to middle
-
- mw: this.cw/2, // middle x
- mh: tBox.height/2, // middle of top square
-
- bh: 0+p/2, // top of picture, bottom y
- bw: 0+p/2, // left of picture, bottom of x
-
- sw: this.cw-p/2,// bottom of cube
- sh: this.ch-p/2, // right of cube
-
- lq: -tBox.height/2+this.ch-p/2, // lower quarter of height
- uq: tBox.height/2+p/2 // upper quarter
- }
-}
-
-
-/*
- * Adds a svg transform to an element, the transform has the origin of
- * xi,yi fraction of the element, so 0.5,0.5 is the middle,
- * unlike normalsvg it adds transforms in order of application not reverse order
- * Usage: svgTransform(elementImage,'rotate',[45],0.5,0.5)
- * This would rotate 45 degrees around center of image
- */
-SvgCube.prototype.svgTransform = function (element, op, inputs, xi, yi) {
- if (isNaN(xi)) {
- xi = 0.5;
- }
- if (isNaN(yi)) {
- yi = 0.5;
- }
- var svgBox = this.svg.getClientRects()[0]
- // this.paper.getBBox()
- var cbox = element.getBoundingClientRect();
- var x = cbox.left + xi * cbox.width -svgBox.left;
- var y = cbox.top + yi * cbox.height -svgBox.top;
- //
- var matrix = this.svg.createSVGMatrix()
- matrix = matrix.translate(x, y)
- matrix = matrix[op].apply(matrix, inputs);
- matrix = matrix.translate(-x, -y);
-
- var transform = this.svg.createSVGTransform();
- transform.setMatrix(matrix);
- //element.transform.baseVal.appendItem(transform); // for reverse order
- element.transform.baseVal.insertItemBefore(transform, 0) // normal order
-}
-
-/*
- * transform an element to be the left of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toLeft = function (element, angle, xi, yi) {
- // half it's width
- xi = 0
- yi = 1
- if (this.f>0){
- this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5)
- }
- this.svgTransform(element, 'translate', [-1, -1]) // pixel adjustment HACK
- this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi)
- // skew it, in degrees
- this.svgTransform(element, 'skewY', [angle], xi, yi)
-
-}
-
-/*
- * transform an element to be the right of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toRight = function (element, angle, xi, yi) {
- xi = 1
- yi = 1
- if (this.f>0){
- this.svgTransform(element, 'scaleNonUniform', [1,this.f],0.5,0.5)
- }
- this.svgTransform(element, 'translate', [-1, -2]) // pixel adjustment HACK
- // half it's width to fiit in canvas
- this.svgTransform(element, 'scaleNonUniform', [1 / 2, 1 / 2], xi, yi)
- // skew it
- this.svgTransform(element, 'skewY', [-angle], xi, yi)
-
-}
-
-/*
- * transform an element to be the top of an isometric cube
- * Inputs: dom element, angle in degrees, and xi,yi which
- * are the transform origin as a fraction of element size
- */
-SvgCube.prototype.toTop = function (element, angle, xi, yi) {
- var rot = angle * Math.PI / 180;
- this.svgTransform(element, 'translate', [-2, -1]) // pixel adjustment HACK
-
- // rotate so it's a diamond
- this.svgTransform(element, 'rotate', [45], xi, yi)
- // squish - along x axis to fit in canvas, along y axis for perspective change
- this.svgTransform(element, 'scaleNonUniform', [Math.sin(45 * Math.PI / 180), Math.tan(rot) * Math.sin(45 * Math.PI / 180)], xi, yi)
-}
-
-SvgCube.prototype.moveTop = function (element) {
- // align top of cube with top of canvas
- var cbox = element.getBoundingClientRect();
- this.svgTransform(element, 'translate', [-cbox.left + this.pPx, -cbox.top + this.pPx])
-}
-
-/*
- * align left of cube with top,
- * fit upper-left of left panel with middle-left of top panel
- */
-SvgCube.prototype.moveLeft = function (elem, elemT) {
- var cboxL = elem.getBoundingClientRect();
- var cboxT = elemT.getBoundingClientRect();
- // align left
- var x = cboxT.left - cboxL.left
- // align top of left with half height of
- var y = cboxT.top - cboxL.top + cboxT.height / 2
- this.svgTransform(elem, 'translate', [x, y])
-}
-
-/*
- * align right of cube with top,
- * fit upper-right of right panel with middle-right of top panel
- */
-SvgCube.prototype.moveRight = function (elem, elemT) {
- // line up left with top, move to half tops height, and to align left
- var cboxL = elem.getBoundingClientRect();
- var cboxT = elemT.getBoundingClientRect();
-
- // align right with right
- var x = cboxT.right - cboxL.right
-
- // align top of left with half height of
- var y = cboxT.top - cboxL.top + cboxT.height / 2
- this.svgTransform(elem, 'translate', [x, y])
-}
-
-/* draw outline get line color from option.strokeColor, and width from options.stroke-width */
-SvgCube.prototype.drawOutline = function(lw){
- lw=lw||this.options.stroke["stroke-width"];
- var ms = this.measurements(lw/2)
-
-
- var tb = this.imageT.getBBox()
- var lb = this.imageL.getBBox()
- var rb = this.imageR.getBBox()
-
- // Draw outline of top
- var strTop=
- 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom
- 'L'+ms.bw +' '+ms.mh+' '+ // left
- 'L'+ms.mw +' '+ms.bh+ ' '+ // top
- 'L'+ms.tw +' '+ms.mh+' '+ // right
- 'Z' // close
- var pathTop = this.paper.path(strTop);
-
- // // outline of left
- var strLeft=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.bw +' '+ms.uq+' '+ // left top
- 'L'+ms.bw +' '+ms.lq+' '+ // left bottom
- 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom
- 'Z'
- var pathLeft = this.paper.path(strLeft);
- //
- // right
- var strRight=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom
- 'L'+ms.tw +' '+ms.lq+' '+ // right bottom
- 'L'+ms.tw +' '+ms.uq+' '+ // right top
- 'Z' // close
- var pathRight = this.paper.path(strRight);
-
- // join into set
- var pathGroup = this.paper.group();
- pathGroup.append(pathTop);
- pathGroup.append(pathLeft);
- pathGroup.append(pathRight);
-
- // set attrs from options
- // ref http://raphaeljs.com/reference.html#Element.attr
- var blackList = ['url','target','src','title']
- for (var a in this.options.stroke){
- if (this.options.stroke.hasOwnProperty(a) && blackList.indexOf(a)<0){
- pathGroup.attr(a,this.options.stroke[a]);
- }
- }
- this.outline=pathGroup;
-}
-
-
-/* draw outline get line color from option.strokeColor, and width from options.stroke-width */
-SvgCube.prototype.drawShading = function(lw){
- lw=lw||this.options.stroke["stroke-width"];
- var ms = this.measurements(0);
- var pathGroup = this.paper.g();
-
- var strTop=
- 'M'+ms.mw +' '+ms.th +' '+ // Move to bottom
- 'L'+ms.bw +' '+ms.mh+' '+ // left
- 'L'+ms.mw +' '+ms.bh+ ' '+ // top
- 'L'+ms.tw +' '+ms.mh+' '+ // right
- 'Z' // close
- var pathTop = this.paper.path(strTop);
- pathGroup.append(pathTop);
-
- // outline of left
- var strLeft=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.bw +' '+ms.uq+' '+ // left top
- 'L'+ms.bw +' '+ms.lq+' '+ // left bottom
- 'L'+ms.mw +' '+ms.sh+' '+ // middle bottom
- 'Z'
- var pathLeft = this.paper.path(strLeft);
- pathGroup.append(pathLeft);
-
- // last line from middle down
- var strRight=
- 'M'+ms.mw +' '+ms.th+' '+ // middle
- 'L'+ms.mw +' '+ms.sh +' '+ // middle bottom
- 'L'+ms.tw +' '+ms.lq+' '+ // right bottom
- 'L'+ms.tw +' '+ms.uq+' '+ // right top
- 'Z' // close
- var pathRight = this.paper.path(strRight);
- pathGroup.append(pathRight);
-
-
- // style the set
- pathGroup.attr({
- 'stroke': 'none',
- 'fill': 'black',
- 'stroke-width': 0,
- 'stroke-opacity': 0,
- 'stroke-linecap': 'round',
- 'stroke-linejoin': 'round'
- });
- // shade each side, 0 is no shading, 1 is black
- pathTop.attr({'fill-opacity': this.options.topShad});
- pathLeft.attr({'fill-opacity': this.options.leftShad});
- pathRight.attr({'fill-opacity': this.options.rightShad});
- this.shading=pathGroup;
-
-}
-
-/*clip the cube using an elipse to give rounded corners */
-SvgCube.prototype.clipCircle = function(amount){
- var cp = document.createElementNS("http://www.w3.org/2000/svg","clipPath")
- cp.id="cp";
- var rxc=51+4*(1-this.f)*(1-this.f);
- var ryc=50-2/Math.sqrt(1-this.f);
- cp.innerHTML = ''
- this.paper.node.getElementsByTagName("defs")[0].appendChild(cp);
- this.paper.node.setAttribute("clip-path","url(#cp)");
-}
-
-
-/* returns svg string */
-SvgCube.prototype.toSVG = function(){
- var svg3 = this.paper.toString();
- //var svg = this.paper.node.outerHTML;
- //var svg2 = xmlserializer.serializeToString(this.paper.node);
- if (this.paper.node.attributes.getNamedItem("clip-path")){
- // patch svg export to add clip
- // HACK I have to add these manually to the export sadly as raphael.export doesn't handle them and also misses some recent change to canvas
- svg3=svg3.replace("
+
+## Output:
+
+
+
+## GUI
+
+
+# Installation
+
+`npm i`
+
+# Usage
+
+`npm start`
+
+# TODO
+
+
+# Author
+
+wassname.org
+
+
+# License
+
+ISC
diff --git a/render.js b/render.js
new file mode 100755
index 0000000..32302eb
--- /dev/null
+++ b/render.js
@@ -0,0 +1,75 @@
+'use strict';
+/**
+ * Node js script to render and download svg cubes using webdriver
+ */
+
+var webdriverio = require('webdriverio');
+var path = require('path');
+var fs = require('fs');
+var system = require('system')
+var globby = require('globby');
+
+var options = {
+ desiredCapabilities: {
+ browserName: 'chrome'
+ }
+};
+
+
+/** TODO
+ * Need to look at clien bounding box for all parts of cube, then get minLeft, maxRight etc, then crop the screenshot there
+ *
+ **/
+
+// get config
+var config = {
+ debug: false
+}
+
+// get inputs
+var input = process.argv[2];
+console.log('input:', input);
+
+
+/**
+ * Screenshot for debug and notification of screenshots
+ */
+var screenHandler = function (err, screenshot, response) {
+ if (config.debug) {
+ console.log({
+ err, screenshot, response
+ });
+ } else if (err) {
+ console.log('saveScreenshot', err);
+ }
+}
+
+globby(input).then(inputs => {
+
+ console.log('glob(', input, ') ->', inputs);
+
+ for (var i = 0; i < inputs.length; i++) {
+
+ // get input file and components
+ var file = inputs[i];
+ var address = path.join(process.cwd(), file);
+ var ext = path.extname(file);
+ var url = 'file://' + path.join(process.cwd(), file);
+ var outfile = address.replace(ext, '.png');
+
+ console.log('Converting ', file, url, '->', outfile);
+
+ webdriverio
+ .remote(options)
+ .init()
+ .url(url)
+ .getTitle().then(title => {
+ console.log('Title is: ' + title);
+ })
+ .waitForVisible('.front', 1000) //.then(callback);
+ .saveScreenshot(
+ outfile, screenHandler
+ )
+ .end();
+ }
+}, this)
diff --git a/svgCube.html b/svgCube.html
new file mode 100755
index 0000000..31bf8e4
--- /dev/null
+++ b/svgCube.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Snap.js isometric SVG
+
+
+
+
+
+
+
+
+
+
diff --git a/svgCube_gui.html b/svgCube_gui.html
new file mode 100755
index 0000000..0a2fd74
--- /dev/null
+++ b/svgCube_gui.html
@@ -0,0 +1,116 @@
+
+
+
+
+ Snap.js isometric SVG
+
+
+
+
+
+
This uses a css3 to make an SVG cube from a SVG panel.
+
+
The buttons allow you to try different parameters.
+
The front, left, etc svg's are just linked to panel.svg
+
+## GUI
+
+
+# Installation
+
+`npm i`
+
+# Usage
+
+`npm start`
+
+# TODO
+
+
+# Author
+
+wassname.org
+
+
+# License
+
+ISC
diff --git a/render.js b/render.js
new file mode 100755
index 0000000..32302eb
--- /dev/null
+++ b/render.js
@@ -0,0 +1,75 @@
+'use strict';
+/**
+ * Node js script to render and download svg cubes using webdriver
+ */
+
+var webdriverio = require('webdriverio');
+var path = require('path');
+var fs = require('fs');
+var system = require('system')
+var globby = require('globby');
+
+var options = {
+ desiredCapabilities: {
+ browserName: 'chrome'
+ }
+};
+
+
+/** TODO
+ * Need to look at clien bounding box for all parts of cube, then get minLeft, maxRight etc, then crop the screenshot there
+ *
+ **/
+
+// get config
+var config = {
+ debug: false
+}
+
+// get inputs
+var input = process.argv[2];
+console.log('input:', input);
+
+
+/**
+ * Screenshot for debug and notification of screenshots
+ */
+var screenHandler = function (err, screenshot, response) {
+ if (config.debug) {
+ console.log({
+ err, screenshot, response
+ });
+ } else if (err) {
+ console.log('saveScreenshot', err);
+ }
+}
+
+globby(input).then(inputs => {
+
+ console.log('glob(', input, ') ->', inputs);
+
+ for (var i = 0; i < inputs.length; i++) {
+
+ // get input file and components
+ var file = inputs[i];
+ var address = path.join(process.cwd(), file);
+ var ext = path.extname(file);
+ var url = 'file://' + path.join(process.cwd(), file);
+ var outfile = address.replace(ext, '.png');
+
+ console.log('Converting ', file, url, '->', outfile);
+
+ webdriverio
+ .remote(options)
+ .init()
+ .url(url)
+ .getTitle().then(title => {
+ console.log('Title is: ' + title);
+ })
+ .waitForVisible('.front', 1000) //.then(callback);
+ .saveScreenshot(
+ outfile, screenHandler
+ )
+ .end();
+ }
+}, this)
diff --git a/svgCube.html b/svgCube.html
new file mode 100755
index 0000000..31bf8e4
--- /dev/null
+++ b/svgCube.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+