diff --git a/boxGenerator.html b/boxGenerator.html new file mode 100644 index 00000000..46c3ec45 --- /dev/null +++ b/boxGenerator.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + CC - Box Generator + +
+
+ Box Generator +
+
+ Pixels Per Inch: + + Material thickness: + + Number of rows: + + Row length (interior): + + Card width (sleeved): + + Card height (sleeved): + + Wiggle room: + + Vertical Tab Count: + + Horizontal Tab Count (down the rows): + + Horizontal Tab Count (across the rows): +

+ +
+
+
+ Generate cool boxes! +
+
+
+
+ So fun! +
+
+
+ + + + diff --git a/data/site/other/boxGenerator/boxGenerator.js b/data/site/other/boxGenerator/boxGenerator.js new file mode 100644 index 00000000..b3f74332 --- /dev/null +++ b/data/site/other/boxGenerator/boxGenerator.js @@ -0,0 +1,191 @@ +var sides = document.createElement('svg') +var lid = document.createElement('svg') +var bottom = document.createElement('svg') +var front = document.createElement('svg') +var back = document.createElement('svg') + +function sizeSVG(svg, width, height) { + svg.setAttribute('width', width + 'px') + svg.setAttribute('height', height + 'px') +} + +function generateSVGs() { + //setup variables + var ppi = parseInt(document.getElementById('inputPPI').value) + var padding = ppi + var materialThickness = parseFloat(document.getElementById('inputMaterialThickness').value) * ppi + var rowCount = parseInt(document.getElementById('inputRowCount').value) + var rowLength = parseFloat(document.getElementById('inputRowLength').value) * ppi + var cardWidth = parseFloat(document.getElementById('inputCardWidth').value + document.getElementById('inputWiggleRoom').value) * ppi + var cardHeight = parseFloat(document.getElementById('inputCardHeight').value + document.getElementById('inputWiggleRoom').value) * ppi + // var wiggleRoom = parseFloat(document.getElementById('inputWiggleRoom').value) * ppi + var verticalTabCount = parseInt(document.getElementById('inputVerticalTabCount').value) + if (verticalTabCount % 2 == 0) { + verticalTabCount += 1 + } + var verticalTabLength = cardHeight / verticalTabCount + var horizontalTabCount1 = parseInt(document.getElementById('inputHorizontalTabCount1').value) + if (horizontalTabCount1 % 2 == 0) { + horizontalTabCount1 += 1 + } + var horizontalTabLength1 = rowLength / horizontalTabCount1 + var horizontalTabCount2 = parseInt(document.getElementById('inputHorizontalTabCount2').value) + if (horizontalTabCount2 % 2 == 0) { + horizontalTabCount2 += 1 + } + var horizontalTabLength2 = (rowCount * (materialThickness + cardWidth) - materialThickness) / horizontalTabCount2 + //side svg + sizeSVG(sides, rowLength + 2 * materialThickness + 2 * padding, cardHeight + 3 * materialThickness + 2 * padding) + var sidePath = '' + sides.innerHTML = sidePath + + //back + sizeSVG(back, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, 2 * (materialThickness + padding) + cardHeight + materialThickness) + var backPath = '' + back.innerHTML = backPath + console.log(back) + + //front + sizeSVG(front, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, 2 * padding + materialThickness + cardHeight) + var frontPath = '' + front.innerHTML = frontPath + + //bottom + sizeSVG(bottom, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, rowLength + 2 * materialThickness + 2 * padding) + var bottomPath = '' + bottom.innerHTML = bottomPath + + //lid + sizeSVG(lid, materialThickness + rowCount * (materialThickness + cardWidth) + 2 * padding, rowLength + 2 * materialThickness + 2 * padding) + var lidPath = '' + lid.innerHTML = lidPath + console.log(lid) + + downloadSVG([[sides, "sides.svg"], [lid, "lid.svg"], [bottom, "bottom.svg"], [front, "front.svg"], [back, "back.svg"]]) +} + +function downloadSVG(svgsToDownload) { + for (var i = 0; i < svgsToDownload.length; i++) { + var dataURL = 'data:image/svg+xml,' + encodeURIComponent((new XMLSerializer).serializeToString(svgsToDownload[i][0])) + var downloadElement = document.createElement('a') + document.body.appendChild(downloadElement) + downloadElement.setAttribute('href', dataURL) + downloadElement.setAttribute('download', svgsToDownload[i][1]) + downloadElement.click() + } +} \ No newline at end of file