Error
  • Copy failed
08August

Convert color palate image to NSArray or ArrayList

Convert color palate image to NSArray or ArrayList

To bring a little bit more color into GUI of the airTracker we decided to ink the text color of the text fields depending on the concentration value e.g. if the concentration value is less than 5 than the text should be inked light green, if the concentration is above 30 the text color gets more and more dark orange.

It wasn't as easy as I expected. There was a lot of web search and a lot of testing necessary, however finally I developed this solution based on Mark Johnson's color picker. I decided to create an array containing 50 color values representing the concentration range that starting from 0 to 250.

color palate; width 250 pixel

Basically the solution is really easy to implement. Create a color palate image with your desired color range, in my case the palate started with light green, then yellow, orange, red and finally black, as shown in the image above. Then I resized the image to 250 pixel width (250 pixels because as mentioned above the concentration is between 0 and 250). Put the picture in an UIImageView and iterate through the image with a fix increment, in my case every 5th pixel was picked. Every extracted pixel represents an index in my color array and the pixel's RGB value is printed to the console. After the iteration is finished, I can copy my NSArray containing my color values into the app where the color palate is needed. There are to console outputs for each pixel, one for the NSArray (iOS) and one for the Array (Android).

 

Source Code

NSMutableArray *colors = [[NSMutableArray alloc] init];
NSString *outputiOS = @"NSArray *colors = [[NSArray alloc] initWithObjects: \n";
NSString *outputAndroid = @"mColorList = new ArrayList(); \n";
for ( int index=0; index<self.colorWheel.image.size.width; index+=5)
{
	ColorResult *colorResult = [self.colorWheel getPixelColorAtLocation:CGPointMake(index, 2)];
	[colors addObject:colorResult.color];
			
	outputiOS = [outputiOS stringByAppendingFormat:@"[UIColor colorWithRed:%d.0/255.0 green:%d.0/255.0 blue:%d.0/255.0 alpha:1], \n", colorResult.rgba[0], colorResult.rgba[1], colorResult.rgba[2]];
	outputAndroid = [outputAndroid stringByAppendingFormat:@"mColorList.add( Color.rgb(%d, %d, %d) ); \n", colorResult.rgba[0], colorResult.rgba[1], colorResult.rgba[2]];
}
outputiOS = [outputiOS stringByAppendingString:@" nil];"];
NSLog(@"%@", outputiOS);
NSLog(@"\n%@", outputAndroid);
NSLog(@"array size: %d", [colors count]);

 

You can download the source code including the color palate image here.

 

cheers,
Chris

Posted in iOS, Blog, Android

Comments (1)

Leave a comment

You are commenting as guest. Optional login below.