Xojo Developer Conference
25/27th April 2018 in Denver.
MBS Xojo Conference
6/7th September 2018 in Munich, Germany.

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/roundmeters with animation
Function:
Required plugins for this example: MBS ChartDirector Plugin
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/roundmeters with animation
This example is the version from Wed, 13th Dec 2016.
Project "roundmeters with animation.rbp"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class PicWindow Inherits Window
Control out Inherits Canvas
ControlInstance out(0) Inherits Canvas
ControlInstance out(1) Inherits Canvas
ControlInstance out(2) Inherits Canvas
ControlInstance out(3) Inherits Canvas
ControlInstance out(4) Inherits Canvas
ControlInstance out(5) Inherits Canvas
EventHandler Sub Open(index as Integer) // fix some properties if set wrong in IDE me.DoubleBuffer = false me.EraseBackground = false #if RBVersion >= 2013.0 then me.Transparent = False #endif End EventHandler
End Control
Control theTimer Inherits Timer
ControlInstance theTimer(0) Inherits Timer
ControlInstance theTimer(1) Inherits Timer
ControlInstance theTimer(2) Inherits Timer
ControlInstance theTimer(3) Inherits Timer
ControlInstance theTimer(4) Inherits Timer
ControlInstance theTimer(5) Inherits Timer
EventHandler Sub Action(index as Integer) values(index) = values(index) + (rnd - 0.5) * 5.0 out(index).Backdrop = render(values(index)) End EventHandler
End Control
EventHandler Sub Open() for i as integer = 0 to 5 values(i) = 45.7 out(i).Backdrop = render(Values(i)) next End EventHandler
Function Render(value as Double) As Picture // The value to display on the meter // Create an AugularMeter object of size 200 x 200 pixels, with silver // background, black border, 2 pixel 3D depressed border and rounded corners. dim m as new CDAngularMeterMBS(300, 300, CDBaseChartMBS.silverColor, &h000000, -2) m.setRoundedFrame // Set the meter center at (150, 150), with radius 135 pixels, and span from -135 // to +135 degress m.setMeter(150, 150, 135, -135, 135) // Meter scale is 0 - 100, with major tick every 10 units, minor tick every 5 // units, and micro tick every 1 units m.setScale(0, 100, 10, 5, 1) // Disable default angular arc by setting its width to 0. Set 2 pixels line width // for major tick, and 1 pixel line width for minor ticks. m.setLineWidth(0, 2, 1) // Set the circular meter surface as metallic blue (9999DD) m.addRing(0, 140, CDBaseChartMBS.metalColor(&h9999dd)) // Add a blue (6666FF) ring between radii 88 - 90 as decoration m.addRing(138, 140, &h6666ff) // Set 0 - 60 as green (99FF99) zone, 60 - 80 as yellow (FFFF00) zone, and 80 - // 100 as red (FF3333) zone m.addZone(0, 60, &h99ff99) m.addZone(60, 80, &hffff00) m.addZone(80, 100, &hff3333) // Add a text label centered at (100, 135) with 15 pts Arial Bold font call m.addText(150, 185, "CPU", "arialbd.ttf", 15, CDBaseChartMBS.kTextColor, CDBaseChartMBS.kCenter) // Add a text box centered at (100, 165) showing the value formatted to 2 decimal // places, using white text on a black background, and with 1 pixel 3D depressed // border m.addText(150, 215, m.formatValue(value, "2"), "Arial", 8, &hffffff, CDBaseChartMBS.kCenter).setBackground(&h000000, &h000000, -1) // Add a semi-transparent blue (40333399) pointer at the specified value call m.addPointer(value, &h40333399) // Output the chart return m.makeChartPicture End Function
Property values(6) As Double
End Class
MenuBar MenuBar1
MenuItem FileMenu = "&Ablage"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Bearbeiten"
MenuItem EditUndo = "&Rückgängig"
MenuItem UntitledMenu1 = "-"
MenuItem EditCut = "&Ausschneiden"
MenuItem EditCopy = "&Kopieren"
MenuItem EditPaste = "&Einfügen"
MenuItem EditClear = "#App.kEditClear"
MenuItem UntitledMenu0 = "-"
MenuItem EditSelectAll = "&Alles auswählen"
End MenuBar
End Project

Feedback, Comments & Corrections

The items on this page are in the following plugins: MBS ChartDirector Plugin.




Links
MBS FileMaker blog