protonphoton/snap2laz
7
0
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

[enh] Adds picture upload + code cleanup (a bit)

Browse source
This commit is contained in:
alban 2020-11-05 16:50:49 +01:00
parent d0288d3cc9
commit 60b9129e7c
2 changed files with 203 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

87
index.html
View file

@ -13,19 +13,7 @@
#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;
}
.row {margin: 24px 0;}
</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" />
@ -37,30 +25,38 @@
<div class="container-fluid container-md">
<div class="row">
<div class="col-sm col-6">
<div class="col-sm-7">
<video id="video" class="video_sized" autoplay></video>
</div>
<div class="col-sm">
<div class="col-sm-5">
<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">Create something fresh by allowing the browser to use your camera.</p>
<p class="lead">Or pick an image from your phone and upload it. </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">Change camera </label><select id="videoSource" class="custom-select"></select>
</div>
<button class="snap btn btn-lg btn-primary">Take a snap</button>
<div class="row">
<div class="col-6">
<button class="snap btn btn-block btn-lg btn-primary">Take a snap</button>
</div>
<div class="col-6">
<button id="uploadBtn" class=" btn btn-block btn-lg btn-primary">Upload a file</button>
<input id="uploadInput" type="file" multiple style="display: none"/>
</div>
</div>
</div>
</div>
<div class="row" id="result">
<div class="col-sm col-6">
<div class="video_sized">
<canvas id="canvas" class="video_sized"></canvas>
</div>
<div class="row result" id="result" style="display:none">
<div class="col-sm-7">
<div class="video_sized">
<canvas id="canvas" class="video_sized"></canvas>
</div>
</div>
<div class="col-sm">
<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/>
<h2 class="text-primary">Not satisfied with contrast? </h2>
<p class="lead">Before sending your snap, feel free to modify the contrast by using the slider to reach the effect you desire.</p>
<div id="slider"></div>
<br/>
<div class="float-left">
<button type="button" class="btn btn-secondary contrast" rel="-5">
<span class="badge badge-light">+</span> white
@ -70,27 +66,42 @@
<button type="button" class="btn btn-secondary contrast" rel="5">
<span class="badge badge-light">+</span> black
</button>
</div><br>
<br/>
<h3>Ready to send? </h3>
</div>
<div class="float-left">
<br />
<h2 class="text-primary">Not satisfied with frame?</h2>
<p class="lead">Before sending your snap, use the blue handles that appear over it to cut the edges. You can also zoom in.</p>
</div>
</div>
</div>
<div class="row result" style="display:none">
<div class="col-sm-7">
<h1 class="text-primary"> Got text?</h1>
<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"/>
</div>
</div>
<div class="col-sm-5">
<h1 class="text-success">Ready to send? </h1>
<div class="form-group">
<button id="send" class="form-control form-control-lg btn btn-lg btn-success btn-block">Send</button>
</div>
</div>
</div>
<div class="row result" style="display:none">
<div class="col-sm">
<div id="messages">
</div>
</div>
</div>
<div class="row" id="preview">
<div class="col-sm col-6">
<div class="col-sm-7">
<canvas id="simuCanvas" class="video_sized"></canvas>
</div>
<div class="col-sm" >
<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 class="col-sm-5" >
<h2 class="text-secondary">Preview your creations</h2>
<p class="lead">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>
@ -98,14 +109,12 @@
</div>
</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>
<script src="js/main.js"></script>
<script src="js/adapter-latest.js"></script>
<script src="js/camera.js" async></script>
</body>
</html>