Gauge Designer

The gauge.js designer

The gauge.js designer lets you create your own gauge user object visually with no coding. The gauge designer can be found in the UI Designer which is included in your installation of Ultimate Suite.

1- Select the type of gauge you want to customize

2- All gauge.js attributes are displayed in the two right side tabs. For gauges that include static zones, you can specify those static zone attributes in the lower left datawindow.

3- Gauge.js does not provide an auto-size feature. PowerGauge let you modify the size of the gauge object so that it can fit your needs. You must first set the size of the control that will be added to your windows. Then you modify the size of the graphical display inside the control using the corresponding trackbars. When resizing the gauge, you will also need to modify its coordinates inside the control so that it is not truncated. You do this by modifying the values of the lower attributes of the general tab: gauge top = number of pixels from the top of the control, gauge left = number of pixels from the left of the control.

4- Specify colors for your gauge. Colors in the selection lists are based on rgba javascript function. It behaves the same that in Powerbuilder except for the 'a' value with sets the opacity of the color. If you plan to set a color for the background, it is recommended to set the a value to 1 so that opacity is 100%.

5- Specify units and a title for your gauge. If you don't need to specify a unit or a title, set those attributes to empty.

6- Save your gauge setup into a file for future use. The gauge.js designer let you save your gauges setup into files so that you can load them and update them without the need to start from scratch.

7- Generate the class attribute definition for your own gauge userobject class : Tools/get class attribute code.

8- In the PowerBuilder IDE, create a new custom visual userobject that inherits from the PowerGauge class that match your gauge type (uov_classic_gauge/ uov_donut_gauge/ uov_zone_gauge/ uov_modern_gauge).Save your user object and close the userobect painter. Now right click on your userobject and edit its source code.

9- Paste the code you generated from the gauge.js designer into the second global type definition (ex: between the second 'global type uov_my_classic_gauge from uov_classic_gauge' and ' end type')

10- Save your new gauge userobject and use it in any of your windows.

The gauge designer let you also generate the gauge attribute setup as source code to be placed in the constructor event of any gauge userobject. This is less easy to use if you plan to use your gauge in many windows and it may have some impact when using future enhanced version of gauge.js that may need more attributes. But many developers are used to initializing objects in the contructor event of the object, so PowerGauge let you do it both ways.