eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added Color Picker for selecting RGBA values in modules (#1095)

Browse Source 
* Added Color Picker for selecting RGBA values in modules

* added scripts from node_modules

* selector-all added and alpha removed for some modules

* Modified description
This commit is contained in:
aashna27
2019-06-16 23:08:51 +05:30
committed by Jeffrey Warren
parent e1e9d57d7a
commit b34ec00efd
17 changed files with 2052 additions and 2017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/index.html
View File

@@ -27,6 +27,7 @@
<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>
<script src="../node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></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>
@@ -41,6 +42,7 @@
<body>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet">
<link rel="stylesheet" href="demo.css">
<link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">

59
examples/lib/defaultHtmlStepUi.js
View File

@@ -81,35 +81,52 @@ function DefaultHtmlStepUi(_sequencer, options) {
var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {};
if (!isInput) {
html += '<span class="output"></span>';
} else if (inputDesc.type.toLowerCase() == 'select') {
}
else if (inputDesc.type.toLowerCase() == 'select') {
html += '<select class="form-control target" name="' + paramName + '">';
for (var option in inputDesc.values) {
html += '<option>' + inputDesc.values[option] + '</option>';
}
html += '</select>';
} else {
}
else {
let paramVal = step.options[paramName] || inputDesc.default;
html =
'<input class="form-control target" type="' +
inputDesc.type +
'" name="' +
paramName +
'" value="' +
paramVal +
'" placeholder ="' +
(inputDesc.placeholder || '');
if (inputDesc.type.toLowerCase() == 'range') {
if (inputDesc.id == 'color-picker') { // separate input field for color-picker
html +=
'"min="' +
inputDesc.min +
'"max="' +
inputDesc.max +
'"step="' +
(inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
'<div id="color-picker" class="input-group colorpicker-component">' +
'<input class="form-control target" type="' +
inputDesc.type +
'" name="' +
paramName +
'" value="' +
paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
'</div>';
}
else { // use this if the the field isn't color-picker
html =
'<input class="form-control target" type="' +
inputDesc.type +
'" name="' +
paramName +
'" value="' +
paramVal +
'" placeholder ="' +
(inputDesc.placeholder || '');
if (inputDesc.type.toLowerCase() == 'range') {
html +=
'"min="' +
inputDesc.min +
'"max="' +
inputDesc.max +
'"step="' +
(inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>';
}
else html += '">';
}
else html += '">';
}
var div = document.createElement('div');
@@ -169,6 +186,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
$(step.imgElement).on('click', (e) => {e.preventDefault(); });
$(step.ui.querySelectorAll('#color-picker')).colorpicker();
function saveOptions(e) {
e.preventDefault();
@@ -354,4 +372,3 @@ if(typeof window === 'undefined'){
}
module.exports = DefaultHtmlStepUi;

3909
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -32,6 +32,7 @@
"dependencies": {
"base64-img": "^1.0.4",
"bootstrap": "~3.4.0",
"bootstrap-colorpicker": "^2.5.3",
"buffer": "~5.2.1",
"commander": "^2.11.0",
"data-uri-to-buffer": "^2.0.0",

3
src/modules/Crop/Crop.js
View File

@@ -17,7 +17,8 @@ module.exports = function Crop(input, options, callback) {
var iw = pixels.shape[0]; //Width of Original Image
var ih = pixels.shape[1]; //Height of Original Image
var backgroundArray = [];
backgroundColor = options.backgroundColor.split(' ');
backgroundColor = options.backgroundColor.substring(options.backgroundColor.indexOf('(') + 1, options.backgroundColor.length - 1); // extract only the values from rgba(_,_,_,_)
backgroundColor = backgroundColor.split(',');
for(var i = 0; i < w ; i++){
backgroundArray = backgroundArray.concat([backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]]);
}

8
src/modules/Crop/info.json
View File

@@ -24,10 +24,10 @@
"default": "(50%)"
},
"backgroundColor": {
"type": "string",
"desc": "Background Color (Four space separated RGBA values)",
"default": "255 255 255 255",
"placeholder": "255 255 255 255"
"type": "text",
"desc": "Background Color",
"default": "rgba(255,255,255,255)",
"id": "color-picker"
}
},
"docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#crop-module"

5
src/modules/DrawRectangle/DrawRectangle.js
View File

@@ -11,7 +11,8 @@ module.exports = exports = function(pixels, options){
ex = options.endX = Number(options.endX) - thickness || iw - 1,
ey = options.endY = Number(options.endY) - thickness || ih - 1,
color = options.color || defaults.color;
color = color.split(' ');
color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
color = color.split(',');
var drawSide = function(startX, startY, endX, endY){
for (var n = startX; n <= endX + thickness; n++){
@@ -19,7 +20,7 @@ module.exports = exports = function(pixels, options){
pixels.set(n, k, 0, color[0]);
pixels.set(n, k, 1, color[1]);
pixels.set(n, k, 2, color[2]);
pixels.set(n, k, 3, color[3]);
//pixels.set(n, k, 3, color[3]);
}
}
};

7
src/modules/DrawRectangle/info.json
View File

@@ -33,9 +33,10 @@
},
"color":{
"type": "string",
"desc": "RGBA values separated by a space",
"default": "0 0 0 255"
"type": "text",
"desc": "Select color",
"default": "rgba(20,20,20,1)",
"id": "color-picker"
}
},
"docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#draw-rectangle-module"

7
src/modules/GridOverlay/GridOverlay.js
View File

@@ -4,14 +4,15 @@ module.exports = exports = function(pixels, options){
options.x = Number(options.x) || defaults.x;
options.y = Number(options.y) || defaults.y;
color = options.color || defaults.color;
color = color.split(' ');
color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
color = color.split(',');
for(var x = 0; x < pixels.shape[0]; x += options.x){
for(var y = 0 ; y < pixels.shape[1]; y++){
pixels.set(x, y, 0, color[0]);
pixels.set(x, y, 1, color[1]);
pixels.set(x, y, 2, color[2]);
pixels.set(x, y, 3, color[3]);
//pixels.set(x, y, 3, color[3]);
}
}
@@ -20,7 +21,7 @@ module.exports = exports = function(pixels, options){
pixels.set(x, y, 0, color[0]);
pixels.set(x, y, 1, color[1]);
pixels.set(x, y, 2, color[2]);
pixels.set(x, y, 3, color[3]);
//pixels.set(x, y, 3, color[3]);
}
}

6
src/modules/GridOverlay/info.json
View File

@@ -14,8 +14,10 @@
},
"color":{
"type": "string",
"desc": "RGBA values separated by a space",
"default": "0 0 0 255"
"desc": "Pick color",
"default": "rgba(0,0,0,1)",
"id": "color-picker"
}
},
"only": "browser"

3
src/modules/PaintBucket/PaintBucket.js
View File

@@ -21,8 +21,9 @@ module.exports = exports = function(pixels, options) {
tolerance = options.tolerance || defaults.tolerance,
maxFactor = (1 + tolerance / 100),
minFactor = (1 - tolerance / 100);
fillColor = fillColor.substring(fillColor.indexOf('(') + 1, fillColor.length - 1); // extract only the values from rgba(_,_,_,_)
fillColor = fillColor.split(',');
fillColor = fillColor.split(' ');
function isSimilar(currx, curry) {
return (pixels.get(currx, curry, 0) >= r * minFactor && pixels.get(currx, curry, 0) <= r * maxFactor &&
pixels.get(currx, curry, 1) >= g * minFactor && pixels.get(currx, curry, 1) <= g * maxFactor &&

6
src/modules/PaintBucket/info.json
View File

@@ -14,9 +14,9 @@
},
"fillColor": {
"type": "String",
"desc": "four space separated numbers representing the RGBA values of fill-color",
"default": "100 100 100 255",
"placeholder": "100 100 100 255"
"desc": "Pick color to fill",
"default": "rgba(100,100,100,1)",
"id": "color-picker"
},
"tolerance": {
"type": "range",

12
src/modules/ReplaceColor/ReplaceColor.js
View File

@@ -1,9 +1,13 @@
module.exports = exports = function(pixels, options){
var color = options.color || '228 86 81';
var replaceColor = options.replaceColor || '0 0 255';
var color = options.color || 'rgb(228,86,81)';
color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
var replaceColor = options.replaceColor || 'rgb(0,0,255)';
replaceColor = replaceColor.substring(replaceColor.indexOf('(') + 1 , replaceColor.length - 1); // extract only the values from rgba(_,_,_,_)
var replaceMethod = options.replaceMethod || 'greyscale';
color = color.split(' ');
replaceColor = replaceColor.split(' ');
color = color.split(',');
replaceColor = replaceColor.split(',');
var cr = color[0],

12
src/modules/ReplaceColor/info.json
View File

@@ -10,15 +10,15 @@
},
"replaceColor": {
"type": "String",
"desc": "three space separated numbers representing the RGB values of color to be filled",
"default": "0 0 255",
"placeholder": "0 0 255"
"desc": "Pick color to be filled",
"default": "rgb(0,0,255)",
"id": "color-picker"
},
"color": {
"type": "String",
"desc": "three space separated numbers representing the RGB values of color to be replaced",
"default": "228 86 81",
"placeholder": "228 86 81"
"desc": "Pick color to be replaced",
"default": "rgb(228,86,81)",
"id": "color-picker"
},
"tolerance": {
"type": "range",

14
src/modules/TextOverlay/info.json
View File

@@ -30,18 +30,10 @@
]
},
"color": {
"type": "select",
"type": "text",
"desc": "Select the text color.",
"default": "black",
"values": [
"black",
"blue",
"green",
"red",
"white",
"pink",
"orange"
]
"default": "rgba(20,120,90,1)",
"id": "color-picker"
},
"size": {
"type" : "integer",

4
src/modules/Tint/Module.js
View File

@@ -7,7 +7,9 @@ module.exports = function Tint(options, UI) {
function draw(input, callback, progressObj) {
var color = options.color || defaults.color;
color = color.split(' ');
color = color.substring(color.indexOf('(') + 1, color.length - 1); // extract only the values from rgba(_,_,_,_)
color = color.split(',');
var factor = options.factor || defaults.factor;
progressObj.stop(true);

7
src/modules/Tint/info.json
View File

@@ -3,9 +3,10 @@
"description": "Add color tint to an image",
"inputs": {
"color":{
"type": "String",
"desc": "RGB values separated by a space",
"default": "0 0 255"
"type": "text",
"desc": "Select color",
"default": "rgb(0,0,255)",
"id": "color-picker"
},
"factor": {
"type": "range",