That big, red, thermometer... help!

Lindsi Gish:

We're trying to do the same thing. We want to create a custom thermometer and not use the ugly default one.

Did you ever get this figured out?

There are many built-in thermometers to choose from, or you can create your own. Look at WIDGETS.

Regards,

BPM

Mark Becker:

There are 2 different ways to implement a custom progress meter depending on where you want it:

1. Custom progress meter on the participant personal fundraising page.

          - This is displayed via 100 individual images that reside on the client ftp, one image for each % towards 100%.

          - Simply replace the 100 images with 100 new images (slightly moving the progress towards 100%).

          - The image must remain the same size.

1. Custom progress meter for the overall campaign (Can be any donation campaign, not just TeamRaiser).

          -  Follow the steps in the attached document to create a custom progress meter from 3 images.

Either option is pretty easy to implement.  Shout with any questions.

Mark Becker

Founding Partner

Cathexis Partners

mark@cathexispartners.com

Note that uploading over the 100 default images will affect all campaigns on your Convio site, so if you're attempting to use a custom thermometer for a single campaign, it is often a better approach to use JavaScript to manipulate the DOM to replace the default image with your custom version. This approach also allows you to get around the hardcoded width and height of the default image.

Some example JavaScript for replacing the default thermometer on the TeamRaiser personal page might look like:

]x::
<script type="text/javascript">
addOnLoadHandler(function(){
     var i;
     var allImgs=document.getElementsByTagName('img');
     for(i in allImgs){
          if(allImgs.src&&allImgs.src.indexOf('/images/thermometer-')!=-1){
               var thermPercent=allImgs.src.split('-').split('.');
               allImgs.src='../images/myCustomThermometer/thermometer-'+thermPercent+'.gif';
               allImgs.width='100';
               allImgs.height='200';
          }     
     }     
});
</script>
::]]

This script will replace the default image with an image following the naming convention thermometer-{percentage}.gif which you've uploaded to a directory you created on your site, images/myCustomThermometer. It will also resize the image to 100x200, instead of the default 65x160. A Convio conditional is included around the JavaScript so that if the script is placed in the head of the event's page wrapper, it will only be included and executed on the personal page. A more complex script could even be used to replace the GIF with a Flash thermometer.

Brian Mucha:

I'm very interested in the Flash Thermometer that you mentioned. Could you steer me in the right direction?

I contacted support (via chat) not very long ago and they said that flash was not currently possible. How do we get data for the flash file?

BPM

Brian,

My suggestion is that using a modified version of the JavaScript I included, you could pass the percent raised (and the goal and amount raised) as, say, flashvars. Here's an example of that, using swfobject.js which is included in every Convio site:

]x::
<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript">
addOnLoadHandler(function(){
     var i;
     var allImgs=document.getElementsByTagName('img');
     for(i in allImgs){
          if(allImgs.src&&allImgs.src.indexOf('/images/thermometer-')!=-1){
               allImgs.parentNode.id='myCustomThermometer';
               var flashvars={
                    percentRaised:']',
                    goal:']',
                    amountRaised:']'
               };
               var params={};
               var attributes={};
               swfobject.embedSWF('../swf/myCustomThermometer/thermometer.swf','myCustomThermometer','100','200','9.0.0',false,flashvars,params,attributes);               
          }
     }
});
</script>
::]]

You'd of course have to create thermometer.swf and have it evaluate the flashvars.

Noah Cooper:

Brian,

My suggestion is that using a modified version of the JavaScript I included, you could pass the percent raised (and the goal and amount raised) as, say, flashvars. Here's an example of that, using swfobject.js which is included in every Convio site:

]x::
<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript">
addOnLoadHandler(function(){
     var i;
     var allImgs=document.getElementsByTagName('img');
     for(i in allImgs){
          if(allImgs.src&&allImgs.src.indexOf('/images/thermometer-')!=-1){
               allImgs.parentNode.id='myCustomThermometer';
               var flashvars={
                    percentRaised:']',
                    goal:']',
                    amountRaised:']'
               };
               var params={};
               var attributes={};
               swfobject.embedSWF('../swf/myCustomThermometer/thermometer.swf','myCustomThermometer','100','200','9.0.0',false,flashvars,params,attributes);               
          }
     }
});
</script>
::]]

You'd of course have to create thermometer.swf and have it evaluate the flashvars.

amountRaised:']

