Skip to content

Commit 277bd5b

Browse files
catpoehlmancatpoehlman
committed
defiecencies photo taking
1 parent be35a93 commit 277bd5b

3 files changed

Lines changed: 546 additions & 1 deletion

File tree

‎WebContent/WEB-INF/jsps/addDeficiency.jsp‎

Lines changed: 203 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,189 @@
2929
crossorigin="anonymous"></script>
3030

3131
<link rel="stylesheet" type="text/css" href="/spring/css/style.css">
32+
<link rel="stylesheet" type="text/css" href="/spring/css/photo.css">
33+
<script src="/spring/scripts/photo.js"></script>
3234

3335
<style>
36+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
37+
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
38+
39+
*{
40+
box-sizing: border-box;
41+
margin: 0;
42+
padding: 0;
43+
}
44+
45+
html{
46+
background-color: #fff;
47+
font:normal 16px/1.5 sans-serif;
48+
color: #333;
49+
}
50+
51+
h3{
52+
font: normal 32px/1.5 'Open Sans', sans-serif;
53+
color: #2c3e50;
54+
margin: 50px 0;
55+
text-align: center;
56+
}
57+
58+
59+
.container2{
60+
max-width: 1000px;
61+
margin: 50px auto;
62+
padding: 20px;
63+
background-color: #efefef;
64+
}
65+
66+
.app2{
67+
width: 100%;
68+
position: relative;
69+
}
70+
71+
.app2 #start-camera{
72+
display: none;
73+
border-radius: 3px;
74+
max-width: 400px;
75+
color: #fff;
76+
background-color: #448AFF;
77+
text-decoration: none;
78+
padding: 15px;
79+
opacity: 0.8;
80+
margin: 50px auto;
81+
text-align: center;
82+
}
83+
84+
.app2 video#camera-stream{
85+
display: none;
86+
width: 100%;
87+
}
88+
89+
.app2 img#snap{
90+
position: absolute;
91+
top: 0;
92+
left: 0;
93+
width: 100%;
94+
z-index: 10;
95+
display: none;
96+
}
97+
98+
.app2 #error-message{
99+
width: 100%;
100+
background-color: #ccc;
101+
color: #9b9b9b;
102+
font-size: 28px;
103+
padding: 200px 100px;
104+
text-align: center;
105+
display: none;
106+
}
107+
108+
.app2 .controls{
109+
position: absolute;
110+
top: 0;
111+
left: 0;
112+
width: 100%;
113+
height: 100%;
114+
z-index: 20;
115+
116+
display: flex;
117+
align-items: flex-end;
118+
justify-content: space-between;
119+
padding: 30px;
120+
display: none;
121+
}
122+
123+
.app2 .controls a{
124+
border-radius: 50%;
125+
color: #fff;
126+
background-color: #111;
127+
text-decoration: none;
128+
padding: 15px;
129+
line-height: 0;
130+
opacity: 0.7;
131+
outline: none;
132+
-webkit-tap-highlight-color: transparent;
133+
}
134+
135+
.app2 .controls a:hover{
136+
opacity: 1;
137+
}
138+
139+
.app2 .controls a.disabled{
140+
background-color: #555;
141+
opacity: 0.5;
142+
cursor: default;
143+
pointer-events: none;
144+
}
145+
146+
.app2 .controls a.disabled:hover{
147+
opacity: 0.5;
148+
}
149+
150+
.app2 .controls a i{
151+
font-size: 18px;
152+
}
153+
154+
.app2 .controls #take-photo i{
155+
font-size: 32px;
156+
}
157+
158+
.app2 canvas{
159+
display: none;
160+
}
161+
162+
163+
164+
.app2 video#camera-stream.visible,
165+
.app2 img#snap.visible,
166+
.app2 #error-message.visible
167+
{
168+
display: block;
169+
}
170+
171+
.app2 .controls.visible{
172+
display: flex;
173+
}
174+
175+
176+
177+
@media(max-width: 1000px){
178+
.container2{
179+
margin: 40px;
180+
}
181+
182+
.app2 #start-camera.visible{
183+
display: block;
184+
}
185+
186+
.app2 .controls a i{
187+
font-size: 16px;
188+
}
189+
190+
.app2 .controls #take-photo i{
191+
font-size: 24px;
192+
}
193+
}
194+
195+
196+
@media(max-width: 600px){
197+
.container2{
198+
margin: 10px;
199+
}
200+
201+
.app2 #error-message{
202+
padding: 80px 50px;
203+
font-size: 18px;
204+
}
205+
206+
.app2 .controls a i{
207+
font-size: 12px;
208+
}
209+
210+
.app2 .controls #take-photo i{
211+
font-size: 18px;
212+
}
213+
}
214+
34215
#con {
35216
background-color: #EDEEFF;
36217
border-radius: 15px;
@@ -171,9 +352,30 @@
171352
<a href="${displayUnitDeficiencies}" class="pull-right btn btn-default" id="btnXlg" style="margin-right: 8.33333333333%">Back</a>
172353

173354
</fieldset>
355+
<div class="container2">
356+
357+
<div class="app2">
358+
359+
<a href="#" id="start-camera" class="visible">Touch here to start the app.</a>
360+
<video id="camera-stream"></video>
361+
<img id="snap">
362+
363+
<p id="error-message"></p>
364+
365+
<div class="controls">
366+
<a href="#" id="delete-photo" title="Delete Photo" class="disabled"><i class="material-icons">delete</i></a>
367+
<a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
368+
<a href="#" id="download-photo" download="def${deficiency.id}hen${unit.homeEnrollmentNumber}.png" title="Save Photo" class="disabled"><i class="material-icons">file_download</i></a>
369+
</div>
370+
371+
<!-- Hidden canvas element. Used for taking snapshot of video. -->
372+
<canvas></canvas>
373+
</div>
374+
</div>
375+
174376
</div>
175377
</form>
176-
378+
177379
</div>
178380
</body>
179381
</html>

0 commit comments

Comments
 (0)