protoboard: add split front/back view in webthing

3 files changed, 36 insertions, 14 deletions

diff --git a/gerbonara/cad/primitives.py b/gerbonara/cad/primitives.py
index c659274..9c7d9dc 100644
--- a/gerbonara/cad/primitives.py
+++ b/gerbonara/cad/primitives.py
@@ -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)
 
diff --git a/gerbonara/cad/protoserve.py b/gerbonara/cad/protoserve.py
index 3271af1..c3224e3 100644
--- a/gerbonara/cad/protoserve.py
+++ b/gerbonara/cad/protoserve.py
@@ -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():
diff --git a/gerbonara/cad/protoserve_data/protoserve.html b/gerbonara/cad/protoserve_data/protoserve.html
index c42ce6c..7a11626 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;
 }
 
@@ -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.';