Skip to content

Commit c66f56c

Browse files
jdstein1jdstein1
committed
proj 19: reversing the array properly produced a 'stack overflow'. flipped image w CSS transform instead.
1 parent 3abbcde commit c66f56c

File tree

8 files changed

+203
-150
lines changed

8 files changed

+203
-150
lines changed

‎19--Webcam_Fun/css/booth.css‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

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

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,13 @@
1-
/* container for video controls */
2-
.ctrls {
3-
position:absolute;
4-
top:auto;
5-
left:0;
6-
bottom:0rem;
7-
right:0;
8-
padding:0.5rem;
9-
margin:0;
10-
background-color:rgba(0, 0, 0, 0.5);
11-
background:transparent;
12-
display:flex;
13-
flex-wrap:nowrap;
14-
flex-direction:row;
15-
justify-content:space-between;
16-
align-items:start;
17-
}
18-
.ctrls > * {
19-
flex:auto;
20-
display:flex;
21-
flex-wrap:nowrap;
22-
flex-direction:row;
23-
justify-content:center;
24-
align-items:center;
25-
}
26-
.ctrls .ctrl_fx {flex:4;}
271
.ctrls fieldset {
282
color:black;
293
border-color:transparent;
30-
background-color:rgba(0,0,0,0.5);
4+
background-color:rgba(0,0,0,0.75);
315
box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
326
}
337
.ctrls legend {
34-
background-color:rgb(51,51,51);
358
color:rgb(255,255,255);
36-
box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
9+
background-color:rgba(0,0,0,0);
10+
/* box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5); */
3711
}
3812

3913
.ctrl_fx .ctrl_group label {

‎19--Webcam_Fun/css/layout.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/* container for webcam video and canvas */
2+
.photobooth {
3+
background:white;
4+
position:absolute;
5+
top:0;
6+
left:0;
7+
bottom:0;
8+
right:0;
9+
background:black url('../img/starrynight.jpg') center center no-repeat;
10+
background:black url('../img/tvstatic-diagonal.gif') center center no-repeat;
11+
background-size:cover;
12+
}
13+
14+
/*clearfix*/
15+
.photobooth:after {
16+
z-index:1;
17+
content:'';
18+
display:block;
19+
clear:both;
20+
position:absolute;
21+
top:0;
22+
left:0;
23+
bottom:0;
24+
right:0;
25+
background:transparent;
26+
/* background:transparent url('../img/tvstatic-snow.gif') center center no-repeat; */
27+
/* background-size:cover; */
28+
opacity:0.25;
29+
}
30+
31+
canvas {
32+
z-index:2;
33+
width:100%;
34+
height:100%;
35+
background:transparent;
36+
}
37+
38+
.video {
39+
z-index:3;
40+
background:white;
41+
box-shadow:0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.5);
42+
padding:0.125em;
43+
position:absolute;
44+
top:2rem;
45+
right:2rem;
46+
width:200px;
47+
}
48+
49+
/* container for video controls */
50+
.ctrls {
51+
position:absolute;
52+
top:auto;
53+
left:0;
54+
bottom:0rem;
55+
right:0;
56+
padding:0.5rem;
57+
margin:0;
58+
background-color:rgba(0, 0, 0, 0.5);
59+
background:transparent;
60+
display:flex;
61+
flex-wrap:nowrap;
62+
flex-direction:row;
63+
justify-content:space-between;
64+
align-items:start;
65+
}
66+
.ctrls > * {
67+
flex:auto;
68+
display:flex;
69+
flex-wrap:nowrap;
70+
flex-direction:row;
71+
justify-content:center;
72+
align-items:center;
73+
}
74+
.ctrls .ctrl_fx {flex:4;}
75+
76+
/* photobooth picture strip */
77+
.strip {
78+
width:200px;
79+
height:100%;
80+
margin:0;
81+
padding:1rem 10px;
82+
background-color:rgba(0, 0, 0, 0.5);
83+
background-color:transparent;
84+
position:absolute;
85+
overflow:auto;
86+
overflow-x:hidden;
87+
overflow-y:auto;
88+
top:0;
89+
left:1rem;
90+
bottom:0;
91+
right:auto;
92+
flex-wrap:nowrap;
93+
flex-direction:column;
94+
justify-content:start;
95+
align-items:start;
96+
}
97+
.strip a {
98+
/* width:100%; */
99+
margin:0;
100+
}
101+
.strip a img {
102+
width:100%;
103+
background:white;
104+
padding:0.125em;
105+
box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
106+
}
107+
108+
/*.strip :nth-child(5n+1) img {transform:rotate(4deg);}*/
109+
/*.strip :nth-child(5n+2) img {transform:rotate(-2deg);}*/
110+
/*.strip :nth-child(5n+3) img {transform:rotate(1deg);}*/
111+
/*.strip :nth-child(5n+4) img {transform:rotate(-3deg);}*/
112+
/*.strip :nth-child(5n+5) img {transform:rotate(2deg);}*/
113+

