CODEWITHSUNDEEP
iosobjective-cuislideruicolorcgcolorspace
potato
potato

Reputation: 4589

color as a function of slider position for setting a color

I am trying to create a color picker tool, that the user could use. The color picker has a slider of all colors and additional slider to set how dark the color is. Both are shown in image 1 and 2:

Image 1: picks color:

Image 1

Image 2: sets how dark color is

enter image description here

I know that I could use a custom image for slider, and than match each color with a position, that would mean that I would need to create huge array and is a lot of work. The second slider that sets how dark color is would still need to be computed at runtime. I'm doubting this approach is any good and therefore ask you if you have a better idea on how to tackle this problem. Perhaps a mathematical function that connects color with slider position, color(x) where x is position of slider, would do the trick. So how to create a color as a function of position and create a slider based on this math function?

Upvotes: 1

Views: 2213

Answers (3)

Fogmeister
Fogmeister

Reputation: 77621

The way I have done this before is just by using images.

You could render each pixel based on the position of it etc... but that's very intensive stuff and the image won't actually change.

Various apps already have a hue gradient built in (Pixelmatr and Photoshop both do).

Just create a hue gradient image and use that behind the hue slider.

For the brightness slider create a transparent - black gradient image and place that over the slider. Now you can just set the slider colour and the gradient on top of it will make it look correct.

I used this technique to create this colour picker in an app of mine...

enter image description here

The "slider" on the left uses a single image with a hue gradient.

The "brightness / saturation" picker on the right uses a single image with a white-transparent gradient from left to right and a black-transparent gradient from bottom to top. Then I just have to set the background colour based on the hue.

Example

All colours in iOS use 0.0-1.0 based colours.

So all you need is a percentage of how far along each view you are.

So you have a position as a CGPoint and need to produce a percentage.

Each colour is "3 dimensional" (4 with alpha but I didn't include it) so you need three percentages.

For the hue view that is easy...

// put this inside the hue view (if you're not using a UISlider
// this works vertically you ay need yours to work horizontally.
- (CGFloat)hueValueForTouchPosition:(CGPoint)touchPoint {
    return touchPoint.y / CGRectGetHeight(self.frame);
}

This will return the correct hue value based on the position of the touch within the view.

Now you can use that to set the background color of the brightness view.

// this will change the background color of the brightness view to match the selected hue
CGFloat hue = [self.hueView hueValueForTouchPosition:touchPoint];
self.brightnessView.backgroundColor = [UIColor colorWithHue:hue brightness:1.0 saturation:1.0 alpha:1.0];

Now you just have to do the same with the brightness

Upvotes: 2

ShahiM
ShahiM

Reputation: 3268

You need a no less than three sliders, They can be RGB or HSB sliders. then you can directly generate the current color from these methods :

For RGB

[UIColor colorWithRed:slider1.value
                Green:slider2.value
                 Blue:slider3.value
                alpha:1.0];

For HSB

[UIColor colorWithHue:slider1.value
           saturation:slider2.value
           brightness:slider3.value
                alpha:1.0];

As for dynamically setting the background gradient of the sliders, the gradient for each slider can be obtained by varying its value keeping the other two constant.

for example, if H:0.2 S:0.6 B:0.5 is the current slider position, then the gradients would be -

Slider1 : H:0.0 S:0.6 B:0.5 to H:1.0 S:0.6 B:0.5
Slider2 : H:0.2 S:0.0 B:0.5 to H:0.2 S:1.0 B:0.5
Slider3 : H:0.2 S:0.6 B:0.0 to H:0.2 S:0.6 B:1.0

OR

if you want to go the easy way, there are tons of libraries out there. See this for e.g

Upvotes: 1

Mehul Patel
Mehul Patel

Reputation: 23053

You can do like this:

  1. Get UITouch event methods by implementing in a subclass of slider view.

  2. Get position(CGPoint) of touch points.

  3. Do calculation like below

    At max brightness will be 1.0 reduce it using following 

    CGFloat currentBrightness = 1.0 - ((position.x - slider.frame.origin.x)/slider.frame.size.width);

UIColor *newColor = [UIColor colorWithHue:currentHue
                          saturation:currentSaturation
                          brightness:currentBrightness
                               alpha:1.0];

Where currentHue and currentSaturation will be calculated from color selection slider.

Upvotes: 2

Related Questions