|
Yesterday I decided to try out canvas since I had seen some cool stuff, especially the 3-D. I am currently working on a dashboard so I decided to try and make a live gauge to replace the Flash gauges I was working on. I found a couple of nice graphing scripts, which I will be looking at next, but gauges and meters are non-existent. Here is a screen shot of this gauge if you're not sure what I am talking about:
5/8/2008: So I decided to play with Mootools, ajax, JSON, and the pure Canvas\JS gauge and now have a pure javascript gauge that is updated live getting data in JSON format. If you want to check it out it is here . 5/10/20008: Made a Flash gauge updated using Mootools 1.2 Request.json() for live updating, which can be found here . If you want to learn how to add a Flash object using Mootools and send a variable to Flash automatically without manual data input this will be good for you to take a look at. It's super easy too...
Anyway, the first thing I wanted to do is get canvas working in Internet Explorer since the shop I work for is 99% Microsoft. I found iecanvas works flawless in IE6 and IE7. Include in the head of your page like so:
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
Now the fun part. Since this code is two days old and chopped to shit please realize this is not going to be pretty! I have a lot of work to do to make it viable and easy to use. I guess I am excited I can do this in a browser without Flash or Java so I am jumping the gun on posting this. I am hoping others will find this interesting and maybe do some gauges, meters as well since this seems to be an area of greed lately. Another issue is that I have two kids and very little coding time at home so making a really cool easy to theme and use script could be awhile. I also can't use the code I use at work and I can't work on this particular version at work so if you beat me to it great! If I get it created and working well it will be GPLv2 or the likes. Here's the basic Javascript, which is just in the head of the web page. You will find start value and end value variables, which you can set with PHP, by hand, whatever. The gauge will ease back and forward to the end value from the start value. In my code at work I hold the last end value as a starting point for the new value coming in. For instance, if my last value was 45 and the new value is 20 I will have a start value of 45 and a end value of 20, which causes the needle to ease back to the new value, 20. I'd like to thank Rick Wagner for help on that. Please be aware, copy and paste of this code may be messy as this is pure html. I've included the working html file in the images download at the bottom of this page, which will be updated.
var sVal = 0; // start value
var cVal = sVal;
var fVal = 1; // end value
var id;
//testing a loop javascript requesting live data via Python ASP...
function updateData() {
sVal = 15;
fVal = 75;
cVal = sVal;
clearInterval(id);
init();
}
window.onload = function(){
init();
}
function init(){
draw();
id = setInterval(draw,100);
}
function draw() {
if(sVal == fVal){
clearInterval(id);
return ;
}else if (sVal < fVal && cVal >= fVal) {
clearInterval(id);
}else if (sVal > fVal && cVal <= fVal) {
clearInterval(id);
}
var inc = 1;
var perc = (Math.abs(fVal-cVal)/Math.abs(fVal-sVal));
if (perc < .2) { inc *= perc*7; }
if (inc < .5) { inc = .5; }
var dVal = -.5*Math.PI + (cVal/100)*2*Math.PI;
cVal += (sVal < fVal) ? inc : -inc;
var ctx = document.getElementById('myCanvas').getContext('2d');
// Create the canvas gauge.
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,200,200); // clear canvas
ctx.fillStyle = 'rgba(125,125,125,1.0)';
ctx.strokeStyle = 'rgba(255, 0, 0 ,1.0)';
ctx.save();
ctx.translate(100,105);
// TESTING : show value
var livevals = document.getElementById("livevals");
livevals.innerHTML = "Start value: "+sVal+" Actual value: "+fVal;
// TESTING : show value
// rotate the needle
ctx.rotate(dVal);
// test draw
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.moveTo(1.9,0);
ctx.lineTo(50,0);
ctx.stroke();
ctx.restore();
ctx.beginPath();
}
To display in the page all you need is the canvas tag in body: <canvas id="myCanvas" width="200px" height="200px"></canvas> Here is the working html, don't forget to download the graphics as they are important, well prettier than a ugly old red line moving around. <body> <!-- START CONTENT -->
<div id="wrap">
<div style="background: url(images/test.png); width: 200px; height: 200px; border: 1px solid #ffffff;">
<img src="images/gauge_button.png" style="position: absolute; z-index: 9999px;" />
<canvas id="myCanvas" width="200px" height="200px"></canvas>
</div>
<table>
<tr>
<td align="top" cellpadding="10px"><br />What? <div style="border: 1px solid darkred; padding: 10px; width: 190px;"><span id="livevals">loading...</span></div></td>
<tr>
<td>
<form id="updateform" action="null.html" method="post">
<input type="button" onClick="updateData();" value="Random Update">
<br/><span id="resultblock" class="error"></span>
</form></td>
</tr>
</table>
</body>
</html>
Download the working code and images here and don't forget to change links in the above html. You must have iecanvas for this to work in IE6 or 7. Tested on Windows and Linux in Opera, Firefox, IE6/7 - Does not work in Konqueror and Opera is not working correctly! |
Articles 
