Skip to content

Commit

Permalink
Merge branch 'dragToCrop' of https://github.com/tech4GT/image-sequencer…
Browse files Browse the repository at this point in the history 
… into dragToCrop

fixes publiclab#205
  • Loading branch information
@tech4GT
tech4GT committed Apr 18, 2018
2 parents d887f5e + 4369f49 commit 9912b51
Show file tree
Hide file tree
Showing 10 changed files with 222 additions and 67 deletions.
17 changes: 16 additions & 1 deletion examples/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ window.onload = function() {
</div>\
<div class="col-md-8">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<img alt="" class="img-thumbnail"/>\
<img alt="" class="img-thumbnail dragable"/>\
</div>\
</div>\
';
Expand Down Expand Up @@ -191,6 +191,9 @@ window.onload = function() {


function addStepUI() {
// Removes the dragable class from the current image
$($(".dragable").get().pop()).imgAreaSelect({remove: true})

var options = {};
var inputs = $('#options input, #options select');
$.each(inputs, function() {
Expand All @@ -202,6 +205,18 @@ window.onload = function() {
if (hash != '') hash += ',';
setUrlHashParameter('steps', hash + $('#addStep select').val())
sequencer.addSteps($('#addStep select').val(),options).run();

// Adds the dragable class to the cropped image
$($(".dragable").get().pop()).imgAreaSelect({
handles: true,
onSelectEnd: function(img,selection){
let options = $('#options > div > div > input')
options[0].value = selection.x1
options[1].value = selection.y1
options[2].value = (selection.x2 - selection.x1)
options[3].value = (selection.y2 - selection.y1)
}
});
}

$('#addStep button').on('click', addStepUI);
Expand Down
Binary file added examples/image-area-select/css/border-anim-h.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/image-area-select/css/border-anim-v.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/image-area-select/css/border-h.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/image-area-select/css/border-v.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions examples/image-area-select/css/imgareaselect-animated.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
* imgAreaSelect animated border style
*/

.imgareaselect-border1 {
background: url(border-anim-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
background: url(border-anim-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
background: url(border-anim-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
background: url(border-anim-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-outer {
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-selection {
}
41 changes: 41 additions & 0 deletions examples/image-area-select/css/imgareaselect-default.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
* imgAreaSelect default style
*/

.imgareaselect-border1 {
background: url(border-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
background: url(border-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
background: url(border-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
background: url(border-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-outer {
background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-selection {
}
36 changes: 36 additions & 0 deletions examples/image-area-select/css/imgareaselect-deprecated.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*
* imgAreaSelect style to be used with deprecated options
*/

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-border1 {
border: solid 1px #000;
}

.imgareaselect-border2 {
border: dashed 1px #fff;
}

.imgareaselect-handle {
background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}

.imgareaselect-outer {
background-color: #000;
filter: alpha(opacity=40);
opacity: 0.4;
}

.imgareaselect-selection {
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
1 change: 1 addition & 0 deletions examples/image-area-select/js/jquery.imgareaselect.pack.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

153 changes: 87 additions & 66 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,73 +3,94 @@
<html>


<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF8">

<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="../dist/image-sequencer.js" charset="utf-8"></script>
<script src="lib/urlHash.js" charset="utf-8"></script>
<script src="lib/imageSelection.js" charset="utf-8"></script>
<script src="demo.js" charset="utf-8"></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 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">Public Lab</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=""></center>
</div>

<section id="steps" class="row"></section>

<section id="addStep">
<div class="row">
<select class="form-control">
<option value="none" disabled selected>Select a new step...</option>
</select>
</div>
<hr />
<div class="row">
<div id="options"></div>
</div>
<div class="row add">
<button class="btn btn-success btn-lg" name="add">Add Step</button>
</div>
</section>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF8">

<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="../dist/image-sequencer.js" charset="utf-8"></script>
<script src="lib/urlHash.js" charset="utf-8"></script>
<script src="lib/imageSelection.js" charset="utf-8"></script>
<script src="demo.js" charset="utf-8"></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="./image-area-select/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">Public Lab</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=""></center>
</div>

<script type="text/javascript">

var sequencer;


</script>

</body>
<section id="steps" class="row"></section>

<section id="addStep">
<div class="row">
<select id="selectStep" class="form-control">
<option value="none" disabled selected>Select a new step...</option>
</select>
</div>
<hr />
<div class="row">
<div id="options"></div>
</div>
<div class="row add">
<button class="btn btn-success btn-lg" name="add">Add Step</button>
</div>
</section>

</div>
<script src="./image-area-select/js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
$(function () {

var sequencer
let selectStep = $('#selectStep');
selectStep.change(function () {
if(selectStep[0].value === "crop"){
$($(".dragable").get().pop()).imgAreaSelect({
handles: true,
onSelectEnd: function(img,selection){
let options = $('#options > div > div > input')
options[0].value = selection.x1
options[1].value = selection.y1
options[2].value = Math.abs(selection.x2 - selection.x1)
options[3].value = Math.abs(selection.y2 - selection.y1)
}
});
}
else{
$($(".dragable").get().pop()).imgAreaSelect({
remove: true
})
}
})
})
</script>

</body>

</html>

0 comments on commit 9912b51

Please sign in to comment.