<html>
<head>
<style>
.inputField{
border:none;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
padding:5px;
font:22px Calibri;
margin:5px;
}
rect{
fill:white;
stroke-width:1px;
stroke:black;
}
</style>
</head>
<body>
<h1>Complete This Form and Export as SVG</h1>
<div>
<div style='border-style:solid;margin:10px;'>
<input class="inputField" id="topLabel" placeholder="Box Top Label" onchange='updateSVG()'>
<input class="inputField" id="frontLabel" placeholder="Box Front Label" onchange='updateSVG()'>
<input class="inputField" id="length" placeholder="Length/cm" onchange='updateSVG()'>
<input class="inputField" id="width" placeholder="Width/cm" onchange='updateSVG()'>
<input class="inputField" id="height" placeholder="Height/cm" onchange='updateSVG()'>
<input class="inputField" id="materialThickness" placeholder="Material Thickness" value='0.02' onchange='updateSVG()'>
<input class="inputField" id="caseTopLabel" placeholder="Case Top Label" onchange='updateSVG()'>
<input class="inputField" id="caseFrontLabel" placeholder="Case Front Label" onchange='updateSVG()'>
<input class="inputField" id="dottedLineLength" placeholder="Dotted Line Length" value='2' onchange='updateSVG()'>
<input class="inputField" id="dottedSpaceLength" placeholder="Dotted Line Space Length" value='4' onchange='updateSVG()'>
<button class="inputField" onclick='updatePage(-1)'>← Previous </button>
<button class="inputField" onclick='updatePage(1)'>Next →</button>
<a href='' id="exportBoxButton"><button class="inputField" >Export Box</button></a>
<a href='' id="exportInsertButton"><button class="inputField" >Export Insert</button></a>
<a href='' id="exportCaseButton"><button class="inputField" >Export Case</button></a>
<a href='https://cloudconvert.com/svg-to-dxf' target='_blank'><button class="inputField" >Convert to DXF</button></a>
</div>
<svg id='individualContainer' width='4000' height='4000'></svg>
<svg id='insert' width='4000' height='4000'></svg>
<svg id='case' width='4000' height='4000'></svg>
<div>
</div>
</div>
</body>
<script>
topLabelArray=[];
frontLabelArray=[];
lengthArray=[];
widthArray=[];
heightArray=[];
solid=1;
dotted=2;
none=3;
dottedLineLength=2;
dottedSpaceLength=4;
individualContainerElement=document.getElementById("individualContainer");
insertElement=document.getElementById("insert");
caseElement=document.getElementById("case");
function updateSVG(){
updateValues();
individualContainerElement.replaceChildren();
insertElement.replaceChildren();
caseElement.replaceChildren();
makeBox(lengthValue,widthValue,heightValue,flapWidth,textForTop,textForFront,individualContainerElement);
makeInsert();
createFile();
}
function updateValues(){
flapWidth=0.9;
topLabelValue=document.getElementById("topLabel").value;
frontLabelValue=document.getElementById("frontLabel").value;
lengthValue=parseFloat(document.getElementById("length").value);
widthValue=parseFloat(document.getElementById("width").value);
heightValue=parseFloat(document.getElementById("height").value);
materialThicknessValue=parseFloat(document.getElementById("materialThickness").value);
textForTop=document.getElementById("topLabel").value;
textForFront=document.getElementById("frontLabel").value;
textForCaseTop=document.getElementById("caseTopLabel").value;
textForCaseFront=document.getElementById("caseFrontLabel").value;
dottedLineLength=parseInt(document.getElementById("dottedLineLength").value);
dottedSpaceLength=parseInt(document.getElementById("dottedSpaceLength").value);
topLabelArray[currentPage]=topLabelValue;
frontLabelArray[currentPage]=frontLabelValue;
lengthArray[currentPage]=lengthValue;
widthArray[currentPage]=widthValue;
heightArray[currentPage]=heightValue;
}
function convertToPixels(mmValue){
return 3.7795275591*mmValue*10;
}
function setTextMaxWidth(textElementToAdjust,textMaxWidth,textMaxHeight){
i=0;
textElementToAdjust.setAttribute('font-size',i);
while(textElementToAdjust.getBBox().width<textMaxWidth&&textElementToAdjust.getBBox().height<textMaxHeight&&i<100){
textElementToAdjust.setAttribute('font-size',i);i++;
}
}
function drawRect(rectX,rectY,rectWidth,rectHeight,leftStyle,rightStyle,topStyle,bottomStyle,svgElement){
//leftLine
let leftLine=document.createElementNS('http://www.w3.org/2000/svg','line');
if(leftStyle==solid){
leftLine.setAttribute('x1',rectX);
leftLine.setAttribute('y1',rectY);
leftLine.setAttribute('x2',rectX);
leftLine.setAttribute('y2',rectY+rectHeight);
leftLine.setAttribute('stroke','blue');
svgElement.append(leftLine);}
if(leftStyle==dotted){
makeDottedLine(rectX,rectY,rectX,rectY+rectHeight,dottedLineLength,dottedSpaceLength,svgElement);
svgElement.append(leftLine);}
//rightLine
if(rightStyle==solid){
let rightLine=document.createElementNS('http://www.w3.org/2000/svg','line');
rightLine.setAttribute('x1',rectX+rectWidth);
rightLine.setAttribute('y1',rectY);
rightLine.setAttribute('x2',rectX+rectWidth);
rightLine.setAttribute('y2',rectY+rectHeight);
rightLine.setAttribute('stroke','black');
svgElement.append(rightLine);}
if(rightStyle==dotted){
makeDottedLine(rectX+rectWidth,rectY,rectX+rectWidth,rectY+rectHeight,dottedLineLength,dottedSpaceLength,svgElement);}
//topLine
if(topStyle==solid){
let topLine=document.createElementNS('http://www.w3.org/2000/svg','line');
topLine.setAttribute('x1',rectX);
topLine.setAttribute('y1',rectY);
topLine.setAttribute('x2',rectX+rectWidth);
topLine.setAttribute('y2',rectY);
topLine.setAttribute('stroke','black');
svgElement.append(topLine);}
if(topStyle==dotted){
makeDottedLine(rectX,rectY,rectX+rectWidth,rectY,dottedLineLength,dottedSpaceLength,svgElement);}
//bottomLine
if(bottomStyle==solid){
let bottomLine=document.createElementNS('http://www.w3.org/2000/svg','line');
bottomLine.setAttribute('x1',rectX);
bottomLine.setAttribute('y1',rectY+rectHeight);
bottomLine.setAttribute('x2',rectX+rectWidth);
bottomLine.setAttribute('y2',rectY+rectHeight);
bottomLine.setAttribute('stroke','black');
svgElement.append(bottomLine);}
if(bottomStyle==dotted){
makeDottedLine(rectX,rectY+rectHeight,rectX+rectWidth,rectY+rectHeight,dottedLineLength,dottedSpaceLength,svgElement);}
}
function makeDottedLine(x1,y1,x2,y2,lineLength,spaceLength,svgElementToAddLine){
let changeInX=x2-x1;
let changeInY=y2-y1;
let lineSpaceLength=lineLength+spaceLength;
let numberOfLineSegmentsInX=changeInX/lineSpaceLength;
let numberOfLineSegmentsInY=changeInY/lineSpaceLength;
let numberOfLineSpaceSegments=Math.max(numberOfLineSegmentsInX,numberOfLineSegmentsInY);
let xChangePerSegment=changeInX/numberOfLineSpaceSegments;
let yChangePerSegment=changeInY/numberOfLineSpaceSegments;
for(i=0;i<numberOfLineSpaceSegments;i++){
let dottedLine=document.createElementNS('http://www.w3.org/2000/svg','line');
dottedLine.setAttribute('x1',x1+xChangePerSegment*i);
dottedLine.setAttribute('y1',y1+yChangePerSegment*i);
dottedLine.setAttribute('x2',x1+xChangePerSegment*i+xChangePerSegment/lineSpaceLength*lineLength);
dottedLine.setAttribute('y2',y1+yChangePerSegment*i+yChangePerSegment/lineSpaceLength*lineLength);
dottedLine.setAttribute('stroke','black');
svgElementToAddLine.append(dottedLine);
}
}
function createFile(){
var blob=new Blob([(new XMLSerializer()).serializeToString(individualContainerElement)],{type: "application/svg"});
var exportBoxButtonElement=document.getElementById("exportBoxButton");
exportBoxButtonElement.setAttribute("href",window.URL.createObjectURL(blob));
exportBoxButtonElement.setAttribute("download", "box.svg");
blob=new Blob([(new XMLSerializer()).serializeToString(insertElement)],{type: "application/svg"});
var exportInsertButtonElement=document.getElementById("exportInsertButton");
exportInsertButtonElement.setAttribute("href",window.URL.createObjectURL(blob));
exportInsertButtonElement.setAttribute("download", "insert.svg");
var blob=new Blob([(new XMLSerializer()).serializeToString(caseElement)],{type: "application/svg"});
var exportCaseButtonElement=document.getElementById("exportCaseButton");
exportCaseButtonElement.setAttribute("href",window.URL.createObjectURL(blob));
exportCaseButtonElement.setAttribute("download", "case.svg");
}
currentPage=1;
maxPages=1;
function updatePage(pageIncrement){
currentPage=currentPage+pageIncrement;
if(currentPage==0){
currentPage=1;}
if(topLabelArray[currentPage-1]==''&&frontLabelArray[currentPage-1]==''&&isNaN(lengthArray[currentPage-1])&&isNaN(widthArray[currentPage-1])&&isNaN(heightArray[currentPage-1])){
currentPage=currentPage-1;
}
maxPages=Math.max(currentPage,maxPages);
document.getElementById("topLabel").value=topLabelArray[currentPage]||'';
document.getElementById("frontLabel").value=frontLabelArray[currentPage]||'';
document.getElementById("length").value=lengthArray[currentPage]||'';
document.getElementById("width").value=widthArray[currentPage]||'';
document.getElementById("height").value=heightArray[currentPage]||'';
updateSVG();
}
insertHeight=0.5;
function makeInsert(){
let containerIndex=1;
currentX=0;
currentY=0;
maxWidth=0;
margin=0.05;
maxHeight=0;
while(containerIndex<maxPages){
currentX=currentX+insertHeight+insertHeight;
currentY=insertHeight+insertHeight;
maxWidth=Math.max(maxWidth,widthArray[containerIndex]);
maxHeight=Math.max(maxHeight,heightArray[containerIndex]);
//pockets
drawRect(convertToPixels(currentX-margin),convertToPixels(currentY-margin),convertToPixels(lengthArray[containerIndex]+margin+margin),convertToPixels(widthArray[containerIndex]+margin+margin),solid,solid,solid,solid,insertElement);
currentX=currentX+lengthArray[containerIndex];
console.log("container ",containerIndex,": ",lengthArray[containerIndex],widthArray[containerIndex],currentX);
containerIndex++;
if(containerIndex>100){break;}
}
//leftFlap
drawRect(convertToPixels(0+margin),convertToPixels(insertHeight+margin),convertToPixels(insertHeight),convertToPixels(maxWidth+insertHeight+insertHeight-margin-margin),solid,dotted,solid,solid,insertElement);
//rightFlap
drawRect(convertToPixels(currentX+insertHeight-margin),convertToPixels(insertHeight+margin),convertToPixels(insertHeight),convertToPixels(maxWidth+insertHeight+insertHeight-margin-margin),dotted,solid,solid,solid,insertElement);
//topFlap
drawRect(convertToPixels(insertHeight+margin),convertToPixels(0+margin),convertToPixels(currentX-margin-margin),convertToPixels(insertHeight),solid,solid,solid,dotted,insertElement);
//bottomFlap
drawRect(convertToPixels(insertHeight+margin),convertToPixels(insertHeight+insertHeight+maxWidth+insertHeight-margin),convertToPixels(currentX-margin-margin),convertToPixels(insertHeight),solid,solid,dotted,solid,insertElement);
//makeCase
makeBox(currentX,maxWidth+insertHeight+insertHeight,maxHeight+0.1,flapWidth,textForCaseTop,textForCaseFront,caseElement);
}
function makeBox(lengthValue,widthValue,heightValue,flapWidth,textForTop,textForFront,svgElement){
//leftSide
drawRect(convertToPixels(0),convertToPixels(widthValue+flapWidth),convertToPixels(widthValue),convertToPixels(heightValue),solid,none,solid,solid,svgElement);
//back
drawRect(convertToPixels(widthValue),convertToPixels(widthValue+flapWidth),convertToPixels(lengthValue),convertToPixels(heightValue),dotted,dotted,dotted,dotted,svgElement);
//topflap
drawRect(convertToPixels(widthValue+materialThicknessValue*2),convertToPixels(0),convertToPixels(lengthValue-materialThicknessValue*4),convertToPixels(flapWidth),solid,solid,solid,dotted,svgElement);
//top
drawRect(convertToPixels(widthValue),convertToPixels(flapWidth),convertToPixels(lengthValue),convertToPixels(widthValue),solid,solid,none,none,svgElement);
//right
drawRect(convertToPixels(lengthValue+widthValue),convertToPixels(widthValue+flapWidth),convertToPixels(widthValue),convertToPixels(heightValue),none,dotted,solid,solid,svgElement);
//front
drawRect(convertToPixels(lengthValue+widthValue+widthValue),convertToPixels(widthValue+flapWidth),convertToPixels(lengthValue),convertToPixels(heightValue),none,dotted,solid,solid,svgElement);
//sideflap
drawRect(convertToPixels(lengthValue+widthValue+widthValue+lengthValue),convertToPixels(widthValue+flapWidth+materialThicknessValue),convertToPixels(flapWidth),convertToPixels(heightValue-materialThicknessValue*2),none,solid,solid,solid,svgElement);
//bottom
drawRect(convertToPixels(widthValue),convertToPixels(widthValue+flapWidth+heightValue),convertToPixels(lengthValue),convertToPixels(widthValue),solid,solid,none,dotted,svgElement);
//bottomflap
drawRect(convertToPixels(widthValue+materialThicknessValue*2),convertToPixels(widthValue+flapWidth+heightValue+widthValue),convertToPixels(lengthValue-materialThicknessValue*4),convertToPixels(flapWidth),solid,solid,none,solid,svgElement);
let topText=document.createElementNS('http://www.w3.org/2000/svg','text');
svgElement.append(topText);
topText.innerHTML=textForTop;
setTextMaxWidth(topText,convertToPixels(lengthValue-0.5),convertToPixels(widthValue-0.5));
topTextWidth=topText.getBBox().width;
topTextHeight=topText.getBBox().height;
topText.setAttribute('x',convertToPixels(widthValue+lengthValue/2)-topTextWidth/2);
topText.setAttribute('y',convertToPixels(flapWidth+widthValue/2)+topTextHeight/2);
topText.setAttribute('transform','rotate(180,'+(convertToPixels(widthValue+lengthValue/2)) +','+(convertToPixels(flapWidth+widthValue/2))+')');
let frontText=document.createElementNS('http://www.w3.org/2000/svg','text');
svgElement.append(frontText);
frontText.innerHTML=textForFront;
setTextMaxWidth(frontText,convertToPixels(lengthValue-0.5),convertToPixels(heightValue-0.8));
frontTextWidth=frontText.getBBox().width;
frontTextHeight=frontText.getBBox().height;
frontText.setAttribute('x',convertToPixels(widthValue+lengthValue+lengthValue/2+widthValue)-frontTextWidth/2);
frontText.setAttribute('y',convertToPixels(flapWidth+widthValue+(heightValue-0.8/2)/2+0.8/2)+frontTextHeight/2);
/**let fingerHoleRect=document.createElementNS('http://www.w3.org/2000/svg','rect');
svgElement.append(fingerHoleRect);
fingerHoleRect.setAttribute('x',convertToPixels(lengthValue+widthValue+widthValue+lengthValue/2-0.8/2));
fingerHoleRect.setAttribute('y',convertToPixels(widthValue+flapWidth-0.8/2));
fingerHoleRect.setAttribute('height',convertToPixels(0.8+0.2));
fingerHoleRect.setAttribute('width',convertToPixels(0.8));
fingerHoleRect.setAttribute('rx',convertToPixels(0.2));**/
drawRect(convertToPixels(lengthValue+widthValue+widthValue+lengthValue/2-0.8/2),convertToPixels(widthValue+flapWidth-0.8/2),convertToPixels(0.8),convertToPixels(0.8+0.2),solid,solid,solid,solid,svgElement)
}
</script>
</html>