Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/roundmeter with control
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/roundmeter with control
This example is the version from Tue, 12th Dec 2016.
Project "roundmeter with control.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class PicWindow Inherits Window
Control Canvas1 Inherits Canvas
ControlInstance Canvas1 Inherits Canvas
EventHandler Sub Open()
// 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 Slider1 Inherits Slider
ControlInstance Slider1 Inherits Slider
EventHandler Sub ValueChanged()
value = me.Value / 10.0
render
End EventHandler
End Control
EventHandler Sub Open()
value = 45.7
render
End EventHandler
Sub Render()
// 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
Canvas1.Backdrop=m.makeChartPicture
End Sub
Property value 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
See also:
The items on this page are in the following plugins: MBS ChartDirector Plugin.