(#61) Add support for param labels

tsoding · Jun 7, 2021 · 4431f09 · 4431f09
1 parent a2560d4
commit 4431f09
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/js/filters.js b/js/filters.js
@@ -7,20 +7,23 @@ const filters = {
         // TODO(#62): when you have too many params the UI gets really cluttered
         "params": {
             "interval": {
+                "label": "Interval",
                 "type": "float",
                 "init": 0.85,
                 "min": 0.01,
                 "max": 2.00,
                 "step": 0.01,
             },
             "ground": {
+                "label": "Ground",
                 "type": "float",
                 "init": 0.5,
                 "min": -1.0,
                 "max": 1.0,
                 "step": 0.01,
             },
             "scale": {
+                "label": "Scale",
                 "type": "float",
                 "init": 0.40,
                 "min": 0.0,
@@ -30,13 +33,15 @@ const filters = {
             // TODO(#63): jump_height in the "Hop" filter does not make any sense
             // If it's bigger the emote should jump higher. Right now it is the other way around.
             "jump_height": {
+                "label": "Jump Height",
                 "type": "float",
                 "init": 4.0,
                 "min": 1.0,
                 "max": 10.0,
                 "step": 0.01,
             },
             "hops": {
+                "label": "Hops Count",
                 "type": "float",
                 "init": 2.0,
                 "min": 1.0,

diff --git a/js/index.js b/js/index.js
@@ -118,8 +118,13 @@ function loadFilterProgram(gl, filter, vertexAttribs) {
                 paramsPanel.dispatchEvent(new CustomEvent("paramsChanged"));
             };
 
+            let label = paramName;
+            if (filter.params[paramName].label) {
+                label = filter.params[paramName].label;
+            }
+
             paramsPanel.appendChild(div(
-                span(`${paramName}: `), valuePreview,
+                span(`${label}: `), valuePreview,
                 div(valueInput),
             ));
         } break;