Olimometer for WordPress

March 4th, 2011 95 Comments »
Olimometer 2.47

Olimometer is my very first WordPress plugin. It’s a fully customisable fundraising thermometer with PayPal integration and custom skin support. You can download the plugin from the WordPress plugin repository, or by visiting the official page on the WordPress web site.

Multiple thermometers can be configured and displayed separately on different pages or posts. Each thermometer supports individual customisation, targets, currencies and progress tracking.

Thermometers can be placed in sidebar widgets with custom headers, footers and CSS classes.

Choose from a number of pre-installed thermometer skins, or create your own and share it.

This plugin requires that the GD libraries are available within PHP.

If you wish the thermometer to have a transparent background then I suggest you still choose a background colour close to the actual background on which the thermometer will appear. This will ensure that the image blends in perfectly.

If you have *any* problems installing or using this plugin, or if it doesn’t quite meet your needs then please let me know. Visit http://www.olivershingler.co.uk/oliblog/olimometer and leave a comment, or via Twitter @OliverShingler

 

== Installation ==

Either install using the automatic WordPress plugin installation method, or do it manually:

1. Upload all files to to the `/wp-content/plugins/olimometer` directory (create it if it doesn’t exist) within your WordPress Installation

2. Activate the plugin through the ‘Plugins’ menu in WordPress

3. Configure the settings to your personal requirements

4. Place `<?php echo show_olimometer(olimometer_id,olimometer_css);?>` in your templates or [olimometer id=olimometer_id css_class=olimometer_css] in a post, where olimometer_id = the Olimometer’s id found on the settings page and olimometer_css = an optional string containing the name of the CSS class to apply to the image.

== Frequently Asked Questions ==

= The thermometer image won’t show (or shows up as a red cross) =

You may not have the GD libraries installed as part of PHP, you’ll need to speak to your web server administrator

= Can I apply my own CSS to the Olimometer image? =

Yes! When you call the Olimometer, simply pass in the name of the CSS class you wish to use as a parameter.

For example, to use a class called align_right, use the following code:

`<?php echo show_olimometer(1,’align_right’);?>` in your templates or [olimometer id=1 css_class="align_right"] in a post replacing 1 with the actual id of your Olimometer.

= I’ve found a bug / have a suggestion =

You can contact me via Twitter @OliverShingler or you can leave a comment on the plugin’s official page http://www.olivershingler.co.uk/oliblog/olimometer. I can’t make any promises but I will do my best.

= How do I change the thermometer image? =

See: How do I create my own skin?

= How do I create my own skin? =

To create your own skins, follow these steps. Please note these steps have changed recently:

* Create a folder within your WordPress structure /wp-content/uploads/olimometer
* Create a folder within your WordPress structure /wp-content/uploads/olimometer/skins
* Copy this file to /wp-content/uploads/olimometer/skins.xml
* Edit the new skins.xml file and remove all but one of the ‘skin’ objects
* Change the skin object’s skin_slug to something unique for your new custom skin
* Create a folder at /wp-content/uploads/olimometer/skins/YOUR_NEW_SKIN_SLUG replacing YOUR_NEW_SKIN_SLUG with the actual skin_slug value in new skins.xml
* Create yourself three new PNG image files, naming them according to that specified in the XML file. One image should contain the bottom of the thermometer (the bulb), the second should be the thermometer’s bar which should be drawn empty of mercury and the third is the top of the thermometer.
* Save the three image files in the skin_slug folder you just created

Skins.xml file contains the skin definitions for all available Olimometer skins. The easiest way to create your own skin is to copy and paste an existing one changing the values as appropriate. You need to create an entire ‘skin’ object within the XML structure. Each sub-object within the skin object is explained below:

