yetangitu/OpenSTF
1
0
Fork 0
mirror of https://github.com/openstf/stf synced 2025-10-04 18:29:17 +02:00
Code Issues Releases Wiki Activity

FastImageRender working.

Browse source 
Still not Fast though.
This commit is contained in:
Gunther Brunner 2014-02-27 19:04:07 +09:00
parent f9af24e6bc
commit c021b3d153
2 changed files with 30 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -195,7 +195,6 @@ function FastImageRender(canvasElement, options) {
this.options = options || {} this.options = options || {}
this.canvasElement = canvasElement this.canvasElement = canvasElement
if (this.options.render === 'webgl') { if (this.options.render === 'webgl') {
this.render = new WebGLRender(canvasElement, options) this.render = new WebGLRender(canvasElement, options)
} else if (this.options.render === 'pixi') { } else if (this.options.render === 'pixi') {

64
res/app/components/stf/screen/screen-directive.js
View file

@ -1,4 +1,5 @@
var imageRender = require('./fast-image-render') var FastImageLoader = require('./fast-image-render').FastImageLoader
var FastImageRender = require('./fast-image-render').FastImageRender
module.exports = function DeviceScreenDirective($document, ScalingService, $rootScope) { module.exports = function DeviceScreenDirective($document, ScalingService, $rootScope) {
return { return {
@ -6,25 +7,19 @@ module.exports = function DeviceScreenDirective($document, ScalingService, $root
template: require('./screen.jade'), template: require('./screen.jade'),
link: function (scope, element, attrs) { link: function (scope, element, attrs) {
scope.device.promise.then(function (device) { scope.device.promise.then(function (device) {
var loader = new Image() var imageLoader = new FastImageLoader()
, canvas = element.find('canvas')[0] , canvas = element.find('canvas')[0]
, imageRender = new FastImageRender(canvas, {render: 'canvas'})
, finger = element.find('span') , finger = element.find('span')
, input = element.find('textarea') , input = element.find('textarea')
, g = canvas.getContext('2d') , displayWidth = 0 // TODO: cache inside FastImageRender?
, displayWidth = 0
, displayHeight = 0 , displayHeight = 0
, cachedDisplayWidth = 0
, cachedDisplayHeight = 0
, scaler = ScalingService.coordinator( , scaler = ScalingService.coordinator(
device.display.width device.display.width
, device.display.height , device.display.height
) )
, cached = {
displayWidth: 0,
displayHeight: 0,
canvasStyleWidth: 0,
canvasStyleHeight: 0,
imageWidth: 0,
imageHeight: 0
}
$rootScope.$on('pageHidden', function () { $rootScope.$on('pageHidden', function () {
scope.canView = false scope.canView = false
@ -39,7 +34,7 @@ module.exports = function DeviceScreenDirective($document, ScalingService, $root
loadScreen() loadScreen()
} else { } else {
scope.fps = null scope.fps = null
//clearCanvas() //imageRender.clear()
} }
}) })
@ -48,7 +43,7 @@ module.exports = function DeviceScreenDirective($document, ScalingService, $root
loadScreen(); loadScreen();
} else { } else {
scope.fps = null scope.fps = null
//clearCanvas(); //imageRender.clear()
} }
}) })
@ -65,39 +60,32 @@ module.exports = function DeviceScreenDirective($document, ScalingService, $root
} }
function loadScreen() { function loadScreen() {
loader.src = device.display.url + imageLoader.load(device.display.url +
'?width=' + displayWidth + '?width=' + displayWidth +
'&height=' + displayHeight + '&height=' + displayHeight +
'&time=' + Date.now() '&time=' + Date.now()
)
} }
loader.onload = function () { imageLoader.onLoad = function (image) {
if (scope.canView && scope.showScreen) { if (scope.canView && scope.showScreen) {
// Sets the size only if updated
if (cached.displayWidth !== displayWidth || // Check to set the size only if updated
cached.displayHeight !== displayHeight || if (cachedDisplayWidth !== displayWidth ||
cached.imageWidth !== this.width || cachedDisplayHeight !== displayHeight) {
cached.imageHeight !== this.height
) { cachedDisplayWidth = displayWidth
cached.displayWidth = displayWidth cachedDisplayHeight = displayHeight
cached.displayHeight = displayHeight
cached.imageWidth = this.width imageRender.canvasWidth = image.width
cached.imageHeight = this.height imageRender.canvasHeight = image.height
var size = scaler.projectedSize(displayWidth, displayHeight) var size = scaler.projectedSize(displayWidth, displayHeight)
imageRender.canvasStyleWidth = size.width
// Make sure we're rendering pixels 1 to 1 imageRender.canvasStyleHeight = size.height
canvas.width = this.width
canvas.height = this.height
// Perhaps we have a massive screen but not enough pixels. Let's
// scale up
canvas.style.width = size.width + 'px'
canvas.style.height = size.height + 'px'
} }
// Draw the image imageRender.draw(image)
g.drawImage(this, 0, 0)
// Reset error, if any // Reset error, if any
if (scope.displayError) { if (scope.displayError) {
@ -114,7 +102,7 @@ module.exports = function DeviceScreenDirective($document, ScalingService, $root
} }
loader.onerror = function () { imageLoader.onError = function () {
scope.$apply(function () { scope.$apply(function () {
scope.displayError = true scope.displayError = true
}) })