From 191f1837a62ebf121ad1086a90836c158c0c3194 Mon Sep 17 00:00:00 2001
From: lawgicau <lawgicau@gmail.com>
Date: Tue, 20 Jul 2021 22:17:58 +1000
Subject: [PATCH] Add feedrate previews

Calculate feedrate approximations based on user input, displayed next to user input.
---
 calibration.html      | 2 +-
 css/styles.css        | 9 +++++++++
 js/createform.js      | 5 +++--
 js/gcodeprocessing.js | 8 ++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/calibration.html b/calibration.html
index b118a2b..8dfbff0 100644
--- a/calibration.html
+++ b/calibration.html
@@ -251,7 +251,7 @@
         <h6 id="fl" >First layer gcode generator</h6>
         <p>The following form will create a series of five squares that you can use to live level your bed or set the Z offset. It is quick to print and features one square in the middle of the bed, with four others in the corners. You can use these to turn the levelling knobs in each corner until they are consistent, or ensure your ABL system is working if you have one in place.</p>
         <a href="#" data-featherlight="img/firstlayerpreview.jpg"><img loading="lazy" class="thumb" src="img/firstlayerpreview.jpg" /></a>
-        <!-- firstlayerForm-->
+        <!-- firstlayerForm -->
         <form name="firstlayerForm" id="firstlayerForm" onsubmit="return false;">
             <script>
             createForm("firstlayer");    
diff --git a/css/styles.css b/css/styles.css
index f03b6d0..71676eb 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -347,6 +347,15 @@ iframe {
     float: left;
 }
 
+.summary {
+    display: inline-block;
+    padding: 4px 10px;
+    border: 2px solid rgb(230, 230, 230);
+    border-radius: 5px;
+    margin: 2px 5px;
+    font-size: 1.2em;
+}
+
 /* Tabs container */
 .r-tabs {
 	position: relative;
diff --git a/js/createform.js b/js/createform.js
index dd715c0..9c3d134 100644
--- a/js/createform.js
+++ b/js/createform.js
@@ -229,8 +229,9 @@ var retractionTower = /*html*/ `<h4>Retraction</h4>
 </table>`;
 
 var feedrate = /*html*/ `<h4>Feedrate</h4>
-<p>The default printing speed is 60 mm/sec, with modifiers including 60% for perimeters, 80% for solid infill, travel moves 166%, and 50% of these for the first layer. Modify the base feedrate here and the generated gcode will be modified using the same proportions. Please note extruder retraction/unretraction and Z-hop speeds will be unaffected by this.</p>
-<p><label>Base feedrate (mm/sec): <input type="number" name="baseFeedrate" value="60" min="5" max="1000" step="1"></label></p>
+<p>The default printing speed is 60 mm/sec, with modifiers including 60% for perimeters, 80% for solid infill, travel moves 166%, and 50% of these for the first layer. Modify the base feedrate here and the generated gcode will be modified using the same proportions (<b>calculated feedrates shown in grey</b>). Please note extruder retraction/unretraction and Z-hop speeds will be unaffected by this.</p>
+<p><label>Base feedrate (mm/sec): <input type="number" name="baseFeedrate" value="60" min="5" max="1000" step="1" onchange="updateFeeds(form);"></label>
+<span  class="summary">Perimeters: <b><span class="perimFeed">36</span> mm/s</b></span><span class="summary">Solid infill: <b><span class="solidFeed">48</span> mm/s</b></span><span class="summary">Travel moves: <b><span class="travelFeed">100</span> mm/s</b></span><span class="summary">First layer: <b><span class="firstFeed">30</span> mm/s</b></span></p>
 `;
 
 var accel = /*html*/ `<h4>Base feedrate/speed</h4>
diff --git a/js/gcodeprocessing.js b/js/gcodeprocessing.js
index 83e79a3..5120d91 100644
--- a/js/gcodeprocessing.js
+++ b/js/gcodeprocessing.js
@@ -103,6 +103,14 @@ function toggleJ() {
     }
 }
 
+function updateFeeds(formName) {
+    var feedrate = formName.baseFeedrate.value;
+    $('.perimFeed').html(Math.round(feedrate*0.6));
+    $('.solidFeed').html(Math.round(feedrate*0.8));
+    $('.travelFeed').html(Math.round(feedrate*1.67));
+    $('.firstFeed').html(Math.round(feedrate*0.5));
+}
+
 function processGcode(formName) {
     var name = formName.name;
     var description = formName.description.value;