* skin_name: The name of the skin as displayed in the drop-down list on the settings page
* skin_slug: The name of a subfolder within the plugin’s skin folder in which you will store the thermometer images associated with this skin. Do not use spaces in the name.
* bulb_file: The name of the PNG image file of the thermometer ‘bulb’ (bottom image)
* bar_file: The name of the PNG image file of the thermometer ‘bar’. This should be empty of mercury.
* top_file: The name of the PNG image file of the top of the thermometer.
* bar_colour: A six character RGB hex value (e.g. white = ffffff) colour of the mercury bar
* bar_pos: The number of pixels from the left (or top if horizontal) of the image at which the mercury bar will be drawn.
* bar_width: The width of the mercury bar in pixels.
* bar_end: The number of pixels from the top (or right if horizontal) of the image where the mercury bar will stop at 100%
* text_pos: The number of pixels from the left of the image at which the text values are placed. Not used for horizontal skins but required so set to 0.
* orientation: Can be either vertical (standard) or horizontal

For best results follow these tips:

* Each image file should be of equal width (or height for horizontal skins).
* The background of each image should be an identical solid colour to enable seamless placement and transparency.
* Use a droplet tool or other suitable colour identifier to identify a suitable bar_colour value using the mercury colour in your bulb_file image.
* Make sure the top_file image includes a copy of the bar_file underneath it, but cleaned of any marks or bars – see the built in skins for an example. This is to avoid a gap being left between the top image and the bar image at certain image heights.
* All built-in skins have a slug-name starting with “oli-” so avoid using this prefix to prevent name conflicts.
* Share your skins with me – contact me using the WordPress forums, tweet me @OliverShingler, or leave a comment on the Olimometer page: http://www.olivershingler.co.uk/oliblog/olimometer

== Changelog ==

= 2.40 =
* Added the ability to overlay a custom image over the top of the Olimometer. This feature can be found at the bottom of the Appearance and Layout section of the admin page.

= 2.36 =
* Tidy up of code

= 2.35 =
* You can now customise the image’s hyperlink
* Fixed saving issue when trying to blank out certain values
* Fixed bug preventing image display when upgrading to a version using currency formatting.

= 2.34 =
* Fixed GD image output issue on some web servers (header and flush requirements)
* Added kr as prefix/suffix option

= 2.33 =
* Added some more number format options.

= 2.32 =
* Values can be formatted, for example with decimal places and a comma to delimit thousands. See the Number Format option on the settings page.

= 2.31 =
* Fixed bug causing image creation failure on some systems (literal path requirements)

= 2.30 =
* Offline donations can now be tracked when using a PayPal integrated balance.
* Fixed issue causing debug error message within PayPal integration code.

= 2.20 =
* Custom skins will no longer be overwritten on upgrade from now on, BUT they will be overwritten when you install this version and you MUST change your custom skins to the new format.
* Horizontal thermometers are now available
* Fixed bug with deprecated functions in sidebar widget management
* Reversed the order of the version history. Details of the latest version now appear at the top of the list.

= 2.10 =
* Added role assignment for the dashboard widget – delegate updating the progress values to editors or any other available role.
* Now remembers last viewed Olimometer on a per-user basis not per-installation within the admin pages.

= 2.04 =
* Quick fix to stop some error notifications if running in debug mode

= 2.03 =
* Multiple Olimometers now supported with independent progress tracking.
* Added extra currency and suffix symbols (Yen, Cent, Pence, Lira, Pesetas, Degree).
* Automatic width calculation of the thermometer image – no more manual guesswork.
* Target values can now be enabled and disabled.
* Shortcode is now [olimometer] to reduce confusion.
* Colour picker installed to allow you to easily choose font and background colours.
* Preview your Olimometers on the settings page.
* Added ‘Our Progress’ styled thermometer skins in blue, red and green.

= 2.00 =
* Multiple Olimometers now supported with independent progress tracking.
* Added extra currency and suffix symbols (Yen, Cent, Pence, Lira, Pesetas, Degree)
* Automatic width calculation of the thermometer image – no more manual guesswork
* Target values can now be enabled and disabled
* Shortcode is now [olimometer] to reduce confusion
* Colour picker installed to allow you to easily choose font and background colours
* Preview your Olimometers on the settings page
* Added ‘Our Progress’ styled thermometer skins in blue, red and green.

