00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023 @import "CPColorPicker.j"
00024
00025
00026
00027
00028 @implementation CPSliderColorPicker : CPColorPicker
00029 {
00030 CPView _contentView;
00031
00032 CPSlider _redSlider;
00033 CPSlider _greenSlider;
00034 CPSlider _blueSlider;
00035 CPSlider _hueSlider;
00036 CPSlider _saturationSlider;
00037 CPSlider _brightnessSlider;
00038
00039 CPTextField _rgbLabel;
00040 CPTextField _hsbLabel;
00041 CPTextField _redLabel;
00042 CPTextField _greenLabel;
00043 CPTextField _blueLabel;
00044 CPTextField _hueLabel;
00045 CPTextField _saturationLabel;
00046 CPTextField _brightnessLabel;
00047 CPTextField _hexLabel;
00048
00049 #if PLATFORM(DOM)
00050 DOMElement _redValue;
00051 DOMElement _greenValue;
00052 DOMElement _blueValue;
00053 DOMElement _hueValue;
00054 DOMElement _saturationValue;
00055 DOMElement _brightnessValue;
00056 DOMElement _hexValue;
00057 #endif
00058 }
00059
00060 - (id)initWithPickerMask:(int)mask colorPanel:(CPColorPanel)owningColorPanel
00061 {
00062 return [super initWithPickerMask:mask colorPanel: owningColorPanel];
00063 }
00064
00065 -(id)initView
00066 {
00067 aFrame = CPRectMake(0, 0, CPColorPickerViewWidth, CPColorPickerViewHeight);
00068
00069 _contentView = [[CPView alloc] initWithFrame:aFrame];
00070 [_contentView setAutoresizingMask:CPViewWidthSizable|CPViewHeightSizable];
00071
00072 _rgbLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 10, 100, 20)];
00073 [_rgbLabel setStringValue: "Red, Green, Blue"];
00074 [_rgbLabel setTextColor:[CPColor blackColor]];
00075
00076 _redLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 35, 15, 20)];
00077 [_redLabel setStringValue: "R"];
00078 [_redLabel setTextColor:[CPColor blackColor]];
00079
00080 _redSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 35, aFrame.size.width - 70, 20)];
00081 [_redSlider setMaxValue: 1.0];
00082 [_redSlider setMinValue: 0.0];
00083 [_redSlider setTarget: self];
00084 [_redSlider setAction: @selector(sliderChanged:)];
00085 [_redSlider setAutoresizingMask: CPViewWidthSizable];
00086
00087 #if PLATFORM(DOM)
00088 var updateFunction = function(aDOMEvent)
00089 {
00090 if(isNaN(this.value))
00091 return;
00092
00093 switch(this)
00094 {
00095 case _redValue: [_redSlider setFloatValue:MAX(MIN(ROUND(this.value), 255) / 255.0, 0)];
00096
00097 break;
00098
00099 case _greenValue: [_greenSlider setFloatValue:MAX(MIN(ROUND(this.value), 255) / 255.0, 0)];
00100
00101 break;
00102
00103 case _blueValue: [_blueSlider setFloatValue:MAX(MIN(ROUND(this.value), 255) / 255.0, 0)];
00104
00105 break;
00106
00107 case _hueValue: [_hueSlider setFloatValue:MAX(MIN(ROUND(this.value), 360), 0)];
00108
00109 break;
00110
00111 case _saturationValue: [_saturationSlider setFloatValue:MAX(MIN(ROUND(this.value), 100), 0)];
00112
00113 break;
00114
00115 case _brightnessValue: [_brightnessSlider setFloatValue:MAX(MIN(ROUND(this.value), 100), 0)];
00116
00117 break;
00118 }
00119
00120 this.blur();
00121 };
00122
00123 var keypressFunction = function(aDOMEvent)
00124 {
00125 aDOMEvent = aDOMEvent || window.event;
00126 if (aDOMEvent.keyCode == 13)
00127 {
00128 updateFunction(aDOMEvent);
00129
00130 if(aDOMEvent.preventDefault)
00131 aDOMEvent.preventDefault();
00132 else if(aDOMEvent.stopPropagation)
00133 aDOMEvent.stopPropagation();
00134 }
00135 }
00136
00137
00138 var redValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 35, 45, 20)];
00139 [redValue setAutoresizingMask: CPViewMinXMargin];
00140
00141 _redValue = document.createElement("input");
00142 _redValue.style.width = "40px";
00143 _redValue.style.backgroundColor = "transparent";
00144 _redValue.style.border = "1px solid black";
00145 _redValue.style.color = "black";
00146 _redValue.style.position = "absolute";
00147 _redValue.style.top = "0px";
00148 _redValue.style.left = "0px";
00149 _redValue.onchange = updateFunction;
00150
00151 redValue._DOMElement.appendChild(_redValue);
00152 [_contentView addSubview: redValue];
00153 #endif
00154
00155 _greenLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 58, 15, 20)];
00156 [_greenLabel setStringValue: "G"];
00157 [_greenLabel setTextColor:[CPColor blackColor]];
00158
00159 _greenSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 58, aFrame.size.width - 70, 20)];
00160 [_greenSlider setMaxValue: 1.0];
00161 [_greenSlider setMinValue: 0.0];
00162 [_greenSlider setTarget: self];
00163 [_greenSlider setAction: @selector(sliderChanged:)];
00164 [_greenSlider setAutoresizingMask: CPViewWidthSizable];
00165
00166 #if PLATFORM(DOM)
00167
00168 var greenValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 58, 45, 20)];
00169 [greenValue setAutoresizingMask: CPViewMinXMargin];
00170
00171 _greenValue = _redValue.cloneNode(false);
00172 _greenValue.onchange = updateFunction;
00173
00174 greenValue._DOMElement.appendChild(_greenValue);
00175 [_contentView addSubview: greenValue];
00176 #endif
00177
00178 _blueLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 81, 15, 20)];
00179 [_blueLabel setStringValue: "B"];
00180 [_blueLabel setTextColor:[CPColor blackColor]];
00181
00182 _blueSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 81, aFrame.size.width - 70, 20)];
00183 [_blueSlider setMaxValue: 1.0];
00184 [_blueSlider setMinValue: 0.0];
00185 [_blueSlider setTarget: self];
00186 [_blueSlider setAction: @selector(sliderChanged:)];
00187 [_blueSlider setAutoresizingMask: CPViewWidthSizable];
00188
00189 #if PLATFORM(DOM)
00190
00191 var blueValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 81, 45, 20)];
00192 [blueValue setAutoresizingMask: CPViewMinXMargin];
00193
00194 _blueValue = _redValue.cloneNode(false);
00195 _blueValue.onchange = updateFunction;
00196
00197 blueValue._DOMElement.appendChild(_blueValue);
00198 [_contentView addSubview: blueValue];
00199 #endif
00200 _hsbLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 120, 190, 20)];
00201 [_hsbLabel setStringValue: "Hue, Saturation, Brightness"];
00202 [_hsbLabel setTextColor:[CPColor blackColor]];
00203
00204 _hueLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 145, 15, 20)];
00205 [_hueLabel setStringValue: "H"];
00206 [_hueLabel setTextColor:[CPColor blackColor]];
00207
00208 _hueSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 145, aFrame.size.width - 70, 20)];
00209 [_hueSlider setMaxValue: 359.0];
00210 [_hueSlider setMinValue: 0.0];
00211 [_hueSlider setTarget: self];
00212 [_hueSlider setAction: @selector(sliderChanged:)];
00213 [_hueSlider setAutoresizingMask: CPViewWidthSizable];
00214
00215 #if PLATFORM(DOM)
00216
00217 var hueValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 145, 45, 20)];
00218 [hueValue setAutoresizingMask: CPViewMinXMargin];
00219
00220 _hueValue = _redValue.cloneNode(false);
00221 _hueValue.onchange = updateFunction;
00222
00223 hueValue._DOMElement.appendChild(_hueValue);
00224 [_contentView addSubview: hueValue];
00225 #endif
00226 _saturationLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 168, 15, 20)];
00227 [_saturationLabel setStringValue: "S"];
00228 [_saturationLabel setTextColor:[CPColor blackColor]];
00229
00230 _saturationSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 168, aFrame.size.width - 70, 20)];
00231 [_saturationSlider setMaxValue: 100.0];
00232 [_saturationSlider setMinValue: 0.0];
00233 [_saturationSlider setTarget: self];
00234 [_saturationSlider setAction: @selector(sliderChanged:)];
00235 [_saturationSlider setAutoresizingMask: CPViewWidthSizable];
00236
00237 #if PLATFORM(DOM)
00238
00239 var saturationValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 168, 45, 20)];
00240 [saturationValue setAutoresizingMask: CPViewMinXMargin];
00241
00242 _saturationValue = _redValue.cloneNode(false);
00243 _saturationValue.onchange = updateFunction;
00244
00245 saturationValue._DOMElement.appendChild(_saturationValue);
00246 [_contentView addSubview: saturationValue];
00247 #endif
00248 _brightnessLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 191, 15, 20)];
00249 [_brightnessLabel setStringValue: "B"];
00250 [_brightnessLabel setTextColor:[CPColor blackColor]];
00251
00252 _brightnessSlider = [[CPSlider alloc] initWithFrame: CPRectMake(15, 191, aFrame.size.width - 70, 20)];
00253 [_brightnessSlider setMaxValue: 100.0];
00254 [_brightnessSlider setMinValue: 0.0];
00255 [_brightnessSlider setTarget: self];
00256 [_brightnessSlider setAction: @selector(sliderChanged:)];
00257 [_brightnessSlider setAutoresizingMask: CPViewWidthSizable];
00258
00259 #if PLATFORM(DOM)
00260
00261 var brightnessValue = [[CPView alloc] initWithFrame: CPRectMake(aFrame.size.width - 45, 191, 45, 20)];
00262 [brightnessValue setAutoresizingMask: CPViewMinXMargin];
00263
00264 _brightnessValue = _redValue.cloneNode(false);
00265 _brightnessValue.onchange = updateFunction;
00266
00267 brightnessValue._DOMElement.appendChild(_brightnessValue);
00268 [_contentView addSubview: brightnessValue];
00269 #endif
00270 _hexLabel = [[CPTextField alloc] initWithFrame: CPRectMake(0, 230, 30, 20)];
00271 [_hexLabel setStringValue: "Hex"];
00272 [_hexLabel setTextColor:[CPColor blackColor]];
00273
00274 #if PLATFORM(DOM)
00275
00276 _hexValue = _redValue.cloneNode(false);
00277 _hexValue.style.top = "228px";
00278 _hexValue.style.width = "80px";
00279 _hexValue.style.left = "35px";
00280 _hexValue.onkeypress = function(aDOMEvent)
00281 {
00282 aDOMEvent = aDOMEvent || window.event;
00283 if (aDOMEvent.keyCode == 13)
00284 {
00285 var newColor = [CPColor colorWithHexString: this.value];
00286
00287 if(newColor)
00288 {
00289 [self setColor: newColor];
00290 [[self colorPanel] setColor: newColor];
00291 }
00292
00293 if(aDOMEvent.preventDefault)
00294 aDOMEvent.preventDefault();
00295 else if(aDOMEvent.stopPropagation)
00296 aDOMEvent.stopPropagation();
00297
00298 this.blur();
00299 }
00300 };
00301
00302 _contentView._DOMElement.appendChild(_hexValue);
00303 #endif
00304
00305 [_contentView addSubview: _rgbLabel];
00306 [_contentView addSubview: _redLabel];
00307 [_contentView addSubview: _greenLabel];
00308 [_contentView addSubview: _blueLabel];
00309 [_contentView addSubview: _redSlider];
00310 [_contentView addSubview: _greenSlider];
00311 [_contentView addSubview: _blueSlider];
00312
00313 [_contentView addSubview: _hsbLabel];
00314 [_contentView addSubview: _hueLabel];
00315 [_contentView addSubview: _saturationLabel];
00316 [_contentView addSubview: _brightnessLabel];
00317 [_contentView addSubview: _hueSlider];
00318 [_contentView addSubview: _saturationSlider];
00319 [_contentView addSubview: _brightnessSlider];
00320
00321 [_contentView addSubview: _hexLabel];
00322 }
00323
00324 - (CPView)provideNewView:(BOOL)initialRequest
00325 {
00326 if (initialRequest)
00327 [self initView];
00328
00329 return _contentView;
00330 }
00331
00332 - (int)currentMode
00333 {
00334 return CPSliderColorPickerMode;
00335 }
00336
00337 - (BOOL)supportsMode:(int)mode
00338 {
00339 return (mode == CPSliderColorPickerMode) ? YES : NO;
00340 }
00341
00342 -(void)sliderChanged:(id)sender
00343 {
00344 var newColor,
00345 colorPanel = [self colorPanel],
00346 alpha = [colorPanel opacity];
00347
00348 switch(sender)
00349 {
00350 case _hueSlider:
00351 case _saturationSlider:
00352 case _brightnessSlider: newColor = [CPColor colorWithHue: [_hueSlider floatValue]
00353 saturation: [_saturationSlider floatValue]
00354 brightness: [_brightnessSlider floatValue]
00355 alpha: alpha];
00356
00357 [self updateRGBSliders: newColor];
00358 break;
00359
00360 case _redSlider:
00361 case _greenSlider:
00362 case _blueSlider: newColor = [CPColor colorWithCalibratedRed: [_redSlider floatValue]
00363 green: [_greenSlider floatValue]
00364 blue: [_blueSlider floatValue]
00365 alpha: alpha];
00366
00367 [self updateHSBSliders: newColor];
00368 break;
00369 }
00370
00371 [self updateLabels];
00372 [self updateHex: newColor];
00373 [colorPanel setColor: newColor];
00374 }
00375
00376 -(void)setColor:(CPColor)aColor
00377 {
00378 [self updateRGBSliders: aColor];
00379 [self updateHSBSliders: aColor];
00380 [self updateHex: aColor];
00381 [self updateLabels];
00382 }
00383
00384 -(void)updateHSBSliders:(CPColor)aColor
00385 {
00386 var hsb = [aColor hsbComponents];
00387
00388 [_hueSlider setFloatValue:hsb[0]];
00389 [_saturationSlider setFloatValue:hsb[1]];
00390 [_brightnessSlider setFloatValue:hsb[2]];
00391 }
00392
00393 - (void)updateHex:(CPColor)aColor
00394 {
00395 #if PLATFORM(DOM)
00396 _hexValue.value = [aColor hexString];
00397 #endif
00398 }
00399
00400 - (void)updateRGBSliders:(CPColor)aColor
00401 {
00402 var rgb = [aColor components];
00403
00404 [_redSlider setFloatValue:rgb[0]];
00405 [_greenSlider setFloatValue:rgb[1]];
00406 [_blueSlider setFloatValue:rgb[2]];
00407 }
00408
00409 - (void)updateLabels
00410 {
00411 #if PLATFORM(DOM)
00412 _hueValue.value = ROUND([_hueSlider floatValue]);
00413 _saturationValue.value = ROUND([_saturationSlider floatValue]);
00414 _brightnessValue.value = ROUND([_brightnessSlider floatValue]);
00415
00416 _redValue.value = ROUND([_redSlider floatValue] * 255);
00417 _greenValue.value = ROUND([_greenSlider floatValue] * 255);
00418 _blueValue.value = ROUND([_blueSlider floatValue] * 255);
00419 #endif
00420 }
00421
00422 - (CPImage)provideNewButtonImage
00423 {
00424 return [[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:CPColorPicker] pathForResource:"slider_button.png"] size:CGSizeMake(32, 32)];
00425 }
00426
00427 - (CPImage)provideNewAlternateButtonImage
00428 {
00429 return [[CPImage alloc] initWithContentsOfFile:[[CPBundle bundleForClass:CPColorPicker] pathForResource:"slider_button_h.png"] size:CGSizeMake(32, 32)];
00430 }
00431
00432 @end