These tags are for TeamRaiser participant thermometers. What if I want to do this for the entire TeamRaiser? I can only find these tags for a donation campaign and TR participant.

Regards, BPM

Noah Cooper:

The S42 tag provides event-level data.

Is there a S42 tag to get the Percent-of-Goal raised?

James Zetlen:

Not directly, but you could get the percent of goal raised using some E130-based arithmetic!

]" "$" "" replaceall "," "" replaceall ] "$" "" replaceall "," "" replaceall / 100 * int 100 swap -]]

That'll render a percentage integer between 1 and 100. It won't have a % sign on it, but you can put one right in front of it.

Super cool! That is PERFECT. Thanks!

I pass this value into my Flash Thermometer as a FlashVar. My flash scene uses this value as the frame to stop playing on.

So, the page loads and the thermometer starts at 0 and grows to the percent-achieved and stops. Neat.

Regards, BPM

Noah Cooper:

I'd love to see if a link if you wouldn't mind sharing!

I should have the new thermometer posted today. Once I do that (and our percent achieved gets above 0!) I'll put up a link.

Brian Mucha:

Here's a test page for the Thermometer. (It's not the real TeamRaiser page, so I can fool with the numbers.)

http://www.heroesforlife.org/_wrappers/marathonteam/2010/thermometer.html

Regards, BPM

P.S. The real-deal is at http://www.heroesforlife.org/marathon2010

Very cool! Nice job.

Brian Mucha:

Hey James, can you double check your syntax?

 

I'm using...

 

[[E130:"[[S42:1234:dollars]]" "$" "" replaceall "," "" replaceall ] "$" "" replaceall "," "" replaceall / 100 * int 100 swap -]]

 

...where dollars is 12,549 and goal is 400,000 and this evalutes to 97.

 

I spent a little time searching and reading (polish notation!?) but didn't quite unravel it.

 

 

Regards, BPM

I THINK it should just be...

[[E130:"[[S42:1234:dollars]]" "$" "" replaceall "," "" replaceall ] "$" "" replaceall "," "" replaceall / 100 * int]]

Brian Mucha:

[[E130:"[[S42:1234:dollars]]" "$" "" replaceall "," "" replaceall [[S42:1340:goal]] "$" "" replaceall "," "" replaceall / 100 * int]]

 

Decoding this was instructive. For anyone interested, here's what all this seems to mean.

 

First of all, to find the percentage of one number in relation to another number - divide the relative number by the base number and multiply the result by 100.

 

 

[[E130:"[[S42:1234:dollars]] "$" "" replaceall "," "" replaceall

    Take the DOLLARS and replace the '$' and the ',' with nothing.

 

 

[[E130:"[[S42:1234:goal]] "$" "" replaceall "," "" replaceall

     Take the GOAL and replace the '$' and the ',' with nothing.

 

So after the above replace operations which give us numbers from the  currency strings we have (in my case) this...

 

[[E130: 12549.00   400000.00 / 100 * int ]

 

 

Here's a link discussing the E Tags (http://community.customer.convio.com/message/3797#3797). E130 Tags - Evaluates  an Reverse Polish Notation (http://www.calculator.org/rpn.html)  expression to perform simple arithmetic, string processing, etc.

 

So translating the polish notation from that E tag...

 

12549.00   400000.00  /   ...means...    "12549.00 divided by 400000.00 (which equals about .0312725)"

 

And then...

 

.0312725 100 *  ...means... ".0312725 times 100 (which equals 3.12725)"

 

And finally...

 

3.12725 int   ...means... "return the integer of 3.12725 (which equals 3)"

 

and that means (approximately) 3%.

 

 

Sound correct?

 

Regards, BPM

 

 

edit:

 

And the last bit from James' original post...

 

[[E130:"[[S42:1234:dollars]] "$" "" replaceall "," "" replaceall   ] "$" "" replaceall "," "" replaceall / 100 * int 100 swap -]]

 

Picking up where I left off...

 

[[E1130: 3 100 swap - ]]

 

Just means, take the result from everything above (which was '3') and swap positions with '100' giving us '100 3'. Then do the polish notation thing on that, which is 100-3 or 97.

 

So what James gave me was the percentage REMAINING.

One suggestion just to throw out there -- since you're already writing this in JavaScript, you could just do the math in the script, rather than trying to decode the E130 tag (which is difficult even for many Convio admins to wrap their head around!)