= 1.51 =
* Minor bug fix for PHP running on IIS
* Re-jigged the widget layout to conform to latest WordPress standards. This removes the annoying dot in the widget that some people have noticed.
* Widget settings are per widget now and no longer stored amongst the Olimometer settings
* The CSS class for the Olimometer is now set via shortcode or function parameters. See the FAQ for details.
* These changes are all in preparation of a rework to allow multiple Olimometers on a blog

= 1.50 =
* Support for decimal places in displayed values. Olimometer now no longer rounds to the nearest whole number.
* Prefix and suffix values can be selected from a drop-down list.

= 1.43 =
* Fixed bug in Widget header and footer when using HTML. Characters now escape correctly.

= 1.42 =
* Minor bug fix affecting the widget
* Added Watermaster skin courtesy of http://www.fscinternational.com
* Widget now supports custom header and footer text or HTML

= 1.41 =
Made the PayPal integration code a bit more efficient. Fewer lookups to the PayPal API and reduced unnecessary database writes. This should speed up web page loading times when using the PayPal option as your progress value.

= 1.40 =
PayPal integration: Progress value can optionally be updated by retrieving the balance from a PayPal account. Tidied up administration page and finally it can now cope if the progress value exceeds the target value.

= 1.33 =
Disabled error logging on thermometer.php to prevent buildup of large error_log file due to direct access from crawlers without correct parameters.
Fixes a problem which prevents the Olimometer from displaying on a default PHP installation.
Automatically detects for the presence of the PHP GD extension upon which this plugin is dependent and displays a message on the admin page.

= 1.32 =
The show_olimometer shortcode now operates correctly fixing a bug which prevented the thermometer image from being displayed inline with the contents of a post or page.

= 1.31 =
Fixed overlapping image bug in the skins.

= 1.30 =
* Added a dashboard widget on the admin interface. You can now quickly update your progress or target values on the dashboard directly.
* SKINS! The thermometer image can now be customised using skins. See FAQ for current skinning guidelines.

= 1.23 =
Fixes a bug which caused progress values (total amount raised) of 9 or less to be displayed as 0.

= 1.22 =
I noticed that some people were using the Olimometer to track a percentage, so this version allows you to add a suffix (for example a % symbol) at the end of your values. Currencies are now also optional as a consequence.

= 1.21 =
Fixed default currency, now defaults to GBP – not a critical update at all if you already have it installed as this only affects new installations.

= 1.2 =
Fixed the overlapping text bug where the progress value would overlap with the target and starting values. Font size is also adjustable now and I’ve tidied up the thermometer image’s border too.

= 1.1 =
Thermometer now includes an optional transparent background

= 1.0 =
The initial release

 


