angular-prototype

Angular service to generate a set of prototype hotspot enabled screens derived from configuration.

Screens are lazyloaded based on the hotspot links on the current page.

Configuration can be automatically generated from PSD files using prototype-psd-parser

Installation

Install package from bower:

bower install --save angular-prototype

Add as a module dependency:

angular
    .module('myModule', ['prototype']);

Initialise module with configuration:

angular
    .module('myModule')
    .config(['$prototypeProvider', function($prototypeProvider){
      $prototypeProvider.init({
        screenConfigFile: '/config/screens.json'
      });
    }]);

Configuration

• screenConfigFile - The location (local or remote) of the screen configuration file
  • Default /app/config/screens.json
• breakpoints - An array of breakpoint objects defining at what width resolution the images should change. It will select the first item in the array if the screen is larger than all defined resolutions. The image widths will be set to this resolution too in order to support retina images.
  • Default

    [{
    name: 'desktop',
    resolution: 1024
    }, {
    name: 'tablet',
    resolution: 960
    }, {
    name: 'mobile',
    resolution: 320
    }]

• screenUrl - The path where the static image screens can be found
  • Default assets/screens/
• screenFileFormat - The file format that the images are stored as
  • Default .png

Screen Configuration Example

[{
    "state": "home",
    "url": "/",
    "breakpoints": {
      "desktop": {
        "hotspots": [{
          "x": 24,
          "y": 774,
          "width": 488,
          "height": 92,
          "state": "products"
        }],
        "imageWidth": 1024,
        "imageHeight": 2000
      }
    }
  }, {
    "state": "products",
    "url": "/products",
    "breakpoints": {
      "desktop": {
        "hotspots": [{
          "x": 28,
          "y": 756,
          "width": 488,
          "height": 92,
          "state": "home"
        }],
        "imageWidth": 1024,
        "imageHeight": 2000
      }
    }
  }]