Making render resize.

res/app/components/stf/screen/fast-image-render/index.js

@@ -3,8 +3,7 @@
 // See http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays
 
 
-// TODO: add ability to resize
+function FastImageLoader(url) {
-function FastImageLoader(url, size) {
   var that = this
   this.loader = new Image()
 
@@ -13,20 +12,23 @@ function FastImageLoader(url, size) {
   }
 
   this.loader.onload = function () {
-
+    if (typeof(that.onLoad) === 'function') {
-    if (typeof(this.onLoad) === 'function') {
       that.onLoad(this)
     }
   }
 
   this.loader.onerror = function () {
 
-    if (typeof(this.onError) === 'function') {
+    if (typeof(that.onError) === 'function') {
       that.onError(this)
     }
   }
 }
 
+/**
+ * Loads an URL
+ * @param {string} url
+ */
 FastImageLoader.prototype.load = function (url) {
   this.loader.src = url
 }
@@ -48,17 +50,12 @@ function CanvasRender(canvasElement, options) {
     if (!this.displayWidth || !this.displayHeight) {
       throw new Error('Unable to get display size canvas must have dimensions')
     }
-  }()
+  }
 
   this.options = options
   this.context = canvasElement.getContext('2d')
 }
 
-CanvasRender.prototype.resize = function (width, height) {
-  this.displayWidth = width
-  this.displayHeight = height
-}
-
 CanvasRender.prototype.draw = function (image) {
   this.context.drawImage(image, 0, 0)
 }
@@ -80,7 +77,7 @@ function WebGLRender(canvasElement, options) {
     if (!this.displayWidth || !this.displayHeight) {
       throw new Error('Unable to get display size canvas must have dimensions')
     }
-  }()
+  }
 
   this.options = {
 //    alpha: this.transparent,
@@ -167,13 +164,8 @@ WebGLRender.prototype.setup = function () {
 
 }
 
-WebGLRender.prototype.resize = function (width, height) {
-  this.displayWidth = width
-  this.displayHeight = height
-}
-
 WebGLRender.prototype.draw = function (image) {
-  tex = this.ctx.createTexture()
+  var tex = this.ctx.createTexture()
   this.ctx.bindTexture(this.ctx.TEXTURE_2D, tex)
   this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST)
   this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST)
