Changing the color of NSProgressIndicator? - objective-c

Question

What is the best way to change the color of NSProgressIndicator, is there an easier way than just to subclass it and then draw the whole component by myself?
Basically what I want to do is to have a similar component but with the ability to change the color of the bar.
I tried to google this but all the questions were quite outdated and didn't really concern the 10.10 OS X version that I am working on. Also checked cocoa controls and did only find 1 component that was for outdated OS X version.

Answer 1

You can use Quartz filters (e.g. hue adjust) for this directly in Interface Builder. This works better than expected.
It's in the Effects Inspector. Under "Content Filters" you can add "Hue Adjust"

Answer 2

Use "CIFalseColor" filter to get white color and more.
let colorFilter = CIFilter(name: "CIFalseColor")!
colorFilter.setDefaults()
colorFilter.setValue(color1, forKey: "inputColor0")
colorFilter.setValue(color2, forKey: "inputColor1")
proggressBar?.contentFilters = [colorFilter]

Answer 3

To change color of NSProgressIndicator use setControlTint: method. If you want to set custom color you have to draw such control manually. However, you should use the system color to keep this kind of control consistent across the system.

Answer 4

For Swift the method name is controlTint.
progressIndicator = NSProgressIndicator(frame: .......
progressIndicator.controlTint = .blueControlTint

Answer 5

you can use proggressBar.appearance = NSAppearance(named: .vibrantLight) // this is light or vibrantDark for "black" indictor

Answer 6

Based on Paxos' answer on the Interface builder, this is how I was able to do it programmatically:
let progress = NSProgressIndicator()
progress.contentFilters = [CIFilter(name: "CIHueAdjust", parameters: ["inputAngle": 4])!]
This would turn the bar green. I got this from looking at the Main.storyboard diff:
<progressIndicator maxValue="100" doubleValue="50" style="bar" translatesAutoresizingMaskIntoConstraints="NO" id="NIr-vo-obX">
<rect key="frame" x="3" y="22" width="210" height="20"/>
+ <contentFilters>
+ <ciFilter name="CIHueAdjust">
+ <configuration>
+ <real key="inputAngle" value="4"/>
+ <null key="inputImage"/>
+ </configuration>
+ </ciFilter>
+ </contentFilters>
</progressIndicator>

Answer 7

I was trying to change de Hue as seen in most answers, but I was getting a lot of issues to get the right specific color I wanted.
What did worked for me, and seems to be the most direct way to get a specific color, was using the CIColorMonochrome filter, where You can set any RGB color you want:
let myCustomColor: CIColor(red: 10, green: 10, blue: 10)
if let colorMonochrome = CIFilter(name: "CIColorMonochrome", parameters: [kCIInputColorKey: myCustomColor]) {
progressIndicator.contentFilters.append(colorMonochrome)
}

Answer 8

Based on the answer from KamyFC I found out that CIColor was required for the filter named "CIFalseColor".
Here is the Objective-C solution to make the progress bar whatever NSColor, in this example orange.
Don't forget to add #import Quartz; to your file.
// Create color:
CIColor *color = [[CIColor alloc] initWithColor:[NSColor orangeColor]];
// Create filter:
CIFilter *colorFilter = [CIFilter filterWithName:#"CIFalseColor"
withInputParameters:#{#"inputColor0" : color,
#"inputColor1" : color}];
// Assign to bar:
_progressBar.contentFilters = #[colorFilter];