library logo

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:

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.XHR.Group

The XHR Group class creates parallel XHR requests and returns the information in an array. Callbacks for when a single resquest is succesfull and also for when all requests are completed are provided.

IO.XHR.Group Method: constructor

Initializes a new XHR Group instance.

Syntax:

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

Arguments:

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

Options:

Examples:

Creating a request object to a specific url.

  var req = new PhiloGL.IO.XHR({
    urls: ['/mydomain/1/' '/mydomain/2/'],

    onError: function() {
      alert("An error ocurred in one request");
    },

    onComplete: function(arr) {
        alert("responses: " + arr);
    }
  });

IO.XHR.Group Method: send

Creates parallel connections for each url and sends the information.

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({
    urls: ['/mydomain/1/', '/mydomain/2/'],
    
    onSuccess: function(text) {
      alert(text);
    },

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

    onComplete: function(arr) {
      alert("answer array: " + arr);
    }
  }).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:

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:

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:

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!");
    }
  });
Copyright © Nicolas Garcia Belmonte.