Skip to content

Commit

Permalink
altered slider to handle up callbacks
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmroyal
tmroyal committed Jul 31, 2012
1 parent c2da9fd commit 4f296bd
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 30 deletions.
10 changes: 6 additions & 4 deletions app/BrushViewer.js
View file
Expand Up @@ -25,6 +25,12 @@ function BrushViewer(x,y,id){
// $('#'+this_.id).css({
// 'background-color': 'rgb('+color.r+','+color.g+','+color.b+')'
// });
this_.canvas.clearRect(0,0,100,100);
this_.canvas.drawImage( img, 0, 0 );

Caman("#"+id, function () {
this.colorize(color.r,color.g,color.b,100).render();
});
};

// to do this, we will get the white image
Expand All @@ -38,10 +44,6 @@ function BrushViewer(x,y,id){
img.onload=function(){

this_.canvas.drawImage( img, 0, 0 );
Caman("#"+id, function () {
this.colorize(255,0,0,255).render();
});


};

Expand Down
4 changes: 4 additions & 0 deletions app/Color.js
View file
Expand Up @@ -27,6 +27,10 @@ function Color(h,s,v){
this_.callbacks[i](this_.color);
}
};

this_.apply_color = function(cb){
cb(this_.color);
}

this_.HSVtoRGB = function(h, s, v){
// courtesy http://mjijackson.com/
Expand Down
20 changes: 19 additions & 1 deletion app/ColorPicker.js
View file
Expand Up @@ -11,13 +11,31 @@ function ColorPicker(x,y,id,color){
indicator_size = ysep*2,
indicator_left = x+range+xoff+10;

this_.hueslider = Slider(x+xoff,y,range,this_.id+'hue',this_.color.setH);

this_.hueslider = Slider(x+xoff,y,range,this_.id+'hue',this_.color.setH, function(){alert('hello')});
this_.satslider = Slider(x+xoff,y+ysep,range,this_.id+'sat',this_.color.setS);
this_.valslider = Slider(x+xoff,y+ysep*2,range,this_.id+'val',this_.color.setV);

this_.addImage(x,y+ibump,'./img/h.png');
this_.addImage(x,y+ibump+ysep,'./img/s.png');
this_.addImage(x,y+ibump+ysep*2,'./img/v.png');

this_.setIndicator = function(clr){
$("#"+id+"indicator").css({
'background-color':'rgb('+clr.r+','+clr.g+','+clr.b+')'
})
};

$('<div/>',{
'id':id+'indicator',
'class':'bordered'
}).appendTo('body')
.css({
'top':y+ysep*3,
'left':x+xoff,
'width':'20',
'height':'20'
});

};

Expand Down
31 changes: 23 additions & 8 deletions app/Slider.js
View file
Expand Up @@ -2,16 +2,18 @@ var OFFSET = 6;

HSliderButton.prototype = UIInput();

function HSliderButton(x,y,range,id,callback){
function HSliderButton(x,y,range,id,down_callback,up_callback){
var this_=this;

UIInput.call(this_,x,y,id,{});
this_.x1 = x;
this_.x2 = x+range-20;
this_.range = range;
// callback sould take a range of zero to one (float)
this_.callback = callback || {};

this_.down_callback = down_callback || function(){};
console.log(up_callback);
this_.up_callback = up_callback || function(){};
console.log(this_.up_callback);


this_.init = function(x,y) {
Expand All @@ -31,19 +33,32 @@ function HSliderButton(x,y,range,id,callback){

if(new_x > this_.x1 && new_x < this_.x2){
this_.setPosition(new_x,this_.y);
this_.callback((this_.x-this_.x1)/this_.range);
this_.down_callback((this_.x-this_.x1)/this_.range);
} else if(new_x < this_.x1){
this_.setPosition(this_.x1,this_.y);
this_.callback(0);
this_.down_callback(0);
} else if(new_x > this_.x2){
this_.setPosition(this_.x2,this_.y);
this_.callback(1);
this_.down_callback(1);
}
};

this_.mouseUp = function(e){
$(document).unbind('mouseup');
$(document).unbind('mousemove');

var new_x = e.pageX-OFFSET;

if(new_x > this_.x1 && new_x < this_.x2){
this_.setPosition(new_x,this_.y);
this_.up_callback((this_.x-this_.x1)/this_.range);
} else if(new_x < this_.x1){
this_.setPosition(this_.x1,this_.y);
this_.up_callback(0);
} else if(new_x > this_.x2){
this_.setPosition(this_.x2,this_.y);
this_.up_callback(1);
}
};


Expand All @@ -58,7 +73,7 @@ function HSliderButton(x,y,range,id,callback){

// ------------------------------------

function Slider(x,y,range,id,callback){
function Slider(x,y,range,id,dcallback,ucallback){
var this_ = this;

var ypos = y+OFFSET,
Expand All @@ -76,5 +91,5 @@ function Slider(x,y,range,id,callback){
'left': x+'px'
});

this_.button = new HSliderButton(x,y,range,id+'btn',callback || function(){});
this_.button = new HSliderButton(x,y,range,id+'btn',dcallback,ucallback);
};
7 changes: 5 additions & 2 deletions app/app.js
View file
Expand Up @@ -2,6 +2,9 @@ $(document).ready(function(){
var clr = new Color(0,1,1,'color');
var cp = new ColorPicker(20,20,'cp',clr);
var brush_viewer = new BrushViewer(200,10,'bview');
brush_viewer.updateColor({r:230,g:100,b:120});
clr.add_callback(brush_viewer.updateColor);


//brush_viewer.updateColor({r:230,g:100,b:120});
//clr.add_callback(brush_viewer.updateColor);
clr.add_callback(cp.setIndicator);
});
72 changes: 57 additions & 15 deletions tabulalbus.js
View file
Expand Up @@ -30,6 +30,12 @@ function BrushViewer(x,y,id){
// $('#'+this_.id).css({
// 'background-color': 'rgb('+color.r+','+color.g+','+color.b+')'
// });
this_.canvas.clearRect(0,0,100,100);
this_.canvas.drawImage( img, 0, 0 );

Caman("#"+id, function () {
this.colorize(color.r,color.g,color.b,100).render();
});
};

// to do this, we will get the white image
Expand All @@ -43,10 +49,6 @@ function BrushViewer(x,y,id){
img.onload=function(){

this_.canvas.drawImage( img, 0, 0 );
Caman("#"+id, function () {
this.colorize(255,0,0,255).render();
});


};

Expand Down Expand Up @@ -86,6 +88,10 @@ function Color(h,s,v){
this_.callbacks[i](this_.color);
}
};

this_.apply_color = function(cb){
cb(this_.color);
}

this_.HSVtoRGB = function(h, s, v){
// courtesy http://mjijackson.com/
Expand Down Expand Up @@ -186,16 +192,18 @@ var OFFSET = 6;

HSliderButton.prototype = UIInput();

function HSliderButton(x,y,range,id,callback){
function HSliderButton(x,y,range,id,down_callback,up_callback){
var this_=this;

UIInput.call(this_,x,y,id,{});
this_.x1 = x;
this_.x2 = x+range-20;
this_.range = range;
// callback sould take a range of zero to one (float)
this_.callback = callback || {};

this_.down_callback = down_callback || function(){};
console.log(up_callback);
this_.up_callback = up_callback || function(){};
console.log(this_.up_callback);


this_.init = function(x,y) {
Expand All @@ -215,19 +223,32 @@ function HSliderButton(x,y,range,id,callback){

if(new_x > this_.x1 && new_x < this_.x2){
this_.setPosition(new_x,this_.y);
this_.callback((this_.x-this_.x1)/this_.range);
this_.down_callback((this_.x-this_.x1)/this_.range);
} else if(new_x < this_.x1){
this_.setPosition(this_.x1,this_.y);
this_.callback(0);
this_.down_callback(0);
} else if(new_x > this_.x2){
this_.setPosition(this_.x2,this_.y);
this_.callback(1);
this_.down_callback(1);
}
};

this_.mouseUp = function(e){
$(document).unbind('mouseup');
$(document).unbind('mousemove');

var new_x = e.pageX-OFFSET;

if(new_x > this_.x1 && new_x < this_.x2){
this_.setPosition(new_x,this_.y);
this_.up_callback((this_.x-this_.x1)/this_.range);
} else if(new_x < this_.x1){
this_.setPosition(this_.x1,this_.y);
this_.up_callback(0);
} else if(new_x > this_.x2){
this_.setPosition(this_.x2,this_.y);
this_.up_callback(1);
}
};


Expand All @@ -242,7 +263,7 @@ function HSliderButton(x,y,range,id,callback){

// ------------------------------------

function Slider(x,y,range,id,callback){
function Slider(x,y,range,id,dcallback,ucallback){
var this_ = this;

var ypos = y+OFFSET,
Expand All @@ -260,7 +281,7 @@ function Slider(x,y,range,id,callback){
'left': x+'px'
});

this_.button = new HSliderButton(x,y,range,id+'btn',callback || function(){});
this_.button = new HSliderButton(x,y,range,id+'btn',dcallback,ucallback);
};

function ColorPicker(x,y,id,color){
Expand All @@ -276,13 +297,31 @@ function ColorPicker(x,y,id,color){
indicator_size = ysep*2,
indicator_left = x+range+xoff+10;

this_.hueslider = Slider(x+xoff,y,range,this_.id+'hue',this_.color.setH);

this_.hueslider = Slider(x+xoff,y,range,this_.id+'hue',this_.color.setH, function(){alert('hello')});
this_.satslider = Slider(x+xoff,y+ysep,range,this_.id+'sat',this_.color.setS);
this_.valslider = Slider(x+xoff,y+ysep*2,range,this_.id+'val',this_.color.setV);

this_.addImage(x,y+ibump,'./img/h.png');
this_.addImage(x,y+ibump+ysep,'./img/s.png');
this_.addImage(x,y+ibump+ysep*2,'./img/v.png');

this_.setIndicator = function(clr){
$("#"+id+"indicator").css({
'background-color':'rgb('+clr.r+','+clr.g+','+clr.b+')'
})
};

$('<div/>',{
'id':id+'indicator',
'class':'bordered'
}).appendTo('body')
.css({
'top':y+ysep*3,
'left':x+xoff,
'width':'20',
'height':'20'
});

};

Expand All @@ -294,6 +333,9 @@ $(document).ready(function(){
var clr = new Color(0,1,1,'color');
var cp = new ColorPicker(20,20,'cp',clr);
var brush_viewer = new BrushViewer(200,10,'bview');
brush_viewer.updateColor({r:230,g:100,b:120});
clr.add_callback(brush_viewer.updateColor);


//brush_viewer.updateColor({r:230,g:100,b:120});
//clr.add_callback(brush_viewer.updateColor);
clr.add_callback(cp.setIndicator);
});

0 comments on commit 4f296bd

Please sign in to comment.