Wifi and Battery meters are a staple of laptop users and are incredibly easy to create.
ImageCrop, ImageTint, and all of the other Image related features are a very useful feature of Rainmeter opening a whole new method of creating dynamic images. We're also going to use some neat tricks with DyanamicVariables, Substitution, and Conditional Statements to make the battery indicator change color and blink when the battery is low.
Below is our example skin.
Note: The big reason we're using ImageCrop instead of a Bar meter is that when using an Image with a Bar meter, the Image cannot be scaled.
We need to start by grabbing the image we're going to use.
It's grey because we're going to use ImageTint to change it's color in Rainmeter.
Lets start our code by setting up the basics and some Variables that we're going to use later on.
OrigHW is the original Height/Width of the image. We're using a 100x100 image so we only need to define one variable here.
Sections defines the number of sections in the image.
SectionsW is the width of the individual sections. For the purpose of this tutorial this Variable is in the form of a formula.
HW defines the scaled Height/Width of the individual indicators. Once again, we only need one variable since our image is a square.
Now we need to define the colors that we want to use.
Now we're going to work on the Wifi meter since it's the more basic code.
First we need to define the measure for the WiFi status.
Now is the fun part. We need to determine the width of the indicator.
ROUND will round the our value to the nearest whole number. If you want to round up use CEIL, or you can use FLOOR to round down.
Note: If you want to use a bar meter instead of using ImageCrop, use this formula instead: (CurrentValue/MaxValue)*OriginalDimension
Now let's define the background image.
Don't forget to make it the Height and Width of the variable we made earlier.
We are moving the wifi meter one section to the right, and just a little bit down to make room for the battery indicator.
Now we'll create the actual WiFi indicator.
At this point the image is still it's original dimensions.
What this means: Start at the top, left and crop out a box that is [cWifi] wide and #OrigHW# tall.
Now to scale it to the height and width we defined earlier.
Since Scaling is done last, we have to now scale the cropped image to the new width. Take the width of the cropped image, divide it by the original width to create a ratio or percent, and multiply it by the new width.
That's it. We have a working WiFi meter. Now let's work on the battery meter.
Just like with the WiFi we have to measure the Battery.
The same thing as before.
Another background image.
We're using the same image so we need to flip it around a bit.
Here's the part where we change the color of the battery indicator based on the percent.
Now we turn those values into colors using a substitute. We used negative numbers since they cannot exist in a color code.
Just to make things nifty lets have the indicator blink if the power is less than 25.
Conditional statements evaluate to 1 (true) or 0 (false) so we can actually use them in calculations.
Now let's use our measures to put together the battery indicator.
Nothing really different here.
Since we flipped our image around we need to move our flipped, cropped and scaled indicator into the correct position.
Take the width of the cropped image (before it's scaled) divide it by the original width to get what ratio it is compared to the whole image. What we need is the ratio of what we're not using so we take 1 and subtract that ratio we just calculated and multiply that by the new width.
Here's where we use the measure we made to make the indicator blink.