88 lines
2.8 KiB
HTML
88 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" xmlns:fb="http://ogp.me/ns/fb#">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<title>Camera to laser roxxx!! </title>
|
|
<meta name="description" content="The" />
|
|
|
|
<style>
|
|
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
|
|
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
|
|
span.ui-slider-handle.ui-corner-all.ui-state-default { background: dodgerblue;}
|
|
canvas#simuCanvas {background: #333;}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css" />
|
|
<link rel="stylesheet" type="text/css" href="js/cropper/cropper.min.css" />
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/cropper/cropper.min.js"></script>
|
|
<script src="js/jquery-ui/jquery-ui.js"></script>
|
|
<script src="js/canvas.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container-fluid container-md">
|
|
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="select">
|
|
<label for="videoSource">Video source: </label>
|
|
<select id="videoSource">
|
|
</select>
|
|
</div>
|
|
<h1 class="text-primary">Send shots to the laser!</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<video id="video" autoplay></video>
|
|
</div>
|
|
<div class="col-sm">
|
|
<button class="snap btn btn-lg btn-primary">Take a picture!</button>
|
|
<p class="lead">By allowing the use of your camera, you will be able to take snapshots, convert them to black and white images before sending them to the laser server. How cool is that?!</p>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="result">
|
|
<div class="col-sm">
|
|
<canvas id="canvas" width="640" height="480"></canvas>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h3 class="snap btn btn-lg btn-primary">Not satisfied of the contrast? </h3>
|
|
<br/>
|
|
<div id="slider"></div>
|
|
<br/>
|
|
<div class="float-left">white ++</div>
|
|
<div class="float-right">++ dark</div><br>
|
|
|
|
<br/>
|
|
<h3>Satisfied? </h3>
|
|
<p class="lead">Type the text visible on your image (if any) and push Send.</p>
|
|
<div class="form-group">
|
|
<input id="text" type="text" class="form-control form-control-lg" placeholder="Type text here"/>
|
|
<button id="send" class="form-control form-control-lg btn btn-lg btn-warning btn-block">Send</button>
|
|
</div>
|
|
|
|
<div id="messages">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="preview">
|
|
<div class="col-sm">
|
|
<canvas id="simuCanvas" width="640" height="480"></canvas>
|
|
</div>
|
|
<div class="col-sm" >
|
|
<h3>Your images</h3>
|
|
<div id="imageList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
</body>
|
|
</html>
|