@@ -201,17 +193,18 @@ WebGLRender.prototype.clear = function () {
 
 function FastImageRender(canvasElement, options) {
   this.options = options || {}
+  this.canvasElement = canvasElement
+
+
   if (this.options.render === 'webgl') {
     this.render = new WebGLRender(canvasElement, options)
+  } else if (this.options.render === 'pixi') {
+    this.render = new PixiRender(canvasElement, options)
   } else {
     this.render = new CanvasRender(canvasElement, options)
   }
 }
 
-FastImageRender.prototype.resize = function (width, height) {
-  this.render.resize(width, height)
-}
-
 FastImageRender.prototype.draw = function (image) {
   this.render.draw(image)
 }
@@ -220,8 +213,91 @@ FastImageRender.prototype.clear = function () {
   this.render.clear()
 }
 
+Object.defineProperty(FastImageRender.prototype, 'canvasWidth', {
+  get: function () {
+    return this.canvasElement.width
+  },
+  set: function (width) {
+    if (width) {
+      if (width !== this.canvasElement.width) {
+        this.canvasElement.width = width;
+      }
+    }
+  }
+})
+
+Object.defineProperty(FastImageRender.prototype, 'canvasHeight', {
+  get: function () {
+    return this.canvasElement.height
+  },
+  set: function (height) {
+    if (height) {
+      if (height !== this.canvasElement.height) {
+        this.canvasElement.height = height;
+      }
+    }
+  }
+})
+
+Object.defineProperty(FastImageRender.prototype, 'displayWidth', {
+  get: function () {
+    return this.canvasElement.width
+  },
+  set: function (width) {
+    if (width) {
+      if (width !== this.canvasElement.width) {
+        this.canvasElement.width = width;
+      }
+    }
+  }
+})
+
+Object.defineProperty(FastImageRender.prototype, 'displayHeight', {
+  get: function () {
+    return this.canvasElement.height
+  },
+  set: function (height) {
+    if (height) {
+      if (height !== this.canvasElement.height) {
+        this.canvasElement.height = height;
+      }
+    }
+  }
+})
+
+Object.defineProperty(FastImageRender.prototype, 'canvasStyleWidth', {
+  get: function () {
+    return parseInt(this.canvasElement.style.width, 10)
+  },
+  set: function (width) {
+    if (width) {
+      var styleWidth = width + 'px'
+      if (styleWidth !== this.canvasElement.style.width) {
+        this.canvasElement.style.width = styleWidth;
+      }
+    }
+  }
+})
+
+Object.defineProperty(FastImageRender.prototype, 'canvasStyleHeight', {
+  get: function () {
+    return parseInt(this.canvasElement.style.height, 10)
+  },
+  set: function (height) {
+    if (height) {
+      var styleHeight = height + 'px'
+      if (styleHeight !== this.canvasElement.style.height) {
+        this.canvasElement.style.height = height;
+      }
+    }
+  }
+})
+
+
 // Check for Non CommonJS world
 if (typeof module !== 'undefined') {
-  module.exports = FastImageRender
+  module.exports = {
+    FastImageRender: FastImageRender,
+    FastImageLoader: FastImageLoader
+  }
 }
-

res/app/components/stf/screen/fast-image-render/test/performance_test.js

@@ -1,51 +1,39 @@
 var canvasElement = document.querySelector('canvas')
 var frameNumberElement = document.querySelector('#frame-number')
 
-var loader = new Image()
 var width = 300
 var height = 300
 
-var frames = {
+var frame = {
   total: 5,
   current: 0
 }
 
-
+var imageLoader = new FastImageLoader()
-function loadScreen() {
-//  loader.src = 'http://placehold.it/' + width + 'x' + height + '?' + Date.now()
-//  loader.src = 'http://lorempixel.com/' + width + '/' + height + '/abstract/Frame-' + frames.current + '/?' + Date.now()
-  console.time('load')
-  loader.src = 'screen.jpg?' + Date.now()
-}
-
-loadScreen()
-
-var imageLoader = new FastImageLoader('screen.jpg?' + Date.now())
-
-imageLoader.onLoad = function (image) {
-  console.log(image)
-}
-
 
 var imageRender = new FastImageRender(canvasElement, {render: 'canvas'})
 
+function loadNext() {
+  console.time('load')
+  //  loader.src = 'http://placehold.it/' + width + 'x' + height + '?' + Date.now()
+  //  loader.src = 'http://lorempixel.com/' + width + '/' + height + '/abstract/Frame-' + frames.current + '/?' + Date.now()
+  imageLoader.load('screen.jpg?' + Date.now())
+}
 
-loader.onload = function () {
+loadNext()
+
+imageLoader.onLoad = function (image) {
   console.timeEnd('load')
   console.time('draw')
-  imageRender.draw(this)
+  imageRender.draw(image)
   console.timeEnd('draw')
 
-  frameNumberElement.innerHTML = frames.current
+  frameNumberElement.innerHTML = frame.current
 
-  if (frames.current++ < frames.total) {
+  if (frame.current++ < frame.total) {
-    loadScreen()
+    loadNext()
   } else {
 
   }
-
 }
 
-loader.onerror = function (err) {
-  console.error(err)
-}

res/app/components/stf/screen/index.js

@@ -2,4 +2,4 @@ module.exports = angular.module('stf/screen', [
   require('stf/screen/scaling').name
 ])
   .directive('deviceScreen', require('./screen-directive'))
-  .controller('DeviceScreenCtrl', require('./screen-controller'))
+  .controller('DeviceScreenCtrl', require('./screen-controller'))