I'm in the process of refining the animation for a circular progress bar that I created using HTML canvas arc and JavaScript.
The progress bar is generated using data extracted from an XML file (semic.cgx) which is constantly updated by a PLC.
My plan involves checking the XML file every 100ms for any changes and gradually adding 1/10th of an increment to the variable controlling the progress every 10ms. Essentially, turning one increment into ten.
Despite my efforts, I haven't been able to achieve the desired smoothness in the animation. The code snippet below encounters problems once the upper limit of the progress bar is reached.
I understand that there are various other methods to accomplish this task; however, most of the online examples lack detailed explanations on how the code actually works. My programming knowledge is basic, so I would greatly appreciate any assistance.
var req
function reloadData() {
url = 'semic.cgx'
try
{
req = new XMLHttpRequest();
}
catch (e)
{
alert('No AJAX Support');
return;
}
req.onreadystatechange = myFunction;
req.open('GET', url, true);
req.send(null);
}
function myFunction() {
if (req.readyState == 4)
{
if (req.status == 200)
{
var x = req.responseXML;
var v1 = x.getElementsByTagName('text')[0].childNodes[1].innerHTML;
var angle = (0.75 +((v1 / 100)* 1.5));
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
setInterval(function () {
if (angle >= 2.25) {
ctx.clearRect(0,0,500,500);
}
if (angle < 2.25) {
angle = angle + 0.0015;
ctx.globalCompositeOperation = "source-over";
ctx.rotate(0.5*2*Math.PI);
ctx.lineWidth = 15;
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";
ctx.beginPath();
ctx.arc(250, 250, 200, (0.75 * Math.PI), (angle * Math.PI));
ctx.strokeStyle = "#DE2700";
ctx.stroke();
}
console.log(angle);
}, 10);
timeoutID = setTimeout('reloadData()', 100);
}
}
}