Data from parse.com

In Color scheme explorer we take the color table from Parse.com. The parse.com javascript API is a very nice capability based on Backbonejs, that is heavily promise based to support asynchronicity. Here's how to use that to query the data associated with a color scheme. This is similar to how the data was loaded to parse.com in the first place.

Asynchronous loading

When it starts up, or you change scheme you may notice this


Here's what's happening then...

loading scheme using promises


The two key points are
  • parse.com has a limit on the number of rows it can return from a query, so it needs to be chunked up.
  • What is actually returned is not the result of the query, but a promise that will be resolved when all the data is chunked up. Essentially, a promise is wrapped around the completion of each of the parse.com query promises which is only resolved when there are no more chunks to return

Other things, like building up the DOM, and even getting input can be done while this is happening. Eventually when the promise is resolved, then we can do the work of constructing the color palettes, either of some random color, or of a hex value if the user has entered one in the meantime. 

// get the currently selected scheme, and if nothing entered yet, generate a random scheme
    getSelectedScheme($('#schemeselector').val())
       .done( function() {
            if (!$('#hexinput').val()) calculateColors (rgbToHTMLHex(randomColor),"random color");
        });

This use of promises nicely abstracts away the details of what was promised, leaving the code free of distractions. That means I can use exactly the same function for a change event on the scheme selector combo.

 $('#schemeselector').change(function() {
      getSelectedScheme($(this).val());
 });

For help and more information join our forum,follow the blog or follow me on twitter .






Comments