Skip to content

Commit 2e9b9ee

Browse files
jdstein1jdstein1
committed
proj 19: optimize.
1 parent 0abfc1d commit 2e9b9ee

File tree

5 files changed

+41
-67
lines changed

5 files changed

+41
-67
lines changed

‎19--Webcam_Fun/README.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,7 @@
99
## TODO:
1010

1111
* User Interactions
12-
* [X] Enable/disable "clear" buttons
13-
* [X] Enable/disable "snap" button
14-
* [X] Hide alert message
1512
* Styling
16-
* [X] Style the buttons (status)
17-
* [X] Style the alerts
18-
* [X] Style the inputs
19-
* [X] Style the labels
2013
* [] Make a cool skin/theme:
2114
* [bootstrap](https://getbootstrap.com/)
2215
* [material design](https://material.io/guidelines/)
@@ -28,19 +21,14 @@
2821
* [] Redo inputs w a single HTML5 color input
2922
* [] Display the colors that the inputs represent
3023
* Colorize
31-
* [X] Make RGB colorize effect work again
32-
* ~~[] Build separate function for random~~
33-
* [X] Pass array of numbers in from videoFX function to use single colorize function
24+
single colorize function
3425
* Split
35-
* [X] Make color channel split function work
3626
* Pixelate
3727
* [] Make pixelate effect function work
3828
* Structure
39-
* [X] Move CSS and JS to folders
4029
* Misc
41-
* [X] Fix snapshot limit
42-
* [X] Add background image (animated? fractal? tv static?) to show thru chroma key
43-
* [X] Toggle buttons w utils.js function
30+
* [X] Toggle buttons (enabled/disabled) w utils.js function
31+
* [X] Toggle elements (show/hide) w utils.js function
4432
* [] Move other common stuff to utils.js
4533
* [] Set W&H dimensions of video picture in canvas so it is not distorted
4634
* [] Get native resolution

‎19--Webcam_Fun/css/controls.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,21 @@
4545
box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
4646
}
4747

48-
.ctrl_fx table label {width:100%;text-align:right;}
49-
.ctrl_fx table label span {max-width:6rem; width:40%; min-width:3rem; display:inline-block;}
50-
.ctrl_fx table input, .ctrl_fx table select {width:60%;min-width:4rem;text-align:left;display:inline-block;}
48+
.ctrl_fx table label {
49+
width:100%;text-align:right;
50+
}
51+
.ctrl_fx table label span {
52+
max-width:6rem;
53+
width:40%;
54+
min-width:3rem;
55+
display:inline-block;
56+
}
57+
.ctrl_fx table input, .ctrl_fx table select {
58+
width:60%;
59+
min-width:4rem;
60+
text-align:left;
61+
display:inline-block;
62+
}
5163
#table-chroma input {
5264
/* background-color:red; */
5365
color:white !important;

‎19--Webcam_Fun/index-jds.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h1>webcam fun</h1>
4848
<td>
4949
<label>
5050
<span>colorize:</span>
51-
<select class="status info" id="colorize">
51+
<select class="select_fx status info" id="colorize">
5252
<option>Choose color...</option>
5353
<option value="random" selected>random</option>
5454
<option value="red">red</option>
@@ -69,7 +69,7 @@ <h1>webcam fun</h1>
6969
<td>
7070
<label>
7171
<span>split:</span>
72-
<select class="status info" id="split">
72+
<select class="select_fx status info" id="split">
7373
<option>Choose effect...</option>
7474
<option value="random" selected>random</option>
7575
<option value="stereo">stereo</option>

‎19--Webcam_Fun/js/scripts.js‎

Lines changed: 18 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,37 @@ const ctx = canvas.getContext('2d');
1111
const strip = document.querySelector('.strip');
1212
const snapSound = document.querySelector('.sound-snap');
1313
const snapLimit = document.querySelector('#limit');
14-
const allSelects = document.querySelectorAll('select');
15-
1614
const alertMsgs = document.querySelectorAll('.alert');
1715
const alertMsgCam = document.querySelector('#msg_cam');
1816
const alertMsgFx = document.querySelector('#msg_fx');
1917
const alertMsgErr = document.querySelector('#msg_err');
2018
// const alertFx = ctrlFx.querySelector('.alert');
2119

2220
/* F/X controls */
23-
/* main select/option for F/X */
21+
/* select/option for main F/X control */
2422
const selectFx = document.querySelector('#fx');
23+
/* select/option for deeper F/X controls */
24+
const selectsFx = document.querySelectorAll('.select_fx');
25+
2526
/* array of tables of control interfaces */
2627
const ctrlFx = document.querySelector('.ctrl_fx');
2728
const ctrlTables = ctrlFx.querySelectorAll('table');
29+
2830
/* video channel colorize controls */
2931
const ctrlColorize = document.querySelector('#table-colorize');
3032
const selectColorize = document.querySelector('#colorize');
31-
const btnsApply = document.querySelectorAll('.btn_apply');
33+
3234
/* video channel split controls */
3335
const ctrlSplit = document.querySelector('#table-split');
3436
const selectSplit = document.querySelector('#split');
37+
3538
/* video croma key controls */
3639
const ctrlChroma = document.querySelector('#table-chroma');
3740
const inputsChroma = document.querySelectorAll('#table-chroma input')
3841

3942
/* buttons */
43+
const btnsApply = document.querySelectorAll('.btn_apply');
44+
// const btnsClear = document.querySelectorAll('.btn_clear');
4045
const btnOn = document.querySelector('.ctrl_camera .btn_on');
4146
const btnOff = document.querySelector('.ctrl_camera .btn_off');
4247
const btnClearCam = document.querySelector('.ctrl_camera .btn_clear');
@@ -82,29 +87,10 @@ function toggleControls () {
8287
hide(ctrlTables);
8388
hide(alertMsgs);
8489
show(alertMsgCam);
85-
// console.log('...hide all alerts...');
86-
// hide(alertMsgs);
87-
// for (var i = 0; i < alertMsgs.length; i++) {
88-
// alertMsgs[i].style.display = 'none';
89-
// }
9090
if (selectFx.selectedIndex>0) {
9191
console.log('...then show __'+selectFx.selectedIndex+'__ controls!');
9292
hide(alertMsgs);
93-
/* manipulate pixels */
9493
show(ctrlTables[selectFx.selectedIndex-1]);
95-
// switch(selectFx.selectedIndex) {
96-
// case 'chroma':
97-
// show(ctrlChroma);
98-
// break;
99-
// case 'split':
100-
// show(ctrlSplit);
101-
// break;
102-
// case 'colorize':
103-
// show(ctrlColorize);
104-
// break;
105-
// default:
106-
// break;
107-
// }
10894
} else {
10995
console.log('...then done!');
11096
}
@@ -168,10 +154,6 @@ if (navigator.mediaDevices) {
168154
show(alertMsgCam);
169155
}
170156

171-
// for (var i = 0; i < allSelects.length; i++) {
172-
// allSelects[i].selectedIndex = 0;
173-
// }
174-
175157
// selectFx.selectedIndex = 0;
176158
// hide(selectFx);
177159
// selectFx.disabled = true;
@@ -464,27 +446,24 @@ if (navigator.mediaDevices) {
464446
pixelsToCanvas();
465447
});
466448

467-
/* listen to change on master F/X select/option */
449+
/* listen for change on master F/X select/option */
468450
selectFx.addEventListener('change',(e)=>{
469451
console.log('selectFx: ',e.target.value);
470452
toggleControls();
471453
});
472454

473-
/* listen to change on video channel split F/X select/option */
474-
selectSplit.addEventListener('change',(e)=>{
475-
console.log('selectSplit: ',e.target.value);
476-
startStream();
477-
});
478-
479-
/* listen to change on video channel colorize F/X select/option */
480-
selectColorize.addEventListener('change',(e)=>{
481-
console.log('selectColorize: ',e.target.value);
482-
startStream();
455+
/* listen for change on deeper F/X select/option */
456+
selectsFx.forEach(btn => {
457+
btn.addEventListener('change',(e)=>{
458+
console.log('selectsFx: ',e.target);
459+
startStream();
460+
})
483461
});
484462

463+
/* listen for click on all "apply" buttons */
485464
btnsApply.forEach(btn => {
486465
btn.addEventListener('click',(e)=>{
487-
console.log(e.target);
466+
console.log('btnsApply: ',e.target);
488467
startStream();
489468
})
490469
});

‎19--Webcam_Fun/js/utils.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* utils.js */
22
console.log('utils.js READY!');
33

4-
// toggle button enable/disable
4+
/* toggle button enable/disable */
55
function toggleButton(el,state) {
66
if (state) {
77
switch(state) {
@@ -20,10 +20,8 @@ function toggleButton(el,state) {
2020
}
2121
}
2222

23-
// hide element by adding "hide" class
23+
/* hide element by adding "hide" class */
2424
function hide(el) {
25-
// el = Array.from(el);
26-
// console.log('el: ', el);
2725
if (el.length > 1) {
2826
for (var i = 0; i < el.length; i++) {
2927
el[i].classList.add('hide');
@@ -33,10 +31,8 @@ function hide(el) {
3331
}
3432
}
3533

36-
// show element by removing "hide" class
34+
/* show element by removing "hide" class */
3735
function show(el) {
38-
// el = Array.from(el);
39-
// console.log('el: ', el);
4036
if (el.length > 1) {
4137
for (var i = 0; i < el.length; i++) {
4238
el[i].classList.remove('hide');
@@ -45,4 +41,3 @@ function show(el) {
4541
el.classList.remove('hide');
4642
}
4743
}
48-

0 commit comments

Comments
 (0)