Skip to content

Commit fe60dd2

Browse files
jdstein1jdstein1
committed
proj 19: finish saturate F/X function.
1 parent 873db79 commit fe60dd2

File tree

11 files changed

+220
-124
lines changed

11 files changed

+220
-124
lines changed

‎19--Webcam_Fun/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@
2929
* [X] single colorize function
3030
<!-- * Split -->
3131
* Pixelate
32-
* [] Make pixelate effect function work
32+
* [] Make pixelate effect function modify the resolution of the video.
33+
* Saturate
34+
* [] Make saturate effect function modify saturation of the video.
3335
* Invert Picture
3436
* [] Flip the picture along horizontal axis to act like a mirror.
3537
<!-- * Structure -->

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* container for video controls */
2-
.controls {
2+
.ctrls {
33
/* color:white; */
44
position:absolute;
55
top:auto;
@@ -18,11 +18,11 @@
1818
justify-content:space-between;
1919
align-items:start;
2020
}
21-
.controls > * {
21+
.ctrls > * {
2222
/* float:left; */
2323
/* display:inline-block; */
2424
/* text-align:center; */
25-
flex:1;
25+
flex:auto;
2626
/* flex-wrap:nowrap; */
2727
/* padding:0.5rem; */
2828
/* margin:0.5rem; */
@@ -32,14 +32,14 @@
3232
justify-content:center;
3333
align-items:center;
3434
}
35-
.controls .ctrl_fx {flex:4;}
36-
.controls fieldset {
35+
.ctrls .ctrl_fx {flex:4;}
36+
.ctrls fieldset {
3737
color:black;
3838
border-color:transparent;
3939
background-color:rgba(0,0,0,0.5);
4040
box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
4141
}
42-
.controls legend {
42+
.ctrls legend {
4343
background-color:rgb(51,51,51);
4444
color:rgb(255,255,255);
4545
box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
@@ -62,28 +62,28 @@
6262
text-align:left;
6363
display:inline-block;
6464
}
65-
#table-chroma input {margin-left:0;}
66-
/* #table-chroma input[type=number] {display: none;} */
67-
#table-chroma input[type=range] {display: block;}
68-
#table-chroma input[type=range] {
65+
#ctrl_fx_chroma input {margin-left:0;}
66+
/* #ctrl_fx_chroma input[type=number] {display: none;} */
67+
#ctrl_fx_chroma input[type=range] {display: block;}
68+
#ctrl_fx_chroma input[type=range] {
6969
min-width:255px;
7070
width:100%;
7171
/* margin-top:-0.5em; */
7272
}
73-
#table-chroma input[type=number] {max-width:4rem; color: white;}
74-
#table-chroma .rgb input[type=text] {max-width:3rem;}
75-
#table-chroma input {
73+
#ctrl_fx_chroma input[type=number] {max-width:4rem; color: white;}
74+
#ctrl_fx_chroma .rgb input[type=text] {max-width:3rem;}
75+
#ctrl_fx_chroma input {
7676
/* background-color:red; */
7777
/* color:white !important; */
7878
}
79-
#table-chroma label span:before {
79+
#ctrl_fx_chroma label span:before {
8080
font-weight:900;
8181
/* margin:0 0 0 0.5rem; */
8282
}
83-
#table-chroma .red label span:before {content:'R ';}
84-
#table-chroma .green label span:before {content:'G ';}
85-
#table-chroma .blue label span:before {content:'B ';}
86-
.max label span code, .min label span code {
83+
#ctrl_fx_chroma .red label span:before {content:'R ';}
84+
#ctrl_fx_chroma .green label span:before {content:'G ';}
85+
#ctrl_fx_chroma .blue label span:before {content:'B ';}
86+
.max label span .value, .min label span .value {
8787
padding:0.25em 0.5rem;
8888
color:white;
8989
line-height:1.4;

‎19--Webcam_Fun/css/mq.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11

22
/* small mobile */
33
@media screen and (max-width: 599px) {
4-
#table-chroma input[type="number"] {display: block;}
5-
#table-chroma input[type="range"] {display: none;}
6-
#table-chroma tr {display: inline-block;}
7-
#table-chroma td {display: block;}
4+
#ctrl_fx_chroma input[type="number"] {display: block;}
5+
#ctrl_fx_chroma input[type="range"] {display: none;}
6+
#ctrl_fx_chroma tr {display: inline-block;}
7+
#ctrl_fx_chroma td {display: block;}
88
}
99

1010
@media screen and (min-width: 600px) and (max-width: 899px) {
11-
#table-chroma input[type="number"] {display: inline-block;}
12-
#table-chroma input[type="range"] {display: none;}
13-
#table-chroma td code {display:none;}
14-
#table-chroma .rgb span {display: none;}
11+
#ctrl_fx_chroma input[type="number"] {display: inline-block;}
12+
#ctrl_fx_chroma input[type="range"] {display: none;}
13+
#ctrl_fx_chroma td .value {display:none;}
14+
#ctrl_fx_chroma .rgb span {display: none;}
1515
}
1616

1717
/* tablet & notebook */
1818
@media screen and (min-width: 900px) and (max-width: 1199px) {
19-
#table-chroma input[type="number"] {display: none;}
20-
#table-chroma input[type="range"] {display: block;}
21-
#table-chroma tr {display: inline-block; width: 50%;}
22-
#table-chroma td {display: block; width: 100%;}
19+
#ctrl_fx_chroma input[type="number"] {display: none;}
20+
#ctrl_fx_chroma input[type="range"] {display: block;}
21+
#ctrl_fx_chroma tr {display: inline-block; width: 50%;}
22+
#ctrl_fx_chroma td {display: block; width: 100%;}
2323
}
2424

2525
/* laptop & desktop */
2626
@media screen and (min-width: 1200px) {
27-
#table-chroma input[type="number"] {display: none;}
28-
#table-chroma input[type="range"] {display: block;}
27+
#ctrl_fx_chroma input[type="number"] {display: none;}
28+
#ctrl_fx_chroma input[type="range"] {display: block;}
2929
}

‎19--Webcam_Fun/css/style.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ h3,
2222
h4,
2323
h5,
2424
h6 {}
25-
code {font-size: 1.5em;}
25+
/* code {font-size: 1.5em;} */
2626
table {
2727
width:100%;
2828
border-collapse:separate;
@@ -47,7 +47,7 @@ select,
4747
.alert, .alert.default {
4848
display:inline-block;
4949
line-height:1.25;
50-
padding:0.25em 0.25rem;
50+
padding:0.45em 0.25rem;
5151
white-space:nowrap;
5252
border-radius:0.25rem;
5353
}
@@ -83,7 +83,7 @@ select {
8383
.label,
8484
input,
8585
button,
86-
select {font-size: 1.2em;}
86+
select {font-size:1.1rem;min-height:1.1rem;}
8787
button+button,
8888
button+input,
8989
input+button,
@@ -139,7 +139,7 @@ header {z-index:1;display:none;}
139139
main {z-index:2;}
140140
.photobooth {z-index:10;}
141141
.strip {z-index:20;}
142-
.controls {z-index:30;}
142+
.ctrls {z-index:30;}
143143
/* misc classes */
144144
label, .status, .status.default {background-color:#eee;}
145145
.status.success {background-color:mediumseagreen;color:white;font-weight:900;}

‎19--Webcam_Fun/css/test.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
body {background-color:rgba(255, 0, 0, 0.5);}
22
.strip {background-color:rgba(0, 255, 0, 0.5);}
3-
.controls {background-color:rgba(0, 0, 255, 0.5);}
3+
.ctrls {background-color:rgba(0, 0, 255, 0.5);}
44
.photobooth {background-color:rgba(255, 255, 0, 0.5);}
55
.canvas {background-color:rgba(255, 0, 255, 0.5);}
66
.video {background-color:rgba(0, 255, 255, 0.5);}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<div class="strip"></div>
3838
</div>
3939

40-
<audio class="snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>
40+
<audio class="snap" src="snap.mp3" hidden></audio>
4141

4242
<script src="scripts-FINISHED.js"></script>
4343

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

Lines changed: 50 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,34 @@ <h1>webcam fun</h1>
1818

1919
<main>
2020

21-
<div class="controls">
21+
<div class="ctrls">
2222
<fieldset class="ctrl_camera">
23-
<legend>web cam</legend>
23+
<legend>cam</legend>
2424
<button class="btn_on status success">On</button>
2525
<button class="btn_off status error disabled" disabled>Off</button>
2626
<button class="btn_clear disabled" disabled>Clear</button>
2727
</fieldset>
2828
<fieldset class="ctrl_fx">
29-
<legend>f/x:
29+
<legend><!-- f/x: -->
3030
<select class="status info" id="fx">
3131
<option>Choose effect...</option>
32-
<option value="colorize">Colorize</option>
33-
<option value="split">Channel Split</option>
34-
<option value="chroma">Chroma Key</option>
32+
<option value="Colorize">Colorize</option>
33+
<option value="ChannelSplit">ChannelSplit</option>
34+
<option value="ChromaKey">ChromaKey</option>
35+
<option value="Saturate">Saturate</option>
36+
<option value="Pixelate">Pixelate</option>
3537
</select>
3638
</legend>
3739
<div class="alert info" id="msg_cam">
38-
<p>turn web cam "ON" to use video effects</p>
40+
<p>turn web cam "ON" to see video effects</p>
3941
</div>
4042
<div class="alert info" id="msg_fx">
4143
<p>choose a video effect above</p>
4244
</div>
4345
<div class="alert error" id="msg_err">
4446
<p>web API <code>navigator.mediaDevices</code> not supported</p>
4547
</div>
46-
<table id="table-colorize">
48+
<table class="fx" id="ctrl_fx_colorize">
4749
<tbody>
4850
<tr>
4951
<td>
@@ -64,7 +66,7 @@ <h1>webcam fun</h1>
6466
</tr>
6567
</tbody>
6668
</table>
67-
<table id="table-split">
69+
<table class="fx" id="ctrl_fx_split">
6870
<tbody>
6971
<tr>
7072
<td>
@@ -84,24 +86,24 @@ <h1>webcam fun</h1>
8486
</tr>
8587
</tbody>
8688
</table>
87-
<table id="table-chroma">
89+
<table class="fx" id="ctrl_fx_chroma">
8890
<tbody>
8991
<tr class="min">
9092
<td class="red">
9193
<label for="rmin">
92-
<span>min: <code>0</code></span>
94+
<span>min: <code class="value">0</code></span>
9395
<input type="range" value=0 min=0 max=255 name="rmin">
9496
</label>
9597
</td>
9698
<td class="green">
9799
<label for="gmin">
98-
<span>min: <code>0</code></span>
100+
<span>min: <code class="value">0</code></span>
99101
<input type="range" value=0 min=0 max=255 name="gmin">
100102
</label>
101103
</td>
102104
<td class="blue">
103105
<label for="bmin">
104-
<span>min: <code>0</code></span>
106+
<span>min: <code class="value">0</code></span>
105107
<input type="range" value=0 min=0 max=255 name="bmin">
106108
</label>
107109
</td>
@@ -115,19 +117,19 @@ <h1>webcam fun</h1>
115117
<tr class="max">
116118
<td class="red">
117119
<label for="rmax">
118-
<span>max: <code>0</code></span>
120+
<span>max: <code class="value">0</code></span>
119121
<input type="range" value=0 min=0 max=255 name="rmax">
120122
</label>
121123
</td>
122124
<td class="green">
123125
<label for="gmax">
124-
<span>max: <code>0</code></span>
126+
<span>max: <code class="value">0</code></span>
125127
<input type="range" value=0 min=0 max=255 name="gmax">
126128
</label>
127129
</td>
128130
<td class="blue">
129131
<label for="bmax">
130-
<span>max: <code>0</code></span>
132+
<span>max: <code class="value">0</code></span>
131133
<input type="range" value=0 min=0 max=255 name="bmax">
132134
</label>
133135
</td>
@@ -145,9 +147,39 @@ <h1>webcam fun</h1>
145147
</tr> -->
146148
</tbody>
147149
</table>
150+
<table class="fx" id="ctrl_fx_saturate">
151+
<tbody>
152+
<tr>
153+
<td>
154+
<label>
155+
<span>saturate:</span>
156+
<input class="status info" id="saturate" type="number" value=100 min=0 max=200>
157+
</label>
158+
</td>
159+
</tr>
160+
<tr>
161+
<td><button class="btn_apply status success">Apply</button></td>
162+
</tr>
163+
</tbody>
164+
</table>
165+
<table class="fx" id="ctrl_fx_pixelate">
166+
<tbody>
167+
<tr>
168+
<td>
169+
<label>
170+
<span>pixelate:</span>
171+
<input class="status info" id="pixelate" type="number" value=0 min=-100 max=100>
172+
</label>
173+
</td>
174+
</tr>
175+
<tr>
176+
<td><button class="btn_apply status success">Apply</button></td>
177+
</tr>
178+
</tbody>
179+
</table>
148180
</fieldset>
149181
<fieldset class="ctrl_strip">
150-
<legend>snapshots</legend>
182+
<legend>snaps</legend>
151183
<label class="" for="limit">
152184
<input type="checkbox" id="limit" class="" checked>
153185
<span class="label">Limit?</span>
@@ -166,7 +198,7 @@ <h1>webcam fun</h1>
166198

167199
</main>
168200

169-
<audio class="sound-snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>
201+
<audio class="sound-snap" src="snap.mp3" hidden></audio>
170202

171203
<script src="js/utils.js"></script>
172204
<script src="js/scripts.js"></script>

0 commit comments

Comments
 (0)