Using External Resources

Overview

When developing a web based application, you would often want to use some external resources that are loaded on runtime, such as third-party libraries, images, and audio files.

Eko projects that are served on Eko’s mobile app can be downloaded by users for offline viewing. These projects are packed into downloadable packages. The packing process must handle the external resources used by the project to provide a fully functional offline package. In order to support that, any external resource used in the project must be defined in a configuration file extResources.json located in the src/js folder.

This file is a map of URLs. Nesting is supported and is commonly used for namespacing. Here is an example:

{
    "pixi": "//helloeko.com/resources/js/plugins/pixi/pixi.min.gz.js",
    "images": {
        "img1": "https://myhost.com/resources/myImg1.jpg",
        "img2": "https://myhost.com/resources/myImg2.jpg"
    }
}

Example

Initial code

Let’s say you are using our pixi plugin and also have some custom buttons with background images.
Your app.js may look like this:

export default {
    onLoad: function(ctx) {
        return new Promise(function(resolve, reject) {
            // load pixi plugin
            ctx.loadJS([
                '//helloeko.com/resources/js/plugins/pixi/pixi.min.gz.js'
            ], { success: resolve, error: reject})
        });
    },

    onPlayerInit: function(ctx) {
        // set my buttons and add them to the player's overlays
        let btn1 = document.createElement('button');
        btn1.style.backgroundImage = "url('https://myhost.com/resources/myImg1.jpg')";
        let btn2 = document.createElement('button');
        btn2.style.backgroundImage = "url('https://myhost.com/resources/myImg2.jpg')";            
        let myGuiContainer = document.createElement("div");
        myGuiContainer.appendChild(btn1);
        myGuiContainer.appendChild(btn2);
        player.overlays.add('myOverlay', myGuiContainer);
    }
};

The pixi plugin and the images URLs are hardcoded in the code. Now, let’s use extResources.json and move the required URLs from the code.

Creating the config

Under the src/js folder of your checked out project and you’ll find an empty extResources.json. Have the URLs configured there. In this example we also use some nesting to include a namespace for the images.

In order for a project to work correctly offline, the external resources URLS configuration must reside in src/js/extResources.json.

{
    "pixi": "//helloeko.com/resources/js/plugins/pixi/pixi.min.gz.js",
    "images": {
        "img1": "https://myhost.com/resources/myImg1.jpg",
        "img2": "https://myhost.com/resources/myImg2.jpg"
    }
}

Loading the config

The config file should be loaded and parsed into a JavaScript object to be used in your code.
All you need to do is import 'extResources' in app.js:

import extResources from './extResources.json';
export default {
    onLoad: function(ctx) {...},
    onPlayerInit: function(ctx) {...}
};

Using the config in your code

The next step is replacing the URLs in the code. Here is the final code after the replacement:

import extResources from './extResources.json';
export default {
    onLoad: function(ctx) {
        return new Promise(function(resolve, reject) {
            // load pixi plugin
            ctx.loadJS([extResources.pixi], { success: resolve, error: reject})
        });
    },

    onPlayerInit: function(ctx) {
        // set my buttons and add them to the player's overlays
        let btn1 = document.createElement('button');
        btn1.style.backgroundImage = "url("+ extResources.images.img1 +")";
        let btn2 = document.createElement('button');
        btn2.style.backgroundImage = "url("+ extResources.images.img2 +")";
        let myGuiContainer = document.createElement("div");
        myGuiContainer.appendChild(btn1);
        myGuiContainer.appendChild(btn2);
        player.overlays.add('myOverlay', myGuiContainer);
    }
};
Rate this page: X
Tell us more!