update human.draw helper methods

Change-Log.md

@@ -1,6 +1,6 @@
 # @vladmandic/human  
 
-Version: **0.40.2**  
+Version: **0.40.3**  
 Description: **Human: AI-powered 3D Face Detection, Face Embedding & Recognition, Body Pose Tracking, Hand & Finger Tracking, Iris Analysis, Age & Gender & Emotion Prediction & Gesture Recognition**  
 
 Author: **Vladimir Mandic <mandic00@live.com>**  
@@ -11,6 +11,13 @@ Repository: **<git+https://github.com/vladmandic/human.git>**
 
 ### **HEAD -> main** 2021/03/05 mandic00@live.com
 
+- fix demo
+
+### **0.40.3** 2021/03/05 mandic00@live.com
+
+
+### **0.40.2** 2021/03/05 mandic00@live.com
+
 - added blazepose-upper
 
 ### **0.40.1** 2021/03/04 mandic00@live.com

Usage.md

@@ -42,6 +42,71 @@ Additionally, `Human` library exposes several objects and methods:
                                             // face.embedding module
 ```
 
+Plus additional helper functions inside `human.draw`:
+
+```js
+  human.draw.canvas(inCanvas, outCanvas)     // simply copies one canvas to another,  
+                                             // can be used to draw results.canvas to user canvas on page
+  human.draw.face(canvas, results.face)      // draw face detection results to canvas
+  human.draw.body(canvas, results.body)      // draw body detection results to canvas
+  human.draw.hand(canvas, result.hand)       // draw hand detection results to canvas
+  human.draw.gesture(canvas, result.gesture) // draw detected gesture results to canvas
+```
+
+Style of drawing is configurable via `human.draw.options` object:
+
+```js
+  color: 'rgba(173, 216, 230, 0.3)',    // 'lightblue' with light alpha channel
+  labelColor: 'rgba(173, 216, 230, 1)', // 'lightblue' with dark alpha channel
+  shadowColor: 'black',                 // draw shadows underneath labels, set to blank to disable
+  font: 'small-caps 16px "Segoe UI"',   // font used for labels
+  lineHeight: 20,                       // spacing between lines for multi-line labels
+  lineWidth: 6,                         // line width of drawn polygons
+  drawLabels: true,                     // draw labels with detection results
+  drawBoxes: true,                      // draw boxes around detected faces
+  roundRect: 8,                         // should boxes have round corners and rounding value
+  drawPoints: true,                     // draw detected points in all objects
+  pointSize: 2,                         // size of points
+  drawPolygons: true,                   // draw polygons such as body and face mesh
+  fillPolygons: true,                   // fill polygons in face mesh
+  useDepth: true,                       // use z-axis value when available to determine color shade
+  bufferedOutput: false,                // experimental: buffer and interpolate results between frames
+```
+
+<br>
+
+Example simple app that uses Human to process video input and  
+draw output on screen using internal draw helper functions
+
+```js
+import Human from '@vladmandic/human';
+
+// create instance of human with simple configuration using default values
+const config = { backend: 'wasm' };
+const human = new Human(config);
+
+function detectVideo() {
+  // select input HTMLVideoElement and output HTMLCanvasElement from page
+  const inputVideo = document.getElementById('video-id');
+  const outputCanvas = document.getElementById('canvas-id');
+  // perform processing using default configuration
+  human.detect(inputVideo).then((result) => {
+    // result object will contain detected details as well as the processed canvas itself
+    // first draw processed frame on canvas
+    human.draw.canvas(result.canvas, outputCanvas);
+    // then draw results on the same canvas
+    human.draw.face(outputCanvas, result.face);
+    human.draw.body(outputCanvas, result.body);
+    human.draw.hand(outputCanvas, result.hand);
+    human.draw.gesture(outputCanvas, result.gesture);
+    // loop immediate to next frame
+    requestAnimationFrame(detectVideo);
+  });
+}
+
+detectVideo();
+```
+
 <br>
 
 Note that when using `Human` library in `NodeJS`, you must load and parse the image *before* you pass it for detection and dispose it afterwards