‎19--Webcam_Fun/css/strip.css‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ label,
3434
input,
3535
button,
3636
select,
37+
option,
3738
td {
3839
font-size:0.9rem;
3940
overflow: hidden;
@@ -43,20 +44,24 @@ legend,
4344
label,
4445
input,
4546
button,
46-
select,
47+
select,
48+
option,
4749
.alert, .alert.default {
4850
display:inline-block;
4951
line-height:1.25;
5052
padding:0.45em 0.25rem;
5153
white-space:nowrap;
5254
border-radius:0.25rem;
55+
color:black;
56+
background-color:white;
5357
}
5458
td {/* margin:0 0.25rem 0.25rem 0; */}
5559
fieldset,
5660
label,
5761
input,
5862
button,
59-
select,
63+
select,
64+
option,
6065
.alert, .alert.default {
6166
border:2px solid #ccc;
6267
}
@@ -68,6 +73,7 @@ legend {
6873
font-weight:900;
6974
margin-bottom:0.25rem;
7075
line-height:1;
76+
width: 100%;
7177
}
7278
label,
7379
input,
@@ -105,16 +111,16 @@ button {
105111
/* padding:0.5rem; */
106112
/* margin:0 0 0.25rem 0; */
107113
}
108-
input[type=text],
109-
input[type=number],
110-
input[type=date],
111-
input[type=time],
112-
input[type=datetime],
113-
input[type=email],
114-
input[type=password],
115-
input[type=tel],
116-
input[type=url],
117-
input[type=color],
114+
input[type=text],
115+
input[type=number],
116+
input[type=date],
117+
input[type=time],
118+
input[type=datetime],
119+
input[type=email],
120+
input[type=password],
121+
input[type=tel],
122+
input[type=url],
123+
input[type=color],
118124
input[type=search] {
119125
/* margin:0 0.25rem 0 0.5rem; */
120126
border-color:
@@ -132,8 +138,8 @@ label span+input[type=range] {
132138
/* float:none; */
133139
/* display:block; */
134140
}
135-
label span, label span {padding: 0.5rem;}
136-
td>label{min-height: 100%; width: 100%;}
141+
label span, label span {/* padding: 0.5rem; */}
142+
td>label{/* min-height: 100%; */ width: 100%;}
137143
/* Z-INDICES FOR LAYERING */
138144
header {z-index:1;display:none;}
139145
main {z-index:2;}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
<meta charset="UTF-8">
55
<title>Webcam Fun -- Get User Media Code Along!</title>
66
<link rel="stylesheet" href="css/style.css">
7+
<link rel="stylesheet" href="css/layout.css">
78
<link rel="stylesheet" href="css/controls.css">
8-
<link rel="stylesheet" href="css/strip.css">
9-
<link rel="stylesheet" href="css/booth.css">
109
<!-- <link rel="stylesheet" href="css/test.css"> -->
1110
<!-- <link rel="stylesheet" href="css/mq.css"> -->
1211
</head>
@@ -30,16 +29,10 @@ <h1>webcam fun</h1>
3029
<span class="label">On?</span>
3130
</label> -->
3231

33-
<!-- add checkbox toggle for mirror effect -->
34-
<label class="" for="mirror">
35-
<input type="checkbox" id="mirror" class="">
36-
<span class="label">Mirror?</span>
37-
</label>
38-
3932
<button class="btn_clear disabled" disabled>Clear</button>
4033
</fieldset>
4134
<fieldset id="ctrl_fx">
42-
<legend>f/x:
35+
<legend>
4336
<select class="input-select status info" id="fx">
4437
<option>Choose effect...</option>
4538
<option value="Colorize">Colorize</option>
@@ -48,6 +41,11 @@ <h1>webcam fun</h1>
4841
<option value="Saturate">Saturate</option>
4942
<option value="Pixelate">Pixelate</option>
5043
</select>
44+
<!-- add checkbox toggle for mirror effect -->
45+
<label class="" for="mirror" style="float:right; width:auto; color:black;">
46+
<input type="checkbox" id="mirror" class="">
47+
<span class="label">Mirror?</span>
48+
</label>
5149
</legend>
5250
<div class="alert info" id="msg_cam">
5351
<p>turn web cam "ON" to see video effects</p>

0 commit comments

Comments
 (0)