[wip] Batch of enhancements
This commit is contained in:
Alban
parent
9aa91985c9
commit
13888ccf38
7 changed files with 5804 additions and 147 deletions
86
index.html
86
index.html
|
|
@ -3,22 +3,33 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<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; }
|
||||
video,canvas { border: 1px solid #ccc; display: block; margin: auto; }
|
||||
#canvas { display: block; }
|
||||
span.ui-slider-handle.ui-corner-all.ui-state-default { background: dodgerblue;}
|
||||
canvas#simuCanvas {background: #333;}
|
||||
div.select {
|
||||
display: inline-block;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
p.small {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 12em;
|
||||
display: inline-block;
|
||||
}
|
||||
</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>
|
||||
|
||||
|
|
@ -26,42 +37,47 @@
|
|||
<div class="container-fluid container-md">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm col-6">
|
||||
<video id="video" class="video_sized" autoplay></video>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h1 class="text-primary">Convert your photos to laser images!</h1>
|
||||
<p class="lead">Once you allow the browser to use your camera, you can start creating something new by taking a snapshot. </p>
|
||||
<p class="lead">If you're happy with the result, send it to see it converted to a laser-ready image! </p>
|
||||
<div class="select">
|
||||
<label for="videoSource">Video source: </label>
|
||||
<select id="videoSource">
|
||||
</select>
|
||||
<label for="videoSource">Change camera </label><select id="videoSource" class="custom-select"></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>
|
||||
<button class="snap btn btn-lg btn-primary">Take a snap</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="result">
|
||||
<div class="col-sm">
|
||||
<canvas id="canvas" width="640" height="480"></canvas>
|
||||
<div class="col-sm col-6">
|
||||
<div class="video_sized">
|
||||
<canvas id="canvas" class="video_sized"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<h3 class="snap btn btn-lg btn-primary">Not satisfied of the contrast? </h3>
|
||||
<br/>
|
||||
<h1 class="text-primary">Are you satisfied with the contrast? </h3>
|
||||
<p>Before sending your snap, change the contrast using the slider to reach the effect you desire.</p><br/>
|
||||
<div id="slider"></div>
|
||||
<br/>
|
||||
<div class="float-left">white ++</div>
|
||||
<div class="float-right">++ dark</div><br>
|
||||
<div class="float-left">
|
||||
<button type="button" class="btn btn-secondary contrast" rel="-5">
|
||||
<span class="badge badge-light">+</span> white
|
||||
</button>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<button type="button" class="btn btn-secondary contrast" rel="5">
|
||||
<span class="badge badge-light">+</span> black
|
||||
</button>
|
||||
</div><br>
|
||||
|
||||
<br/>
|
||||
<h3>Satisfied? </h3>
|
||||
<p class="lead">Type the text visible on your image (if any) and push Send.</p>
|
||||
<h3>Ready to send? </h3>
|
||||
<p >If some text is visible on the image, type it before pushing the Send button.</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>
|
||||
<button id="send" class="form-control form-control-lg btn btn-lg btn-success btn-block">Send</button>
|
||||
</div>
|
||||
|
||||
<div id="messages">
|
||||
|
|
@ -69,11 +85,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="preview">
|
||||
<div class="col-sm">
|
||||
<canvas id="simuCanvas" width="640" height="480"></canvas>
|
||||
<div class="col-sm col-6">
|
||||
<canvas id="simuCanvas" class="video_sized"></canvas>
|
||||
</div>
|
||||
<div class="col-sm" >
|
||||
<h3>Your images</h3>
|
||||
<h1 class="text-primary">Preview your creation</h1>
|
||||
<p>Now that your creation have been sent, you can check what they will look like on lasers using these links, sorted by oldest snaps last.</p>
|
||||
|
||||
<div id="imageList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,5 +101,11 @@
|
|||
</main>
|
||||
|
||||
|
||||
<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>
|
||||
<script src="js/adapter-latest.js"></script>
|
||||
<script src="js/camera.js" async></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue