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="../src/ui/prepareDynamic.js"></script>
<script src="../dist/image-sequencer.js" charset="utf-8"></script> <script src="../dist/image-sequencer.js" charset="utf-8"></script>
<script src="../dist/image-sequencer-ui.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: --> <!-- for crop module: -->
<script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script> <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
<script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script> <script src="../node_modules/gifshot/dist/gifshot.min.js" type="text/javascript"></script>
@@ -41,6 +42,7 @@
<body> <body>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <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 rel="stylesheet" href="demo.css">
<link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">

61
examples/lib/defaultHtmlStepUi.js
View File

@@ -81,35 +81,52 @@ function DefaultHtmlStepUi(_sequencer, options) {
var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {}; var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {};
if (!isInput) { if (!isInput) {
html += '<span class="output"></span>'; 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 + '">'; html += '<select class="form-control target" name="' + paramName + '">';
for (var option in inputDesc.values) { for (var option in inputDesc.values) {
html += '<option>' + inputDesc.values[option] + '</option>'; html += '<option>' + inputDesc.values[option] + '</option>';
} }
html += '</select>'; html += '</select>';
} else { }
else {
let paramVal = step.options[paramName] || inputDesc.default; 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') {
html +=
'"min="' +
inputDesc.min +
'"max="' +
inputDesc.max +
'"step="' +
(inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
if (inputDesc.id == 'color-picker') { // separate input field for color-picker
html +=
'<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'); var div = document.createElement('div');
@@ -169,6 +186,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150)); $(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
$(step.imgElement).on('click', (e) => {e.preventDefault(); }); $(step.imgElement).on('click', (e) => {e.preventDefault(); });
$(step.ui.querySelectorAll('#color-picker')).colorpicker();
function saveOptions(e) { function saveOptions(e) {
e.preventDefault(); e.preventDefault();
@@ -354,4 +372,3 @@ if(typeof window === 'undefined'){
} }
module.exports = DefaultHtmlStepUi; 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": { "dependencies": {
"base64-img": "^1.0.4", "base64-img": "^1.0.4",
"bootstrap": "~3.4.0", "bootstrap": "~3.4.0",
"bootstrap-colorpicker": "^2.5.3",
"buffer": "~5.2.1", "buffer": "~5.2.1",
"commander": "^2.11.0", "commander": "^2.11.0",
"data-uri-to-buffer": "^2.0.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 iw = pixels.shape[0]; //Width of Original Image
var ih = pixels.shape[1]; //Height of Original Image var ih = pixels.shape[1]; //Height of Original Image
var backgroundArray = []; 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++){ for(var i = 0; i < w ; i++){
backgroundArray = backgroundArray.concat([backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]]); 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%)" "default": "(50%)"
}, },
"backgroundColor": { "backgroundColor": {
"type": "string", "type": "text",
"desc": "Background Color (Four space separated RGBA values)", "desc": "Background Color",
"default": "255 255 255 255", "default": "rgba(255,255,255,255)",
"placeholder": "255 255 255 255" "id": "color-picker"
} }
}, },
"docs-link":"https://github.com/publiclab/image-sequencer/blob/main/docs/MODULES.md#crop-module" "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, ex = options.endX = Number(options.endX) - thickness || iw - 1,
ey = options.endY = Number(options.endY) - thickness || ih - 1, ey = options.endY = Number(options.endY) - thickness || ih - 1,
color = options.color || defaults.color; 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){ var drawSide = function(startX, startY, endX, endY){
for (var n = startX; n <= endX + thickness; n++){ 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, 0, color[0]);
pixels.set(n, k, 1, color[1]); pixels.set(n, k, 1, color[1]);
pixels.set(n, k, 2, color[2]); 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":{ "color":{
"type": "string", "type": "text",
"desc": "RGBA values separated by a space", "desc": "Select color",
"default": "0 0 0 255" "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" "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.x = Number(options.x) || defaults.x;
options.y = Number(options.y) || defaults.y; options.y = Number(options.y) || defaults.y;
color = options.color || defaults.color; 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 x = 0; x < pixels.shape[0]; x += options.x){
for(var y = 0 ; y < pixels.shape[1]; y++){ for(var y = 0 ; y < pixels.shape[1]; y++){
pixels.set(x, y, 0, color[0]); pixels.set(x, y, 0, color[0]);
pixels.set(x, y, 1, color[1]); pixels.set(x, y, 1, color[1]);
pixels.set(x, y, 2, color[2]); 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, 0, color[0]);
pixels.set(x, y, 1, color[1]); pixels.set(x, y, 1, color[1]);
pixels.set(x, y, 2, color[2]); 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":{ "color":{
"type": "string", "type": "string",
"desc": "RGBA values separated by a space", "desc": "Pick color",
"default": "0 0 0 255" "default": "rgba(0,0,0,1)",
"id": "color-picker"
} }
}, },
"only": "browser" "only": "browser"

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

@@ -21,8 +21,9 @@ module.exports = exports = function(pixels, options) {
tolerance = options.tolerance || defaults.tolerance, tolerance = options.tolerance || defaults.tolerance,
maxFactor = (1 + tolerance / 100), maxFactor = (1 + tolerance / 100),
minFactor = (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) { function isSimilar(currx, curry) {
return (pixels.get(currx, curry, 0) >= r * minFactor && pixels.get(currx, curry, 0) <= r * maxFactor && 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 && 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": { "fillColor": {
"type": "String", "type": "String",
"desc": "four space separated numbers representing the RGBA values of fill-color", "desc": "Pick color to fill",
"default": "100 100 100 255", "default": "rgba(100,100,100,1)",
"placeholder": "100 100 100 255" "id": "color-picker"
}, },
"tolerance": { "tolerance": {
"type": "range", "type": "range",

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

@@ -1,9 +1,13 @@
module.exports = exports = function(pixels, options){ module.exports = exports = function(pixels, options){
var color = options.color || '228 86 81'; var color = options.color || 'rgb(228,86,81)';
var replaceColor = options.replaceColor || '0 0 255'; 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'; var replaceMethod = options.replaceMethod || 'greyscale';
color = color.split(' '); color = color.split(',');
replaceColor = replaceColor.split(' '); replaceColor = replaceColor.split(',');
var cr = color[0], var cr = color[0],

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

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

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

@@ -30,18 +30,10 @@
] ]
}, },
"color": { "color": {
"type": "select", "type": "text",
"desc": "Select the text color.", "desc": "Select the text color.",
"default": "black", "default": "rgba(20,120,90,1)",
"values": [ "id": "color-picker"
"black",
"blue",
"green",
"red",
"white",
"pink",
"orange"
]
}, },
"size": { "size": {
"type" : "integer", "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) { function draw(input, callback, progressObj) {
var color = options.color || defaults.color; 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; var factor = options.factor || defaults.factor;
progressObj.stop(true); progressObj.stop(true);

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

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