Answered

Size of all elements

Roman N

started a topic almost 7 years ago

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.

Roman N

said almost 7 years ago

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;

R

Ricard Llordés Espina
said 9 months ago

Hi Roman, I have the same problem. I need to view the size of the image uploaded by the client or the composition of the design made on our personalized t-shirts.

Could you tell me if this code can help me solve it?