ProgressFly Function Calls

ProgressFly has three main functions, one for embedding a meter into a post or page, and two for displaying your meters in your templates. The latter two will require you to modify your template, but don't worry, it's very easy.

Embedding A Meter

To embed a progress meter into a post or page, simply drop the following string into the text editor when you create your post or page:

[pfmeter id=# target=# progress=# display=# precision=#]

where:

Example Code

If you wish to display progress meter with id number 4, which is dynamic, and you're happy with the defaults:

[pfmeter id=4]

If you wish to display progress meter with id number 4, which is currently at 40% and make sure it's static, and you're happy with the defaults:

[pfmeter id=4 target=10 progress=4]

If you wish to display progress meter with id number 4, keep it dynamic, but you want the "cssbare" display with two decimal places:

[pfmeter id=4 display="cssbare" precision=2]


Template Functions

To display any of your progress meters outside of posts or pages, you will need to modify the template where you wish the meters to display.

Navigate to the appropriate template page (most people choose to edit sidebar.php, for example), find the lines in the template where you wish the meters to display, and enter the appropriate function call (see below) into the code.

I am working on widgetising ProgressFly for an upcoming release.

Print A Single Meter

To display a single meter, copy and paste the following code into your template:

<?php pf_specific($wipid, $metertype, $globalprec, $precision); ?>

where:

Example Code

If you wish to display meter with id number 4, and you're happy with the default options:

<?php pf_specific(4); ?>

If you wish to display meter with id number 4, but you want the "cssbare" display:

<?php pf_specific(4,"cssbare"); ?>

If you wish to display meter with id number 4, and you want the "css" display with one decimal place:

<?php pf_specific(4,"css","no",1); ?>

Print A List Of Meters

To print a list of progress meters, copy and paste the following code into your template:

<?php pf_printprojects($limit, $display, $complete, $category, $orderby, $orderdxn, $visible, $globalprecision, $precision); ?>

where:

where:

Example Code

If you wish to display the last 5 meters of incomplete projects, and you're happy with the defaults:

<?php pf_printprojects(5); ?>

If you wish to display all incomplete projects, and you're happy with the defaults:

<?php pf_printprojects(); ?>

If you wish to display all complete projects, and you're happy with the defaults:

<?php pf_printprojects(-1,"css","yes"); ?>


The Meters

"css" (Default)

Title

units: 4 / 10 (40%)

"cssbare"

Title

40%

"preview"

A Note On CSS

The meters are styled entirely using CSS, which makes them highly customisable. (And also a little bit fiddly. Thus is the joy of the multi-browser internet!)

If you want the progressbar to display as a picture instead of a solid colour, you can do this: simply create a slice of the picture you wish to use as a background tile and, in the "Progress Bar" variable, specify "background: #progresscolor url(path/to/image) top left repeat;" (replace "progresscolor" with whatever color you have specified in the Progress Color variable; it's a good idea to specify a color in case the picture doesn't load properly) and:

Title

40%

Voila! The most boring background picture ever, but it's an example. (Note to those reading this page from inside their zip program: your browser won't be able to find the picture. Extract this page and pfbg.gif to the same directory and the example should load properly.)

So go wild and crazy. Make sure you test the display in a variety of browsers to ensure you know and are happy with what your visitors will be seeing, and make sure you hardcode the image path (ie, use the full url, not any shortcuts or abbreviations, to make sure the browser can always find your image).

I've tried to make ProgressFly user-friendly even for those who know very little CSS, but mucking with the freestyle variables will require a knowledge of CSS. If you want some tips and tricks, the best place to start is W3 Schools tutorials.