ProgressBar Color

TinyCLR OS
1

I’m showing my lack of C# knowledge here…… does anyone know how to set the color of the progressbar in the UI control? defaults to blue and i’d like to change it to red when the value drops below a particular value…. Thanks!!

2

In looking at the UI library file for the progress bar, it looks like it is using a blue square bitmap for the bar itself, and scaling the square to the value to be displayed. What I would like to do is modify the code a bit in the library so the user can also set a lower and an upper value, so that if the value falls below the lower value, the bar will be displayed in red (using a red bitmap), and if it’s above the upper value it would be green, something like that.

Again I am not very experienced with this stuff, I presume I can just copy all of the UI files in the library over to my project and turn off the NuGet for UI and use my own version which I can modify, right?

3

Yes you can modify the code to whatever you need.

By the way, there is an issue in GitHub with a list of UI improvements. You can add more to the list.

4

@jscmanson
I had a similar task. We needed a progress bar with a smooth transition of several colors.
I made my own component, which can be set to an array of fill colors (solid or gradient). It is possible to set your own background color and border. Each color has a weighting factor (must be greater than 0), according to which it will fill the progress bar.

Example:

using System;
using System.Collections;
using GHIElectronics.TinyCLR.UI;
using GHIElectronics.TinyCLR.UI.Controls;
using GHIElectronics.TinyCLR.UI.Media;
using Rpis.TinyCLR.UI.Controls

private void SomeMethode(ContentControl contentControl){
	
	/// some code
		
	GradientProgressBar.GradientPoint[] points = new[]
	{
		new GradientProgressBar.GradientPoint(20,Colors.Red,Colors.Green),
		new GradientProgressBar.GradientPoint(50,Colors.Green,Colors.Blue),
		new GradientProgressBar.GradientPoint(30,Colors.Blue,Colors.Red),
	};

	GradientProgressBar gradientProgressBar = new GradientProgressBar(Colors.White);
	gradientProgressBar.Height = 50;
	gradientProgressBar.MinValue = -80;
	gradientProgressBar.MaxValue = 400;
	gradientProgressBar.BorderColor = GHIElectronics.TinyCLR.UI.Media.Colors.Yellow;
	gradientProgressBar.SetBorderThickness(2);
	gradientProgressBar.SetGradientPoints(points);
	
	contentControl.Child = gradientProgressBar;

	while (true)
	{
		for (int i = gradientProgressBar.MinValue; i <= gradientProgressBar.MaxValue; i++)
		{
			gradientProgressBar.Value = i;
			Thread.Sleep(20);
		}
		Thread.Sleep(1000);
	}
	
	/// some code
}

Hope that helps.

3 Likes
5

Thats perfect, thanks so much!!!