From 55fd163388c2bdf440a721e861abcd2743f26739 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Tue, 27 Oct 2020 14:07:39 -0400
Subject: [PATCH] updated menu handler

---
 demo/browser.js            | 18 +++++++++---------
 demo/menu.js               |  9 +++++++--
 dist/human.esm-nobundle.js |  2 +-
 dist/human.esm.js          |  2 +-
 dist/human.js              |  2 +-
 dist/human.node.js         |  2 +-
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/demo/browser.js b/demo/browser.js
index 7b99587b..235e9ebd 100644
--- a/demo/browser.js
+++ b/demo/browser.js
@@ -321,15 +321,15 @@ function setupMenu() {
   menuFX.addHTML('<hr style="min-width: 200px; border-style: inset; border-color: dimgray">');
   menuFX.addLabel('Image Filters');
   menuFX.addBool('Enabled', config.filter, 'enabled');
-  menuFX.addRange('Image width', config.filter, 'width', 100, 3840, 10, (val) => config.filter.width = parseInt(val));
-  menuFX.addRange('Image height', config.filter, 'height', 100, 2160, 10, (val) => config.filter.height = parseInt(val));
-  menuFX.addRange('Brightness', config.filter, 'brightness', -1.0, 1.0, 0.05, (val) => config.filter.brightness = parseFloat(val));
-  menuFX.addRange('Contrast', config.filter, 'contrast', -1.0, 1.0, 0.05, (val) => config.filter.contrast = parseFloat(val));
-  menuFX.addRange('Sharpness', config.filter, 'sharpness', 0, 1.0, 0.05, (val) => config.filter.sharpness = parseFloat(val));
-  menuFX.addRange('Blur', config.filter, 'blur', 0, 20, 1, (val) => config.filter.blur = parseInt(val));
-  menuFX.addRange('Saturation', config.filter, 'saturation', -1.0, 1.0, 0.05, (val) => config.filter.saturation = parseFloat(val));
-  menuFX.addRange('Hue', config.filter, 'hue', 0, 360, 5, (val) => config.filter.hue = parseInt(val));
-  menuFX.addRange('Pixelate', config.filter, 'pixelate', 0, 32, 1, (val) => config.filter.pixelate = parseInt(val));
+  menuFX.addRange('Image width', config.filter, 'width', 100, 3840, 10);
+  menuFX.addRange('Image height', config.filter, 'height', 100, 2160, 10);
+  menuFX.addRange('Brightness', config.filter, 'brightness', -1.0, 1.0, 0.05);
+  menuFX.addRange('Contrast', config.filter, 'contrast', -1.0, 1.0, 0.05);
+  menuFX.addRange('Sharpness', config.filter, 'sharpness', 0, 1.0, 0.05);
+  menuFX.addRange('Blur', config.filter, 'blur', 0, 20, 1);
+  menuFX.addRange('Saturation', config.filter, 'saturation', -1.0, 1.0, 0.05);
+  menuFX.addRange('Hue', config.filter, 'hue', 0, 360, 5);
+  menuFX.addRange('Pixelate', config.filter, 'pixelate', 0, 32, 1);
   menuFX.addBool('Negative', config.filter, 'negative');
   menuFX.addBool('Sepia', config.filter, 'sepia');
   menuFX.addBool('Vintage', config.filter, 'vintage');
diff --git a/demo/menu.js b/demo/menu.js
index 493efc06..014521d9 100644
--- a/demo/menu.js
+++ b/demo/menu.js
@@ -133,10 +133,15 @@ class Menu {
   async addRange(title, object, variable, min, max, step, callback) {
     const el = document.createElement('div');
     el.className = 'menu-item';
-    el.innerHTML = `<input class="menu-range" type="range" id="${this.newID}" min="${min}" max="${max}" step="${step}" value="${object[variable]}">${title}`;
+    const arr = Array.isArray(variable);
+    el.innerHTML = `<input class="menu-range" type="range" id="${this.newID}" min=${min} max=${max} step=${step} value=${arr ? object[variable[0]] : object[variable]}>${title}`;
     this.container.appendChild(el);
     el.addEventListener('change', (evt) => {
-      object[variable] = evt.target.value;
+      const int = parseInt(evt.target.value) === parseFloat(evt.target.value);
+      const val = Array.isArray(variable) ? variable : [variable];
+      for (const item of val) {
+        object[item] = int ? parseInt(evt.target.value) : parseFloat(evt.target.value);
+      }
       evt.target.setAttribute('value', evt.target.value);
       if (callback) callback(evt.target.value);
     });
diff --git a/dist/human.esm-nobundle.js b/dist/human.esm-nobundle.js
index 95629e5c..fd1067a3 100644
--- a/dist/human.esm-nobundle.js
+++ b/dist/human.esm-nobundle.js
@@ -5777,7 +5777,7 @@ var require_config = __commonJS((exports) => {
 var require_package = __commonJS((exports, module) => {
   module.exports = {
     name: "@vladmandic/human",
-    version: "0.4.6",
+    version: "0.4.7",
     description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
     sideEffects: false,
     main: "dist/human.node.js",
diff --git a/dist/human.esm.js b/dist/human.esm.js
index 74d2e5c9..d8e562d4 100644
--- a/dist/human.esm.js
+++ b/dist/human.esm.js
@@ -71039,7 +71039,7 @@ var require_config = __commonJS((exports) => {
 var require_package = __commonJS((exports, module) => {
   module.exports = {
     name: "@vladmandic/human",
-    version: "0.4.6",
+    version: "0.4.7",
     description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
     sideEffects: false,
     main: "dist/human.node.js",
diff --git a/dist/human.js b/dist/human.js
index 0f663ae8..4e1de166 100644
--- a/dist/human.js
+++ b/dist/human.js
@@ -71040,7 +71040,7 @@ var Human = (() => {
   var require_package = __commonJS((exports, module) => {
     module.exports = {
       name: "@vladmandic/human",
-      version: "0.4.6",
+      version: "0.4.7",
       description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
       sideEffects: false,
       main: "dist/human.node.js",
diff --git a/dist/human.node.js b/dist/human.node.js
index 0d3d4c24..1d8599f8 100644
--- a/dist/human.node.js
+++ b/dist/human.node.js
@@ -5777,7 +5777,7 @@ var require_config = __commonJS((exports2) => {
 var require_package = __commonJS((exports2, module2) => {
   module2.exports = {
     name: "@vladmandic/human",
-    version: "0.4.6",
+    version: "0.4.7",
     description: "human: 3D Face Detection, Iris Tracking and Age & Gender Prediction",
     sideEffects: false,
     main: "dist/human.node.js",