Modify movement ranges to be ranges with nicer output and percentage vals

Author: techninja

index.html

@@ -129,37 +129,29 @@ <h2>Settings</h2>
 
     <fieldset>
       <legend>General</legend>
+      <fieldset class="speed">
+        <legend>Carriage Movement Speed:</legend>
+        <div>
+          <label for="movespeed">...while Brush is Up:</label>
+          <input type="range" id="movespeed" min="200" max="2000" title="Move left for slower, right for faster."/>
+        </div>
+        <div>
+          <label for="paintspeed">...while Brush is Down:</label>
+          <input type="range" id="paintspeed" min="200" max="2000" title="Move left for slower, right for faster."/>
+        </div>
+      </fieldset>
+
       <div>
         <label for="showcolortext">Show color name:</label>
         <input type="checkbox" id="showcolortext"/>
-        <aside>When checked, color names will display for print colors, otherwise they will only be visible on hover.</aside>
+        <aside>When checked, color names will display on the paint palette for print colors, otherwise they will only be visible on hover.</aside>
       </div>
 
       <div>
         <label for="colorset">Installed Paint Set:</label>
         <select id="colorset"></select>
       </div>
 
-      <div>
-        <label for="movespeed">Moving speed (brush up):</label>
-        <select id="movespeed">
-          <option value="700">Slow</option>
-          <option value="1500">Medium (default)</option>
-          <option value="2500">Fast</option>
-          <option value="3000">Ludicrous!</option>
-        </select>
-      </div>
-
-      <div>
-        <label for="paintspeed">Painting speed (brush down):</label>
-        <select id="paintspeed">
-          <option value="500">Slow</option>
-          <option value="1000">Medium (default)</option>
-          <option value="1500">Fast</option>
-          <option value="2500">Ludicrous!</option>
-        </select>
-      </div>
-
       <hr>
 
       <div>

resources/main.js

@@ -396,6 +396,7 @@ function addSettingsRangeValues() {
     $r.change(function(){
       var num = parseInt($r.val());
       var post = "";
+      var wrap = ['(', ')'];
       var dosep = true;
 
       if (['servotime', 'latencyoffset'].indexOf(this.id) != -1) {
@@ -420,11 +421,32 @@ function addSettingsRangeValues() {
           num = Math.round((x * 100) / b);
           post = '%';
           break;
+        case 'movespeed':
+        case 'paintspeed':
+          num = Math.round((num / this.max) * 100);
+          var msg = "";
+
+          if (num < 25) {
+            msg = "Paintbrush on a Snail";
+          } else if (num < 50) {
+            msg = "Painfully Slow";
+          } else if (num < 75) {
+            msg = "Medium";
+          } else if (num < 80) {
+            msg = "Fast (default)";
+          } else {
+            msg = "Stupid Fast!";
+          }
+
+          dosep = false;
+          wrap = ['', ''];
+          post = "% - " + msg;
+          break;
       }
 
       if (dosep) num = num.toString(10).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 
-      $l.text('(' + num + post + ')');
+      $l.text(wrap[0] + num + post + wrap[1]);
     }).change();
 
     $r.addClass('processed').after($l);

resources/styles.css

@@ -674,6 +674,32 @@ body.home #settings {
   margin-bottom: 1em;
 }
 
+#settings fieldset > fieldset {
+  margin-top: 0.75em;
+}
+
+/* Custom styling for speed fieldset */
+#settings fieldset.speed {
+  margin-bottom: 1em;
+  padding-top: 0.75em;
+  padding-bottom: 0;
+}
+
+#settings fieldset.speed label {
+  display: block;
+  text-align: center;
+}
+
+#settings fieldset.speed input {
+  display: block;
+  width: 90%;
+}
+
+#settings fieldset.speed div {
+  float: left;
+  width: 48%;
+}
+
 #settings > div {
   padding:10px;
   height: 75%;