CircularGauge


The aim here is to display a circular gauge in a window and have it count down over 30 seconds (then play the jingle and vanish the window)



XAML


∇ xaml←CircularGaugeXAML
⍝ XAML for the CircularGauge example
 xaml←⊂'<Window'
 xaml,←⊂'    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"'
 xaml,←⊂'    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"'
 xaml,←⊂'    xmlns:sfg="clr-namespace:Syncfusion.Windows.Gauge;assembly=Syncfusion.Gauge.WPF"'
 xaml,←⊂'    SizeToContent="WidthandHeight" Name="gaugewindow">'
 xaml,←⊂'    <Grid>'
 xaml,←⊂'        <sfg:CircularGauge>'
 xaml,←⊂'           <sfg:CircularGauge.Scales>'
 xaml,←⊂'               <sfg:CircularScale'
 xaml,←⊂'                   BorderWidth="3" GapSweepAngle="180"'
 xaml,←⊂'                   Maximum="30" Minimum="0" MajorIntervalValue="5" MinorIntervalValue="1"'
 xaml,←⊂'                   BackgroundBrush="Transparent" BorderBrush="Transparent" Radius="120"'
 xaml,←⊂'                   ScaleBarSize="15" ShadowOffset="0" StartAngle="270">'
 xaml,←⊂'                   <sfg:CircularScale.Ticks>'
 xaml,←⊂'                       <sfg:CircularMarkTick TickHeight="10"'
 xaml,←⊂'                           DistanceFromScale="3" TickStyle="MajorTick" TickShape="Rectangle"'
 xaml,←⊂'                           TickWidth="2"/>'
 xaml,←⊂'                       <sfg:CircularMarkTick TickHeight="5"'
 xaml,←⊂'                           DistanceFromScale="3" TickStyle="MinorTick" TickShape="Rectangle"'
 xaml,←⊂'                           TickWidth="2"/>'
 xaml,←⊂'                   </sfg:CircularScale.Ticks>'
 xaml,←⊂'                   <sfg:CircularScale.Pointers>'
 xaml,←⊂'                       <sfg:CircularPointer Name="cg_pointer" '
 xaml,←⊂'                           BorderWidth="0.3"'
 xaml,←⊂'                           PointerLength="100" PointerPlacement="Inside" PointerWidth="20"'
 xaml,←⊂'                           PointerNeedleType="Needle" NeedleStyle="Arrow"/>'
 xaml,←⊂'                   </sfg:CircularScale.Pointers>'
 xaml,←⊂'               </sfg:CircularScale>'
 xaml,←⊂'           </sfg:CircularGauge.Scales>'
 xaml,←⊂'        </sfg:CircularGauge>'
 xaml,←⊂'    </Grid>'
 xaml,←⊂'</Window>'


This is surprisingly complex, although what you see if you define just the CircularGauge "looks" as though it should be useful the reality is that what you attach values to are the pointers and these need to be defined along with Scales and Ticks to reach this minimally-useful sample.

Code


∇ CircularGauge;⎕IO;⎕ML;xaml;⎕USING
⍝ Simple CircularGauge example
 ⎕IO ⎕ML←0 3
 xaml←CircularGaugeXAML
 #.window←#.UTIL.WPF.LoadXaml xaml(⊂'SyncGauge')
 window_cg_pointer←window.FindName⊂'cg_pointer'
 window_cg_pointer.Value←0
 ⎕USING←'System,mscorlib.dll' 'System.Windows.Threading,WindowsBase.dll' 'System.Windows.Media,presentationcore.dll'
 #.timer←⎕NEW DispatcherTimer
 #.timer.Interval←⎕NEW TimeSpan(0 0 1)
 #.timer.onTick←'#.Increment'
 #.timer.Start
 #.window.Show


The hocus-pocus to define and start the Timer should really hide away inside another function.

∇ Increment w;⎕IO;⎕ML
⍝ Increment pointer
 ⎕IO ⎕ML←0 3
 #.window_cg_pointer.Value+←1
 :If #.window_cg_pointer.Value=30
     #.timer.Stop
     ⎕DL 1
     #.window.Close
     ⎕←'bada bada badda bading'
 :EndIf


Leaving replaying the music as an easy exercise for the reader.

Notice also the untidiness (in terms of global variables) which is endemic to WPF-based code, especially when using Show rather than ShowDialog.

The 'SyncGauge' argument to #.UTIL.LoadXAML has the effect of adding 'Syncfusion.Windows.Gauge,Syncfusion/4.5/Syncfusion.Gauge.WPF.dll' to the ⎕USING list of LoadXAML


Operation

CircularGauge

Unresolved Issues

More control over appearance - at the very least getting rid of the pseudo-reflection in the top-left quadrant.