mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-11 10:49:59 +01:00
3c1b6f2019
* Lines 202, 205, 211 have been changed in examples/index.html. * Update examples/index.html line 211 Co-Authored-By: maks-ostashkevich <33810779+maks-ostashkevich@users.noreply.github.com> * Update examples/index.html line 202 Co-Authored-By: maks-ostashkevich <33810779+maks-ostashkevich@users.noreply.github.com> * Update examples/index.html line 205 Co-Authored-By: maks-ostashkevich <33810779+maks-ostashkevich@users.noreply.github.com>
231 lines
8.8 KiB
HTML
231 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
|
<meta name="theme-color" content="#428bca">
|
|
<link rel="icon" sizes="192x192" href="../icons/ic_192.png">
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<title>Image Sequencer</title>
|
|
|
|
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<script src="../src/ui/prepareDynamic.js"></script>
|
|
<script src="../dist/image-sequencer.js" charset="utf-8"></script>
|
|
<script src="../dist/image-sequencer-ui.js" charset="utf-8"></script>
|
|
<!-- for crop module: -->
|
|
<script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
|
|
<script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
|
|
|
|
<!-- Download.js for large files -->
|
|
<script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
|
|
|
|
<script src="lib/scrollToTop.js"></script>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<!-- for crop module: -->
|
|
<link href="../node_modules/imgareaselect/distfiles/css/imgareaselect-default.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<header class="text-center">
|
|
<h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
|
|
<p>
|
|
A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original image, it
|
|
creates a new image at each step in a sequence.
|
|
<a href="https://publiclab.org/image-sequencer">Learn more</a>
|
|
</p>
|
|
<p>
|
|
Open Source
|
|
<a href="https://github.com/publiclab/image-sequencer">
|
|
<i class="fa fa-github"></i>
|
|
</a>
|
|
by <a href= "https://publiclab.org" title = "Publiclab Website"><i class = "fa fa-globe"></i> Publiclab</a>
|
|
</p>
|
|
</header>
|
|
|
|
<div id="dropzone" class="dropzone">
|
|
<p>
|
|
<i>Select or drag in an image to start!</i>
|
|
</p>
|
|
<center>
|
|
<input type="file" id="fileInput" value="" accept="image/*"><br />
|
|
<button type="button" id="take-photo" class="btn btn-primary btn-block btn-lg ">Take a Photo</button>
|
|
<video id="video" width="400" height="300" style="display:none"></video>
|
|
<a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
|
|
<a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
|
|
<canvas id="canvas" width="400" height="300" style="display:none"></canvas>
|
|
</center>
|
|
</div>
|
|
|
|
<section id="steps" class="row">
|
|
<div id="load-image"></div>
|
|
</section>
|
|
|
|
<hr />
|
|
<p class = "alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.</p>
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<section id="addStep" class="panel panel-primary">
|
|
<div class="form-inline">
|
|
<div class="panel-body">
|
|
<div style="display:flex; justify-content:center;">
|
|
</div>
|
|
<p class="info">Select a new module to add to your sequence.</p>
|
|
<div class="row center-align radio-group">
|
|
<div>
|
|
<div class="radio" data-value="resize">
|
|
<i class="fa fa-arrows-alt fa-4x i-over"></i>
|
|
</div>
|
|
<p>Resize</p>
|
|
</div>
|
|
<div>
|
|
<div class="radio" data-value="brightness">
|
|
<i class="fa fa-sun-o fa-4x i-over"></i>
|
|
</div>
|
|
<p>Brightness</p>
|
|
</div>
|
|
<div>
|
|
<div class="radio" data-value="contrast">
|
|
<i class="fa fa-adjust fa-4x i-over"></i>
|
|
</div>
|
|
<p>Contrast</p>
|
|
</div>
|
|
<div>
|
|
<div class="radio" data-value="saturation">
|
|
<i class="fa fa-tint fa-4x i-over i-small"></i>
|
|
</div>
|
|
<p>Saturation</p>
|
|
</div>
|
|
<div>
|
|
<div class="radio" data-value="rotate">
|
|
<i class="fa fa-rotate-right fa-4x i-over"></i>
|
|
</div>
|
|
<p>Rotate</p>
|
|
</div>
|
|
<div>
|
|
<div class="radio" data-value="crop">
|
|
<i class="fa fa-crop fa-4x i-over"></i>
|
|
</div>
|
|
<p>Crop</p>
|
|
</div>
|
|
</div>
|
|
<div class="center-align">
|
|
<select class="form-control input-lg" id="selectStep">
|
|
<!-- The default null selection has been appended manually in demo.js
|
|
This is because the options in select are overritten when options are appended.-->
|
|
</select>
|
|
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>
|
|
</div>
|
|
<div class="row center-align">
|
|
<button id="resetButton" class="btn btn-default btn-lg" style=" margin: 20px 35px 0px 35px; width:100%;">Clear All Steps</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="sequence-actions" class="panel">
|
|
<div class="panel-body">
|
|
|
|
<div class="row center-align">
|
|
<!--<button class="btn btn-primary btn-block btn-lg" name="save-sequence" id="save-seq">Save Sequence</button> -->
|
|
<!--<button class="btn btn-primary btn-block btn-lg" id="download-btn" name="download" style="display: block; margin: 0px 10px 0px 0px; width: 250px;">Download PNG</button> -->
|
|
<button class="btn btn-primary btn-block btn-lg js-view-as-gif" id="gif" style="margin: 0px 35px 0px 35px;width:100%;">View GIF</button>
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title">Your gif is ready</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="js-download-modal-gif-container">
|
|
<!-- Gif should appear here -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
|
|
|
|
<button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<section id="dwnld" class="panel panel-primary">
|
|
<div class="form-inline">
|
|
<div class="panel-body">
|
|
<div style="text-align:center;">
|
|
<h2 style="margin-top:20px">Save</h2>
|
|
<p>Or click ARROW to save the entire sequence as a workflow for future use.</p>
|
|
<select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
|
|
<option>Save as PNG</option>
|
|
<option>Save as GIF (all steps)</option>
|
|
<option>Save sequence</option>
|
|
<option>Save sequence string</option>
|
|
</select>
|
|
<button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>Need Help?</h2>
|
|
<p>
|
|
Post a link to this and ask help from other community members on <a href="https://github.com/publiclab/image-sequencer/issues/new">Github Issues</a>
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-primary" href="https://gitter.im/publiclab/publiclab">Ask a question on Gitter</a>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h2>Improve this tool</h2>
|
|
<p>
|
|
This is an open source toolkit which you can help add to and improve on <a href="https://github.com/publiclab/image-sequencer/">Github</a>
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-primary" href="https://github.com/publiclab/image-sequencer">View the code »</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
var sequencer;
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|