proj 19: add UI indicator for saturation and pixelation.

Author: jdstein1

19--Webcam_Fun/css/controls.css

@@ -35,7 +35,7 @@
 
 #ctrl_fx .ctrl_group .rgb label span {display: none;}
 
-.max label span .value, .min label span .value {
+label span .value {
   padding:0.25em 0.5rem;
   color:white;
   line-height:1.4;

19--Webcam_Fun/index-jds.html

@@ -163,7 +163,7 @@ <h1>webcam fun</h1>
           <tr>
             <td>
               <label>
-                <span>saturate: <code class="value">0</code></span>
+                <span>saturation (%): <code class="value">0</code></span>
                 <input id="saturate" type="range" class="input-range" value=100 min=0 max=200>
               </label>
             </td>

19--Webcam_Fun/js/mirror.js

@@ -31,6 +31,10 @@ function fMirror(pixels) {
   // }
 
 
+/**
+ * https://jsbin.com/gufizu/edit?html,js,console
+ */
+
 /* THE FOLLOWING RESULTS IN AN ERROR.  SEE BELOW. */
 var arr = pixels.data;
 // console.log(arr);

19--Webcam_Fun/js/scripts.js

@@ -39,7 +39,7 @@ const selectSplit = document.querySelector('#split');
 
 /* video croma key controls */
 // const ctrlChromaKey = document.querySelector('#ctrl_fx_chroma');
-const inputAllChromaKey = document.querySelectorAll('#ctrl_fx_chroma input');
+const inputAllChromaKey = document.querySelectorAll('#ctrl_fx_chroma .input-range');
 const rgbMin = document.querySelector('.min .rgb');
 const rgbMax = document.querySelector('.max .rgb');
 
@@ -128,6 +128,39 @@ function fChromaKeyInputs (group) {
 }
 fChromaKeyInputs(inputAllChromaKey);
 
+/**
+ * set background color of chroma range input labels.  also put value number 
+ * in the UI.
+ * @return {[type]} [description]
+ */
+function fUpdateInput (input) {
+  console.group('START fUpdateInput: ', input);
+  console.log('input.value: ', input.value);
+  console.log('input.min: ', input.min);
+  console.log('input.max: ', input.max);
+  console.log('input.diff: ', Math.abs(input.min-input.max));
+  const valRange = Math.abs(input.min-input.max);
+  if (input.type === 'range'||input.type === 'number') {
+    const label = input.parentElement;
+    label.querySelector("span").querySelector("code").innerHTML = input.value;
+    // const cell = label.parentElement;
+    let bg, br;
+    if (input.id==='saturate') {
+      bg = `hsla(0,${input.value/2}%,50%,1)`;
+    } else if (input.id==='pixelate') {
+      bg = `#808080`;
+      br = `${1/input.value}rem`;
+    }
+    label.querySelector("code").style.backgroundColor = bg;
+    label.querySelector("code").style.borderRadius = br;
+    // label.querySelector("input").style.backgroundColor = bg;
+  }
+  console.groupEnd();
+}
+inputAllRange.forEach((input)=>{
+  fUpdateInput(input);
+});
+
 /**
  * [toggleFxControls description]
  * @return {[type]}   [description]
@@ -313,9 +346,7 @@ if (navigator.mediaDevices) {
     for (var i = 0; i < randoms.length; i++) {
       randoms[i] *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
     }
-    console.group('randoms: ', randoms);
-    // console.log('randoms: ', randoms);
-    console.groupEnd();
+    console.log('randoms: ', randoms);
 
     /* values for F/X function */
     console.group('selectSplit.value: ', selectSplit.value);
@@ -598,23 +629,32 @@ if (navigator.mediaDevices) {
   /* listen for change on deeper F/X select/option */
   inputAllSelect.forEach(btn => {
     btn.addEventListener('change',(e)=>{
-      console.log('inputAllSelect: ',e.target);
+      // console.log('inputAllSelect: ',e.target);
       startStream();
     })
   });
 
-  inputAllChromaKey.forEach(input => {
-    input.addEventListener('change',(e)=>{
-      fChromaKeyInputs(inputAllChromaKey);
-    })
+  inputSaturate.addEventListener('change',(e)=>{
+      fUpdateInput(inputSaturate);
+  });
+
+  inputPixelate.addEventListener('change',(e)=>{
+      fUpdateInput(inputPixelate);
   });
 
   inputAllChromaKey.forEach(input => {
-    input.addEventListener('mousemove',(e)=>{
+    input.addEventListener('change',(e)=>{
       fChromaKeyInputs(inputAllChromaKey);
     })
   });
 
+  /* update UI on mousemove */
+  // inputAllChromaKey.forEach(input => {
+  //   input.addEventListener('mousemove',(e)=>{
+  //     fChromaKeyInputs(inputAllChromaKey);
+  //   })
+  // });
+
   let flagSaturate = false;
   inputSaturate.addEventListener('change',startStream);
   // inputSaturate.addEventListener('mousedown',(e)=>{
@@ -647,6 +687,6 @@ window.addEventListener('resize', fMediaQueries);
 
 /* fake UI clicks to open controls */
 startStream();
-selectFx.selectedIndex = 4;
+selectFx.selectedIndex = 5;
 toggleFxControls();