IO

Module: IO

The IO module contains classes to load remote assets like images, shader files, textures, and more via different methods like XHR or JSONP. These methods are also exposed to the user so he can load models and data sets in an asynchronous way.

IO Class: IO.XHR

The XHR class provides an API for loading remote data asynchronously via an http request (AJAX). The domain serving the data must match the domain where the data is queried.

IO.XHR Method: constructor

Initializes a new XHR instance.

Syntax:

var xhr = new PhiloGL.IO.XHR(options);

Arguments:

1. options - (object) An object containing the following options:

Options:

• url - (string) The url to make the request to.
• method - (string, optional) The request method. Possible values are GET or POST. Default’s GET.
• async - (boolean, optional) Whether to make the request asynchronous or not. Default’s true.
• sendAsBinary - (boolean, optional) Whether the content should be sent as binary or not. Default’s false. More info here).
• body - (mixed, optional) To be used when sendAsBinary is true. The binary content to be sent. More info here).
• onProgress - (function, optional) A callback executed while the data is being downloaded. The first parameter of the callback is the percentage downloaded.
• onSuccess - (function, optional) A callback executed once the connection was successful and the information completely sent. The first parameter of the callback is the responseText content.
• onError - (function, optional) A callback executed if there’s an error while making the connection or sending the data.

Examples:

Creating a request object to a specific url.

  var req = new PhiloGL.IO.XHR({
    url: '/mydomain/somethingelse/',
    
    onSuccess: function(text) {
      alert(text);
    },

    onError: function() {
      alert("An error ocurred");
    }
  });

IO.XHR Method: send

Creates a connection and sends the information to be sent.

Syntax:

xhr.send();

Examples:

Creating a request object to a specific url and making the request. Note the send call at the end of the instanciation.

  var req = new PhiloGL.IO.XHR({
    url: '/mydomain/somethingelse/',
    
    onSuccess: function(text) {
      alert(text);
    },

    onError: function() {
      alert("An error ocurred");
    }
  }).send();

IO Class: IO.JSONP

The JSONP class provides an API for loading remote data asynchronously via an http request. Instead of using the XMLHttpRequest object JSONP creates a script document that is appended to the head tag of the HTML page. This technique enables the user to query a different domain for JSON data. More information about this technique can be found here.

IO.JSONP Method: constructor

Creates and sends a JSONP request. Can be called without the new keyword.

Syntax:

PhiloGL.IO.JSONP(options);

Arguments:

1. options - (object) An object containing the following options:

Options:

• url - (string) The url to make the request to.
• data - (object, optional) A key/value object to build a query string from it. Default’s an empty object (i.e. {})
• callbackKey - (string) The name of the query string parameter to set the name of the callback function to.
• onComplete - (function, optional) A callback executed once the connection ended. The first parameter of the callback is the JSON content.

Examples:

Creating a request object to a specific url.

  PhiloGL.IO.JSONP({
    url: '/anotherdomain/somethingelse/',
    callbackKey: 'callbackName',
    data: {
      'somekey': 'somevalue'
    },
    onComplete: function(json) {
      console.log(json);
    }
  });

IO Class: IO.Images

A very useful class that enables loading of multiple remote images asynchronously and returns an array with all the images loaded.

IO.Images Method: constructor

Creates a request to Images providing an array that will be asynchonously filled with loaded images.

Syntax:

var images = new PhiloGL.IO.Images(options);

Arguments:

1. options - (object) An object containing the following options:

Options:

• src - (array) An array of strings pointing to image urls.
• onProgress - (function, optional) Callback executed each time an image is loaded. Provides as first argument the percentage of images loaded.
• onComplete - (function, optional) Callback executed when all images finished loading. The images variable will now have all loaded images.

Examples:

Creating a request to load images.

  var imageUrls = ['image1.png', 'image2.png', 'image3.png'];

  var images = new PhiloGL.IO.Images({
    src: imageUrls,
    onProgress: function(perc) {
      console.log(perc + ' loaded');
    },
    onComplete: function() {
      alert("All images loaded! Now do something with the images array");
    }
  });

IO Class: IO.Images

A very useful class that enables loading of multiple remote images asynchronously and returns an array with all the images loaded.

IO.Images Method: constructor

Creates a request to Images providing an array that will be asynchonously filled with loaded images.

Syntax:

var images = new PhiloGL.IO.Images(options);

Arguments:

1. options - (object) An object containing the following options:

Options:

• src - (array) An array of strings pointing to image urls.
• onProgress - (function, optional) Callback executed each time an image is loaded. Provides as first argument the percentage of images loaded.
• onComplete - (function, optional) Callback executed when all images finished loading. The images variable will now have all loaded images.

Examples:

Creating a request to load images.

  var imageUrls = ['image1.png', 'image2.png', 'image3.png'];

  var images = new PhiloGL.IO.Images({
    src: imageUrls,
    onProgress: function(perc) {
      console.log(perc + ' loaded');
    },
    onComplete: function() {
      alert("All images loaded! Now do something with the images array");
    }
  });

IO Class: IO.Textures

A very useful class that enables loading of multiple textures from remote images asynchronously.

IO.Textures Method: constructor

Creates a request to Images to load the array of remote images and then generates Textures from them. The id of each texture will be the same as the url for each image. Can be called without the new keyword.

Syntax:

PhiloGL.IO.Textures(program, options);

Arguments:

1. program - (object) The program instance where we want to load the textures to. Read Program for more information.
2. options - (object) An object containing the following options:

Options:

• src - (array) An array of strings pointing to image urls.
• onComplete - (function, optional) Callback executed when all images and textures finished loading.

Examples:

Creating a request to load images and set them as textures for a specific program.

  var program = PhiloGL.Program.fromShaderIds('vs-id', 'fs-id');
  var imageUrls = ['image1.png', 'image2.png', 'image3.png'];

  PhiloGL.IO.Textures(program, {
    src: imageUrls,
    onComplete: function() {
      alert("All images and textures loaded!");
    }
  });