Merge pull request #1495 from Taste62/master

Color Picker & Padding
mcallegari · Dec 23, 2023 · 4556d3c · 4556d3c
2 parents 1997745 + d3680fe
commit 4556d3c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/resources/rgbscripts/devtool.html b/resources/rgbscripts/devtool.html
@@ -130,11 +130,13 @@ <h2>Pixel colors</h2>
 <table>
  <tr>
   <td>Primary color (rrggbb)</td>
-  <td><input type="text" id="primaryColor" value="FF0000" pattern="[0-9A-Fa-f]{6}" size="6" onChange="devtool.onColorChange()" required /></td>
+  <td><input type="text" id="primaryColorText" value="FF0000" pattern="[0-9A-Fa-f]{6}" size="6" onInput="devtool.onColorTextChange()" required /></td>
+  <td><input type="color" id="primaryColorPicker" value="#FF0000" onInput="devtool.onPrimaryColorPickerChange()" required /></td>
  </tr>
  <tr id="secondaryColorChooser">
   <td>Secondary color (rrggbb, leave empty to disable)</td>
-  <td><INPUT TYPE="text" id="secondaryColor" value="" pattern="[0-9A-Fa-f]{6}" size="6" onChange="devtool.onColorChange()"/></td>
+  <td><input type="text" id="secondaryColorText" value="" pattern="[0-9A-Fa-f]{6}" size="6" onInput="devtool.onColorTextChange()"/></td>
+  <td><input type="color" id="secondaryColorPicker" value="#000000" onInput="devtool.onSecondaryColorPickerChange()" required /></td>
  </tr>
 </table>
 </form>

diff --git a/resources/rgbscripts/devtool/devtool.js b/resources/rgbscripts/devtool/devtool.js
@@ -211,12 +211,17 @@ devtool.initColorValues = function()
     if (primary === null || Number.isNaN(parseInt("0x" + primary, 16))) {
       primary = "ff0000";
     }
-    document.getElementById("primaryColor").value = primary;
+    primary = primary.padStart(6,"0");
+    document.getElementById("primaryColorText").value = primary;
+    document.getElementById("primaryColorPicker").value = "#" + primary;
     var secondary = localStorage.getItem("devtool.secondaryColor");
     if (secondary === null || secondary === "" || Number.isNaN(parseInt("0x" + secondary, 16))) {
-      document.getElementById("secondaryColor").value = "";
+      document.getElementById("secondaryColorText").value = "";
+      document.getElementById("secondaryColorPicker").value = "#000000";
     } else {
-      document.getElementById("secondaryColor").value = secondary;
+      secondary = secondary.padStart(6,"0");
+      document.getElementById("secondaryColorText").value = secondary;
+      document.getElementById("secondaryColorPicker").value =  "#" + secondary;
     }
 }
 
@@ -249,9 +254,9 @@ devtool.getRgbFromColorInt = function(color)
 
 devtool.getCurrentColorInt = function()
 {
-    var primaryColorInput = document.getElementById("primaryColor");
+    var primaryColorInput = document.getElementById("primaryColorText");
     var primaryColor = parseInt(primaryColorInput.value, 16);
-    var secondaryColorInput = document.getElementById("secondaryColor");
+    var secondaryColorInput = document.getElementById("secondaryColorText");
     var secondaryColor = parseInt(secondaryColorInput.value, 16);
 
     if (testAlgo.acceptColors === 0 || Number.isNaN(primaryColor)) {
@@ -341,19 +346,39 @@ devtool.onGridSizeUpdated = function()
     devtool.writeCurrentStep();
 }
 
-devtool.onColorChange = function()
+devtool.onColorTextChange = function()
 {
-    var primary = parseInt("0x" + document.getElementById("primaryColor").value).toString(16);
+    var primary = parseInt("0x" + document.getElementById("primaryColorText").value).toString(16);
     localStorage.setItem("devtool.primaryColor", primary);
-    var secondary = parseInt("0x" + document.getElementById("secondaryColor").value).toString(16);
+    var secondary = parseInt("0x" + document.getElementById("secondaryColorText").value).toString(16);
+    if(primary === "NaN"){
+      document.getElementById("primaryColorPicker").value = "#000000";
+    } else {
+      document.getElementById("primaryColorPicker").value = "#" + primary.padStart(6,"0");;
+    }
     if (secondary === "NaN") { // Evaluation of the string.
+      document.getElementById("secondaryColorPicker").value = "#000000";
       localStorage.setItem("devtool.secondaryColor", "");
     } else {
+      document.getElementById("secondaryColorPicker").value = "#" + secondary.padStart(6,"0");;
       localStorage.setItem("devtool.secondaryColor", secondary);
     }
+
     devtool.writeCurrentStep();
 }
 
+devtool.onPrimaryColorPickerChange = function()
+{
+    document.getElementById("primaryColorText").value = document.getElementById("primaryColorPicker").value.substring(1);
+    devtool.onColorTextChange();
+}
+
+devtool.onSecondaryColorPickerChange = function()
+{
+    document.getElementById("secondaryColorText").value = document.getElementById("secondaryColorPicker").value.substring(1);
+    devtool.onColorTextChange();
+}
+
 devtool.startTest = function(inc)
 {
     var speed = document.getElementById("speed").value;