Thermometers

Thermometers are designed to be used as a progress indicator for some arbitrary goal, i.e., funds raised. Structurally, thermometers are more like an onion, consisting of a background layer; a "filling" layer, i.e., the part of the thermometer that rises; and an overlay that gives the thermometer a defined shape.

If you are a content editor, you should find the thermometer easy to update by changing the "current" value. Actually making a thermometer, however, assumes a bit of knowledgeability in Photoshop, Drupal, and page layout.

Accessibility notice: The thermometer itself carries no semantic meaning to users browsing non-visually; i.e., if you use a screen reader, you won't hear a thing! Make sure that the information you're trying to convey (such as funds raised) is also conveyed somewhere in text.

[thermometer current=0 goal=100 width=100 height=100 underlay="none" filling="none" overlay="none" levels="" bubbles=""]

  • width, height - Numerical width and height of the container element on page
  • goal - Integer value representing the goal value (leave off dollar, etc)
  • current - Integer of current amount raised
  • underlay - Drupal file fid or CSS color value for background behind the thermometer
  • filling - Drupal file fid or CSS color value for the growing part of the thermometer
  • overlay - Drupal file fid for the layer that lays over the filling
  • levels - "|"-separated list of "percent:height" pairs for setting custom height breakpoints for the filling
  • bubbles - "|"-separated list of "percent:fid" pairs for adding additional overlay images based on accumulation of funds (or whatever) raised

Constructing a thermometer

To make a basic thermometer, start out by making just the filling (optional, as you could use RGB or hex) and overlay in Photoshop, saved as separate images. They should be the same size, and the overlay should be a transparent PNG. The width and height attributes of the shortcode should be equal to the dimensions of the image.

((@todo: insert image demonstrating this))

Upload these images through the Content > Media page in the admin. When the files are uploaded, get their file IDs (fid) by hovering over or clicking on the filename on the Media page. If the url contains "media/10012", then the fid is 10012. You will place the fid in the appropriate attribute of the shortcode.

As funds are raised, the thermometer will rise based on a linear formula. If your thermometer does not increase linearly (e.g., an Erlenmeyer flask), you can't change the formula but you can change the breakpoints with the levels attribute. A common use case is to define the start of the thermometer (0%) and the top (100%) based on the shape of your image. If the bottom of your thermometer is, say, 30px from the bottom of the image, you can define a level for 0:30 (where 0 is a percent value and 30 is a pixel value). Multiple values can be set with a | character in between, i.e. "0:30|100:150".

For extra pizzazz, there is a concept called "bubbles," or extra image overlays added once a certain percentage has been reached. To use the Erlenmeyer flask example again, say that once it's 50% full, you want it to start fizzling out the top. Design your image as a transparent PNG overlay, upload through the Media page as above, copy the fid as above, and set the "bubbles" attribute to a percent:fid pair, much like the levels attribute described above. It can also accept multiple values with the "|" character.

((@todo: some real examples would be nice))