proj 19: work on modifying canvas dimensions to not distort video.

jdstein1 · jdstein1 · commit 16a271c44569 · 2017-01-31T14:13:38.000-06:00
diff --git a/19--Webcam_Fun/css/controls.css b/19--Webcam_Fun/css/controls.css
@@ -1,15 +1,3 @@
-.ctrls fieldset {
-  color:black;
-  border-color:transparent;
-  background-color:rgba(0,0,0,0.75);
-  box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
-}
-.ctrls legend {
-  color:rgb(255,255,255);
-  background-color:rgba(0,0,0,0);
-  /* box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5); */
-}
-
 .ctrl_fx .ctrl_group label {
   width:100%;
   background-color:rgb(204,204,204);
@@ -35,7 +23,8 @@
 
 #ctrl_fx .ctrl_group .rgb label span {display: none;}
 
-label span .value {
+.ctrls legend .value,
+.ctrls label .value {
   padding:0.25em 0.5rem;
   color:white;
   line-height:1.4;
@@ -51,3 +40,6 @@ label span .value {
   font-size: 2rem;
 } */
 /* .rgb:before {content:"=";} */
+
+.setting {float:right; width:auto; color:black;}
+.setting span {font-size: 0.8rem;}
diff --git a/19--Webcam_Fun/css/style.css b/19--Webcam_Fun/css/style.css
@@ -22,7 +22,7 @@ h3,
 h4,
 h5,
 h6 {}
-/* code {font-size: 1.5em;} */
+code {font-size: 1.5em;}
 table {
   width:100%;
   border-collapse:separate;
@@ -71,7 +71,8 @@ fieldset {
 }
 legend {
   font-weight:900;
-  margin-bottom:0.25rem;
+  margin:0;
+  padding:0;
   line-height:1;
   width: 100%;
 }
diff --git a/19--Webcam_Fun/css/theme.css b/19--Webcam_Fun/css/theme.css
@@ -0,0 +1,27 @@
+/* theme styles */
+.ctrls fieldset {
+  color:black;
+  border-color:transparent;
+  background-color:rgba(127,127,127,0.5);
+  box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
+}
+.ctrls legend {
+  position: relative;
+  top:1.75em;
+  padding: 0.25em 0;
+  margin-bottom: 1.5em;
+  font-weight:900;
+  height:3em;
+  color: rgb(255,255,255);
+  background-color: rgba(0,0,0,0);
+}
+.ctrls legend .value,
+.ctrls label .value {
+  border-radius:1rem;
+  color:rgb(255,255,255);
+  background-color:rgba(0,0,0,1);
+  box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
+}
+.input-range {}
+.input-select {}
+.input-toggle {}
diff --git a/19--Webcam_Fun/index-jds.html b/19--Webcam_Fun/index-jds.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="css/controls.css">
   <!-- <link rel="stylesheet" href="css/test.css"> -->
   <!-- <link rel="stylesheet" href="css/mq.css"> -->
+  <link rel="stylesheet" href="css/theme.css">
 </head>
 <body>
 
@@ -21,11 +22,11 @@ <h1>webcam fun</h1>
       <fieldset id="ctrl_camera">
         <legend>cam</legend>
         <button class="btn_on status success">On</button>
-        <button class="btn_off status error disabled" disabled>Off</button>
+        <button class="btn_off status error">Off</button>
 
         <!-- convert on/off buttons into checkbox toggle -->
         <!-- <label class="" for="cam">
-          <input type="checkbox" id="cam" class="">
+          <input type="checkbox" id="cam" class="input-toggle">
           <span class="label">On?</span>
         </label> -->
 
@@ -42,9 +43,9 @@ <h1>webcam fun</h1>
             <option value="Pixelate">Pixelate</option>
           </select>
           <!-- add checkbox toggle for mirror effect -->
-          <label class="" for="mirror" style="float:right; width:auto; color:black;">
-            <input type="checkbox" id="mirror" class="">
-            <span class="label">Mirror?</span>
+          <label class="setting" for="mirror" style="">
+            <input type="checkbox" id="mirror" class="input-toggle" checked>
+            <span class="label">Mirror</span>
           </label>
         </legend>
         <div class="alert info" id="msg_cam">
@@ -190,11 +191,12 @@ <h1>webcam fun</h1>
         </table>
       </fieldset>
       <fieldset id="ctrl_strip">
-        <legend>snaps</legend>
-        <label class="" for="limit">
-          <input type="checkbox" id="limit" class="" checked>
-          <span class="label">Limit?</span>
+        <legend>snaps <code class="value">0</code>
+        <label class="setting" for="limit" style="">
+          <input type="checkbox" id="limit"  class="input-toggle" checked>
+          <span class="label">Limit <code class="value">0</code></span>
         </label>
+        </legend>
         <button class="btn_snap status info disabled" disabled>Snap</button>
         <button class="btn_clear disabled" disabled>Clear</button>
       </fieldset>
diff --git a/19--Webcam_Fun/js/scripts.js b/19--Webcam_Fun/js/scripts.js
@@ -80,9 +80,11 @@ const constraints = {audio: false, video: true};
  */
 
 hide(video);
+show(btnOn);
+hide(btnOff);
 // hide(selectFx);
 // selectFx.disabled = true;
-document.querySelector('#ctrl_strip label span').innerHTML = `Limit? (${stripMax})`;
+document.querySelector('#ctrl_strip label span .value').innerHTML = `${stripMax}`;
 
 /**
  * FUNCTIONS
@@ -100,7 +102,7 @@ function fChromaKeyInputs (group) {
     if (input.type === 'range'||input.type === 'number') {
       levels[input.name] = input.value;
       const label = input.parentElement;
-      label.querySelector("span").querySelector("code").innerHTML = input.value;
+      label.querySelector("span .value").innerHTML = input.value;
       const cell = label.parentElement;
       let bg;
       // console.log(cell.classList[0]+' '+cell.classList[1]+': '+input.value);
@@ -151,7 +153,7 @@ function fUpdateInput (input) {
       bg = `#808080`;
       br = `${1/input.value}rem`;
     } else {
-      console.error(' NOT saturate OR pixelate!');
+      console.warn(' NOT saturate OR pixelate!');
     }
     label.querySelector("code").style.backgroundColor = bg;
     label.querySelector("code").style.borderRadius = br;
@@ -163,6 +165,18 @@ inputAllRange.forEach((input)=>{
   fUpdateInput(input);
 });
 
+
+function fMirror () {
+  if (mirror.checked) {
+    console.log('FLIP IT');
+    canvas.style.transform = 'scale(-1,1)';
+  } else {
+    console.log('DON\'T FLIP IT');
+    canvas.style.transform = 'scale(1,1)';
+  }
+}
+fMirror();
+
 /**
  * [toggleFxControls description]
  * @return {[type]}   [description]
@@ -201,7 +215,7 @@ function fMediaQueries () {
       /* switch input type between 'number'/'range' based on window size. */
       input.type = window.innerWidth<800 ? 'number' : 'range';
       /* show/hide color swatch based on window size (to match input type). */
-      input.parentElement.querySelector("span code").style.display = window.innerWidth<800 ? 'none' : 'inline';
+      input.parentElement.querySelector("span .value").style.display = window.innerWidth<800 ? 'none' : 'inline';
     }
       /* show/hide min rgb color label text based on window size. */
       // rgbMin.querySelector("span").style.display = window.innerWidth<800 ? 'none' : 'inline';
@@ -259,7 +273,8 @@ if (navigator.mediaDevices) {
         /* reset & enable the F/X select/option */
         // toggleButton(selectFx,'on');
 
-        toggleButton(btnOff,'on');
+        hide(btnOn);
+        show(btnOff);
         toggleButton(btnSnap,'on');
 
       } else {
@@ -275,7 +290,8 @@ if (navigator.mediaDevices) {
         /* reset & disable the F/X select/option */
         // toggleButton(selectFx,'off');
 
-        toggleButton(btnOff,'off');
+        show(btnOn);
+        hide(btnOff);
         toggleButton(btnSnap,'off');
 
         toggleFxControls();
@@ -308,37 +324,40 @@ if (navigator.mediaDevices) {
     const vRatio = vWidth/vHeight;
     console.log('vRatio: ', vRatio);
 
-    const wWidth = window.innerWidth;
-    const wHeight = wWidth*vRatio;
-    // const wHeight = window.innerHeight;
+    let wWidth = window.innerWidth;
+    let wHeight = window.innerHeight;
     console.log('wWidth:'+wWidth+' / wHeight:'+wHeight);
 
-    const wRatio = wWidth/wHeight;
-    console.log('wRatio: ', wRatio);
+    // const wRatio = wWidth/wHeight;
+    // console.log('wRatio: ', wRatio);
 
     /* set canvas to W&H of window */
-    // canvas.width = wWidth;
-    // canvas.height = wHeight;
+    if (vWidth > wWidth) {
+      console.info('vWidth > wWidth');
+      if (vHeight > wHeight) {
+        console.info('vHeight > wHeight');
+        // shrink horizontally...
+        // wWidth = wHeight * vRatio;
+      } else {
+        console.info('vHeight <= wHeight');
+        // enlarge vertically to fill canvas with video...
+        // wHeight = wWidth * vRatio;
+      }
+    } else {
+      console.info('vWidth <= wWidth');
+      if (vHeight > wHeight) {
+        console.info('vHeight > wHeight');
+      } else {
+        console.info('vHeight <= wHeight');
+      }
+    }
+    console.log('wWidth:'+wWidth+' / wHeight:'+wHeight);
+    canvas.width = wWidth;
+    canvas.height = wHeight;
 
     /* center the canvas */
-    // positionX = (wWidth - vWidth)/2;
-    // positionY = (wHeight - vHeight)/2;
-
-    // if (vWidth < wWidth && vHeight > wHeight) {
-    //   console.log('video taller than window');
-    //   // stretch video vertically...
-    //   canvas.width = vWidth;
-    //   canvas.height = wHeight;
-    // } else if (vWidth > wWidth && vHeight < wHeight) {
-    //   console.log('video wider than window');
-    //   // stretch video horizontally...
-    //   canvas.width = wWidth;
-    //   canvas.height = vHeight;
-    // } else {
-    //   console.log('video ??? than window');
-      canvas.width = vWidth;
-      canvas.height = vHeight;
-    // }
+    positionX = (wWidth - vWidth)/2;
+    positionY = (wHeight - vHeight)/2;
 
     let randoms = []; // random numbers
     randoms.push(Math.floor(Math.random()*25)+Math.floor(Math.random()*250));
@@ -510,7 +529,7 @@ if (navigator.mediaDevices) {
 
       if (stripLen > 0) {
         strip.style.display = 'flex';
-        document.querySelector('#ctrl_strip legend').innerHTML = `snapshots (${stripLen})`;
+        document.querySelector('#ctrl_strip legend .value').innerHTML = `${stripLen}`;
         toggleButton(btnClearStrip,'on');
         // btnClearStrip.disabled = false;
         // btnClearStrip.classList.remove('disabled');
@@ -551,7 +570,7 @@ if (navigator.mediaDevices) {
     toggleButton(btnClearStrip,'off');
     // btnClearStrip.disabled = true;
     // btnClearStrip.classList.add('disabled');
-    document.querySelector('#ctrl_strip legend').innerHTML = 'snapshots';
+    document.querySelector('#ctrl_strip legend .value').innerHTML = '0';
     console.groupEnd();
   }
 
@@ -617,16 +636,7 @@ if (navigator.mediaDevices) {
   // });
 
   /* listen for change on mirror checkbox */
-  mirror.addEventListener('change',(e)=>{
-    // console.log('mirror: ',mirror.checked);
-    if (mirror.checked) {
-      console.log('FLIP IT');
-      canvas.style.transform = 'scale(-1,1)';
-    } else {
-      console.log('DON\'T FLIP IT');
-      canvas.style.transform = 'scale(1,1)';
-    }
-  });
+  mirror.addEventListener('change',fMirror);
 
   /* listen for change on deeper F/X select/option */
   inputAllSelect.forEach(btn => {
@@ -689,6 +699,6 @@ window.addEventListener('resize', fMediaQueries);
 
 /* fake UI clicks to open controls */
 startStream();
-selectFx.selectedIndex = 5;
+selectFx.selectedIndex = 3;
 toggleFxControls();
 
diff --git a/19--Webcam_Fun/js/utils.js b/19--Webcam_Fun/js/utils.js
@@ -1,15 +1,5 @@
 /* utils.js */
 console.log('utils.js READY!');
-Array.prototype.move = function (old_index, new_index) {
-    if (new_index >= this.length) {
-        var k = new_index - this.length;
-        while ((k--) + 1) {
-            this.push(undefined);
-        }
-    }
-    this.splice(new_index, 0, this.splice(old_index, 1)[0]);
-    return this; // for testing purposes
-};
 
 /* toggle button enable/disable */
 function toggleButton(el,state) {
@@ -36,6 +26,7 @@ function toggleButton(el,state) {
 
 /* hide element by adding "hide" class */
 function hide(el,exception) {
+  // console.dir(el);
   if (el.length > 1) {
     for (var i = 0; i < el.length; i++) {
       el[i].classList.add('hide');
@@ -50,6 +41,7 @@ function hide(el,exception) {
 
 /* show element by removing "hide" class */
 function show(el,exception) {
+  // console.dir(el);
   if (el.length > 1) {
     for (var i = 0; i < el.length; i++) {
       el[i].classList.remove('hide');
