OpsMgr: Modifying the Colours of the Sections within the Speedometer Widget

The Speedometer Gauge Widget Template allows the creation of custom Speedometer widgets from the output of their corresponding PowerShell scripts, using the IT Pro Authoring UI in the OpsMgr 2012 Operations Console. There are currently 2 versions of the Sample Speedometer Gauge Widget Template:

  1. The Original Version:
    https://blogs.msdn.microsoft.com/wei_out_there_with_system_center/2016/01/05/opsmgr-sample-speedometer-gauge-widget-template/
  2. The Sliverlight Friendly Version:
    https://blogs.msdn.microsoft.com/wei_out_there_with_system_center/2016/05/03/opsmgr-sample-silverlight-friendly-speedometer-widget-template-for-the-web-console/

Both versions are available as sample management packs and can be downloaded from the TechNet Gallery

The colours used for the sections within the Speedometer Gauge widget can be set using Hex codes. For example, the green section in the following Speedometer Gauge widget uses the Hex code of #9BBC24 and the red section uses the Hex Code of #BC4524.

image

Here is a cool way of how my buddy Dan Panzich obtain the Hex code of the colours he wanted to assign to the sections of the custom Speedometer widgets he created using a widget template.

First, start with Microsoft Paint:

Click the Edit colors button to open the Edit Colors page, search for the right colour by select a Basic color or by moving the cursor around the palette. Record the Red (R ) , Green (G ) and Blue (B ) values for the colour of choice. In this example, its R=44, G=21, B=244.

image

Then, go to www.rgbtohex.net:

At the RGB to Hex site, fill in the RGB values into the fields and click the Convert to Hex button. The RGB values will be converted to a Hex Code. In this example, the Hex code is #2C15F4

image

With a new set of Hex codes, the sections within a Speedometer widget can be modified by going to its PowerShell Script configuration page first and assigning the Hex codes to the “ThresholdColorTarget” and “ThresholdColorFull” properties. In this example, #2C15F4 is assigned to the“ThresholdColorTarget” property and #D0DE21 is assigned to the “ThresholdColorFull” property.

image

  image

This means that if the value assigned to the “Value” property is greater than the value assigned to the “Threshold/Target/Goal” property, the colour represented by Hex code #D0DE21 will be dominant on the Speedometer Widget. On the other hand, if the value assigned to the “Value” property is less than the value assigned to the “Threshold/Target/Goal” property, the colour represented by Hex code #2C15F4 will be dominant on the Speedometer Widget.

image

Here are examples of what the Speedometer widgets will look like when the value returned is less than and on the other hand, greater than a threshold of 50.

image 

     

Thank you for your support !      

Disclaimer:
All information on this blog is provided on an as-is basis with no warranties and for informational purposes only. Use at your own risk. The opinions and views expressed in this blog are those of the author and do not necessarily state or reflect those of my employer.