24,656
edits
Changes
Created page with "<noinclude>__NOTOC__ This widget allows you to embed a fundraising thermometer on your wiki page. Created by [http://wiki.dosburros.com/User:grahams grahams] == Using this..."
<noinclude>__NOTOC__
This widget allows you to embed a fundraising thermometer on your wiki page.
Created by [http://wiki.dosburros.com/User:grahams grahams]
== Using this widget ==
For information on how to use this widget, see [https://www.mediawikiwidgets.org/AccuWeather widget description page on MediaWikiWidgets.org].
==Sample Result==
[[File:FundraisingThermometerSampleResult.png|mini|100px|FundraisingThermometer Screenshot]]
== Copy to your site ==
To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
</noinclude><includeonly>
<div id="thermoCanvasDiv" style="text-align: center">
<script>
<!--{if isset($percentage)}-->
var ratio = <!--{$percentage}--> / 100;
<!--{else}-->
var ratio = <!--{$currentTotal}--> / <!--{$goal}-->;
<!--{assign var="percentage" value="`$currentTotal/$goal*100`"}-->
<!--{/if}-->
</script>
<!--{if $framed eq 'true'}-->
<table cellspacing="0" cellpadding="5" border="0" style="float:right;
margin-left: 10px;"><tr valign="top"><td style="border: 1px solid black;
padding: 8px; background: white;"><h3 style="text-align: center; border: 1px
solid black; padding: 5px; background: white"><!--{math
equation="round(per)" per=$percentage}-->%
<!--{if isset($asof)}-->(as of <!--{$asof}-->)<!--{/if}--></h3>
<!--{/if}-->
<canvas id="thermoCanvas" width="<!--{$width}-->px" height="<!--{$height}-->px"></canvas>
<!--{if $framed eq 'true'}-->
</td>
</tr></table>
<!--{/if}-->
</div>
<script>
var canvas = document.getElementById('thermoCanvas');
var ctx = canvas.getContext('2d');
var wallWidth = 5;
var wallColor = 'black';
var fillColor = 'red';
// bulb parameters
var radius = (canvas.width / 2) - (wallWidth / 2);
var x = canvas.width / 2;
var y = canvas.height - (radius + wallWidth);
var endAngle = 1.3 * Math.PI;
var startAngle = 1.7 * Math.PI;
var counterClockwise = false;
// tube parameters
var tubeHeightFromTop = 0;
// compute where the walls meet the bulb
var rightSideStartX = x + radius * Math.cos(startAngle);
var rightSideStartY = y + radius * Math.sin(startAngle);
var leftSideStartX = x + radius * Math.cos(endAngle);
var leftSideStartY = y + radius * Math.sin(endAngle);
var tubeWidth = rightSideStartX - leftSideStartX;
ctx.strokeStyle = wallColor;
ctx.fillStyle = fillColor;
ctx.lineWidth = wallWidth;
// draw bulb
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.fill();
ctx.stroke();
ctx.restore();
// fill percentage
ctx.save();
ctx.beginPath();
ctx.strokeStyle = fillColor;
ctx.fillStyle = fillColor;
ctx.lineWidth = wallWidth;
var tubeHeight = leftSideStartY - tubeHeightFromTop;
var fillHeight = tubeHeight * ratio;
ctx.rect(leftSideStartX, leftSideStartY - fillHeight, tubeWidth, fillHeight);
ctx.fill();
ctx.stroke();
ctx.restore();
// draw sides
ctx.save();
ctx.beginPath();
ctx.moveTo(rightSideStartX+2, rightSideStartY+4);
ctx.lineTo(rightSideStartX, tubeHeightFromTop);
ctx.moveTo(leftSideStartX-2, leftSideStartY+4);
ctx.lineTo(leftSideStartX, tubeHeightFromTop);
ctx.stroke();
ctx.restore();
</script>
</includeonly>
This widget allows you to embed a fundraising thermometer on your wiki page.
Created by [http://wiki.dosburros.com/User:grahams grahams]
== Using this widget ==
For information on how to use this widget, see [https://www.mediawikiwidgets.org/AccuWeather widget description page on MediaWikiWidgets.org].
==Sample Result==
[[File:FundraisingThermometerSampleResult.png|mini|100px|FundraisingThermometer Screenshot]]
== Copy to your site ==
To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
</noinclude><includeonly>
<div id="thermoCanvasDiv" style="text-align: center">
<script>
<!--{if isset($percentage)}-->
var ratio = <!--{$percentage}--> / 100;
<!--{else}-->
var ratio = <!--{$currentTotal}--> / <!--{$goal}-->;
<!--{assign var="percentage" value="`$currentTotal/$goal*100`"}-->
<!--{/if}-->
</script>
<!--{if $framed eq 'true'}-->
<table cellspacing="0" cellpadding="5" border="0" style="float:right;
margin-left: 10px;"><tr valign="top"><td style="border: 1px solid black;
padding: 8px; background: white;"><h3 style="text-align: center; border: 1px
solid black; padding: 5px; background: white"><!--{math
equation="round(per)" per=$percentage}-->%
<!--{if isset($asof)}-->(as of <!--{$asof}-->)<!--{/if}--></h3>
<!--{/if}-->
<canvas id="thermoCanvas" width="<!--{$width}-->px" height="<!--{$height}-->px"></canvas>
<!--{if $framed eq 'true'}-->
</td>
</tr></table>
<!--{/if}-->
</div>
<script>
var canvas = document.getElementById('thermoCanvas');
var ctx = canvas.getContext('2d');
var wallWidth = 5;
var wallColor = 'black';
var fillColor = 'red';
// bulb parameters
var radius = (canvas.width / 2) - (wallWidth / 2);
var x = canvas.width / 2;
var y = canvas.height - (radius + wallWidth);
var endAngle = 1.3 * Math.PI;
var startAngle = 1.7 * Math.PI;
var counterClockwise = false;
// tube parameters
var tubeHeightFromTop = 0;
// compute where the walls meet the bulb
var rightSideStartX = x + radius * Math.cos(startAngle);
var rightSideStartY = y + radius * Math.sin(startAngle);
var leftSideStartX = x + radius * Math.cos(endAngle);
var leftSideStartY = y + radius * Math.sin(endAngle);
var tubeWidth = rightSideStartX - leftSideStartX;
ctx.strokeStyle = wallColor;
ctx.fillStyle = fillColor;
ctx.lineWidth = wallWidth;
// draw bulb
ctx.save();
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.fill();
ctx.stroke();
ctx.restore();
// fill percentage
ctx.save();
ctx.beginPath();
ctx.strokeStyle = fillColor;
ctx.fillStyle = fillColor;
ctx.lineWidth = wallWidth;
var tubeHeight = leftSideStartY - tubeHeightFromTop;
var fillHeight = tubeHeight * ratio;
ctx.rect(leftSideStartX, leftSideStartY - fillHeight, tubeWidth, fillHeight);
ctx.fill();
ctx.stroke();
ctx.restore();
// draw sides
ctx.save();
ctx.beginPath();
ctx.moveTo(rightSideStartX+2, rightSideStartY+4);
ctx.lineTo(rightSideStartX, tubeHeightFromTop);
ctx.moveTo(leftSideStartX-2, leftSideStartY+4);
ctx.lineTo(leftSideStartX, tubeHeightFromTop);
ctx.stroke();
ctx.restore();
</script>
</includeonly>
