heartcode/canvasloader

Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML canvas element to draw and animate circular preloaders. The library is currently in beta, some minor changes and improvements might be done to it in the near future.

Heartcode CanvasLoader

Heartcode CanvasLoader is a JavaScript UI library, which uses the HTML canvas element to draw and animate circular preloaders.
The library is currently in beta, some minor changes and improvements might be done to it in the near future.

##Tools I created a tool that can help with generating and previewing loaders with copy/paste code snippets and instructions: http://heartcode.robertpataki.com/canvasloader

##Documentation The latest documentation can be found here: http://heartcode.robertpataki.com/canvasloader/docs/CanvasLoader.html

Contribution

Please contribute :) I am quite new to JavaScript and I am pretty sure that there are million ways of making the library better, cleaner and smaller. Any constructive contribution is welcome and appriciated.

You can also add your website / web app link to the Wiki, so the community can see how others use CanvasLoader.

License

(The MIT License)

Copyright (c) 2011 Róbert Pataki [email protected];

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Credits

Heartcode CanvasLoader was created by Róbert Pataki.

canvasloader's Issues

Get/Set methods should be deprecated

I initially thought that having get/set methods for the visual parameters was a nice idea. It is quite handy to have the ability to change parameters at runtime (after creation), but I haven't really seen anyone using these functions apart from the initial set up of the CanvasLoader instances, so I believe we can deprecate this functionality and add a initial visual Object parameter to the constructor instead (as mentioned in issue #6). This solution also should decrease the file size quite significantly. This feature will be implemented in the next version.

IE7 and IE8 bug

How can I fix it "SCRIPT87: Invalid argument.
heartcode-canvasloader-min.js, line 5 character 415"?

IE8 "Failed"

When visiting the http://heartcode.robertpataki.com/canvasloader/ website with IE8, following error appears:

Line: 10, character 361
Error: Failed

According to the debugger, the problem lays here:

if(b.hasChildNodes())

Slow canvas rendering on mobile iOS

Because of a fix ticking rate the rendering seems quite sluggish on iOS devices.

This can be improved by using the 'requestAnimationFrame' method on supported devices. Hopefully this issue will be fixed soon with the next update.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of heartcode/CanvasLoader!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library heartcode/CanvasLoader is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "heartcode/CanvasLoader",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Doesn't seem to make use of IE9 HW acceleration

