mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 03:10:03 +01:00
9168c15cf9
* added gif feature * increased frame duration n changed gif btn name * removed inline css * improved ui * #363 Add placeholder option to input (#370) * Add placeholder option to input , change type of brightness input to number Changes to be committed: modified: examples/lib/defaultHtmlStepUi.js modified: src/modules/Brightness/info.json * change 0% to 0 in brightness placeholder * Add gamma module (#374) * Add gamma module * update description * Add matrix math module (#358) * Add matrix math module * add info.json file * correct format of module * Add a constant factor input field * clone the pixels array * change default values * add extra information on convolution module (#381) * adds default values to input fields for all module steps ( fixes #382 ) (#384) * added default values to input fields for all module steps * merged Signed-off-by: Ankit Singla <asingla590@gmail.com> * Accept type images in input field #364 (#366) * gif button name changed * fixes #383 (#396) Signed-off-by: Varun Gupta <varun.gupta1798@gmail.com> * fix (#387) Signed-off-by: Varun Gupta <varun.gupta1798@gmail.com> * updated * Issue #392 Fixes alignment of message in Add step box (#393) * Fixes alignment of message in Add step box * fixes css info id * updates class selector in demo * Spacing changes * correctly regulates the behaviour of all links (#397) Signed-off-by: Ankit Singla <asingla590@gmail.com> * enables Save button for an action if any of its input fields gain focus (#394) * Updated index.html (#379) * add histogram module (#354) * add histogram module Signed-off-by: tech4GT <varun.gupta1798@gmail.com> * add option to drop gradient Signed-off-by: Varun Gupta <varun.gupta1798@gmail.com> * fix bug Signed-off-by: Varun Gupta <varun.gupta1798@gmail.com>
150 lines
4.7 KiB
HTML
150 lines
4.7 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">
|
|
<link rel="icon" sizes="192x192" href="../icons/ic_192.png">
|
|
|
|
|
|
<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="lib/urlHash.js" charset="utf-8"></script>
|
|
<script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
|
|
<script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
|
|
<script src="demo.js" charset="utf-8"></script>
|
|
<!-- for crop module: -->
|
|
<script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
|
|
<script src="gifshot.js" type="text/javascript"></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">
|
|
<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>Image Sequencer</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">
|
|
<p>
|
|
<i>Select or drag in an image to start!</i>
|
|
</p>
|
|
<center>
|
|
<input type="file" id="fileInput" value="" accept="image/*">
|
|
</center>
|
|
</div>
|
|
|
|
<section id="steps" class="row"></section>
|
|
|
|
<hr />
|
|
<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="text-align:center;">
|
|
<select class="form-control input-lg" id="selectStep">
|
|
<option value="none" disabled selected>Select a new step...</option>
|
|
</select>
|
|
<button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>
|
|
</div>
|
|
<br />
|
|
<p class="info">Select a new module to add to your sequence.</p>
|
|
</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;">
|
|
<button class="btn btn-success btn-lg" id="download-btn" name="download">Download</button>
|
|
<button class="btn btn-success btn-lg" onclick="create_gif()" id="gif">Download as Gif</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
var sequencer;
|
|
})
|
|
|
|
function create_gif(){
|
|
|
|
var imgs = document.getElementsByTagName("img");
|
|
var imgSrcs = [];
|
|
|
|
for (var i = 0; i < imgs.length; i++) {
|
|
imgSrcs.push(imgs[i].src);
|
|
}
|
|
|
|
gifshot.createGIF({
|
|
'gifWidth': 400,
|
|
'gifHeight': 350,
|
|
'images': imgSrcs,
|
|
'frameDuration': 7,
|
|
},
|
|
function(obj) {
|
|
if(!obj.error) {
|
|
var image = obj.image,
|
|
animatedImage = document.createElement('img');
|
|
animatedImage.src = image;
|
|
animatedImage.id = "gif_element";
|
|
var link = document.createElement('a');
|
|
var att1 = document.createAttribute("href");
|
|
att1.value = animatedImage.src;
|
|
var att2 = document.createAttribute("download");
|
|
att2.value = "index.gif";
|
|
link.setAttributeNode(att1);
|
|
link.setAttributeNode(att2);
|
|
link.appendChild(animatedImage);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|