Skip to content

Commit cd04e50

Browse files
jdstein1jdstein1
committed
put CSS and JS files in dirs. misc edits.
1 parent 98e8101 commit cd04e50

File tree

11 files changed

+232
-162
lines changed

11 files changed

+232
-162
lines changed

‎19--Webcam_Fun/README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ README.md
99
* [X] -- hide alert message
1010
* [X] -- fix snapshot limit
1111
* [X] -- style the buttons (status)
12-
* [] -- style the alerts
13-
* [] -- style the inputs
14-
* [] -- style the labels
12+
* [X] -- style the alerts
13+
* [X] -- style the inputs
14+
* [X] -- style the labels
1515
* [] -- redo chroma key inputs w a single HTML5 color input
1616
* [X] -- goofy background to show thru chroma key
1717
* [] -- toggle buttons w utils.js function
1818
* [] -- move other common stuff to utils.js
1919
* [] -- move CSS and JS to folders
20-
* [] -- make RGB colorize effect work again
20+
* [] -- make RGB colorize effect work again
21+
* [] -- build separate function for random

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
left:0;
77
bottom:0;
88
right:0;
9-
background:black url('img/starrynight.jpg') center center no-repeat;
9+
background:black url('../img/starrynight.jpg') center center no-repeat;
1010
background-size:cover;
1111
}
1212

@@ -22,7 +22,7 @@
2222
bottom:0;
2323
right:0;
2424
background:transparent;
25-
/* background:transparent url('img/tvstatic-snow.gif') center center no-repeat; */
25+
/* background:transparent url('../img/tvstatic-snow.gif') center center no-repeat; */
2626
/* background-size:cover; */
2727
opacity:0.25;
2828
}
@@ -39,6 +39,7 @@ canvas {
3939
background:white;
4040
box-shadow:0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.5);
4141
padding:5px;
42+
display:none;
4243
position:absolute;
4344
top:2rem;
4445
right:2rem;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@
4040
box-shadow:0 0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
4141
}
4242
.controls legend {
43-
color:rgb(51,51,51);
44-
background:rgba(255,255,255,0.75);
45-
box-shadow:0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
43+
/* color:rgb(51,51,51); */
44+
background:rgb(255,255,255);
45+
box-shadow:0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.5);
4646
}
4747

4848
#fx {display:none;}

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

