How can I change the color of the bar in a ProgressIndicator?

Question

I want to change the color of the progress bar in a ProgressIndicator. I want the progress bar to be red instead of green. For this purpose I wrote the following code, but still it doesn't work.

Style[ProgressIndicator[90, {0, 100}], Red]

How can I do change the color?

Answer 1

Don't forget, with M we have all of Java at our fingertips with just a few keystrokes. So why don't you use Java Swing, which is a professional UI framework that runs on hundreds of millions of devices.

I have ShowProgressBar and DestroyProgressBar in my init.m, because I use them frequently.

Needs["JLink`"]

ReinstallJava[]

ShowProgressBar[title_String: "Computation Progress",caption_String: "Percent complete:",percent_Integer: 0]:=JavaBlock[Module[{frame,panel,label,bar},InstallJava[];
bar=JavaNew["javax.swing.JProgressBar"];
frame=JavaNew["javax.swing.JFrame",title];
frame@setSize[300,110];
frame@setResizable[False];
frame@setLocation[400,400];
panel=JavaNew["javax.swing.JPanel"];
panel@setLayout[Null];
frame@getContentPane[]@add[panel];
label=JavaNew["javax.swing.JLabel",caption];
label@setBounds[20,10,260,20];
panel@add[label];
bar@setBounds[20,40,260,30];
bar@setMinimum[0];
bar@setMaximum[100];
bar@setValue[percent];
bar@setStringPainted[True];
panel@add[bar];
JavaShow[frame];
KeepJavaObject[bar,label];
{bar,label}]];

DestroyProgressBar[bar_?JavaObjectQ]:=JavaBlock[LoadJavaClass["javax.swing.SwingUtilities"];
SwingUtilities`windowForComponent[bar]@dispose[];
ReleaseJavaObject[bar]];

LoadJavaClass["javax.swing.UIManager"];
UIManager`setLookAndFeel["com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel"];
{mybar,mylabel}=ShowProgressBar[];
([email protected];If[#==0,label="Ping",If[#==100,label="Pong"]];mylabel@setText[label];mybar@setValue[#])&/@With[{t=Range[0,100]},Join[t,Reverse@t,t,Reverse@t,t]];
DestroyProgressBar@mybar;

You can modify the Swing widgets any way you like, you can change the color to whatever you like, the backgrounds, the texts, the fonts, the sizes, the margins, etc., but for me, just changing the look-and-feel to Nimbus is doing it (default is Ocean, not too ugly either). This solution also has the advantage that you get a new window, which you can drag anywhere you want on your screens, you are not limited to having to see the progress bar in the M f/e at a fixed cell location. You can set the "Always on top" property, transparency, etc., because it's a WINDOW, and not just a WIDGET in the M f/e. I generally prefer having something like this in a new window that I can move away, otherwise I'd have to hunt down the location of the progress bar in the f/e to see updated values, i. e. scroll around until I found my cell. With longer computations I'd want to continue on something else in the M f/e and STILL be able to see the progress immediately, without hunting down cell locations manually. But that's a matter of personal preference. Swing gives you incredible flexibility (and plasticity and hardware acceleration -- because it's based on Java2D, etc.), and not just for widgets, but also for window management. And with JLink you can harness all that directly from your M session.

EDIT:

If it's important that it's really red, you can use one of various ways to set that. You could a) use the NimbusRed that is predefined and goes along with the Nimbus look-and-feel, b) set Red as the RGB value 255,0,0, or c) use the static constant red (or RED) from awt.

a) NimbusRed

LoadJavaClass["javax.swing.UIManager"];
UIManager`setLookAndFeel["com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel"];
With[{defaults=UIManager`getLookAndFeelDefaults[]},
defaults@put[MakeJavaObject@"nimbusOrange",defaults@get[MakeJavaObject@"nimbusRed"]]];
{mybar,mylabel}=ShowProgressBar[];
([email protected];If[#==0,label="Ping",If[#==100,label="Pong"]];mylabel@setText[label];mybar@setValue[#])&/@With[{t=Range[0,100]},Join[t,Reverse@t,t,Reverse@t,t]];
DestroyProgressBar@mybar;

A list of Nimbus defaults is at Nimbus Defaults

b) Red with RGB 255,0,0

Instead of

defaults@get[MakeJavaObject@"nimbusRed"]

use

JavaNew["java.awt.Color",255,0,0]

c) use red or RED as awt constant:

