diff --git a/app.py b/app.py
index c5d1896..dce53a1 100644
--- a/app.py
+++ b/app.py
@@ -319,6 +319,16 @@ def writing(id):
 # 
 # FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
 
+def resizeSVG (m):
+    width = int(m.group(1))
+    height = int(m.group(2))
+
+    viewbox = f'0 0 {width} {height}'
+
+    newHeight = 420
+    newWidth = (width/height) * newHeight
+
+    return f'<svg xmlns="http://www.w3.org/2000/svg" viewbox="{viewbox}" width="{newWidth}mm" height="{newHeight}mm" class="svgbob">'
 
 @app.route('/hpgl/<id>')
 def hpgl (id):
@@ -336,11 +346,17 @@ def hpgl (id):
     # to SVG
     svg = ascii2svg(ascii, params['weight'])
 
+    svg = re.sub(r'\<rect class="backdrop" x="\d+" y="\d+" width="\d+" height="\d+">\<\/rect\>', '', svg, flags=re.M)
+
+    svg = re.sub(r'<svg xmlns="http://www.w3.org/2000/svg" width="(\d+)" height="(\d+)" class="svgbob">', resizeSVG,svg)
+
+    #print(svg)
+
     # store as a temporary file
-    (svg_file, svg_path) = tempfile.mkstemp()
-    print(svg_path)
-    with open(svg_path, 'w') as svg_file:
-        svg_file.write(svg)
+    (svg_file, svg_path) = tempfile.mkstemp('.svg')
+
+    with open(svg_file, 'w') as svg_handle:
+        svg_handle.write(svg)
 
     # transform to hpgl
     hpgl = svgToHPGL(svg_path)
diff --git a/svg_to_hpgl.py b/svg_to_hpgl.py
index 9b1930d..aab92e7 100644
--- a/svg_to_hpgl.py
+++ b/svg_to_hpgl.py
@@ -1,14 +1,23 @@
-# from hpgl_multipen_output import HpglMultipenOutput
-from hpgl_output_adapted import HpglOutputAdapted
+from hpgl_multipen_output import HpglMultipenOutput
+import subprocess
+# from hpgl_output_adapted import HpglOutputAdapted
 
 def svgToHPGL (path, speed=1, penCount=8, force=2):
-    e = HpglOutputAdapted()
-    e.run([
-        '--orientation', '0',
+
+    subprocess.call(['inkscape', 
+        '-f', path,
+        '--verb', 'EditSelectAll',
+        '--verb', 'ObjectToPath',
+        '--verb', 'FileSave',
+        '--verb', 'FileQuit' ])
+
+    e = HpglMultipenOutput()
+    e.affect([
+        '--orientation', '270',
         '--force', '0',
         '--overcut', '0',
         '--precut', 'false',
-        '--flat', '4',
+        '--flat', '8',
         '--toolOffset', '0',
         '--autoAlign', 'false',
         '--speed', str(speed),
diff --git a/templates/font.html b/templates/font.html
index 6a943d8..749e75a 100644
--- a/templates/font.html
+++ b/templates/font.html
@@ -26,6 +26,71 @@
             output text</label>
     <input  id="text-checkbox" type="checkbox" class="get-input"
             class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
+
+    <script>
+        function updateGET(frame, param, value){
+            // object from GET parameters
+            let [base_src, params_src] = frame.src.split("?");
+            let params = new URLSearchParams(params_src);
+            // update param
+            params.set(param, value);
+            // reconstituate URL
+            let new_src = base_src + "?" + params.toString();
+            // set and refresh
+            frame.src = new_src;
+        }
+
+        let button_pad = document.getElementById('button-pad');
+        let button_svg = document.getElementById('button-svg');
+        
+        // --- pad go button
+        button_pad.addEventListener('click', function(){
+            let svg_iframe = document.getElementById('svg-iframe');
+            let pad_iframe = document.getElementById('pad-iframe');
+            let input = document.getElementById(button_pad.dataset.use);
+            let value = input.value;
+            let param = input.dataset.name;
+
+            let pad_src = pad_iframe.src;
+            pad_src = pad_src.split('-');
+            pad_src[pad_src.length-1] = value;
+            pad_src = pad_src.join('-');
+            pad_iframe.src = pad_src;
+
+            let svg_src = svg_iframe.src;
+            svg_src = svg_src.split('/');
+            svg_src[svg_src.length-1] = value;
+            svg_src = svg_src.join('/');
+            svg_iframe.src = svg_src;
+
+        });
+
+        // --- svg generation button
+        button_svg.addEventListener('click', function(){
+          let svg_iframe = document.getElementById('svg-iframe');
+          console.log("IFRAME RELOAD");
+          svg_iframe.contentWindow.location.reload();
+        });
+
+        // --- get-input but on the pad and checkbox but on the pad
+        let inputs = document.getElementsByClassName('get-input');
+        for(let input of inputs){
+          input.addEventListener('change', function(){
+            let frame = document.getElementById(input.dataset.frame);
+            const url = new URL(frame.src);
+
+            if(input.type == 'checkbox'){
+              url.searchParams.set(input.dataset.name, input.checked);
+            }
+            else{
+              url.searchParams.set(input.dataset.name, input.value);
+            }
+            console.log(url);
+            // frame.contentWindow.history.replaceState(null, null, url);
+            frame.src = url
+          });
+        }
+    </script>
   </header>
 
   <div class="font figfont reload" id="main">