File renamed without changes.

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

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing:border-box;
5+
padding:0;
6+
margin:0;
7+
}
8+
9+
html {
10+
font-size:100%;
11+
font-family:sans-serif;
12+
overflow:hidden;
13+
}
14+
15+
body {
16+
font-size:1rem;
17+
color:black;
18+
background:white;
19+
padding:0;
20+
margin:0;
21+
overflow:hidden;
22+
}
23+
24+
h1,
25+
h2,
26+
h3,
27+
h4,
28+
h5,
29+
h6 {}
30+
31+
table {
32+
width:100%;
33+
/* border-collapse:separate; */
34+
border-collapse:collapse;
35+
border-width:3px;
36+
}
37+
38+
legend,
39+
label,
40+
input,
41+
button,
42+
select,
43+
td {
44+
font-size:0.9em;
45+
/* color:black; */
46+
/* width:auto; */
47+
}
48+
fieldset,
49+
legend,
50+
label,
51+
input,
52+
button,
53+
select,
54+
.alert, .alert.default {
55+
display:inline-block;
56+
line-height:1.25;
57+
padding:0.25rem 0.5rem;
58+
white-space:nowrap;
59+
background:white;
60+
border-radius:0.25rem;
61+
}
62+
td {margin:0 0.25rem 0.25rem 0;}
63+
fieldset,
64+
label,
65+
input,
66+
button,
67+
select,
68+
.alert, .alert.default {
69+
border:2px solid #ccc;
70+
}
71+
fieldset {
72+
/* border:none; */
73+
padding:0.5rem;
74+
margin:0.125em;
75+
}
76+
legend {font-weight:900;margin-bottom:0.25rem;line-height:1;}
77+
/* td > legend,
78+
td > label,
79+
td > input,
80+
td > button,
81+
td > select,
82+
fieldset {border:none;} */
83+
label,
84+
input,
85+
button,
86+
select {
87+
border-color:rgba(255,255,255,0.75) rgba(102,102,102,0.75) rgba(51,51,51,0.75) rgba(204,204,204,0.75);
88+
/* border-color:yellow limegreen cyan magenta; */
89+
/* width:100%; */
90+
/* width:auto; */
91+
/* display:inline-block; */
92+
}
93+
button+button,
94+
button+input,
95+
input+button,
96+
input+input,
97+
label+label,
98+
label+input,
99+
input+label,
100+
label+button,
101+
button+label {margin-top:0.25rem;}
102+
label {
103+
/* width:40%; */
104+
/* color:white; */
105+
/* text-align:right; */
106+
padding-left:0;
107+
}
108+
button {
109+
width:100%;
110+
/* padding:0.5rem; */
111+
/* margin:0 0 0.25rem 0; */
112+
}
113+
input[type=checkbox],
114+
input[type=radio] {margin:0 0.25rem 0 0.5rem;}
115+
116+
/* Z-INDICES FOR LAYERING */
117+
header {z-index:1;display:none;}
118+
main {z-index:2;}
119+
.photobooth {z-index:10;}
120+
.strip {z-index:20;}
121+
.controls {z-index:30;}
122+
123+
/* misc classes */
124+
.status, .status.default {background-color:#eee;}
125+
.status.success {background-color:mediumseagreen;color:white;font-weight:900;}
126+
.status.error {background-color:crimson;color:white;font-weight:900;}
127+
.status.warn {background-color:coral;}
128+
.status.info {background-color:powderblue;}
129+
130+
.disabled {opacity:0.5;}
131+
132+
.alert, .alert.default {
133+
width:100%;
134+
min-height:72.5%;
135+
background-color:#eee;
136+
text-align:center; vertical-align:middle; width:100%;
137+
padding:0.25rem 0.5rem;
138+
line-height:1.25;
139+
display:flex;
140+
/* flex-direction:column; */
141+
justify-content:center;
142+
align-items:center;
143+
}
144+
.msg,
145+
.alert > * {flex:1;margin:0; padding:0;}
146+
.msg_cam {}
147+
.msg_fx {display:none;}
148+
.alert.success {background-color:mediumseagreen;color:white;font-weight:900;}
149+
.alert.error {background-color:crimson;color:white;font-weight:900;}
150+
.alert.warn {background-color:coral;}
151+
.alert.info {background-color:powderblue;}

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

File renamed without changes.

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Webcam Fun -- Get User Media Code Along!</title>
6-
<link rel="stylesheet" href="style.css">
7-
<link rel="stylesheet" href="controls.css">
8-
<link rel="stylesheet" href="strip.css">
9-
<link rel="stylesheet" href="booth.css">
10-
<!-- <link rel="stylesheet" href="test.css"> -->
6+
<link rel="stylesheet" href="css/style.css">
7+
<link rel="stylesheet" href="css/controls.css">
8+
<link rel="stylesheet" href="css/strip.css">
9+
<link rel="stylesheet" href="css/booth.css">
10+
<!-- <link rel="stylesheet" href="css/test.css"> -->
1111
</head>
1212
<body>
1313

@@ -144,8 +144,9 @@ <h1>webcam fun</h1>
144144

145145
<audio class="sound-snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>
146146

147-
<script src="scripts.js"></script>
148-
<script src="fx.js"></script>
147+
<script src="js/utils.js"></script>
148+
<script src="js/scripts.js"></script>
149+
<script src="js/fx.js"></script>
149150
<!-- <script src="scripts-FINISHED.js"></script> -->
150151

151152
</body>

‎19--Webcam_Fun/fx.js‎ renamed to ‎19--Webcam_Fun/js/fx.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,31 @@ function fFxSplit(data,nums) {
3838
return data;
3939
}
4040

41-
function fFxRGB(data,effect) {
42-
// console.log('START fFxRGB',effect);
43-
if (typeof effect === 'string') {
41+
function fFxRGB(data,color) {
42+
// console.log('START fFxRGB',color);
43+
if (typeof color === 'string') {
4444
console.log('string!');
4545
for (let i = 0; i < data.data.length; i+=4) {
46-
data.data[i+0] += (effect==='red') ? 150 : -50; // r
47-
data.data[i+1] += (effect==='green') ? 150 : -50; // g
48-
data.data[i+2] += (effect==='blue') ? 150 : -50; // b
49-
}
50-
} else if (typeof effect === 'object') {
51-
console.log('object!');
52-
for (let i = 0; i < data.data.length; i+=4) {
53-
data.data[i+0] += effect[0]; // r
54-
data.data[i+1] += effect[1]; // g
55-
data.data[i+2] += effect[2]; // b
46+
data.data[i+0] += (color==='red') ? 150 : -50; // r
47+
data.data[i+1] += (color==='green') ? 150 : -50; // g
48+
data.data[i+2] += (color==='blue') ? 150 : -50; // b
5649
}
5750
} else {
5851
console.error('not the right type!');
5952
}
6053
return data;
6154
}
6255

56+
function fFxRGBRandom(data,nums) {
57+
// console.log('START fFxRGB',nums);
58+
for (let i = 0; i < data.data.length; i+=4) {
59+
data.data[i+0] += nums[0]; // r
60+
data.data[i+1] += nums[1]; // g
61+
data.data[i+2] += nums[2]; // b
62+
}
63+
return data;
64+
}
65+
6366
function fFxPixelate(data,resolution) {
6467
// console.log('START fFxPixelate',resolution);
6568
for (let i = 0; i < data.data.length; i+=4) {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ function accessMedia(mode,effect) {
8484
myStream = mediaStream;
8585
if (mode && mode === 'start') {
8686
// turn video on
87+
video.style.display = 'block';
8788
video.src = window.URL.createObjectURL(myStream);
8889
video.onloadedmetadata = (e) => {
8990
video.play();
@@ -99,8 +100,9 @@ function accessMedia(mode,effect) {
99100
btnSnap.classList.remove('disabled');
100101
} else {
101102
// turn video off
103+
// video.style.display = 'none';
102104
video.src = '';
103-
myStream.active = false;
105+
// myStream.active = false;
104106
// photoboothB.style.opacity = '';
105107
// alertFx.style.display = 'block';
106108
alertFxMsgs[0].style.display = 'block';

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

File renamed without changes.

0 commit comments

Comments
 (0)