use

Color`red

but you also have to load the Color class first:

LoadJavaClass["java.awt.Color",StaticsVisible->True];

Note that the entire look-and-feel makes further modifications to the display, due to plasticity / 3D effects, shading, etc. Pure red in Nimbus looks like Fruit Punch to me. But you also don't have to use Nimbus. You can use Motif, Metal, Ocean, etc., and there's a ton of third-party look-and-feels.

Answer 2

I know of no method by which to control the color of that element. I'm afraid that it may not be possible. I believe the style of the ProgressIndicator is taken from the OS settings, or rather the ProgressIndicator is rendered by the OS.

If you look at the on-line documentation for versions 7, 8, 9 you see that the style changes:

7:
8:
9:

Further, I can tell you as a version 7, Windows 7 user that the appearance is like the third one, not the first, further indicating that these are generated by the OS and not Mathematica itself.

You can use an internal rendering independent of the OS with setting "Generic" but even then I don't know how to control the color of the bar.:

ProgressIndicator[0.8, BaseStyle -> ControlsRendering -> "Generic"]

You should be able to craft your own progress indicator in the style you like by using Dynamic and Graphics.

---

As a proof of concept:

{myProgressIndicator[Dynamic[x], ChartStyle -> Red], Slider[Dynamic[x]]} // Column

Code is:

myProgressIndicator[Dynamic[x_] | x_, opts : OptionsPattern[BarChart]] :=
 Dynamic@BarChart[{x}, opts, ChartElementFunction -> "GlassRectangle", BarOrigin -> Left, 
   Frame -> True, FrameTicks -> None, ImageSize -> {200, 22}, 
   PlotRange -> {{0, 1}, {0, 1}}, AspectRatio -> (22/200), ImageMargins -> 1, 
   PlotRangePadding -> 0]

Answer 3

If you're on version 9, you can use gauges:

HorizontalGauge[90, {0, 100},  ScaleRangeStyle -> Red, 
  GaugeMarkers -> "ScaleRange"]

I don't fully understand how Mathematica scales and aligns things like gauges (and it's not the sort of thing that's easy to find in the documentation) but I would explore the options using a Manipulate:

Manipulate[
  HorizontalGauge[90, {0, 100}, 
  ScaleDivisions -> 10, 
  GaugeMarkers -> "ScaleRange", 
  AspectRatio -> aspectRatio, 
  ImageSize -> {width, height}, 
  ScalePadding -> None],
{width, 150, 500}, 
{height, 50, 500}, 
{aspectRatio, .1, 5}] 

Answer 4

For this solution, I've made rasterized versions of ProgressIndicator, replacing green tones by similarly light/dark red tones by means of a function toRed. All other colors used by default are gray levels, i.e. they match the {c_,c_,c_} pattern. This works fine only for the appearance shown third in Mr. Wizard's answer (also seen below). What's left then is to simply rescale the arguments to select the proper part of the list, in which the rasterized versions are stored (rasterizing each time seperately takes too much time). For different appearances the replacement rules in toRed would have to be changed. Here's the code:

toRed[{c_, c_, c_}] := {c, c, c}
toRed[col : {r_, g_, b_}] := 
 256 List @@ Blend[{Red, GrayLevel[Mean@col/256]}]

myPIList = (Rasterize[ProgressIndicator@#] /. 
      col : {r_?NumberQ, g_?NumberQ, b_?NumberQ} :> toRed@col) & /@ 
   Range[0, 1, 0.01];

myProgressIndicator[x_, r : {a_, b_} : {0, 1}] :=
 myPIList[[Round@Rescale[
     If[NumericQ@x, x, 0], r, {1, 101}]]]

And here's an example:

ProgressIndicator[87, {12, 140}]
myProgressIndicator[87, {12, 140}]

What seperates this method from the other ones is that the overall appearance is very close to the default one, only the color is changed. Of course some tweaking is still needed, e.g. to make this work with Dynamic.