summaryrefslogtreecommitdiff
path: root/gerbonara/cad/protoserve_data/protoserve.html
diff options
context:
space:
mode:
Diffstat (limited to 'gerbonara/cad/protoserve_data/protoserve.html')
-rw-r--r--gerbonara/cad/protoserve_data/protoserve.html133
1 files changed, 121 insertions, 12 deletions
diff --git a/gerbonara/cad/protoserve_data/protoserve.html b/gerbonara/cad/protoserve_data/protoserve.html
index c42ce6c..4da027a 100644
--- a/gerbonara/cad/protoserve_data/protoserve.html
+++ b/gerbonara/cad/protoserve_data/protoserve.html
@@ -177,11 +177,14 @@ input[type="text"]:focus:valid {
position: relative;
grid-area: main;
padding: 20px;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: stretch;
}
-#preview-image {
- width: 100%;
- height: 100%;
+#preview > img {
+ flex-grow: 1;
object-fit: contain;
}
@@ -280,6 +283,12 @@ input[type="text"]:focus:valid {
<span class="unit us">inch</span>
</label>
+ <label>Margin
+ <input type="text" placeholder="margin" name="margin" value="2.0" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">inch</span>
+ </label>
+
<div class="group expand" data-group="round_corners">
<label>Round corners
<input name="enabled" type="checkbox" checked/>
@@ -316,7 +325,8 @@ input[type="text"]:focus:valid {
</form>
</div>
<div id="preview">
- <img id="preview-image" alt="Automatically generated preview image"/>
+ <img id="preview-image-top" alt="Automatically generated top side preview image"/>
+ <img id="preview-image-bottom" alt="Automatically generated bottom side preview image"/>
<div id="preview-message"></div>
</div>
<div id="links">
@@ -401,6 +411,8 @@ input[type="text"]:focus:valid {
<a href="#" data-placeholder="rf" class="double-sided-only">RF THT area</a>
<a href="#" data-placeholder="spiky" class="double-sided-only">Spiky hybrid area</a>
<a href="#" data-placeholder="alio" class="double-sided-only">ALio hybrid area</a>
+ <a href="#" data-placeholder="starburst" class="double-sided-only">THT starburst area</a>
+ <a href="#" data-placeholder="breadboard" class="double-sided-only">Permanent breadboard area</a>
</div>
</div>
</template>
@@ -468,7 +480,7 @@ input[type="text"]:focus:valid {
<span class="unit us">mil</span>
</label>
<label>Plating
- <select name="plating" value="through">
+ <select name="plating" value="plated">
<option value="plated">Double-sided, through-plated</option>
<option value="nonplated">Double-sided, non-plated</option>
<option value="singleside">Single-sided, non-plated</option>
@@ -494,6 +506,34 @@ input[type="text"]:focus:valid {
</div>
</template>
+ <template id="tpl-g-breadboard">
+ <div data-type="breadboard" class="group breadboard">
+ <h4>Permanent breadboard area</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1" pattern="[0-9]+\.?[0-9]*"/>
+ </label>
+
+ <h5>Area Settings</h5>
+ <label>Direction
+ <select name="direction" value="v">
+ <option value="v">Vertical</option>
+ <option value="h">Horizontal</option>
+ </select>
+ </label>
+ <label>Clearance
+ <input type="text" name="clearance" placeholder="length" value="0.5" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Hole diameter
+ <input type="text" name="hole_dia" placeholder="length" value="0.9" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ </div>
+ </template>
+
<template id="tpl-g-manhattan">
<div data-type="manhattan" class="group manhattan">
<h4>Manhattan area</h4>
@@ -699,6 +739,58 @@ input[type="text"]:focus:valid {
</div>
</template>
+ <template id="tpl-g-starburst">
+ <div data-type="starburst" class="group starburst">
+ <h4>Starburst area</h4>
+ <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span>
+ <label class="proportion">Proportion
+ <input type="text" name="layout_prop" value="1" pattern="[0-9]+\.?[0-9]*"/>
+ </label>
+
+ <h5>Area Settings</h5>
+ <label>Pitch X
+ <input type="text" name="pitch_x" placeholder="length" value="2.54" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pitch Y
+ <input type="text" name="pitch_y" placeholder="length" value="2.54" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Drill diameter
+ <input type="text" name="drill" placeholder="length" value="0.9" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Annular ring
+ <input type="text" name="annular" placeholder="length" value="1.2" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Pad clearance
+ <input type="text" name="clearance" placeholder="length" value="0.4" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Soldermask wall
+ <input type="text" name="mask_width" placeholder="length" value="0.5" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Trace width X
+ <input type="text" name="trace_width_x" placeholder="length" value="1.40" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ <label>Trace width Y
+ <input type="text" name="trace_width_y" placeholder="length" value="1.40" pattern="[0-9]+\.?[0-9]*"/>
+ <span class="unit metric">mm</span>
+ <span class="unit us">mil</span>
+ </label>
+ </div>
+ </template>
+
<script>
document.querySelectorAll('.expand').forEach((elem) => {
const checkbox = elem.querySelector(':first-child > input');
@@ -985,26 +1077,43 @@ input[type="text"]:focus:valid {
}
}
- let previewBlobURL = null;
+ let previewTopBlobURL = null;
+ let previewBotBlobURL = null;
previewReloader = new RateLimiter(async () => {
if (document.querySelector('form').checkValidity()) {
document.querySelector('#preview-message').textContent = 'Reloading...';
document.querySelector('#preview-message').classList.add('loading');
- const response = await fetch('preview.svg', {
+
+ const response_top = await fetch('preview_top.svg', {
method: 'POST',
mode: 'same-origin',
cache: 'no-cache',
headers: {'Content-Type': 'application/json'},
body: serialize(),
});
- const data = await response.blob();
- if (previewBlobURL) {
- URL.revokeObjectURL(previewBlobURL);
+ const data_top = await response_top.blob();
+ if (previewTopBlobURL) {
+ URL.revokeObjectURL(previewTopBlobURL);
}
- previewBlobURL = URL.createObjectURL(data);
- document.querySelector('#preview-image').src = previewBlobURL;
+ previewTopBlobURL = URL.createObjectURL(data_top);
+ document.querySelector('#preview-image-top').src = previewTopBlobURL;
+
document.querySelector('#preview-message').textContent = '';
document.querySelector('#preview-message').classList.remove('loading');
+
+ const response_bot = await fetch('preview_bottom.svg', {
+ method: 'POST',
+ mode: 'same-origin',
+ cache: 'no-cache',
+ headers: {'Content-Type': 'application/json'},
+ body: serialize(),
+ });
+ const data_bot = await response_bot.blob();
+ if (previewBotBlobURL) {
+ URL.revokeObjectURL(previewBotBlobURL);
+ }
+ previewBotBlobURL = URL.createObjectURL(data_bot);
+ document.querySelector('#preview-image-bottom').src = previewBotBlobURL;
} else {
document.querySelector('#preview-message').classList.add('loading');
document.querySelector('#preview-message').textContent = 'Please correct any invalid fields.';