Commit 7fb06a54 authored by josh's avatar josh
Browse files

added class labels for colors, erase mode

parent fb03dd2a
......@@ -237,10 +237,17 @@ class MaskController extends Controller {
this._imageData;
this._sliceId;
this._r = 255;
this._defaultR = 0;
this._defaultG = 0;
this._defaultB = 0;
this._r = 0;
this._g = 0;
this._b = 0;
this._erase = false;
// Init image data
this._imageData = this._context.createImageData( sizeX, sizeY );
for ( var i = 0; i < this._imageData.data.length; i += 4) {
......@@ -270,8 +277,17 @@ class MaskController extends Controller {
}
set red( r ) { this._r = r; }
get red() { return this._r; }
set green( g ) { this._g = g; }
get green() { return this._g; }
set blue( b ) { this._b = b; }
get blue() { return this._b; }
set erase( val ) { this._erase = val; }
get erase() { return this._erase; }
/* PUBLIC METHODS */
......@@ -309,8 +325,25 @@ class MaskController extends Controller {
this.redraw();
}
resetData( data ) {
var xPos = data["x"];
var yPos = data["y"];
for ( var i = 0; i < xPos.length; i++ ) {
var red = yPos[i] * ( this._imageY * 4 ) + xPos[i] * 4;
var colorIndices = [ red, red + 1, red + 2, red + 3 ];
this._imageData.data[colorIndices[0]] = this._defaultR;
this._imageData.data[colorIndices[1]] = this._defaultG;
this._imageData.data[colorIndices[2]] = this._defaultB;
}
this.redraw();
}
clicked( ev ) {
this._clicked = true;
ev.preventDefault();
var mousePos = this._getRelativeMousePos( ev );
this._mousePosX = mousePos["x"];
this._mousePosY = mousePos["y"];
......@@ -323,7 +356,22 @@ class MaskController extends Controller {
var percentOfCurrHeight = pixYOffsetFromCorner / this._imgCurrentHeight;
var imageYLoc = this._imageY * percentOfCurrHeight;
$.get( `/get-homogeneous-pixels/${this._sliceId}/${Math.round( imageYLoc )}/${Math.round( imageXLoc )}`, ( data ) => this.updateData( data ) );
if ( !this._erase ) {
this._clicked = true;
console.log( "FILL" )
$.get( `/get-homogeneous-pixels/${this._sliceId}/${Math.round( imageYLoc )}/${Math.round( imageXLoc )}`,
( data ) => this.updateData( data )
);
}
else {
console.log( "ERASE" )
this._clicked = true;
$.get( `/get-homogeneous-pixels/${this._sliceId}/${Math.round( imageYLoc )}/${Math.round( imageXLoc )}`,
( data ) => this.resetData( data )
);
}
}
}
......
......@@ -33,6 +33,7 @@ function processedSelectChange( sliceId ) {
}
function saveMask( mainImageId, sliceId, selectedSize ) {
var saveName = prompt( "Give Mask a Name:", "" );
......@@ -69,22 +70,91 @@ function hexToRgb(hex) {
}
function watchColorPicker( event ) {
function toggleFillMode( button ) {
if ( MASK_CONTROLLER.erase ) {
button.innerHTML = "Mode: FILL";
MASK_CONTROLLER.erase = false;
}
else {
button.innerHTML = "Mode: ERASE";
MASK_CONTROLLER.erase = true;
}
}
var activeR;
var activeG;
var activeB;
var rgbPicked = hexToRgb( event.target.value );
var classColors = {
"class": [],
"color": []
};
MASK_CONTROLLER.red = rgbPicked.r;
MASK_CONTROLLER.green = rgbPicked.g;
MASK_CONTROLLER.blue = rgbPicked.b;
function updateActiveColor( newColorHex ) {
var rgbPicked = hexToRgb( newColorHex );
activeR = rgbPicked.r;
activeG = rgbPicked.g;
activeB = rgbPicked.b;
}
function setControllerColor( r, g, b ) {
MASK_CONTROLLER.red = r;
MASK_CONTROLLER.green = g;
MASK_CONTROLLER.blue = b;
}
function addColorClass() {
var className = prompt( "Input Class Name", "" );
if ( className != null && className != "" ) {
var r = activeR;
var g = activeG;
var b = activeB;
//setControllerColor( r, g, b );
classColors["class"].push( className );
classColors["color"].push( [ r, g, b ] );
console.log( classColors );
// Add new button to toolbar
var toolbar = document.getElementById( "mask-toolbar" );
var newDiv = document.createElement( "div" );
newDiv.style.border = "solid";
newDiv.style.display = "flex";
newDiv.style.justifyContent = "center";
newDiv.style.borderColor = `rgba( ${r}, ${g}, ${b}, 0.5 )`;
var input = document.createElement( "input" );
input.type = "radio";
input.id = className;
input.value = className;
input.name = "active-color";
input.onclick = function() {
setControllerColor( r, g, b );
};
input.style.margin = ".4rem";
var label = document.createElement( "label" );
label.htmlFor = className;
label.innerHTML = className;
newDiv.appendChild( input );
newDiv.appendChild( label );
toolbar.appendChild( newDiv )
}
}
window.addEventListener( "load", ( event ) => {
setNewSliceController();
// Set initial color
var colorPicker = document.getElementById( "html5colorpicker" );
updateActiveColor( colorPicker.value )
colorPicker.addEventListener( "change", watchColorPicker, false );
// Change active color on picker change
colorPicker.addEventListener( "change", ( event ) => { updateActiveColor( event.target.value ) }, false );
});
\ No newline at end of file
......@@ -23,7 +23,7 @@
</div>
<div class="mask-toolbar-container">
<div class="mask-toolbar-container" id="mask-toolbar">
<div>
<select name="reference-images" id="reference-image-selection" class="reference-image-selection" onchange="processedSelectChange( '{{sliceId}}' )">
<option value="">-- Select Slice --</option>
......@@ -40,11 +40,20 @@
<div>
<button id="save-mask-button" onclick="saveMask( '{{imageId}}', '{{sliceId}}', '{{size}}' )">Save Mask</button>
</div>
<div>
<button id="toggle-fill-button" onclick="toggleFillMode( document.getElementById( 'toggle-fill-button' ) )">Mode: FILL</button>
</div>
<div>
<button id="add-class" onclick="addColorClass()">Add Class</button>
</div>
<div>
<input type="color" id="html5colorpicker" value="#ff0000" style="width:85%;">
</div>
</div>
<div class="processed-image-container" id="processed-image-container">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment