Skip to content

Commit

Permalink
linted via ESLint
Browse files Browse the repository at this point in the history
  • Loading branch information
@willgraf
willgraf committed Jul 25, 2020
1 parent d449823 commit 17bdab1
Showing 1 changed file with 75 additions and 77 deletions.
152 changes: 75 additions & 77 deletions browser/static/js/adjust.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// helper functions

class ImageAdjuster{
class ImageAdjuster {
constructor(width, height, rgb, channelMax) {
// canvas element used for image processing
this.canvas = document.createElement('canvas');
Expand All @@ -14,7 +14,7 @@ class ImageAdjuster{
this.canvas.width = width;
document.body.appendChild(this.canvas);

this.ctx = this.canvas.getContext("2d");
this.ctx = this.canvas.getContext('2d');
this.ctx.imageSmoothingEnabled = false;

// these will never change once initialized
Expand All @@ -36,9 +36,9 @@ class ImageAdjuster{
this.brightnessMap = new Map();

for (let i = 0; i < channelMax; i++) {
this.brightnessMap.set(i, 0);
this.contrastMap.set(i, 0);
}
this.brightnessMap.set(i, 0);
this.contrastMap.set(i, 0);
}
this.brightness = this.brightnessMap.get(0);
this.contrast = this.contrastMap.get(0);

Expand All @@ -57,6 +57,7 @@ class ImageAdjuster{
// composite image + outlines, transparent highlight
this.postCompImg = new Image();

// TODO: undefined variables
if (rgb) {
this.rawImage.onload = () => this.contrastRaw();
this.contrastedRaw.onload = () => this.rawAdjust(current_highlight, edit_mode, brush, mode);
Expand All @@ -79,7 +80,7 @@ class ImageAdjuster{
// or use this group of methods?

changeContrast(inputChange) {
let modContrast = -Math.sign(inputChange) * 4;
const modContrast = -Math.sign(inputChange) * 4;
// stop if fully desaturated
let newContrast = Math.max(this.contrast + modContrast, this.MIN_CONTRAST);
// stop at 8x contrast
Expand All @@ -94,7 +95,7 @@ class ImageAdjuster{
}

changeBrightness(inputChange) {
let modBrightness = -Math.sign(inputChange);
const modBrightness = -Math.sign(inputChange);
let newBrightness = Math.min(this.brightness + modBrightness, 255);
newBrightness = Math.max(newBrightness + modBrightness, -512);

Expand All @@ -118,92 +119,93 @@ class ImageAdjuster{
}

// modify image data in place to recolor
_recolorScaled(data, i, j, jlen, r=255, g=255, b=255) {
_recolorScaled(data, i, j, jlen, r = 255, g = 255, b = 255) {
// location in 1D array based on i and j
let pixel_num = jlen*j + i;
const pixelNum = (jlen * j + i) * 4;
// set to color by changing RGB values
// data is clamped 8bit type, so +255 sets to 255, -255 sets to 0
data[(pixel_num*4)] += r;
data[(pixel_num*4) + 1] += g;
data[(pixel_num*4) + 2] += b;
data[pixelNum] += r;
data[pixelNum + 1] += g;
data[pixelNum + 2] += b;
}

// image adjustment functions: take img as input and manipulate data attribute
// pixel data is 1D array of 8bit RGBA values
// TODO: do we want to pass in B&C values or use object attributes?
_contrast_image(img, contrast=0, brightness=0) {
let d = img.data;
_contrastImage(img, contrast = 0, brightness = 0) {
const d = img.data;
contrast = (contrast / 100) + 1;
for (let i = 0; i < d.length; i += 4) {
d[i] = d[i]*contrast + brightness;
d[i + 1] = d[i+1]*contrast + brightness;
d[i + 2] = d[i+2]*contrast + brightness;
d[i] = d[i] * contrast + brightness;
d[i + 1] = d[i + 1] * contrast + brightness;
d[i + 2] = d[i + 2] * contrast + brightness;
}
}

_grayscale(img) {
let data = img.data;
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
const data = img.data;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
}

_invert(img) {
let data = img.data;
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // red
const data = img.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // red
data[i + 1] = 255 - data[i + 1]; // green
data[i + 2] = 255 - data[i + 2]; // blue
}
}

preCompositeLabelMod(img, h1, h2) {
let r, g, b;
let ann = img.data;
const ann = img.data;
// use label array to figure out which pixels to recolor
for (var j = 0; j < seg_array.length; j += 1){ // y
for (var i = 0; i < seg_array[j].length; i += 1){ // x
let jlen = seg_array[j].length;
let currentVal = Math.abs(seg_array[j][i]);
// TODO: seg_array is not defined.
for (let j = 0; j < seg_array.length; j += 1) { // y
for (let i = 0; i < seg_array[j].length; i += 1) { // x
const jlen = seg_array[j].length;
const currentVal = Math.abs(seg_array[j][i]);
if (currentVal === h1 || currentVal === h2) {
this._recolorScaled(ann, i, j, jlen, r=255, g=-255, b=-255);
this._recolorScaled(ann, i, j, jlen, r = 255, g = -255, b = -255);
}
}
}
}

postCompositeLabelMod(img,
redOutline=false, r1=-1,
singleOutline=false, o1=-1,
outlineAll = false,
translucent=false, t1=-1, t2=-1) {

redOutline = false, r1 = -1,
singleOutline = false, o1 = -1,
outlineAll = false,
translucent = false, t1 = -1, t2 = -1) {
let r, g, b;
let ann = img.data;
const ann = img.data;
// use label array to figure out which pixels to recolor
for (var j = 0; j < seg_array.length; j += 1){ // y
for (var i = 0; i < seg_array[j].length; i += 1){ // x
let jlen = seg_array[j].length;
let currentVal = seg_array[j][i];
// TODO: seg_array is not defined.
for (let j = 0; j < seg_array.length; j += 1) { // y
for (let i = 0; i < seg_array[j].length; i += 1) { // x
const jlen = seg_array[j].length;
const currentVal = seg_array[j][i];
// outline red
if (redOutline && currentVal === -r1) {
this._recolorScaled(ann, i, j, jlen, r=255, g=-255, b=-255);
this._recolorScaled(ann, i, j, jlen, r = 255, g = -255, b = -255);
continue;
// outline white single
} else if (singleOutline && currentVal === -o1) {
this._recolorScaled(ann, i, j, jlen, r=255, g=255, b=255);
this._recolorScaled(ann, i, j, jlen, r = 255, g = 255, b = 255);
continue;
// outline all remaining edges with white
} else if (outlineAll && currentVal < 0) {
this._recolorScaled(ann, i, j, jlen, r=255, g=255, b=255);
this._recolorScaled(ann, i, j, jlen, r = 255, g = 255, b = 255);
continue;
// translucent highlight
} else if (translucent &&
(Math.abs(currentVal) === t1 || Math.abs(currentVal) === t2)) {
this._recolorScaled(ann, i, j, jlen, r=60, g=60, b=60);
this._recolorScaled(ann, i, j, jlen, r = 60, g = 60, b = 60);
continue;
}
}
Expand All @@ -212,30 +214,28 @@ class ImageAdjuster{

// apply contrast+brightness to raw image
contrastRaw() {

// draw rawImage so we can extract image data
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.drawImage(this.rawImage, 0, 0, this.width, this.height);
let rawData = this.ctx.getImageData(0, 0, this.width, this.height);
this._contrast_image(rawData, this.contrast, this.brightness);
const rawData = this.ctx.getImageData(0, 0, this.width, this.height);
this._contrastImage(rawData, this.contrast, this.brightness);
this.ctx.putImageData(rawData, 0, 0);

this.contrastedRaw.src = this.canvas.toDataURL();
}

preCompAdjust(current_highlight, edit_mode, brush, mode) {

preCompAdjust(currentHighlight, editMode, brush, mode) {
this.segLoaded = false;

// draw segImage so we can extract image data
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.drawImage(this.segImage, 0, 0, this.width, this.height);

if (current_highlight) {
let segData = this.ctx.getImageData(0, 0, this.width, this.height);
if (currentHighlight) {
const segData = this.ctx.getImageData(0, 0, this.width, this.height);
let h1, h2;

if (edit_mode) {
if (editMode) {
h1 = brush.value;
h2 = -1;
} else {
Expand All @@ -254,11 +254,10 @@ class ImageAdjuster{

// adjust raw further, pre-compositing (use to draw when labels hidden)
preCompRawAdjust() {

// further adjust raw image
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.drawImage(this.contrastedRaw, 0, 0, this.width, this.height);
let rawData = this.ctx.getImageData(0, 0, this.width, this.height);
const rawData = this.ctx.getImageData(0, 0, this.width, this.height);
this._grayscale(rawData);
if (this.displayInvert) {
this._invert(rawData);
Expand All @@ -270,7 +269,6 @@ class ImageAdjuster{

// composite annotations on top of adjusted raw image
compositeImages() {

this.ctx.drawImage(this.preCompRaw, 0, 0, this.width, this.height);

// add labels on top
Expand All @@ -283,91 +281,91 @@ class ImageAdjuster{
}

// apply outlines, transparent highlighting
postCompAdjust(edit_mode, brush) {

postCompAdjust(editMode, brush) {
// draw compositedImg so we can extract image data
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.drawImage(this.compositedImg, 0, 0, this.width, this.height);

// add outlines around conversion brush target/value
let imgData = this.ctx.getImageData(0, 0, this.width, this.height);
const imgData = this.ctx.getImageData(0, 0, this.width, this.height);

let redOutline, r1, singleOutline, o1, outlineAll, translucent, t1, t2;
// red outline for conversion brush target
if (edit_mode && brush.conv && brush.target !== -1) {
if (editMode && brush.conv && brush.target !== -1) {
redOutline = true;
r1 = brush.target;
}
if (edit_mode && brush.conv && brush.value !== -1) {
if (editMode && brush.conv && brush.value !== -1) {
singleOutline = true;
o1 = brush.value;
}

this.postCompositeLabelMod(imgData, redOutline, r1, singleOutline, o1,
outlineAll, translucent, t1, t2);
this.postCompositeLabelMod(
imgData, redOutline, r1, singleOutline, o1,
outlineAll, translucent, t1, t2);

this.ctx.putImageData(imgData, 0, 0);

this.postCompImg.src = this.canvas.toDataURL();
}

// apply outlines, transparent highlighting for RGB
postCompAdjustRGB(current_highlight, edit_mode, brush, mode) {

postCompAdjustRGB(currentHighlight, editMode, brush, mode) {
// draw contrastedRaw so we can extract image data
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.drawImage(this.contrastedRaw, 0, 0, this.width, this.height);

// add outlines around conversion brush target/value
let imgData = this.ctx.getImageData(0, 0, this.width, this.height);
const imgData = this.ctx.getImageData(0, 0, this.width, this.height);

let redOutline, r1, singleOutline, o1, outlineAll, translucent, t1, t2;
let redOutline, r1, singleOutline, o1, translucent, t1, t2;

// red outline for conversion brush target
if (edit_mode && brush.conv && brush.target !== -1) {
if (editMode && brush.conv && brush.target !== -1) {
redOutline = true;
r1 = brush.target;
}

// singleOutline never on for RGB

outlineAll = true;
const outlineAll = true;

// translucent highlight
if (current_highlight) {
if (currentHighlight) {
translucent = true;
if (edit_mode) {
if (editMode) {
t1 = brush.value;
} else {
t1 = mode.highlighted_cell_one;
t2 = mode.highlighted_cell_two;
}
}

this.postCompositeLabelMod(imgData, redOutline, r1, singleOutline, o1,
this.postCompositeLabelMod(
imgData, redOutline, r1, singleOutline, o1,
outlineAll, translucent, t1, t2);

this.ctx.putImageData(imgData, 0, 0);

this.postCompImg.src = this.canvas.toDataURL();
}

segAdjust(current_highlight, edit_mode, brush, mode) {
segAdjust(currentHighlight, editMode, brush, mode) {
this.segLoaded = true;
if (this.rawLoaded && this.segLoaded) {
if (this.rgb) {
this.postCompAdjustRGB(current_highlight, edit_mode, brush, mode);
this.postCompAdjustRGB(currentHighlight, editMode, brush, mode);
} else {
this.compositeImages();
}
}
}

rawAdjust(current_highlight, edit_mode, brush, mode) {
rawAdjust(currentHighlight, editMode, brush, mode) {
this.rawLoaded = true;
if (this.rawLoaded && this.segLoaded) {
if (this.rgb) {
this.postCompAdjustRGB(current_highlight, edit_mode, brush, mode);
this.postCompAdjustRGB(currentHighlight, editMode, brush, mode);
} else {
this.compositeImages();
}
Expand Down

0 comments on commit 17bdab1

Please sign in to comment.