WIP Grbl Settings

app/css/image-checkbox.css

@@ -0,0 +1,81 @@
+.image-checkbox-text {
+  font-size: 11px;
+  text-align: center;
+  width: 95px;
+  height: 36px;
+  word-wrap: break-word;
+}
+
+.image-checkbox-ul {
+  list-style-type: none;
+}
+
+.image-checkbox-ul>li {
+  display: inline-block;
+}
+
+.image-checkbox-ul input[type="checkbox"] {
+  display: none;
+}
+
+.image-checkbox-ul input[type="radio"] {
+  display: none;
+}
+
+.image-checkbox-ul label {
+  padding: 10px;
+  display: block;
+  position: relative;
+  margin: 5px;
+  margin-bottom: 2px;
+  cursor: pointer;
+}
+
+.image-checkbox-ul label {
+  border: 1px solid #fff;
+}
+
+.theme_dark .image-checkbox-ul label {
+  border: 1px solid #222;
+}
+
+.image-checkbox-ul label:before {
+  background-color: white;
+  color: white;
+  content: " ";
+  display: block;
+  border-radius: 50%;
+  border: 1px solid grey;
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  line-height: 28px;
+  transition-duration: 0.4s;
+  transform: scale(0);
+}
+
+.image-checkbox-ul label img {
+  height: 64px;
+  width: 64px;
+  transition-duration: 0.2s;
+  transform-origin: 50% 50%;
+}
+
+.image-checkbox-ul :checked+label {
+  border-color: #ddd;
+}
+
+.image-checkbox-ul :checked+label:before {
+  content: "✓";
+  background-color: grey;
+  transform: scale(1);
+}
+
+.image-checkbox-ul :checked+label img {
+  transform: scale(0.9);
+  /* box-shadow: 0 0 5px #333; */
+  z-index: -1;
+}

app/css/main.css

@@ -276,4 +276,8 @@ select {
   background: white;
   left: 20px;
   margin-top: 10px;
+}
+
+.step-list>li::before {
+  color: #111 !important;
 }

app/index.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="css/buttons.css" />
     <link rel="stylesheet" href="css/probev2.css" />
     <link rel="stylesheet" href="/lib/furcanIconPicker/iconpicker-1.5.0.css" />
+    <link type="text/css" rel="stylesheet" media="all" href="css/image-checkbox.css" />
 
   </head>
 
@@ -46,7 +47,7 @@
         <nav data-role="ribbonmenu" class="mt-1">
           <ul class="tabs-holder">
             <li><a id="controlTab" href="#section-jog" onclick="manualcontrolPanel();"><i class="fas fa-fw fa-play"></i> Machine Control</a></li>
-            <li id="grblSettings" style="display: none;"><a id="grblTab" href="#section-grbl" onclick="grblPanel();"><i class="fas fa-fw fa-sliders-h"></i> Grbl Settings</a></li>
+            <li id="grblSettings" style="display: none;"><a id="grblTab" href="#section-grbl" onclick="grblPanel();"><i class="fas fa-fw fa-sliders-h"></i> <span id="grbl-settings-tab-title">Grbl</span> Settings</a></li>
             <li id="fluidncSettings" style="display: none;"><a id="fluidncTab" href="#section-fluidnc" onclick="fluidncPanel();"><i class="fas fa-fw fa-sliders-h"></i> FluidNC Settings</a></li>
             <li><a href="#section-troubleshooting" id="troubleshootingTab" onclick="troubleshootingPanel();"><i class="fas fa-fw fa-file-medical-alt"></i> Troubleshooting</a></li>
           </ul>

app/js/grbl-settings-templates.js

@@ -256,7 +256,9 @@ var grblSettingsTemplate2 = {
     key: `$30`,
     title: `Maximum spindle speed, RPM`,
     description: `This sets the spindle speed for the maximum 5V PWM pin output. For example, if you want to set 10000rpm at 5V, program $30=10000. For 255rpm at 5V, program $30=255. If a program tries to set a higher spindle RPM greater than the $30 max spindle speed, Grbl will just output the max 5V, since it can't go any faster. By default, Grbl linearly relates the max-min RPMs to 5V-0.02V PWM pin output in 255 equally spaced increments. When the PWM pin reads 0V, this indicates spindle disabled. Note that there are additional configuration options are available in config.h to tweak how this operates.`,
-    template: `<input id="val-30-input" data-role="input" data-clear-button="false" data-append="RPM" type="text">`,
+    template: `
+    <span id="grblSettingsPWM">&nbsp;</span>
+    <input id="val-30-input" data-role="input" data-clear-button="false" data-append="RPM" type="text">`,
     utils: ``
   },
   31: {
@@ -479,7 +481,8 @@ var grblSettingsTemplate2 = {
     key: `$33`,
     title: `Spindle PWM frequency`,
     description: ``,
-    template: `<input id="val-33-input" data-role="input" data-clear-button="false" data-append="Hz" type="text" >`,
+    template: `
+    <input id="val-33-input" data-role="input" data-clear-button="false" data-append="Hz" type="text" >`,
     utils: ``
   },
   34: {

index.js

@@ -3167,7 +3167,9 @@ if (isElectron()) {
       jogWindow = new BrowserWindow({
         // 1366 * 768 == minimum to cater for
         width: 1000,
+        minWidth: 1000,
         height: 850,
+        minHeight: 850,
         fullscreen: false,
         center: true,
         resizable: true,