proj 19: display chroma key value next to input.

Author: jdstein1

19--Webcam_Fun/css/controls.css

@@ -72,18 +72,18 @@
 #table-chroma .red input {
   /* background-color:#f00; */
 }
-#table-chroma .red:before {
-  /* content:'R'; *//* color:#f00; */
+#table-chroma .red label:before {
+  content:'R';/* color:#f00; */
 }
 #table-chroma .green input {
   /* background-color:#0f0; */
 }
-#table-chroma .green:before {
-  /* content:'G'; *//* color:#0f0; */
+#table-chroma .green label:before {
+  content:'G';/* color:#0f0; */
 }
 #table-chroma .blue input {
   /* background-color:#00f; */
 }
-#table-chroma .blue:before {
-  /* content:'B'; *//* color:#00f; */
+#table-chroma .blue label:before {
+  content:'B';/* color:#00f; */
 }

19--Webcam_Fun/index-jds.html

@@ -88,47 +88,53 @@ <h1>webcam fun</h1>
           <tr>
             <td class="red min">
               <label for="rmin">
-                <span>dark:</span>
+                <span>min: <code>0</code></span>
                 <input type="range" value=0 min=0 max=255 name="rmin">
               </label>
             </td>
             <td class="green min">
               <label for="gmin">
-                <span>dark:</span>
+                <span>min: <code>0</code></span>
                 <input type="range" value=0 min=0 max=255 name="gmin">
               </label>
             </td>
             <td class="blue min">
               <label for="bmin">
-                <span>dark:</span>
+                <span>min: <code>0</code></span>
                 <input type="range" value=0 min=0 max=255 name="bmin">
               </label>
             </td>
             <td class="rgb min">
-              <div id="">this is the min color</div>
+              <label id="">
+                <span>min color</span>
+                <!-- <input type="color"> -->
+              </label>
             </td>
           </tr>
           <tr>
             <td class="red max">
               <label for="rmax">
-                <span>light:</span>
+                <span>max: <code>0</code></span>
                 <input type="range" value=0 min=0 max=255 name="rmax">
               </label>
             </td>
             <td class="green max">
               <label for="gmax">
-                <span>light:</span>
+                <span>max: <code>0</code></span>
                 <input type="range" value=0 min=0 max=255 name="gmax">
               </label>
             </td>
             <td class="blue max">
               <label for="bmax">
-                <span>light:</span>
+                <span>max: <code>0</code></span>
                 <input type="range" value=0 min=0 max=255 name="bmax">
               </label>
             </td>
             <td class="rgb max">
-              <div id="">this is the max color</div>
+              <label id="">
+                <span>max color</span>
+                <!-- <input type="color"> -->
+              </label>
             </td>
           </tr>
           <tr>

19--Webcam_Fun/js/scripts.js

@@ -37,7 +37,11 @@ const selectSplit = document.querySelector('#split');
 
 /* video croma key controls */
 const ctrlChroma = document.querySelector('#table-chroma');
-const inputsChroma = document.querySelectorAll('#table-chroma input')
+const inputsChroma = document.querySelectorAll('#table-chroma input[type=range]')
+const rgbMin = document.querySelector('.rgb.min label');
+// console.log(rgbMin);
+const rgbMax = document.querySelector('.rgb.max label');
+// console.log(rgbMax);
 
 /* buttons */
 const btnsApply = document.querySelectorAll('.btn_apply');
@@ -72,27 +76,33 @@ hide(video);
 document.querySelector('.ctrl_strip label span').innerHTML = `Limit? (${stripMax})`;
 function fChromaInputs () {
   console.log('START fChromaInputs');
-  inputsChroma.forEach(range => {
-    const label = range.parentElement;
+  const levels = {};
+  inputsChroma.forEach((input) => {
+    levels[input.name] = input.value;
+    const label = input.parentElement;
+    label.querySelector("span").querySelector("code").innerHTML = input.value;
     const cell = label.parentElement;
     let bg;
-    console.log(cell.classList[0]+' '+cell.classList[1]+': '+range.value);
+    // console.log(cell.classList[0]+' '+cell.classList[1]+': '+input.value);
     if (cell.classList.contains("red")) {
-      bg = `rgb(${range.value},0,0)`;
+      bg = `rgb(${input.value},0,0)`;
     } else if (cell.classList.contains("green")) {
-      bg = `rgb(0,${range.value},0)`;
+      bg = `rgb(0,${input.value},0)`;
     } else {
-      bg = `rgb(0,0,${range.value})`;
+      bg = `rgb(0,0,${input.value})`;
     }
     label.style.backgroundColor = bg;
-    if (range.value < 200) {
+    if (input.value < 204) {
       label.style.color = "white";
     } else {
-      label.style.color = "black";
+      label.style.color = "white";
     }
     // e.target.parentElement.style.backgroundColor = `rgb(0,${e.target.value},0)`;
     // e.target.parentElement.innerHTML = `${e.target.value}`;
   });
+  // console.log('levels: ', levels);
+  rgbMin.style.backgroundColor = `rgb(${levels["rmin"]},${levels["gmin"]},${levels["bmin"]})`;
+  rgbMax.style.backgroundColor = `rgb(${levels["rmax"]},${levels["gmax"]},${levels["bmax"]})`;
 }
 fChromaInputs();
 
@@ -486,8 +496,8 @@ if (navigator.mediaDevices) {
     })
   });
 
-  inputsChroma.forEach(range => {
-    range.addEventListener('change',(e)=>{
+  inputsChroma.forEach(input => {
+    input.addEventListener('change',(e)=>{
       fChromaInputs();
     })
   });