B4J Code Snippet [ABMaterial] JustGauge 1.2.2 Custom Component

Hi there

The original post about the JustGauge component is here, and after liking the component itself, looked into its functionality, wanted to use it to meet my needs and then added functionality and decided to add some umph to it.

The justgauge.js file itself contains some properties that you can set at runtime when designing your component. So after much deliberation, I have been able to set most of the properties. What I have excluded though is the font properties.

As an example here, I have been able to add a pointer to the JustGuage and changed the color to be the same as my ABMNavigationBar for consistency and set counter to true so that numbers start from 1 to the Value set. This is sitting in a row with 2 cells of 10x2 where 2.1 contains a blank {NBSP} label and 2,2 is the JustGauge component itself. Of course I still have to refresh the value to be 30K as per total amount column of the table.

I have defined jg2039 in the class_globals first so its accessible throughtout the page, I then created it on ConnectPage with the code below.

jg2039.Initialize(page, "jg2039", 20,"Total","Amount")
jg2039.pointertoplength = -15
jg2039.pointerbottomlength = 10
jg2039.pointerbottomwidth = 12
jg2039.pointercolor = fx.Colors.rgb(142,142,147)
jg2039.pointerstroke = fx.colors.rgb(255,255,255)
jg2039.pointerstrokewidth = 3
jg2039.pointerstrokelinecap = jg2039.EnumPointerStrokeLineCap.isround
jg2039.pointerstrokewidth = 3
jg2039.levelcolor1 = fx.Colors.RGB(161,136,127)
jg2039.levelcolor2 = fx.Colors.rgb(161,136,127)
jg2039.levelcolor3 = fx.Colors.RGB(161,136,127)
jg2039.humanfriendlydecimal = 0
jg2039.gaugewidthscale = 1.0
jg2039.gaugecolor = fx.Colors.RGB(237,235,235)
jg2039.labelfontcolor = fx.Colors.RGB(179,179,179)
jg2039.shadowopacity = 0.2
jg2039.shadowsize = 5
jg2039.shadowverticaloffset = 3
jg2039.startanimationtime = 700
jg2039.startanimationtype = jg2039.EnumAnimationType.right
jg2039.refreshanimationtime = 700
jg2039.refreshanimationtype = jg2039.EnumAnimationType.right
jg2039.donutstartangle = 90
jg2039.valueminfontsize = 16
jg2039.titleminfontsize = 10
jg2039.labelminfontsize = 10
jg2039.minlabelminfontsize = 10
jg2039.maxlabelminfontsize = 10
jg2039.hidevalue = False
jg2039.hideminmax = False
jg2039.titlefontcolor = fx.Colors.rgb(153,153,153)
jg2039.hideinnershadow = False
jg2039.humanfriendly = True
jg2039.nogradient = False
jg2039.donut = True
jg2039.relativegaugesize = True
jg2039.counter = True
jg2039.decimals = 0
jg2039.formatnumber = True
jg2039.pointer = True
jg2039.titleposition = jg2039.EnumTitlePosition.above
jg2039.valuefontcolor = fx.Colors.Black
jg2039.minvalue = 0
jg2039.maxvalue = 100
jg2039.reverse = False
page.Cell(2,2).AddComponent(jg2039.ABMComp)

By default, the gauge has level colours depending on the percentage value so I wanted to make that the same, thus me using the same color for all Levels. You can see the added module for the default values for the gauge and how you can play with it. Most of the properties set here however are default and can be left out.

That's all folks.

 

[Mashiane]

By the way, don't forget to add this to your page BuildPage's method

page.AddExtraJavaScriptFile("custom/raphael-2.1.4.min.js")
    page.AddExtraJavaScriptFile("custom/justgage.js")

 

[Mashiane]

Upgated the refresh method so that any property can be changed and the justgage be re-generated again.

 

[alienhunter]

Hi
when I debug in 4.03 this error comes up, and it will not run in release mode
any clues why thanks AH

An error occurred:
(Line: 0) StartMessageLoop '<- don't forget!
java.lang.Exception: Sub abmcomp_build signature does not match expected signature.
public static anywheresoftware.b4a.pc.RemoteObject abmaterial.ab.com.customgaugemew_subs_0._abmcomp_build(anywheresoftware.b4a.pc.RemoteObject,anywheresoftware.b4a.pc.RemoteObject) throws java.lang.Exception
class anywheresoftware.b4a.pc.RemoteObject, class anywheresoftware.b4a.pc.RemoteObject, class java.lang.String,

 

[Mashiane]

Change to this

ABMComp.Initialize("ABMComp", Me, InternalPage, ID,"")

 

[alienhunter]

Change to this

ABMComp.Initialize("ABMComp", Me, InternalPage, ID,"")

hi again
it is like that , i initialize the comp at connect page and update this later in a sub
works in debug but not in release
thanks AH

Public Sub Initialize(InternalPage As ABMPage, ID As String, myValue As Double, myTitle As String, myLabel As String)
    ABMComp.Initialize("ABMComp", Me,InternalPage, ID,"")
    EnumPointerStrokeLineCap.initialize
    EnumPointerStrokeLineCap.isround = "round"
    EnumPointerStrokeLineCap.issquare = "square"
    Value = myValue
    Label = myLabel

 

[Mashiane]

Sorry, its the Build method, it should be something like this...

Sub ABMComp_Build(InternalPage As ABMPage,internalID As String) As String

It's a long time this was done. will have to relook at it.

 

[alienhunter]

Sorry, its the Build method, it should be something like this...

Sub ABMComp_Build(InternalPage As ABMPage,internalID As String) As String

It's a long time this was done. will have to relook at it.

thank you
AH