Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/roundmeters with animation
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 Tue, 12th Dec 2016.
Project "roundmeters with animation.xojo_binary_project"
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
The items on this page are in the following plugins: MBS ChartDirector Plugin.