English translation by Mike Dodaro of Italian version by Marco Minerva.
As pointed out in a previous post, the graphical controls that ship with .NET Gadgeteer can be used to create more complex objects. Today we see how to implement a ProgressBar that displays the progress of an operation, as shown in the following video.
The code that supports this scenario follows:
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using GT = Gadgeteer;
using Microsoft.SPOT.Presentation.Shapes;
namespace ProgressBarExample
{
public class ProgressBar : Border
{
private Rectangle progressBar;
private uint minimum;
public uint Minimum
{
get { return minimum; }
set
{
if (value value)
Value = minimum;
}
}
private uint maximum;
public uint Maximum
{
get { return maximum; }
set
{
if (value > minimum)
maximum = value;
}
}
private uint step;
public uint Step
{
get { return step; }
set { step = value; }
}
private uint pbValue;
public uint Value {
get { return pbValue; }
set {
if (value maximum)
pbValue = maximum;
else
pbValue = value;
int progressBarWidth = (int)((this.Width * pbValue) / maximum);
progressBar.Width = progressBarWidth;
}
}
public ProgressBar(int height, int width, GT.Color color)
: this(height, width, color, color)
{ }
public ProgressBar(GT.Color color)
: this(15, 100, color, color)
{ }
public ProgressBar(int width, GT.Color color)
: this(15, width, color, color)
{ }
public ProgressBar(int width, GT.Color startColor, GT.Color endColor)
: this(15, width, startColor, endColor)
{ }
public ProgressBar(int height, int width, GT.Color startColor, GT.Color endColor)
{
this.BorderBrush = new SolidColorBrush(GT.Color.Black);
this.SetBorderThickness(2, 2, 2, 2);
this.Background = new SolidColorBrush(GT.Color.White);
this.Height = height;
this.Width = width;
progressBar = new Rectangle(0, this.Height);
if (startColor != endColor)
progressBar.Fill = new LinearGradientBrush(startColor, endColor);
else
progressBar.Fill = new SolidColorBrush(startColor);
progressBar.HorizontalAlignment = HorizontalAlignment.Left;
this.Child = progressBar;
minimum = 0;
maximum = 100;
step = 5;
}
public void PerformStep()
{
this.Value += step;
}
}
}
The ProgressBar control inherits from Borderand adds four properties:
- Minimum and Maximum represent, respectively, the minimum and the maximum value that the bar can display;
- Value is used to read or to set up the present value of the advance bar;
- Step indicates the position current when the PerformStep method is called.
Progress is displayed using a Rectangle object whose width varies proportionally based on the value of the Value property. Filling the rectangle is specified in the constructor of the ProgressBar as a single color or a gradient: in a gradient, the color of the bar will vanish from the first color to the end color.
We see how to use the control in an example that takes advantage of the modules Button e Display from GHI Electronics. In the SetupWindow ruotine we define the ProgressBar and add it to the interface:
private ProgressBar progressBar;
private Text txtProgressBarValue;
private void SetupWindow()
{
Window window = display.WPFWindow;
Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);
Canvas canvas = new Canvas();
window.Child = canvas;
Text txtInstruction = new Text(baseFont, "Push the button to increment bar value.");
canvas.Children.Add(txtInstruction);
Canvas.SetTop(txtInstruction, 80);
Canvas.SetLeft(txtInstruction, 30);
progressBar = new ProgressBar(200, GT.Color.FromRGB(0, 128, 0));
progressBar.Minimum = 0;
progressBar.Maximum = 100;
canvas.Children.Add(progressBar);
Canvas.SetTop(progressBar, 120);
Canvas.SetLeft(progressBar, 50);
txtProgressBarValue = new Text(baseFont, "Current value: 0");
canvas.Children.Add(txtProgressBarValue);
Canvas.SetTop(txtProgressBarValue, 140);
Canvas.SetLeft(txtProgressBarValue, 90);
}
In this case, the bar has a width of 200 pixels and the filling color is a shade of green (RGB (0, 128, 0)). We want to implement functionality such that pressing the button, the value of the bar increases by 5 and the object txtProgressBarValue shows the current value. In the ButtonPressed event we therefore write:
private void button_ButtonPressed(Button sender, Button.ButtonState state)
{
progressBar.Value = progressBar.Value + 5;
txtProgressBarValue.TextContent = "Current value: " + progressBar.Value.ToString();
}
In conclusion, the complete Program.cs file is shown in the following code block:
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;
namespace ProgressBarExample
{
public partial class Program
{
void ProgramStarted()
{
button.ButtonPressed += new Button.ButtonEventHandler(button_ButtonPressed);
SetupWindow();
Debug.Print("Program Started");
}
private ProgressBar progressBar;
private Text txtProgressBarValue;
private void SetupWindow()
{
Window window = display.WPFWindow;
Font baseFont = Resources.GetFont(Resources.FontResources.NinaB);
Canvas canvas = new Canvas();
window.Child = canvas;
Text txtInstruction = new Text(baseFont, "Push the button to increment bar value.");
canvas.Children.Add(txtInstruction);
Canvas.SetTop(txtInstruction, 80);
Canvas.SetLeft(txtInstruction, 30);
progressBar = new ProgressBar(200, GT.Color.FromRGB(0, 128, 0));
progressBar.Minimum = 0;
progressBar.Maximum = 100;
progressBar.Step = 5;
canvas.Children.Add(progressBar);
Canvas.SetTop(progressBar, 120);
Canvas.SetLeft(progressBar, 50);
txtProgressBarValue = new Text(baseFont, "Current value: 0");
canvas.Children.Add(txtProgressBarValue);
Canvas.SetTop(txtProgressBarValue, 140);
Canvas.SetLeft(txtProgressBarValue, 90);
}
private void button_ButtonPressed(Button sender, Button.ButtonState state)
{
progressBar.Value = progressBar.Value + 5;
txtProgressBarValue.TextContent = "Current value: " + progressBar.Value.ToString();
}
}
}
The example application is available for download.
Integral Design 