protoboard: add split front/back view in webthing

This commit is contained in:
jaseg 2024-07-07 16:52:24 +02:00
parent 21218239e4
commit 4aab344a18
3 changed files with 36 additions and 14 deletions

View file

@ -135,6 +135,7 @@ class Board:
force_bounds=force_bounds)
def pretty_svg(self, side='top', margin=0, arg_unit=MM, svg_unit=MM, force_bounds=None, inkscape=False, colors=None):
print('Pretty svg', side)
return self.layer_stack().to_pretty_svg(side=side, margin=margin, arg_unit=arg_unit, svg_unit=svg_unit,
force_bounds=force_bounds, inkscape=inkscape, colors=colors)

View file

@ -159,11 +159,11 @@ def to_board(obj):
mounting_hole_offset=mounting_hole_offset,
unit=unit)
@app.route('/preview.svg', methods=['POST'])
async def preview():
@app.route('/preview_<side>.svg', methods=['POST'])
async def preview(side):
obj = await request.get_json()
board = to_board(obj)
return Response(str(board.pretty_svg()), mimetype='image/svg+xml')
return Response(str(board.pretty_svg(side=side)), mimetype='image/svg+xml')
@app.route('/gerbers.zip', methods=['POST'])
async def gerbers():

View file

@ -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;
}
@ -316,7 +319,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">
@ -985,26 +989,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.';