configuration
The WUnderground Plugin Gauge Pack is a series of nested folders that contain many, many PNG files that allow users to have the ability to create custom Control Page gauges for select plugin device states. In other words, on the inside, it looks like this:
Well, a picture is worth a thousand words. Here's one option:
Not really, but it's not a slam dunk either.
I've tried to account for that. Here's what an out of range value could look like (note that this is an example and the gauge needle in this instance is not out of range.) There are several colors to choose from.
In order to build WUnderground gauges, you will first need to download the GitHub release, in which you will find a series of nested folders containing PNG files for use in constructing gauges.
There are many combinations of colors and scales, but the gauges are constructed in the same way. You copy images from the Gauge Pack to your Indigo images folders and then add them, in turn, to a control page. There are multiple potential components to a complete gauge: Faces, Scales, Indicators, Center Bubbles, and Bezels. Here's an exploded view.
In general, most of the images should be copied to the static images folder, and indicators should be copied to the devices folder. (Gauges obviously could also be linked to variables and you would place copies of the indicators in the variables folder.)
/Volumes/macbook_pro/Library/Application Support/Perceptive Automation/Indigo 2022.1/Web Assets/images/controls/devices
/Volumes/macbook_pro/Library/Application Support/Perceptive Automation/Indigo 2022.1/Web Assets/images/controls/static
/Volumes/macbook_pro/Library/Application Support/Perceptive Automation/Indigo 2022.1/Web Assets/images/controls/variables
First, you must find the combination of files that suits your taste. This may take a little time. start in the Faces folder of the gauge pack. There are presently two sub-folders in the Faces folder--3D and flat. There are several colors to choose from in each folder. The colors of the various components are designed to work together and to be complimentary. For the flat styles, I have tried to adhere to the Apple color palette for consistency and because these are generally designed to be used on Apple devices. When you find the face that suits you, copy (or Option+drag) the file to the static images folder in Indigo.
Now we move on to a scale. There are scales for several WUnderground devices such as Barometric Pressure, Chance of Rain, Humidity, Wind Gust, and Wind Speed and there are both standard and metric versions of the scales where the devices have metric values available. There are presently black and white versions of the scales. Choose the one that works best with the Face color you have chosen.
Next comes the indicator. There are presently two styles of needles within the gauge pack: red and white and there are two styles of indicators in the gauge pack: red and white (a pattern is emerging.) Needles are longer (shown below) and indicators are more short and stubby. Either can be used, and they are designed to be used together. A good example is with wind. The standard wind scale goes from 0 to 40 mph (0 to 80 kph) but sometimes we have values greater than that. In instances where the actual wind speed is greater than 40, an indicator will appear on 40 and the needle will be on the mph in excess of 40 (i.e., 40 + 20 = 60 mph). Like this:
Indicator and needle images should be added to the devices folder of Indigo.
The next thing that we want to add is a center bubble. This graphic covers the center of the gauge and fills in the open area between the inside end of the needle and the center of the gauge.
Lastly, add the bezel. This is of course optional, but provides a nice, finished look.
Note that the overages graphic is used in the underlying build for each gauge, and you typically won’t add it to the WUnderground gauges as these are built in to the indicator packages. Similarly, you won’t need the Indicators pointers as they are built into the individual gauge packages. However, I’ve included them for those that want to do something else.
All graphics are based on an image size of 100x100 pixels. This makes it easy to align them. If everything goes right -- and if I've constructed all the images correctly -- it should look good. If something doesn't quite line up, please let me know.
If you added the graphics in the order listed above, the gauge should appear like you would expect. Sometimes, however, the priority of the images can become out of whack. This is no problem. We can change the priority of each image in turn and get things sorted. In the control page editor, tick the box next to "Edit Z-order". This will display a number next to each image that tells you how "important" each image is. The values don't need to be consecutive, but this does help keep things tidy. We want the Z order of the gauge images to be like this:
face < scale < indicator < bubble < bezel
That way, each consecutive image "covers" the one below it in the pecking order.
-
Current Conditions - Humidity
Scale: percent (0 to 100)
Indicators: percent (0 to 100+) -
Current Conditions - Barometric Pressure (Icon)
Scale IN: pressure in (28 to 32)
Indicators IN: pressure in (28 to 32+)
Scale MB: pressure mb (950 to 1050)
Indicators MB: pressure mb (950 to 1050+) -
Current Conditions - Barometric Pressure Trend
Scale: arrows
Indicator: arrows
(The pressure trend indicator is meant to be added to the Pressure Gauge and should go “under” the bezel.) -
Current Conditions - Wind Speed (Icon)
Scale MPH: wind speed (0 to 40+)
Indicators MPH: wind mph (0 to 80+)
Scale KPH: wind kph (0 to 80+)
Indicators KPH: wind kph (0 to 160+) -
Current Conditions - Wind Direction or Current Conditions - Wind Degrees
Scale: compass (N-E-S-W)
Indicators Direction: compass (N-E-S-W)
Indicators Degrees: compass (0 to 359+) -
Current Conditions - Wind Gust (Icon)
Scale MPH: wind speed (0 to 40+)
Indicators MPH: wind mph (0 to 80+)
Scale KPH: wind kph (0 to 80+)
Indicators KPH: wind kph (0 to 160+) -
Forecast Precipitation - Today
Scale: percent (0 to 100)
Indicators: percent (0 to 100+)
You get the idea.
Beyond the gauges that can be built to work with the WUnderground plugin, the images can obviously be used for other things. For example, you could make copies of a center bubble and an overage indicator and combine them to make a button that glows when True. You could use the needles and indicators without any of the other gauge components and construct your own gauges. Go nuts. For more information on how Indigo analyzes which image to display see this Wiki page: Custom Images.
If this sounds complicated, don’t worry. Once you get the hang of it, it is really quite easy. After building one or two of them, you should be able to build successive gauges very quickly. Also, please let me know if anything in these instructions could be clarified. They make sense to me, but that doesn’t mean that they make sense to you.