(For more resources related to this topic, see here.)

Building a bar graph cityscape (Intermediate)

In this article, we will take the standard bar graph and explore how we can manipulate it into something completely different. By default, the bar graph is a horizontal bar as follows:

In this article, we are going to paint it black, turn it on its side, and make it into a building.

Getting ready

To start, I’ve created a simple wallpaper that looks a little bit like a cityscape at sunset.

How to do it…

1. Create a new skin folder and name it sunset.

2. This time, create another folder inside it called memory, and create a memory.ini skin file within it. Write the following code into the memory.ini file:

   [Rainmeter]
   Name: Memory Plaza
   Version: 1
   Update=1000
   Author=You!
   [Variables]
   width=80
   height=200
   [Measure]
   Measure=PhysicalMemory
   [Meter]
   MeasureName=Measure
   Meter=BAR
   X=0
   Y=0
   BarColor=0,0,0,255
   BarOrientation=Vertical
   W=#width#
   H=#height#

3. Save the file, then load up the new skin. This is what I got:

   

4. Click-and-drag the black graph and move it to that it sit directly on the horizon. This is what you should end up with:

   

So, now you have successfully built a vertical bar graph that measures your memory use and added it to your cityscape! I will call this building Memory Plaza. Memory Plaza will grow as most of your memory is used up by programs running in Windows. Make sure it doesn’t get too tall!

How it works…

There are several interesting things that happened in this recipe:

• We created a memory measurement to see how much memory is being used

• We created a bar meter and connected it to the memory measurement

• We turned the bar meter on its side and customized it to look just like the buildings

We created a memory measure in the following code block:

[Measure]
Measure=PhysicalMemory

In the block, we created a new measurement named Measure. There are other types of memory measurements we can use, but we have just gone with PhysicalMemory. The full documentation on memory measurement is available at http://docs.rainmeter.net/manual/measures/memory.

We then created the bar meter in the following code block:

[Meter]
MeasureName=Measure
Meter=BAR
X=0
Y=0
BarColor=0,0,0,255
BarOrientation=Vertical
W=#width#
H=#height#

The full documentation on the bar meter is available at http://docs.rainmeter.net/manual/meters/bar

You should be able to guess what is going on with the MeasureName, Meter, X, and Y fields. The BarColor field provides the color of the bar. We’ve made it black to match the color of the horizon. As we want the bar to grow upwards as a building, we have set BarOrientation to be Vertical.

The last two fields are new:

W=#width#
H=#height#

If you were to guess that the W field represented width and the H field represented height, then you would be correct. The values in the hashes like #width# are variables. Variables are like containers for values that we can change the contents of. When we want to take the values out to use, we use the variable names within Rainmeter by wrapping them in hashes.

If you look higher up the code block, you will find that we declared the variables like so:

[Variables]
width=80
height=200

The obvious benefit to this is that you only have to write down the values for width and height once.

There’s more…

Right now, it is not obvious where the maximum readings are. Why not draw a crane, or building scaffolding, to mark the highest position to which the buildings can grow?

Summary

This article helped you to create a live cityscape with buildings that grow or shrink depending on the resources that your Windows operating system is consuming, such as RAM usage, memory usage, and so on.

Resources for Article :

Further resources on this subject:

• User Interface Design in ICEfaces 1.8: Part 1 [Article]
• Enlighten your desktop with Elive [Article]
• User Interface Design in ICEfaces 1.8: Part 2 [Article]