Weather Extension was recently updated to have a spinning indicator in the badge icon to let the user know the extension is loading when it is clicked. I wanted to give the user immediate feedback. The challenge was that the badge toolbar icon is limited to static images. I was able to get around this by using canvas and generating multiple images that update the icon. I’ve haven’t come across anything like this so I thought I would share.
Javascript JSFiddle example: https://jsfiddle.net/w7t2fe0j/
var context=document.createElement('canvas').getContext('2d');
var start = new Date();
var lines = 16,
cW = 40,
cH = 40;
setInterval(function() {
var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
context.save();
context.clearRect(0, 0, cW, cH);
context.translate(cW / 2, cH / 2);
context.rotate(Math.PI * 2 * rotation);
for (var i = 0; i < lines; i++) {
context.beginPath();
context.rotate(Math.PI * 2 / lines);
context.moveTo(cW / 10, 0);
context.lineTo(cW / 4, 0);
context.lineWidth = cW / 30;
context.strokeStyle = 'rgba(0, 0, 0,' + i / lines + ')';
context.stroke();
}
var imageData = context.getImageData(10, 10, 19, 19);
chrome.browserAction.setIcon({
imageData: imageData
});
context.restore();
}, 1000 / 30);
Tips:
- Have a timeout to hide the loading icon so it does not get stuck
- Set the badge icon from a background task so it does not get stuck spinning if the user closes the popup
Thanks for reading. Make sure you follow me on Twitter to stay up to date on the progress of my side projects T.LY, Weather Extension, and Link Shortener Extension. If you are interested in the tech I use daily, check out my uses page.
Nice addition Tim it looks good! And thanks for sharing this technique.
Thanks! Hope you find it useful. To see it in action make sure you try https://weatherextension.com/
I love your weather extension! I’m so glad I paid for the pro version. It’s one of very few that never gets turned off. 🙂
I was thinking about sharing an image of the window that shows up when you click on the extension. Is there a possibility of that ever being added to the app?
Context: I do daily video announcements (newsdesk style) for my elementary students. It would be awesome if we could have a title card that says the weather. I don’t know what programming would need to be behind it, but I was thinking just a static image of whatever the current conditions were would be great.
Thank you again!
Thanks!! Glad you enjoy it. So you would like a screenshot image of the extension popup?
Yes, that’s a much more succinct version of what I was trying to say.
Have you tried using an app like https://app.prntscr.com/en/index.html
Thanks for this article! Could you also provide the starting values for “start”, “lines”, “cW”, “cH”, and “context”?
Updated the example. Good catch! Let me know if you have any issues.
Here is a JSFiddle example: https://jsfiddle.net/w7t2fe0j/
Perfect, thanks so much!
No problem!
Nice job!
pls fix line 2 var start = newDate(); => new Date()
Otherwise, I just copy-pasted this code into my extension and it works!!!
Great thanks!