1

I've used Canvas to create a progress bar that takes a slider value and fills in the progress. This uses an overlay image to create the fill. My code is listed below.

I'm running into a problem, though, because I don't want the progress bar to use a slider. I just used the slider for testing purposes. What I really want to do is use this as an XP (experience) indicator. I have php running on my Joomla site which gets the current user id, group id, and their current xp value. I'd like to be able to access this user information to fill the progress bar based on the current users xp. Even further, I'd like to tell the bar that if the user group id is 11 (level 1) the xp range to fill should be 0xp-9xp. If the users group id is 12 (level 2) the xp range should be 10xp-99xp, and so on.

I could definitely use some direction to at least get me started. I'm thinking something along the lines of: if the users group is 11, then the xpRange = 9 and that the progress = xpValue / xpRange

HTML:

<body onload='init();'>

<form id="drawForm">
<input id="slider" type="range" min="0" max="100" onchange="drawImage();"       
onkeyup="drawImage();" />
</form>
<canvas id="progress" width="670" height="161"></canvas>

Javascript:

<script language="javascript" type="text/javascript">


function init() {

canvas = document.getElementById('progress');

// Create the image resource
img = new Image();

// Canvas supported?
if (canvas.getContext) {

ctx = canvas.getContext('2d');
slider = document.getElementById('slider');

// Setup the onload event
img.onload = drawImage;

// Load the image
img.src = '../images/xpBar.png';

} else {
alert("Canvas not supported!");
}
}

function drawImage() {

// Draw the base image - no progress
drawBase(ctx);

// Draw the progress segment level
drawProgress(ctx);

}

var img, 
iHEIGHT = 50, 
iWIDTH = 240, 
canvas = null, 
ctx = null;
slider = null;

function drawBase(ctx) {

ctx.drawImage(img, 0, 0, iWIDTH, iHEIGHT, 0, 0, iWIDTH, iHEIGHT);

}

function drawProgress(ctx) {

var x1 = 0, // X position where the progress segment starts
x2 = 240, // X position where the progress segment ends
s = slider.value,
x3 = 0,

// Calculated x position where the overlayed image should end

x3 = (x1 + ((x2 - x1) / 100) * s);

ctx.drawImage(img, 0, iHEIGHT, x3, iHEIGHT, 0, 0, x3, iHEIGHT);

}


</script>

Any help would be greatly appreciated.

Maverick575
  • 29
  • 6
  • 1) For the levels, what do you mean by 'and so on' ? what would be level 3's range ? and 2) please make a fiddle. – GameAlchemist Apr 15 '14 at 10:02
  • if group id is 13 (level 3) the xp range should be 100xp-999xp. if group id is 14 (level 4) the xp range should be 1000xp-9999xp. if group id is 15 (level 5) the xp range should be 10000xp-99999xp. if group id is 16 (level 6) the xp range should be 100000xp-999999xp. Group id 17 (level 7) is >1000000xp. I don't know much about fiddle making. Can you suggest a tutorial or manual that will get me started? – Maverick575 Apr 16 '14 at 17:18

0 Answers0