From 47a17adcdf05602097ea410c1cbc7fe501b70b45 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Mon, 8 Feb 2021 13:07:49 -0500
Subject: [PATCH] menu fixes

---
 demo/browser.js                       | 44 +++++++++++++++------------
 demo/index.html                       |  4 +--
 manifest.json => manifest.webmanifest |  0
 3 files changed, 27 insertions(+), 21 deletions(-)
 rename manifest.json => manifest.webmanifest (100%)

diff --git a/demo/browser.js b/demo/browser.js
index 862c48ee..24fd3477 100644
--- a/demo/browser.js
+++ b/demo/browser.js
@@ -415,8 +415,14 @@ function setupMenu() {
   menu.display = new Menu(document.body, '', { top: `${document.getElementById('menubar').offsetHeight}px`, left: x[0] });
   menu.display.addBool('perf monitor', ui, 'bench', (val) => ui.bench = val);
   menu.display.addBool('buffered output', ui, 'buffered', (val) => ui.buffered = val);
-  menu.display.addBool('crop & scale', ui, 'crop', () => setupCamera());
-  menu.display.addBool('camera facing', ui, 'facing', () => setupCamera());
+  menu.display.addBool('crop & scale', ui, 'crop', (val) => {
+    ui.crop = val;
+    setupCamera();
+  });
+  menu.display.addBool('camera facing', ui, 'facing', (val) => {
+    ui.facing = val;
+    setupCamera();
+  });
   menu.display.addHTML('<hr style="border-style: inset; border-color: dimgray">');
   menu.display.addBool('use 3D depth', ui, 'useDepth');
   menu.display.addBool('draw boxes', ui, 'drawBoxes');
@@ -425,7 +431,7 @@ function setupMenu() {
   menu.display.addBool('draw points', ui, 'drawPoints');
 
   menu.image = new Menu(document.body, '', { top: `${document.getElementById('menubar').offsetHeight}px`, left: x[1] });
-  menu.image.addBool('enabled', human.config.filter, 'enabled');
+  menu.image.addBool('enabled', human.config.filter, 'enabled', (val) => human.config.filter.enabled = val);
   ui.menuWidth = menu.image.addRange('image width', human.config.filter, 'width', 0, 3840, 10, (val) => human.config.filter.width = parseInt(val));
   ui.menuHeight = menu.image.addRange('image height', human.config.filter, 'height', 0, 2160, 10, (val) => human.config.filter.height = parseInt(val));
   menu.image.addHTML('<hr style="border-style: inset; border-color: dimgray">');
@@ -437,12 +443,12 @@ function setupMenu() {
   menu.image.addRange('hue', human.config.filter, 'hue', 0, 360, 5, (val) => human.config.filter.hue = parseInt(val));
   menu.image.addRange('pixelate', human.config.filter, 'pixelate', 0, 32, 1, (val) => human.config.filter.pixelate = parseInt(val));
   menu.image.addHTML('<hr style="border-style: inset; border-color: dimgray">');
-  menu.image.addBool('negative', human.config.filter, 'negative');
-  menu.image.addBool('sepia', human.config.filter, 'sepia');
-  menu.image.addBool('vintage', human.config.filter, 'vintage');
-  menu.image.addBool('kodachrome', human.config.filter, 'kodachrome');
-  menu.image.addBool('technicolor', human.config.filter, 'technicolor');
-  menu.image.addBool('polaroid', human.config.filter, 'polaroid');
+  menu.image.addBool('negative', human.config.filter, 'negative', (val) => human.config.filter.negative = val);
+  menu.image.addBool('sepia', human.config.filter, 'sepia', (val) => human.config.filter.sepia = val);
+  menu.image.addBool('vintage', human.config.filter, 'vintage', (val) => human.config.filter.vintage = val);
+  menu.image.addBool('kodachrome', human.config.filter, 'kodachrome', (val) => human.config.filter.kodachrome = val);
+  menu.image.addBool('technicolor', human.config.filter, 'technicolor', (val) => human.config.filter.technicolor = val);
+  menu.image.addBool('polaroid', human.config.filter, 'polaroid', (val) => human.config.filter.polaroid = val);
 
   menu.process = new Menu(document.body, '', { top: `${document.getElementById('menubar').offsetHeight}px`, left: x[2] });
   menu.process.addList('backend', ['cpu', 'webgl', 'wasm', 'humangl'], human.config.backend, (val) => human.config.backend = val);
@@ -488,21 +494,21 @@ function setupMenu() {
   menu.process.addChart('FPS', 'FPS');
 
   menu.models = new Menu(document.body, '', { top: `${document.getElementById('menubar').offsetHeight}px`, left: x[3] });
-  menu.models.addBool('face detect', human.config.face, 'enabled');
-  menu.models.addBool('face mesh', human.config.face.mesh, 'enabled');
-  menu.models.addBool('face iris', human.config.face.iris, 'enabled');
-  menu.models.addBool('face age', human.config.face.age, 'enabled');
-  menu.models.addBool('face gender', human.config.face.gender, 'enabled');
-  menu.models.addBool('face emotion', human.config.face.emotion, 'enabled');
+  menu.models.addBool('face detect', human.config.face, 'enabled', (val) => human.config.face.enabled = val);
+  menu.models.addBool('face mesh', human.config.face.mesh, 'enabled', (val) => human.config.face.mesh.enabled = val);
+  menu.models.addBool('face iris', human.config.face.iris, 'enabled', (val) => human.config.face.iris.enabled = val);
+  menu.models.addBool('face age', human.config.face.age, 'enabled', (val) => human.config.face.age.enabled = val);
+  menu.models.addBool('face gender', human.config.face.gender, 'enabled', (val) => human.config.face.gender.enabled = val);
+  menu.models.addBool('face emotion', human.config.face.emotion, 'enabled', (val) => human.config.face.emotion.enabled = val);
   menu.models.addHTML('<hr style="border-style: inset; border-color: dimgray">');
-  menu.models.addBool('body pose', human.config.body, 'enabled');
-  menu.models.addBool('hand pose', human.config.hand, 'enabled');
+  menu.models.addBool('body pose', human.config.body, 'enabled', (val) => human.config.body.enabled = val);
+  menu.models.addBool('hand pose', human.config.hand, 'enabled', (val) => human.config.hand.enabled = val);
   menu.models.addHTML('<hr style="border-style: inset; border-color: dimgray">');
-  menu.models.addBool('gestures', human.config.gesture, 'enabled');
+  menu.models.addBool('gestures', human.config.gesture, 'enabled', (val) => human.config.gesture.enabled = val);
   menu.models.addHTML('<hr style="border-style: inset; border-color: dimgray">');
   menu.models.addBool('face compare', human.config.face.embedding, 'enabled', (val) => {
-    original = null;
     human.config.face.embedding.enabled = val;
+    original = null;
   });
 
   document.getElementById('btnDisplay').addEventListener('click', (evt) => menu.display.toggle(evt));
diff --git a/demo/index.html b/demo/index.html
index f43f3dc6..c8f4ca29 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
   <title>Human</title>
+  <meta charset="utf-8">
   <meta http-equiv="content-type">
   <meta content="text/html">
-  <meta charset="UTF-8">
   <meta name="description" content="Human: 3D Face Detection, Body Pose, Hand & Finger Tracking, Iris Tracking, Age & Gender Prediction, Emotion Prediction & Gesture Recognition; Author: Vladimir Mandic <https://github.com/vladmandic>">
   <meta name="viewport" content="width=device-width, initial-scale=0.6, minimum-scale=0.3, maximum-scale=3.0, shrink-to-fit=yes, user-scalable=yes">
   <meta name="theme-color" content="#000000"/>
   <meta name="application-name" content="Human">
   <meta name="msapplication-tooltip" content="Human: AI-powered 3D Human Detection">
-  <link rel="manifest" href="./manifest.json">
+  <link rel="manifest" href="./manifest.webmanifest">
   <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
   <link rel="apple-touch-icon" href="../assets/icon.png">
     <!-- load compiled demo js -->
diff --git a/manifest.json b/manifest.webmanifest
similarity index 100%
rename from manifest.json
rename to manifest.webmanifest