ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Meters/Gauges
Posted by Jerry Allen on Dec-28-2012 10:54
| Reply | Monitor
Is it possible to have a Meter or Gauge with a background image png/jpg/gif whatever. Just an image in the gauge face?

Thanks You,

Jerry Allen

  Re: Meters/Gauges
Posted by Jerry Allen on Dec-28-2012 11:16
| Reply | Monitor
This is for PHP I forgot to add.
Tested this; $m->setWallpaper("test.jpg");

It works, however I would like the image to be inside the gauge face circle and not in the frame or make the inner fill of the frame transparent to show the background but the face not transparent.

I believe it has to do with the order in which the elements are laid out and the color values that are specified but I don't seem to be able to get it the way I want.

Jerry

  Re: Meters/Gauges
Posted by Peter Kwan on Dec-28-2012 23:51
| Reply | Monitor
Hi Jerry,

The guage face is by default transparent. If you would like to have a background image on the guage face, you can put an image under the guage face. There are many methods. For example:

(a) You may use a background image which is the guage face itself. ChartDirector can still be used to draw the scale and labels and the pointer. The backgorund image can be transparent everywhere except for the guage face. (You may use common image editors such as Photoshop to create such an image.) The background image can be applied to the chart using either BaseChart.setWallpaper or BaseChart.setBgImage.

(b) In some sample code, the guage face not transparent because the sample code explicitly paint the guage face. For example, in the "Round Meter" sample code, the guage face appears to be metallic blue because of the line:

$m->addRing(0, 90, metalColor(0x9999dd));

If you remove the above line, the guage face will become transparent. If you use a pattern color created with your image, then the guage face will be filled with your image:

$m->addRing(0, 90, $m->patternColor2("/path/to/myimage.png"));

(c) In some sample code, instead of using addRing to paint the guage face, LinearMeter.addZone or AngularMeter.addZone or AngularMeter.addZone2 is used to fill the guage fact. Like (b), you can use your image in addZone/addZone2 to fill the guage face.

Hope this can help.

Regards
Peter Kwan