In running this on IE9, it appears that once the DOM starts loading a lot of objects, the spinner halts, just like an animated GIF. :(

I have seen some other spinners that do not halt during DOM loading (like spin.js in Chrome).

This is strange because supposedly IE9 uses the GPU for canvas operations; perhaps CanvasLoader just doesn't use those features that trigger GPU usage.

Passing in (visual) parameters as object to constructor

In case you want to create more than one instance of the loader with the same looks, at the moment you have to set them up individually. As an alternative it would be nice to be able to pass in an object with all the desired parameters.

So instead of this:

    cl2 = new CanvasLoader('overlay-canvasloader-container');
    cl2.setShape('roundRect'); // default is 'oval'
    cl2.setDensity(14); // default is 40
    cl2.setRange(1); // default is 1.3
    cl2.setSpeed(1); // default is 2
    cl2.setFPS(12); // default is 24
    cl2.show(); // Hidden by default

    cl = new CanvasLoader('canvasloader-container');
    cl.setShape('roundRect'); // default is 'oval'
    cl.setDensity(14); // default is 40
    cl.setRange(1); // default is 1.3
    cl.setSpeed(1); // default is 2
    cl.setFPS(12); // default is 24
    cl.show(); // Hidden by default

Something like this:

    clparams = {
        shape: 'roundRect',
        density: 14, // default is 40
        range: 1,  // default is 1.3
        speed: 1, // default is 2
        FPS: 12, // default is 24
        show: true // Hidden by default
    }

    cl2 = new CanvasLoader('overlay-canvasloader-container', {params: clparams});
    cl = new CanvasLoader('canvasloader-container', {params: clparams});

Shape drawing glitch

The 'roundedRectangle' shape has a tiny glitch.

Minified version of the script is obsolete

Hi,
I've noticed that heartcode-canvasloader-min.js is more than a year older than the regular version. Just a heads up.

Thanks for the script, it's awesome!

Bug in IE 8 when Array.prototype is extended

I use very handy Array Remove custom method by John Resig (http://ejohn.org/blog/javascript-array-remove/), it extends the Array.prototype and it leads to bug in IE8:

At the lines 159-160 we have this code:

var a = ["group", "oval", "roundrect", "fill"], n;
for (n in a) { CanvasLoader.vmlSheet.addRule(a[n], "behavior:url(#default#VML); position:absolute;"); }

When Array.prototype is extended, the a keys is extended too and the n variable in our cycle takes on the value "remove" at the last iteration.

Please change the for cycle syntax to something like this:

var a = ["group", "oval", "roundrect", "fill"];
for (var n = 0, l = a.length; n < l; n++) { CanvasLoader.vmlSheet.addRule(a[n], "behavior:url(#default#VML); position:absolute;"); }

It fixes the issue.

Add support for responsive designs

It would be really awesome if support for responsive designs could be added by making it possible to specify diameter in em units, possibly by adding a boolean option to the constructor (eg. {responsive: true}) which causes the canvas to use em units for width/height.

utilize requestAnimationFrame?

Hi, This is more a question than a request, but I noticed some stuttering in the loader probably due to garbage collection and was wondering if requestAnimationFrame could be used on browsers that support it to smooth out rendering. It was even added to iOS 6. Perhaps that doesn't work with your FPS/Speed setup.

Thanks!

Animation Freezes on iPad

This is working well on IE, Firefox and Chrome. Even in Safari for Windows it looks good. However, in Safari on the iPad, the canvas displays but does not animate. It just sits there frozen. Not sure why the iPad treats it differently or what in the code doesn't play nice with the iPad.

Shape scaling

The scaling is handled by the library only when 'circle' shape is selected.

Global cache canvas holder

At the moment the cache canvas for the loader is held inside the CanvasLoader instance parent div. Gordon Jessop mentioned that it would be a nice thing to have a common holder for the cache canvases, which I think is a very good idea and I will definitely implement this in the next version.

Invalid argument error in minified version

I get an Invalid argument error in IE8 on Win 7 on

k.vmlSheet.addRule(d[e],"behavior:url(#default#VML); position:absolute;")

when using the minified version, heartcode-canvasloader-min.js. No error when using the normal version, heartcode-canvasloader.js.

Files downloaded 2013-09-27

TypeError: Cannot call method 'appendChild' of null

I just added <script> tags to include canvasloader-min.js file and added generated code, but my javascript console gives me error "TypeError: Cannot call method 'appendChild' of null [http://127.0.0.1/scripts/heartcode-canvasloader-min.js?:1". Is this a bug or i'm missing something. I also have jquery .js included.

Canvas rendering looks very pixelated on Retina screens

The loader is not retina ready at the moment, it would be great to make it somewhat responsive and retinafied.

Some ideas:
http://stackoverflow.com/questions/12618052/html5-canvas-can-i-draw-really-sharp-on-non-retina-devices-like-ipad2

Spinner randomly disappearing

So I use your spinner in an application I'm writing, and sometimes the spinner would disappear randomly, and wouldn't show up for a while then come back, with no user interaction or anything.

Our fix was overriding the show/hide functions, like so:

    this.cl = cl;
},

show: function() {
    this.cl.show();
    this.inherited(arguments);
},

hide: function() {
    this.cl.hide();
    this.inherited(arguments);
}

Not sure, I never called any hide function when it would disappear.

Scoping issue (reported by Jens Meineck)

I've started using your canvas loader script - it is simply awesome...

Everything worked fine until I did some tidying up of my code today when canavasloader stopped working.

A little digging revealed that you have the following lines in your code:

    /**
    * Shows the rendering of the loader animation
    * @method show
    * @public
    */
    p.show = function () {
            if (typeof (this.timer) !== "number") {
                    var t = this;
                    this.timer = self.setInterval(function () { t.tick(); }, Math.round(1000 / this.fps));
                    setCSS(this.cont, {display: "block"});
            }
    };

notice the

    self.setInterval (.....

since you never define self it resolved it to another object in my scope that cause a problem. Removing the

    self.

from the expression seems to fix the problem.

Crashes (everything) when element with ID not found

When the element in the HTML file with the ID specified in the CanvasLoader constructor isn't found, the script crashes completely, in many cases taking the whole application down with it. I suspect an exception is thrown, but is that really the best way to handle this situation?

Android 4.2.2 visual issue

Hi on Galaxy Tab with Android v. 4.2.2 (and stock browser) there is some visual bug. it's hard to describe, but looks like there are two overlapping elements..

Your work is great

I like and appreciate your work this is a really perfect customable loading i'v ever seen.
but i build such a thing several month a ago that is so similar to your project.
it's my pleasure to watch my project and give me bacup.
canvas loading