diff --git a/convertMe.html b/convertMe.html new file mode 100644 index 0000000..1a3c94f --- /dev/null +++ b/convertMe.html @@ -0,0 +1,62 @@ + + + + Snap.js isometric SVG + + + + + + + + + + + + + diff --git a/css3_svgCube.html b/css3_svgCube.html index ddc8d6c..8df9c44 100644 --- a/css3_svgCube.html +++ b/css3_svgCube.html @@ -47,8 +47,7 @@ var update = function () { window.onload = function () { cube1 = new SvgCube({ - angle: 45, - flatten: 0.05, + rotateX: 45, topUrl: 'top.svg', leftUrl: 'left.svg', frontUrl: 'front.svg', @@ -58,7 +57,7 @@ window.onload = function () { clipCircle: false, stroke: { "stroke": 'black', // stroke color for outline - "stroke-width": 2, // outline width + "stroke-width": 0, // outline width }, size: 256, }); @@ -68,21 +67,34 @@ window.onload = function () { gui.remember(cube1.options); gui.add(cube1.options,'size').min(1).max(512).step(10).onChange(update); - gui.add(cube1.options,'angle').min(0).max(360).step(1).onChange(update); + gui.add(cube1.options,'rotateX').min(0).max(360).step(1).onChange(update); gui.add(cube1.options,'rotateY').min(0).max(360).step(1).onChange(update); gui.add(cube1.options,'rotateZ').min(0).max(360).step(1).onChange(update); - gui.add(cube1.options,'perspective').min(0).max(50).step(1).onChange(update); - gui.add(cube1.options,'flatten').min(-1.00).max(2.01).step(0.1).onChange(update); + //gui.add(cube1.options,'perspective').min(0).max(50).step(1).onChange(update); gui.add(cube1.options,'scaleX').min(0.0).max(2.01).step(0.1).onChange(update); + gui.add(cube1.options,'scaleY').min(-1.00).max(2.01).step(0.1).onChange(update); gui.add(cube1.options,'scaleZ').min(0.0).max(2.01).step(0.1).onChange(update); - gui.add(cube1.options,'topUrl').onChange(update); - gui.add(cube1.options,'leftUrl').onChange(update); - gui.add(cube1.options,'rightUrl').onChange(update); + var imgUrls = gui.addFolder('Images urls'); + imgUrls.add(cube1.options,'topUrl').onChange(update); + imgUrls.add(cube1.options,'leftUrl').onChange(update); + imgUrls.add(cube1.options,'rightUrl').onChange(update); + imgUrls.add(cube1.options,'bottomUrl').onChange(update); + imgUrls.add(cube1.options,'frontUrl').onChange(update); + imgUrls.add(cube1.options,'backUrl').onChange(update); - gui.add(cube1.options.stroke,'stroke-width').min(0.0).max(20).step(1).onChange(update); - gui.add(cube1.options.stroke,'stroke').onChange(update); - gui.add(cube1.options,'topRot').min(0.0).max(90).step(1).onChange(update); + var outline = gui.addFolder('outline'); + outline.add(cube1.options.stroke,'stroke-width').min(0.0).max(20).step(1).onChange(update); + outline.add(cube1.options.stroke,'stroke').onChange(update); + outline.add(cube1.options,'borderRadius').min(0).max(128).step(1).onChange(update); + + var imageRot = gui.addFolder('Image rotation'); + imageRot.add(cube1.options,'topRot').min(0.0).max(360).step(90).onChange(update); + imageRot.add(cube1.options,'bottomRot').min(0.0).max(360).step(90).onChange(update); + imageRot.add(cube1.options,'leftRot').min(0.0).max(360).step(90).onChange(update); + imageRot.add(cube1.options,'rightRot').min(0.0).max(360).step(90).onChange(update); + imageRot.add(cube1.options,'backRot').min(0.0).max(360).step(90).onChange(update); + imageRot.add(cube1.options,'frontRot').min(0.0).max(360).step(90).onChange(update); diff --git a/projectSVG.js b/projectSVG.js index a12ad20..c638181 100644 --- a/projectSVG.js +++ b/projectSVG.js @@ -1,91 +1,96 @@ 'use strict'; // http://cssdeck.com/labs/pure-css-animated-isometric-boxes -try{ +try { var Snap = require('snapsvg'); -} catch(e) {}; +} catch (e) {}; var SvgCube = function (options) { // Inputs and options var defaultOptions = { - angle: 30, - size: 64, + rotateX: 30, // isometric angle + rotateY: 45, + rotateZ: 0, + perspective: 0, // doesn't do anything usefull + scaleX: 1.00, + scaleY: 1.00, // flatten + scaleZ: 1.00, // push face + + size: 256, verbose: false, // outline - drawOutline: true, - drawShading: true, - clipCircle: false, + drawOutline: false, + drawShading: false, + borderRadius: 0, 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", + "stroke-width": 0, // outline width }, // cube - flatten: 0, // fraction to vertically flatten the cube // scale Y 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, + leftShad: 0.0, rightUrl: '', rightRot: 0, - rightShad: 0.3, + rightShad: 0.0, backUrl: '', backRot: 0, - backShad: 0.3, + backShad: 0.0, bottomUrl: '', bottomRot: 0, - bottomShad: 0.3, - svgNS: "http://www.w3.org/2000/svg", - padding: 0, - rotateX: 45, - rotateY: 45, - rotateZ: 0, - perspective: 0, - scaleX: 1.00, - scaleZ: 1.00, + bottomShad: 0.0, + frontUrl: '', + frontRot: 0, + frontShad: 0.0, } // add defaults, 2 levels deep options = options || {}; - for (var opt in defaultOptions){ - if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt)){ + 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]; + for (var opt2 in defaultOptions[opt]) { + if (defaultOptions[opt].hasOwnProperty(opt2) && !options[opt].hasOwnProperty(opt2)) { + options[opt][opt2] = defaultOptions[opt][opt2]; } } } this.options = options - if (!options.drawOutline){ - options.stroke['stroke-width']=0; + // legacy compat + if (options.flatten!==undefined){ + options.scaleY=1-options.flatten; + } + if (options.angle!==undefined){ + options.rotateX=options.angle; + } + + if (!options.drawOutline) { + options.stroke['stroke-width'] = 0; } this.init(); } -SvgCube.prototype.init = function(){ +SvgCube.prototype.init = function () { - this.angle = this.options.angle + this.rotateX = this.options.rotateX this.w = this.options.size; // input image width this.h = this.options.size; - this.f = this.options.flatten + this.f = 1-this.options.scaleY - this.rot = this.angle * Math.PI / 180 - this.padding = this.options.padding; // pading fraction + this.rot = this.rotateX * Math.PI / 180 + this.padding = this.options.padding||0; // 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 + this.ch = this.h*5//(this.h + Math.sqrt(2)*this.h * Math.tan(this.rot)) - this.h / 2 * (this.f); //canvas height full // create SVG element var o = this.options; @@ -93,13 +98,17 @@ SvgCube.prototype.init = function(){ //var style = document.createElement('style'); //this.paper.defs.appendChild(style) var styleStr = ` ` - //style.innerHTML= styleStr + .tint.top:before { background: rgba(0,0,0, ${o.topShad});} + .tint.left:before { background: rgba(0,0,0, ${o.leftShad});} + .tint.right:before { background: rgba(0,0,0, ${o.rightShad});} + .tint.back:before { background: rgba(0,0,0, ${o.backShad}); } + .tint.front:before { background: rgba(0,0,0, ${o.frontShad}); } + .tint.bottom:before { background: rgba(0,0,0, ${o.bottomShad}); } - if ($('body>.cube').length===0){ + /* curved cube. Need something block seeing through, and also extra faces, 1 px in, so inside looks uniform color. Only work for one main color */ + /*.face { + border-radius: ${o.borderRadius}px; + } + .mid { + background-color: #e3e2db; /* make stroke color TODO */ + border-radius: 0px; + }*/ + ` + + + if ($('body>.cube').length === 0) { var cube = $('
') var imageFront = $(``) @@ -193,6 +234,21 @@ SvgCube.prototype.init = function(){ $('body').append(cube); + + /* TODO these will fill in some color inside in order to allow curved edges without seeing through cube, sues o.stroke.stroke for color */ + // var xMid = $(`
`) + // cube.append(xMid); + // + // var yMid = $(`
`) + // cube.append(yMid); + // + // var zMid = $(`
`) + // cube.append(zMid); + + + $('body').append(cube); + + } $('head>#projection').remove() @@ -200,8 +256,8 @@ SvgCube.prototype.init = function(){ } - /* draw cube from urls in options and outline according to options */ -SvgCube.prototype.drawCube = function (){ +/* draw cube from urls in options and outline according to options */ +SvgCube.prototype.drawCube = function () { // var imgS = this.options.size / Math.sqrt(2); // this.cube = this.paper.g(); @@ -224,34 +280,36 @@ SvgCube.prototype.drawCube = function (){ } - // svg2png -SvgCube.prototype.toPNG = function(){ - try{ - var dataUrl = svg2png(this.paper.node); - img = document.createElement("img"); - document.body.appendChild(img) - img.src=dataUrl - img.id="toPNG" - } catch (e) {console.log(e)}; - } - - // svg2png -SvgCube.prototype.toPNG2 = function(){ +// svg2png +SvgCube.prototype.toPNG = function () { + try { var dataUrl = svg2png(this.paper.node); img = document.createElement("img"); document.body.appendChild(img) - img.src=dataUrl - img.id="toPNG" - } + img.src = dataUrl + img.id = "toPNG" + } catch (e) { + console.log(e) + }; +} - // svg2png -SvgCube.prototype.update = function(){ - //this.paper.remove(); - this.init(); - this.drawCube(); - } +// svg2png +SvgCube.prototype.toPNG2 = function () { + var dataUrl = svg2png(this.paper.node); + img = document.createElement("img"); + document.body.appendChild(img) + img.src = dataUrl + img.id = "toPNG" +} + +// svg2png +SvgCube.prototype.update = function () { + //this.paper.remove(); + this.init(); + this.drawCube(); +} -try{ - module.exports=SvgCube -} catch(e){}; +try { + module.exports = SvgCube +} catch (e) {}; diff --git a/webdriver_rasterize.js b/webdriver_rasterize.js index 3c6c832..5683411 100644 --- a/webdriver_rasterize.js +++ b/webdriver_rasterize.js @@ -1,3 +1,4 @@ +'use strict'; var webdriverio = require('webdriverio'); var path = require('path'); @@ -18,16 +19,24 @@ var config = { var input = process.argv[2]; console.log('input:',input); +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',outfile); webdriverio .remote(options) @@ -38,15 +47,8 @@ globby(input).then(inputs => { }) .saveScreenshot( [outfile], - function(err, screenshot, response) { - if (config.debug){ - console.log({file,err,screenshot,response}); - } else if (err){ - 'saveScreenshot',console.log(err); - } - } + screenHandler ) .end(); } }, this) -