Add a couple different parameter types.

fraction_t: semantically represents a value 0.0-1.0. Internally this is
represented as a uint8 with 255 being 1 and 0 being 0.

ratio_t: represents a fracitonal number that can be larger than 1.0.

1 files changed, 36 insertions, 1 deletions

diff --git a/controller_webpage/index.html b/controller_webpage/index.html
index 1a308eb..9754759 100644
--- a/controller_webpage/index.html
+++ b/controller_webpage/index.html
@@ -181,6 +181,8 @@
       params: {},
     };
 
+    const fmt = (v) => Number.parseFloat(v).toFixed(2);
+
     function setStatus(text) {
       document.getElementById("status").textContent = text || "";
     }
@@ -251,6 +253,37 @@
 
         field.appendChild(colorInput);
         field.appendChild(textInput);
+      } else if (value.type === "fraction" || value.type === "ratio") {
+        const input = document.createElement("input");
+        input.type = "number";
+        input.step = "0.01";
+        input.min = "0";
+        if (value.type === "fraction") {
+          input.max = "1";
+        }
+        input.id = attr;
+        input.value = fmt(value.value);
+        field.appendChild(input);
+
+        const actions = document.createElement("div");
+        actions.className = "actions";
+
+        const setBtn = document.createElement("button");
+        setBtn.textContent = "Set";
+        setBtn.onclick = () => sendRequest(attr, "set", fmt(input.value));
+        actions.appendChild(setBtn);
+
+        const incBtn = document.createElement("button");
+        incBtn.textContent = "+";
+        incBtn.onclick = () => sendRequest(attr, "add", input.step || "0.01");
+        actions.appendChild(incBtn);
+
+        const decBtn = document.createElement("button");
+        decBtn.textContent = "−";
+        decBtn.onclick = () => sendRequest(attr, "sub", input.step || "0.01");
+        actions.appendChild(decBtn);
+
+        field.appendChild(actions);
       } else {
         const input = document.createElement("input");
         input.type = "number";
@@ -318,7 +351,9 @@
           } else {
             const newVal = value.type === "color"
               ? (value.value.startsWith("#") ? value.value : `#${value.value}`)
-              : value.value;
+              : (value.type === "fraction" || value.type === "ratio")
+                  ? fmt(value.value)
+                  : value.value;
             el.value = newVal;
             if (value.type === "color" && el.nextElementSibling) {
               el.nextElementSibling.value = newVal;