95 Responses to “Olimometer for WordPress”

  1. Kyle says:

    Hi,

    I am not sure what my problem is, but after installing the plug in I can’t get it to display any other thermometers but the default image. I create new thermometers and change settings and hit save changes, but no changes occur in the preview image. When I use the code, the default preview image just comes up. What’s wrong?

    Kyle

  2. Daniel says:

    Thanks. =^)
    Oh, BTW the website where I am using it is Danielsbeard.org.
    - Daniel

  3. Daniel says:

    Howdy – Thanks for all your work with the Olimometer. I have 2 questions.

    1) I am trying to make a null setting for “Olimometer Hyperlink URL” When I leave it blank and hit save, whatever was in that field previously repopulates. Is there a fix/workaround?

    2) Is there a way to word wrap the “Progress Label” When it is too long it creates very wide white space to the right of the Olimometer. If the text can word wrap underneath that would be ideal.

    Thanks for your work. =^)

    • Oliver says:

      Hi,

      1) At the moment, the best option I can suggest is to put a # in the field. The image will still be hyperlinked, but will not do anything when clicked. I’ll look in to having a ‘remove hyperlink’ tick box or something in a future release.

      2) Tricky… I had a play and my code to prevent malicious code insertion is also filtering out using newline escaping (\n). I’ll see if I can figure out a workaround for you.

      Oli

    • Daniel says:

      Thanks for the update. =^) You rock! =^) -Daniel

  4. Maureen M says:

    Hello, for some reason the thermometer isn’t reading accurately from Paypal. I’m wondering what I’m doing wrong? It increases and then goes back down. Goes up and then back down. Thanks for your help.

    • Oliver says:

      Does it go back down when you’ve withdrawn the funds, or is the PayPal account staying the same, but the Olimometer not reflecting the current balance?

  5. Joe says:

    Hello,

    I configured all of the settings in the plugin, but I can’t get it to show:

    http://www.josephroling.com/askjoe/?page_id=196

    I used this code: [olimometer id=1]

    Can you help?

    Thank you!

  6. Jessica says:

    First great plugin and very thorough documentation. Thank you for that.
    So question… Do you have a way to show the Event ID (eid) from Stay Classy? I need to show that instead of the Project ID (pid). Thanks in advance.

  7. GSP Rescue says:

    Good plugin. From time to time we have fundraisers for Vet bills that we incur and in the past have used several websites (Fundable & ChipIn)to help us meet our goal. With the recent shutdown of ChipIn, we searched and found the Olimometer.

    The only suggestion that we would like to make (instructions if it already exists), is a way to adjust the total progress shown relative to the fundraiser. For instance, if you are trying to raise 1000 but already have 1000 in your Paypal account, using the automatic progress checking Paypal, the Olimometer will show you have met your goal. Also, if you have a fundraiser but sell merchandise through the same Paypal account, the items purchased will aggregate in the progress shown. Is there a way to enter a negative number in the progress shown formula to offset an existing balance or a separate donation for something else? Is it possible to setup the Olimometer to only display what is donated on one Paypal button?

    We’ve been managing setting the Olimometer to manual but thought this would make it an even better plugin.

    Thanks for offering a useful plugin for organizations like ours.

    • Oliver says:

      Thanks for your comment about the Olimometer. When linking to PayPal, you should be able to enter a value in the Offline Donations field. This field can be used to adjust the displayed value on the thermometer either positively (such as in donations received offline) or negatively (to compensate for unwanted transactions in the account).

      I hope this meets your requirements. If it doesn’t, let me know and I’ll see what I can do.

  8. sonic says:

    can you help me to put the Olimometer into my website?
    dont know what to put for olimometer_css.

    Fatal error: Call to undefined function curl_init() in /users/millionenknacker/www/wordpress/wp-content/plugins/olimometer/olimometer-class.php on line 335

    thanks in advance.

  9. blair says:

    I cant get the red to move ??? the thermo is no reflecting the target/raised

    what am i missing ??????

  10. sadok says:

    I used olimometer in the past on my localhost and it was really great – simple, efficient and useful.
    Once I put it on line (a year after maybe) the plugin is installed but I do not have any visual result: neither on the preview nor in the widget – i just get a link sending me to that page – GD is installed and i do not plan to use paypal at first – thanks again for your time

    • Oliver says:

      I’ve sent you an email asking for more info – if you could reply to that then I’ll try to help. Thanks.

  11. Rolf says:

    Hello
    I just want to ask, how I can change the currency on “CHF”.
    Can you give me perhaps a hint?
    Thanks a lot.
    Have good time.

    Greetings from Switzerland
    Rolf

  12. Ted says:

    Is this plugin completely secure? Entering my paypal information into the plugin will not compromise my account will it?

    • Oliver says:

      Hi, you enter your PayPal API details at your own risk – they are as secure as your WordPress database is. If that were to become compromised then your PayPal API credentials should also be considered compromised. Obviously you should take every precaution to secure your WordPress installation and the database and WordPress provide a guide on implementing best practise security: http://codex.wordpress.org/Hardening_WordPress

  13. Monica says:

    Hi, just wanted to check o see if its compatible with WordPress 3.5? thanks

  14. Pam says:

    Greetings – can this be configured to show two thermometers (competing campaigns) on one page? Thanks!

  15. Pam says:

    Hey – can this be configured to show two thermometers (competing campaigns) on one page? Thanks!

  16. Jason says:

    Hey! I just wanted to thank you for your work! I searched for a donation thermometer for wordpress on google and pretty quickly found your widget and liked the thoroughness of your widget page, so I installed it. I had it up and running and configured to match my page style in under 10 mins… I’m really happy! Thanks again… Jason….

Leave a Reply