Fancy Product Designer Multistep Product Configurator Another

Since I was tired of waiting for a reply. I coded it by myself.

Open assets/js/FancyProductDesigner.js (run in debug mode)

Call a function in this.addView.on("elementAdd"), .on('elementSelect'), .on('elementChange'), .on('elementModify'), .on('elementRemove')

do your stuff you need in that function and than call:

var allElements = new Array(); function calcPriceBox(){ var TL = {x:9999, y:9999}; //not fancy, but works var LR = {x:0, y:0}; allElements.forEach(function(e){ TL.x = TL.x < e.oCoords.tl.x ? TL.x : e.oCoords.tl.x; TL.y = TL.y < e.oCoords.tl.y ? TL.y : e.oCoords.tl.y; TL.x = TL.x < e.oCoords.tr.x ? TL.x : e.oCoords.tr.x; TL.y = TL.y < e.oCoords.tr.y ? TL.y : e.oCoords.tr.y; TL.x = TL.x < e.oCoords.br.x ? TL.x : e.oCoords.br.x; TL.y = TL.y < e.oCoords.br.y ? TL.y : e.oCoords.br.y; TL.x = TL.x < e.oCoords.bl.x ? TL.x : e.oCoords.bl.x; TL.y = TL.y < e.oCoords.bl.y ? TL.y : e.oCoords.bl.y; LR.x = LR.x > e.oCoords.tl.x ? LR.x : e.oCoords.tl.x; LR.y = LR.y > e.oCoords.tl.y ? LR.y : e.oCoords.tl.y; LR.x = LR.x > e.oCoords.tr.x ? LR.x : e.oCoords.tr.x; LR.y = LR.y > e.oCoords.tr.y ? LR.y : e.oCoords.tr.y; LR.x = LR.x > e.oCoords.br.x ? LR.x : e.oCoords.br.x; LR.y = LR.y > e.oCoords.br.y ? LR.y : e.oCoords.br.y; LR.x = LR.x > e.oCoords.bl.x ? LR.x : e.oCoords.bl.x; LR.y = LR.y > e.oCoords.bl.y ? LR.y : e.oCoords.bl.y; }); var foilbox = {width:0, height:0, aspect:0} //get this box that contains every element foilbox.width = LR.x - TL.x; foilbox.height = LR.y - TL.y; foilbox.aspect = foilbox.width / foilbox.height; return foilbox; }

with this function you will get box (in pixels) I made in the post before with my awesome drawing skills.

Of course you need to add every element in an array you can access... I made it dirty and made my own.. IDGAS..

if(action === "elementAdd") allElements.push(element); else if(action === "elementRemove"){ allElements.indexOf(element); allElements.splice(myFuckingElements.indexOf(element), 1); }

I use it like this: (shortened)

if(allElements.length > 0){ var priceBox = calcPriceBox(); foilSize.width = $(".decal .size .length").val(); //real length of the ding you design e.g. 20cm (val: 20) foilSize.height = round(foilSize.width / priceBox.aspect,2); //calc the real height of it var area = foilSize.width * foilSize.height; //calculate a price. maybe with the area, maybe with a crazy mathematical workarounds } return price;

## Roman N

I would like to get a size of the hole designed set. So my customers can actually see what height and length they are going to order.

It would be way more easier to calculare a price with real sizes of the designed product (in my case, plotter film), also you can calculate the area, and get a 100% safe price for their designed products. It would be awesome, if you also can set up pricing rules for specific area sizes.