From c0eb25857984b76e07d4837f84cb2dd799bc0c91 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Thu, 12 Feb 2015 17:57:28 -0500 Subject: [PATCH 01/25] Start writing HUD driver and components --- support/client/lib/vwf/model/hud.js | 217 +++++++++ support/client/lib/vwf/view/hud.js | 451 ++++++++++++++++++ .../vwf.example.com/HUD/element.vwf.yaml | 18 + .../vwf.example.com/HUD/overlay.vwf.yaml | 7 + 4 files changed, 693 insertions(+) create mode 100644 support/client/lib/vwf/model/hud.js create mode 100644 support/client/lib/vwf/view/hud.js create mode 100644 support/proxy/vwf.example.com/HUD/element.vwf.yaml create mode 100644 support/proxy/vwf.example.com/HUD/overlay.vwf.yaml diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js new file mode 100644 index 000000000..f5d4a12f7 --- /dev/null +++ b/support/client/lib/vwf/model/hud.js @@ -0,0 +1,217 @@ +"use strict"; + +define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utility ) { + + var logger; + + return model.load( module, { + + // == Module Definition ==================================================================== + + // -- initialize --------------------------------------------------------------------------- + + initialize: function() { + var lastKernel; + this.state.overlays = {}; + this.state.elements = {}; + lastKernel = this.kernel; + while ( lastKernel.kernel ) { + lastKernel = lastKernel.kernel; + } + this.state.kernel = lastKernel; + logger = this.logger; + }, + + // == Model API ============================================================================ + + // -- creatingNode ------------------------------------------------------------------------- + + creatingNode: function( nodeID, childID, childExtendsID, childImplementsIDs, + childSource, childType, childIndex, childName, callback /* ( ready ) */ ) { + + var node = undefined; + var protos = getPrototypes.call( this, kernel, childExtendsID ); + + if ( protos && isOverlay( protos ) ) { + + node = this.state.overlays[ childID ] = { + "elements": {}, + "properties": {}, + "initialized": false + }; + + } else if ( protos && isElement( protos ) ) { + + node = this.state.elements[ childID ] = { + "overlay": this.state.overlays[ node.parentID ], + "properties": {}, + "drawProperties": {}, + "initialized": false + }; + node.overlay.elements[ childID ] = node; + node.initialized = false; + + } + }, + + // -- initializingNode --------------------------------------------------------------------- + + initializingNode: function( nodeID, childID, childExtendsID, childImplementsIDs, + childSource, childType, childIndex, childName ) { + + var node; + + if ( this.state.overlays[ childID ] ) { + + node = this.state.overlays[ childID ]; + node.properties = { + "drawRate": undefined, + "visible": undefined + }; + + } else if ( this.state.elements[ childID ] ) { + + node = this.state.elements[ childID ]; + node.properties = { + "images": undefined, + "width": undefined, + "height": undefined, + "visible": undefined, + "enabled": undefined, + "alignH": undefined, + "alignV": undefined, + "offsetH": undefined, + "offsetV": undefined + }; + node.drawProperties = {}; + + } + + }, + + // -- creatingProperty --------------------------------------------------------------------- + + creatingProperty: function( nodeID, propertyName, propertyValue ) { + return this.initializingProperty( nodeID, propertyName, propertyValue ); + }, + + // -- initializingProperty ----------------------------------------------------------------- + + initializingProperty: function( nodeID, propertyName, propertyValue ) { + var value = undefined; + + if ( propertyValue !== undefined ) { + var node = this.state.overlays[ nodeID ] || this.state.elements[ nodeID ] ; + if ( node !== undefined ) { + switch ( propertyName ) { + default: + value = this.settingProperty( nodeID, propertyName, propertyValue ); + break; + } + } + } + + return value; + }, + + // TODO: deletingProperty + + // -- settingProperty ---------------------------------------------------------------------- + + settingProperty: function( nodeID, propertyName, propertyValue ) { + var node, value; + + if ( this.state.overlays[ childID ] ) { + + node = this.state.overlays[ childID ]; + if ( node.properties.hasOwnProperty( propertyName ) ) { + node.properties[ propertyName ] = propertyValue; + value = propertyValue; + } + + } else if ( this.state.elements[ childID ] ) { + + node = this.state.elements[ childID ]; + if ( node.properties.hasOwnProperty( propertyName ) ) { + if ( node.initialized ) { + switch ( propertyName ) { + case "images": + node.properties.images = loadImages( node, propertyValue ); + break; + } + } else { + node.properties[ propertyName ] = propertyValue; + } + } else { + node.drawProperties[ propertyName ] = propertyValue; + } + value = propertyValue; + + } + + return value; + }, + + // -- gettingProperty ---------------------------------------------------------------------- + + gettingProperty: function( nodeID, propertyName, propertyValue ) { + }, + + // -- creatingMethod ------------------------------------------------------------------------ + + creatingMethod: function( nodeID, methodName, methodParameters, methodBody ) { + if ( this.state.elements[ nodeID ] ) { + var node = this.state.elements[ nodeID ]; + if ( methodName === "draw" ) { + node.draw = methodBody; + } + } + } + + // -- callingMethod ------------------------------------------------------------------------ + + callingMethod: function( nodeID, methodName, methodParameters, methodValue ) { + if ( this.state.elements[ nodeID ] ) { + var node = this.state.elements[ nodeID ]; + if ( methodName === "draw" ) { + this.logger.errorx( "callingMethod", "The draw method should not be called " + + "from outside the HUD driver!" ); + return undefined; + } + } + }, + + // -- firingEvent -------------------------------------------------------------------------- + + firingEvent: function( nodeID, eventName, eventParameters ) { + }, + + } ); + + function loadImages( node, images ) { + var keys = Object.keys( images ); + var newImage, oldImage; + for ( var i = 0; i < keys.length; i++ ) { + newImage = images[ keys[ i ] ]; + if ( !newImage.hasOwnProperty( "src" ) ) { + logger.errorx( "loadImages", "Image \"" + keys[ i ] + "\" is malformed! It " + + "does not contain a \"src\" property! Skipping image load!" ); + continue; + } else if ( !newImage.hasOwnProperty( "value" ) ) { + logger.warnx( "loadImages", "Image \"" + keys[ i ] + "\" does not contain a " + + "\"value\" property! One will be generated automatically." ); + } + oldImage = node.properties.images[ keys[ i ] ]; + // If the image property doesn't exist or the image hasn't been loaded or the image src + // has changed, then we need to load the image. Otherwise, just copy the old image data + if ( !oldImage || !( oldImage.value instanceof Image ) || oldImage.src !== newImage.src ) { + newImage.value = new Image(); + newImage.value.src = newImage.src; + } else { + newImage = oldImage; + } + } + return images; + } + +} ); \ No newline at end of file diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js new file mode 100644 index 000000000..af9d776ed --- /dev/null +++ b/support/client/lib/vwf/view/hud.js @@ -0,0 +1,451 @@ +"use strict"; + +define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utility ) { + + return model.load( module, { + + // == Module Definition ==================================================================== + + // -- initialize --------------------------------------------------------------------------- + + initialize: function() { + }, + + // == Model API ============================================================================ + + // -- createdNode ------------------------------------------------------------------------- + + createdNode: function( nodeID, childID, childExtendsID, childImplementsIDs, + childSource, childType, childIndex, childName, callback /* ( ready ) */ ) { + }, + + // -- initializedNode --------------------------------------------------------------------- + + initializedNode: function( nodeID, childID, childExtendsID, childImplementsIDs, + childSource, childType, childIndex, childName ) { + + var node; + + if ( this.state.overlays[ childID ] ) { + + node = this.state.overlays[ childID ]; + node.viewObject = createOverlay( node ); + node.initialized = true; + + } else if ( this.state.elements[ childID ] ) { + + node = this.state.elements[ childID ]; + node.viewObject = createElement( node ); + node.initialized = true; + + } + }, + + // -- deletedNode ------------------------------------------------------------------------- + + deletedNode: function( nodeID ) { + + if ( this.state.overlays[ nodeID ] ) { + var node, keys, i; + node = this.state.overlays[ nodeID ]; + delete this.state.overlays[ nodeID ]; + } else if ( this.state.elements[ nodeID ] ) { + var node, parent; + node = this.state.elements[ nodeID ]; + delete this.state.elements[ nodeID ]; + } + + }, + + // -- createdProperty --------------------------------------------------------------------- + + createdProperty: function( nodeID, propertyName, propertyValue ) { + return this.initializedProperty( nodeID, propertyName, propertyValue ); + }, + + // -- initializedProperty ----------------------------------------------------------------- + + initializedProperty: function( nodeID, propertyName, propertyValue ) { + var value = undefined; + + if ( propertyValue !== undefined ) { + var node = this.state.overlays[ nodeID ] || this.state.elements[ nodeID ] ; + if ( node !== undefined ) { + switch ( propertyName ) { + default: + value = this.satProperty( nodeID, propertyName, propertyValue ); + break; + } + } + } + + return value; + }, + + // -- satProperty ------------------------------------------------------------------------- + + satProperty: function( nodeID, propertyName, propertyValue ) { + var value = undefined; + + if ( this.state.elements[ nodeID ] ) { + var node = this.state.elements[ nodeID ]; + if ( node.drawProperties.hasOwnProperty( propertyName ) ) { + node.viewObject[ propertyName ] = propertyValue; + } + } + } + + } ); + + function createOverlay( node ) { + return new HUD(); + } + + function createElement( node ) { + // id, drawFunc, width, height, visible + var props = node.properties; + var drawProps = node.drawProperties; + var drawFunction = function( context, position ) { eval( node.draw ) }; + var element = new Element( node.id, drawFunction, props.width, props.height, props.visible ); + var i, keys; + keys = Object.keys( drawProps ); + for ( i = 0; i < keys.length; i++ ) { + element[ keys[ i ] ] = drawProps[ keys[ i ] ]; + } + keys = Object.keys( props.images ); + for ( i = 0; i < keys.length; i++ ) { + element[ keys[ i ] ] = props.images[ keys[ i ] ].value; + } + node.overlay.viewObject.add( element, props.alignH, props.alignV, props.offsetH, props.offsetV ); + return element; + } + + HUD = function() { + this.initialize(); + return this; + } + + HUD.prototype = { + constructor: HUD, + elements: undefined, + elementCount: undefined, + sortedElements: undefined, + picks: undefined, + canvas: undefined, + visible: undefined, + defaultHandlers: undefined, + + initialize: function() { + var gameCanvas = document.getElementById( vwf_view.kernel.application() ); + this.elements = {}; + this.elementCount = 0; + this.sortedElements = []; + this.picks = []; + this.canvas = document.createElement( "CANVAS" ); + this.canvas.id = "HUDCanvas"; + gameCanvas.parentElement.appendChild( this.canvas ); + this.visible = true; + this.update(); + this.defaultHandlers = {}; + this.registerEventListeners( gameCanvas ); + }, + + update: function() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + if ( this.visible ) { + this.draw(); + } + }, + + draw: function() { + var context = this.canvas.getContext( '2d' ); + this.sortedElements.length = 0; + + for ( var el in this.elements ) { + var element = this.elements[ el ]; + element.position.x = 0; + element.position.y = 0; + + switch ( element.alignH ) { + case "left": + element.position.x = 0; + break; + case "center": + element.position.x = -element.width / 2; + element.position.x += this.canvas.width / 2; + break; + case "right": + element.position.x = -element.width; + element.position.x += this.canvas.width; + break; + } + + switch ( element.alignV ) { + case "top": + element.position.y = 0; + break; + case "middle": + element.position.y = -element.height / 2; + element.position.y += this.canvas.height / 2; + break; + case "bottom": + element.position.y = -element.height; + element.position.y += this.canvas.height; + break; + } + + element.position.x += element.offsetH; + element.position.y += element.offsetV; + + if ( element.visible ) { + this.sortedElements.push( element ); + } + } + + this.globalPreDraw( context ); + this.sortedElements.sort( this.sortFunction ); + for ( var i = 0; i < this.sortedElements.length; i++ ) { + this.elementPreDraw( context, this.sortedElements[ i ] ); + this.sortedElements[ i ].preDraw( context, this.sortedElements[ i ].position ); + this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); + this.sortedElements[ i ].postDraw( context, this.sortedElements[ i ].position ); + this.elementPostDraw( context, this.sortedElements[ i ] ); + } + this.globalPostDraw( context ); + + }, + + add: function( element, alignH, alignV, offsetH, offsetV ) { + + // Add the element to the HUD's elements list + // Initialize the offset position + this.elements[ element.id ] = element; + var newElement = this.elements[ element.id ]; + + newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; + newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; + + newElement[ "position" ] = { + "x": 0, + "y": 0 + } + + switch ( alignH ) { + case "left": + case "center": + case "right": + newElement[ "alignH" ] = alignH; + break; + default: + newElement[ "alignH" ] = "left"; + break; + } + + switch ( alignV ) { + case "top": + case "middle": + case "bottom": + newElement[ "alignV" ] = alignV; + break; + default: + newElement[ "alignV" ] = "top"; + break; + } + + this.countElements(); + newElement[ "drawOrder" ] = this.elementCount; + }, + + sortFunction: function( a, b ) { + return a.drawOrder - b.drawOrder; + }, + + remove: function( element ) { + var index = this.elements[ element.id ].drawOrder; + delete this.elements[ element.id ]; + + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + + this.countElements(); + }, + + countElements: function() { + var count = 0; + + for ( var el in this.elements ) { + count++; + } + + this.elementCount = count; + }, + + pick: function( event ) { + // Use sortedElements since they are all visible + var elements = this.sortedElements; + this.picks.length = 0; + // Loop backward to order picks from nearest to furthest + for ( var i = elements.length - 1; i >= 0; i-- ) { + var pos = elements[ i ].position; + var width = pos.x + elements[ i ].width; + var height = pos.y + elements[ i ].height; + + if ( event.clientX > pos.x && event.clientX < width && + event.clientY > pos.y && event.clientY < height ) { + + if ( elements[ i ].isMouseOver !== true ) { + elements[ i ].isMouseOver = true; + elements[ i ].onMouseOver( event ); + } + this.picks.push( elements[ i ] ); + + } else if ( elements[ i ].isMouseOver === true ) { + elements[ i ].isMouseOver = false; + elements[ i ].onMouseOut( event ); + } + } + }, + + registerEventListeners: function( gameCanvas ) { + var emptyEvent = function( event ) {}; + this.defaultHandlers.onClick = gameCanvas.onclick; + gameCanvas.onclick = emptyEvent; + gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; + gameCanvas.onmouseup = emptyEvent; + gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; + gameCanvas.onmousedown = emptyEvent; + gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; + gameCanvas.onmousemove = emptyEvent; + gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); + }, + + handleEvent: function( event ) { + this.pick( event ); + var topPick = this.picks[ 0 ]; + var type; + + switch ( event.type ) { + case "click": + type = "onClick"; + break; + case "mouseup": + type = "onMouseUp"; + break; + case "mousedown": + type = "onMouseDown"; + break; + case "mousemove": + type = "onMouseMove"; + break; + default: + console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); + return; + } + + if ( topPick ) { + if ( topPick.enabled ) { + this.elements[ topPick.id ][ type ]( event ); + } + } else if ( this.defaultHandlers[ type ] instanceof Function ) { + this.defaultHandlers[ type ]( event ); + } + }, + + moveToTop: function( id ) { + var index = this.elements[ id ].drawOrder; + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + this.elements[ id ].drawOrder = this.elementCount; + }, + + // Draw instructions that occur prior to the element's preDraw + // and draw functions. Executes on each element in the HUD. + elementPreDraw: function( context, element ) { }, + + // Draw instructions that occur after the element's draw and + // postDraw functions. Executes on each element in the HUD. + elementPostDraw: function( context, element ) { }, + + // Draw instructions that occur before anything is drawn to + // the HUD. + globalPreDraw: function( context ) { }, + + // Draw instructions that occur after everything is drawn to + // the HUD. + globalPostDraw: function( context ) { } + + } + + Element = function( id, drawFunc, width, height, visible ) { + this.initialize( id, drawFunc, width, height ); + return this; + } + + Element.prototype = { + constructor: HUD.Element, + id: undefined, + width: undefined, + height: undefined, + isMouseOver: undefined, + visible: undefined, + enabled: undefined, + + initialize: function( id, drawFunc, width, height, visible ) { + this.id = id; + + if ( drawFunc instanceof Function ) { + this.draw = drawFunc; + } + + this.width = isNaN( width ) ? 0 : width; + this.height = isNaN( height ) ? 0 : height; + + if ( visible === true || visible === undefined ) { + this.visible = true; + } else { + this.visible = false; + } + + this.enabled = true; + }, + + // Draw instructions for the element. Executes after the HUD's + // elementPreDraw funtion and the element's preDraw function. + draw: function( context, position ) { }, + + // Draw instructions that execute just befor the element's + // draw function. + preDraw: function( context, position ) { }, + + // Draw instructions that execute immediately after the element's + // draw function. + postDraw: function( context, position ) { }, + + onClick: function( event ) { }, + + onMouseDown: function( event ) { }, + + onMouseUp: function( event ) { }, + + onMouseMove: function( event ) { }, + + onMouseOver: function( event ) { }, + + onMouseOut: function( event ) { } + + } + +} ); \ No newline at end of file diff --git a/support/proxy/vwf.example.com/HUD/element.vwf.yaml b/support/proxy/vwf.example.com/HUD/element.vwf.yaml new file mode 100644 index 000000000..ddfd0c7a5 --- /dev/null +++ b/support/proxy/vwf.example.com/HUD/element.vwf.yaml @@ -0,0 +1,18 @@ +extends: http://vwf.example.com/node.vwf +properties: + images: + # image: + # src: + # value: + width: + height: + visible: + enabled: + alignH: + alignV: + offsetH: + offsetV: +methods: + draw: +events: +scripts: \ No newline at end of file diff --git a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml new file mode 100644 index 000000000..785ba03d5 --- /dev/null +++ b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml @@ -0,0 +1,7 @@ +extends: http://vwf.example.com/node.vwf +properties: + drawRate: 30 + visible: true +methods: +events: +scripts: \ No newline at end of file From 081385d4606f8c3c81dbb4d11c4a523bceb237bb Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 17 Feb 2015 03:03:05 -0500 Subject: [PATCH 02/25] Finish HUD creation --- support/client/lib/vwf.js | 7 + support/client/lib/vwf/model/hud.js | 158 +++---- support/client/lib/vwf/model/hud/HUD.js | 327 ++++++++++++++ support/client/lib/vwf/view/hud.js | 408 +++--------------- .../vwf.example.com/HUD/element.vwf.yaml | 2 +- .../vwf.example.com/HUD/overlay.vwf.yaml | 3 +- 6 files changed, 437 insertions(+), 468 deletions(-) create mode 100644 support/client/lib/vwf/model/hud/HUD.js diff --git a/support/client/lib/vwf.js b/support/client/lib/vwf.js index 36e3e758a..285221074 100644 --- a/support/client/lib/vwf.js +++ b/support/client/lib/vwf.js @@ -323,6 +323,9 @@ "vwf/model/blockly/msg/js/en": { deps: [ "vwf/model/blockly/blockly_compressed" ] }, + "vwf/model/hud/hud": { + exports: "HUD2" + } } }; @@ -363,6 +366,7 @@ active: false }, { library: "vwf/model/graphtool", active: false }, + { library: "vwf/model/hud", active: false }, { library: "vwf/model/sound", active: false }, { library: "vwf/model/object", active: true }, { library: "vwf/model/stage/log", active: true }, @@ -400,6 +404,7 @@ active: false }, { library: "vwf/view/blockly", active: false }, + { library: "vwf/view/hud", active: false }, { library: "vwf/view/sound", active: false }, { library: "vwf/view/touch", active: false }, { library: "vwf/view/cesium", active: false }, @@ -439,6 +444,7 @@ { library: "vwf/model/cesium", active: false }, { library: "vwf/model/blockly", active: false }, { library: "vwf/model/graphtool", active: false }, + { library: "vwf/model/hud", active: false }, { library: "vwf/model/sound", active: false }, { library: "vwf/model/kineticjs", active: false }, { library: "vwf/model/mil-sym", active: false }, @@ -456,6 +462,7 @@ { library: "vwf/view/google-earth", active: false }, { library: "vwf/view/cesium", active: false }, { library: "vwf/view/blockly", active: false }, + { library: "vwf/view/hud", active: false }, { library: "vwf/view/sound", active: false }, { library: "vwf/view/touch", active: false }, { library: "vwf/view/kineticjs", active: false }, diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index f5d4a12f7..d26a86c9c 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -6,10 +6,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return model.load( module, { - // == Module Definition ==================================================================== - - // -- initialize --------------------------------------------------------------------------- - initialize: function() { var lastKernel; this.state.overlays = {}; @@ -22,29 +18,40 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili logger = this.logger; }, - // == Model API ============================================================================ - - // -- creatingNode ------------------------------------------------------------------------- - creatingNode: function( nodeID, childID, childExtendsID, childImplementsIDs, childSource, childType, childIndex, childName, callback /* ( ready ) */ ) { var node = undefined; - var protos = getPrototypes.call( this, kernel, childExtendsID ); + var protos = getPrototypes.call( this, this.state.kernel, childExtendsID ); if ( protos && isOverlay( protos ) ) { node = this.state.overlays[ childID ] = { + "id": childID, + "name": childName, "elements": {}, - "properties": {}, + "properties": { + "visible": undefined + }, "initialized": false }; } else if ( protos && isElement( protos ) ) { - node = this.state.elements[ childID ] = { - "overlay": this.state.overlays[ node.parentID ], - "properties": {}, + "id": childID, + "name": childName, + "overlay": this.state.overlays[ nodeID ], + "properties": { + "images": undefined, + "width": undefined, + "height": undefined, + "visible": undefined, + "enabled": undefined, + "alignH": undefined, + "alignV": undefined, + "offsetH": undefined, + "offsetV": undefined + }, "drawProperties": {}, "initialized": false }; @@ -54,49 +61,10 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili } }, - // -- initializingNode --------------------------------------------------------------------- - - initializingNode: function( nodeID, childID, childExtendsID, childImplementsIDs, - childSource, childType, childIndex, childName ) { - - var node; - - if ( this.state.overlays[ childID ] ) { - - node = this.state.overlays[ childID ]; - node.properties = { - "drawRate": undefined, - "visible": undefined - }; - - } else if ( this.state.elements[ childID ] ) { - - node = this.state.elements[ childID ]; - node.properties = { - "images": undefined, - "width": undefined, - "height": undefined, - "visible": undefined, - "enabled": undefined, - "alignH": undefined, - "alignV": undefined, - "offsetH": undefined, - "offsetV": undefined - }; - node.drawProperties = {}; - - } - - }, - - // -- creatingProperty --------------------------------------------------------------------- - creatingProperty: function( nodeID, propertyName, propertyValue ) { return this.initializingProperty( nodeID, propertyName, propertyValue ); }, - // -- initializingProperty ----------------------------------------------------------------- - initializingProperty: function( nodeID, propertyName, propertyValue ) { var value = undefined; @@ -114,34 +82,22 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return value; }, - // TODO: deletingProperty - - // -- settingProperty ---------------------------------------------------------------------- - settingProperty: function( nodeID, propertyName, propertyValue ) { var node, value; - if ( this.state.overlays[ childID ] ) { + if ( this.state.overlays[ nodeID ] ) { - node = this.state.overlays[ childID ]; + node = this.state.overlays[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { node.properties[ propertyName ] = propertyValue; value = propertyValue; } - } else if ( this.state.elements[ childID ] ) { + } else if ( this.state.elements[ nodeID ] ) { - node = this.state.elements[ childID ]; + node = this.state.elements[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { - if ( node.initialized ) { - switch ( propertyName ) { - case "images": - node.properties.images = loadImages( node, propertyValue ); - break; - } - } else { - node.properties[ propertyName ] = propertyValue; - } + node.properties[ propertyName ] = propertyValue; } else { node.drawProperties[ propertyName ] = propertyValue; } @@ -152,13 +108,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return value; }, - // -- gettingProperty ---------------------------------------------------------------------- - - gettingProperty: function( nodeID, propertyName, propertyValue ) { - }, - - // -- creatingMethod ------------------------------------------------------------------------ - creatingMethod: function( nodeID, methodName, methodParameters, methodBody ) { if ( this.state.elements[ nodeID ] ) { var node = this.state.elements[ nodeID ]; @@ -166,9 +115,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili node.draw = methodBody; } } - } - - // -- callingMethod ------------------------------------------------------------------------ + }, callingMethod: function( nodeID, methodName, methodParameters, methodValue ) { if ( this.state.elements[ nodeID ] ) { @@ -181,37 +128,38 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili } }, - // -- firingEvent -------------------------------------------------------------------------- - - firingEvent: function( nodeID, eventName, eventParameters ) { - }, - } ); - function loadImages( node, images ) { - var keys = Object.keys( images ); - var newImage, oldImage; - for ( var i = 0; i < keys.length; i++ ) { - newImage = images[ keys[ i ] ]; - if ( !newImage.hasOwnProperty( "src" ) ) { - logger.errorx( "loadImages", "Image \"" + keys[ i ] + "\" is malformed! It " + - "does not contain a \"src\" property! Skipping image load!" ); - continue; - } else if ( !newImage.hasOwnProperty( "value" ) ) { - logger.warnx( "loadImages", "Image \"" + keys[ i ] + "\" does not contain a " + - "\"value\" property! One will be generated automatically." ); + function getPrototypes( kernel, extendsID ) { + var prototypes = []; + var id = extendsID; + while ( id !== undefined ) { + prototypes.push( id ); + id = kernel.prototype( id ); + } + return prototypes; + } + + function isOverlay( prototypes ) { + var foundOverlay = false; + if ( prototypes ) { + for ( var i = 0; i < prototypes.length && !foundOverlay; i++ ) { + foundOverlay = ( prototypes[i] == "http-vwf-example-com-hud-overlay-vwf" ); } - oldImage = node.properties.images[ keys[ i ] ]; - // If the image property doesn't exist or the image hasn't been loaded or the image src - // has changed, then we need to load the image. Otherwise, just copy the old image data - if ( !oldImage || !( oldImage.value instanceof Image ) || oldImage.src !== newImage.src ) { - newImage.value = new Image(); - newImage.value.src = newImage.src; - } else { - newImage = oldImage; + } + + return foundOverlay; + } + + function isElement( prototypes ) { + var foundElement = false; + if ( prototypes ) { + for ( var i = 0; i < prototypes.length && !foundElement; i++ ) { + foundElement = ( prototypes[i] == "http-vwf-example-com-hud-element-vwf" ); } } - return images; + + return foundElement; } } ); \ No newline at end of file diff --git a/support/client/lib/vwf/model/hud/HUD.js b/support/client/lib/vwf/model/hud/HUD.js new file mode 100644 index 000000000..74064310d --- /dev/null +++ b/support/client/lib/vwf/model/hud/HUD.js @@ -0,0 +1,327 @@ +HUD = function() { + this.initialize(); + return this; +} + +HUD.prototype = { + constructor: HUD, + elements: undefined, + elementCount: undefined, + sortedElements: undefined, + picks: undefined, + canvas: undefined, + visible: undefined, + defaultHandlers: undefined, + + initialize: function() { + var gameCanvas = document.getElementById( vwf_view.kernel.application() ); + this.elements = {}; + this.elementCount = 0; + this.sortedElements = []; + this.picks = []; + this.canvas = document.createElement( "CANVAS" ); + this.canvas.id = "HUDCanvas2"; + gameCanvas.parentElement.appendChild( this.canvas ); + this.visible = true; + this.update(); + this.defaultHandlers = {}; + this.registerEventListeners( gameCanvas ); + }, + + update: function() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + if ( this.visible ) { + this.draw(); + } + }, + + draw: function() { + var context = this.canvas.getContext( '2d' ); + this.sortedElements.length = 0; + + for ( var el in this.elements ) { + var element = this.elements[ el ]; + element.position.x = 0; + element.position.y = 0; + + switch ( element.alignH ) { + case "left": + element.position.x = 0; + break; + case "center": + element.position.x = -element.width / 2; + element.position.x += this.canvas.width / 2; + break; + case "right": + element.position.x = -element.width; + element.position.x += this.canvas.width; + break; + } + + switch ( element.alignV ) { + case "top": + element.position.y = 0; + break; + case "middle": + element.position.y = -element.height / 2; + element.position.y += this.canvas.height / 2; + break; + case "bottom": + element.position.y = -element.height; + element.position.y += this.canvas.height; + break; + } + + element.position.x += element.offsetH; + element.position.y += element.offsetV; + + if ( element.visible ) { + this.sortedElements.push( element ); + } + } + + this.globalPreDraw( context ); + this.sortedElements.sort( this.sortFunction ); + for ( var i = 0; i < this.sortedElements.length; i++ ) { + this.elementPreDraw( context, this.sortedElements[ i ] ); + this.sortedElements[ i ].preDraw( context, this.sortedElements[ i ].position ); + this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); + this.sortedElements[ i ].postDraw( context, this.sortedElements[ i ].position ); + this.elementPostDraw( context, this.sortedElements[ i ] ); + } + this.globalPostDraw( context ); + + }, + + add: function( element, alignH, alignV, offsetH, offsetV ) { + + // Add the element to the HUD's elements list + // Initialize the offset position + this.elements[ element.id ] = element; + var newElement = this.elements[ element.id ]; + + newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; + newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; + + newElement[ "position" ] = { + "x": 0, + "y": 0 + } + + switch ( alignH ) { + case "left": + case "center": + case "right": + newElement[ "alignH" ] = alignH; + break; + default: + newElement[ "alignH" ] = "left"; + break; + } + + switch ( alignV ) { + case "top": + case "middle": + case "bottom": + newElement[ "alignV" ] = alignV; + break; + default: + newElement[ "alignV" ] = "top"; + break; + } + + this.countElements(); + newElement[ "drawOrder" ] = this.elementCount; + }, + + sortFunction: function( a, b ) { + return a.drawOrder - b.drawOrder; + }, + + remove: function( element ) { + var index = this.elements[ element.id ].drawOrder; + delete this.elements[ element.id ]; + + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + + this.countElements(); + }, + + countElements: function() { + var count = 0; + + for ( var el in this.elements ) { + count++; + } + + this.elementCount = count; + }, + + pick: function( event ) { + // Use sortedElements since they are all visible + var elements = this.sortedElements; + this.picks.length = 0; + // Loop backward to order picks from nearest to furthest + for ( var i = elements.length - 1; i >= 0; i-- ) { + var pos = elements[ i ].position; + var width = pos.x + elements[ i ].width; + var height = pos.y + elements[ i ].height; + + if ( event.clientX > pos.x && event.clientX < width && + event.clientY > pos.y && event.clientY < height ) { + + if ( elements[ i ].isMouseOver !== true ) { + elements[ i ].isMouseOver = true; + elements[ i ].onMouseOver( event ); + } + this.picks.push( elements[ i ] ); + + } else if ( elements[ i ].isMouseOver === true ) { + elements[ i ].isMouseOver = false; + elements[ i ].onMouseOut( event ); + } + } + }, + + registerEventListeners: function( gameCanvas ) { + var emptyEvent = function( event ) {}; + this.defaultHandlers.onClick = gameCanvas.onclick; + gameCanvas.onclick = emptyEvent; + gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; + gameCanvas.onmouseup = emptyEvent; + gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; + gameCanvas.onmousedown = emptyEvent; + gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; + gameCanvas.onmousemove = emptyEvent; + gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); + }, + + handleEvent: function( event ) { + this.pick( event ); + var topPick = this.picks[ 0 ]; + var type; + + switch ( event.type ) { + case "click": + type = "onClick"; + break; + case "mouseup": + type = "onMouseUp"; + break; + case "mousedown": + type = "onMouseDown"; + break; + case "mousemove": + type = "onMouseMove"; + break; + default: + console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); + return; + } + + if ( topPick ) { + if ( topPick.enabled ) { + this.elements[ topPick.id ][ type ]( event ); + } + } else if ( this.defaultHandlers[ type ] instanceof Function ) { + this.defaultHandlers[ type ]( event ); + } + }, + + moveToTop: function( id ) { + var index = this.elements[ id ].drawOrder; + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + this.elements[ id ].drawOrder = this.elementCount; + }, + + // Draw instructions that occur prior to the element's preDraw + // and draw functions. Executes on each element in the HUD. + elementPreDraw: function( context, element ) { }, + + // Draw instructions that occur after the element's draw and + // postDraw functions. Executes on each element in the HUD. + elementPostDraw: function( context, element ) { }, + + // Draw instructions that occur before anything is drawn to + // the HUD. + globalPreDraw: function( context ) { }, + + // Draw instructions that occur after everything is drawn to + // the HUD. + globalPostDraw: function( context ) { } + +} + +HUD.Element = function( id, drawFunc, width, height, visible ) { + this.initialize( id, drawFunc, width, height ); + return this; +} + +HUD.Element.prototype = { + constructor: HUD.Element, + id: undefined, + width: undefined, + height: undefined, + isMouseOver: undefined, + visible: undefined, + enabled: undefined, + + initialize: function( id, drawFunc, width, height, visible ) { + this.id = id; + + if ( drawFunc instanceof Function ) { + this.draw = drawFunc; + } + + this.width = isNaN( width ) ? 0 : width; + this.height = isNaN( height ) ? 0 : height; + + if ( visible === true || visible === undefined ) { + this.visible = true; + } else { + this.visible = false; + } + + this.enabled = true; + }, + + // Draw instructions for the element. Executes after the HUD's + // elementPreDraw funtion and the element's preDraw function. + draw: function( context, position ) { }, + + // Draw instructions that execute just befor the element's + // draw function. + preDraw: function( context, position ) { }, + + // Draw instructions that execute immediately after the element's + // draw function. + postDraw: function( context, position ) { }, + + onClick: function( event ) { }, + + onMouseDown: function( event ) { }, + + onMouseUp: function( event ) { }, + + onMouseMove: function( event ) { }, + + onMouseOver: function( event ) { }, + + onMouseOut: function( event ) { } + +} \ No newline at end of file diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index af9d776ed..3a8033338 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -1,53 +1,37 @@ "use strict"; -define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utility ) { +var debugHUD; - return model.load( module, { - - // == Module Definition ==================================================================== +define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( module, model, utility, HUD ) { - // -- initialize --------------------------------------------------------------------------- + return model.load( module, { initialize: function() { + this.runningOverlays = {}; }, - // == Model API ============================================================================ - - // -- createdNode ------------------------------------------------------------------------- - - createdNode: function( nodeID, childID, childExtendsID, childImplementsIDs, - childSource, childType, childIndex, childName, callback /* ( ready ) */ ) { - }, - - // -- initializedNode --------------------------------------------------------------------- - initializedNode: function( nodeID, childID, childExtendsID, childImplementsIDs, childSource, childType, childIndex, childName ) { var node; - if ( this.state.overlays[ childID ] ) { - node = this.state.overlays[ childID ]; node.viewObject = createOverlay( node ); + node.rafID = requestAnimationFrame( animateHUD.bind( node ) ); node.initialized = true; - } else if ( this.state.elements[ childID ] ) { - node = this.state.elements[ childID ]; node.viewObject = createElement( node ); node.initialized = true; - } }, - // -- deletedNode ------------------------------------------------------------------------- - deletedNode: function( nodeID ) { if ( this.state.overlays[ nodeID ] ) { var node, keys, i; node = this.state.overlays[ nodeID ]; + cancelAnimationFrame( node.rafID ); delete this.state.overlays[ nodeID ]; } else if ( this.state.elements[ nodeID ] ) { var node, parent; @@ -57,14 +41,10 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili }, - // -- createdProperty --------------------------------------------------------------------- - createdProperty: function( nodeID, propertyName, propertyValue ) { return this.initializedProperty( nodeID, propertyName, propertyValue ); }, - // -- initializedProperty ----------------------------------------------------------------- - initializedProperty: function( nodeID, propertyName, propertyValue ) { var value = undefined; @@ -82,14 +62,13 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return value; }, - // -- satProperty ------------------------------------------------------------------------- - satProperty: function( nodeID, propertyName, propertyValue ) { - var value = undefined; - + var value, node; if ( this.state.elements[ nodeID ] ) { - var node = this.state.elements[ nodeID ]; - if ( node.drawProperties.hasOwnProperty( propertyName ) ) { + node = this.state.elements[ nodeID ]; + if ( propertyName === "images" ) { + node.properties.images = loadImages( node, propertyValue ); + } else if ( node.drawProperties.hasOwnProperty( propertyName ) ) { node.viewObject[ propertyName ] = propertyValue; } } @@ -97,16 +76,28 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili } ); + function animateHUD() { + this.viewObject.update(); + requestAnimationFrame( animateHUD.bind( this ) ); + } + function createOverlay( node ) { - return new HUD(); + var overlay = new HUD(); + var keys = Object.keys( node.elements ); + var element, props; + for ( var i = 0; i < keys.length; i++ ) { + element = node.elements[ keys[ i ] ]; + props = element.properties; + overlay.add( element.viewObject, props.alignH, props.alignV, props.offsetH, props.offsetV ); + } + return overlay; } function createElement( node ) { - // id, drawFunc, width, height, visible var props = node.properties; var drawProps = node.drawProperties; var drawFunction = function( context, position ) { eval( node.draw ) }; - var element = new Element( node.id, drawFunction, props.width, props.height, props.visible ); + var element = new HUD.Element( node.name, drawFunction, props.width, props.height, props.visible ); var i, keys; keys = Object.keys( drawProps ); for ( i = 0; i < keys.length; i++ ) { @@ -116,336 +107,33 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili for ( i = 0; i < keys.length; i++ ) { element[ keys[ i ] ] = props.images[ keys[ i ] ].value; } - node.overlay.viewObject.add( element, props.alignH, props.alignV, props.offsetH, props.offsetV ); return element; } - HUD = function() { - this.initialize(); - return this; - } - - HUD.prototype = { - constructor: HUD, - elements: undefined, - elementCount: undefined, - sortedElements: undefined, - picks: undefined, - canvas: undefined, - visible: undefined, - defaultHandlers: undefined, - - initialize: function() { - var gameCanvas = document.getElementById( vwf_view.kernel.application() ); - this.elements = {}; - this.elementCount = 0; - this.sortedElements = []; - this.picks = []; - this.canvas = document.createElement( "CANVAS" ); - this.canvas.id = "HUDCanvas"; - gameCanvas.parentElement.appendChild( this.canvas ); - this.visible = true; - this.update(); - this.defaultHandlers = {}; - this.registerEventListeners( gameCanvas ); - }, - - update: function() { - this.canvas.width = window.innerWidth; - this.canvas.height = window.innerHeight; - if ( this.visible ) { - this.draw(); - } - }, - - draw: function() { - var context = this.canvas.getContext( '2d' ); - this.sortedElements.length = 0; - - for ( var el in this.elements ) { - var element = this.elements[ el ]; - element.position.x = 0; - element.position.y = 0; - - switch ( element.alignH ) { - case "left": - element.position.x = 0; - break; - case "center": - element.position.x = -element.width / 2; - element.position.x += this.canvas.width / 2; - break; - case "right": - element.position.x = -element.width; - element.position.x += this.canvas.width; - break; - } - - switch ( element.alignV ) { - case "top": - element.position.y = 0; - break; - case "middle": - element.position.y = -element.height / 2; - element.position.y += this.canvas.height / 2; - break; - case "bottom": - element.position.y = -element.height; - element.position.y += this.canvas.height; - break; - } - - element.position.x += element.offsetH; - element.position.y += element.offsetV; - - if ( element.visible ) { - this.sortedElements.push( element ); - } - } - - this.globalPreDraw( context ); - this.sortedElements.sort( this.sortFunction ); - for ( var i = 0; i < this.sortedElements.length; i++ ) { - this.elementPreDraw( context, this.sortedElements[ i ] ); - this.sortedElements[ i ].preDraw( context, this.sortedElements[ i ].position ); - this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); - this.sortedElements[ i ].postDraw( context, this.sortedElements[ i ].position ); - this.elementPostDraw( context, this.sortedElements[ i ] ); - } - this.globalPostDraw( context ); - - }, - - add: function( element, alignH, alignV, offsetH, offsetV ) { - - // Add the element to the HUD's elements list - // Initialize the offset position - this.elements[ element.id ] = element; - var newElement = this.elements[ element.id ]; - - newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; - newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; - - newElement[ "position" ] = { - "x": 0, - "y": 0 - } - - switch ( alignH ) { - case "left": - case "center": - case "right": - newElement[ "alignH" ] = alignH; - break; - default: - newElement[ "alignH" ] = "left"; - break; - } - - switch ( alignV ) { - case "top": - case "middle": - case "bottom": - newElement[ "alignV" ] = alignV; - break; - default: - newElement[ "alignV" ] = "top"; - break; - } - - this.countElements(); - newElement[ "drawOrder" ] = this.elementCount; - }, - - sortFunction: function( a, b ) { - return a.drawOrder - b.drawOrder; - }, - - remove: function( element ) { - var index = this.elements[ element.id ].drawOrder; - delete this.elements[ element.id ]; - - for ( var el in this.elements ) { - if ( this.elements[ el ].drawOrder > index ) { - this.elements[ el ].drawOrder--; - } - } - - this.countElements(); - }, - - countElements: function() { - var count = 0; - - for ( var el in this.elements ) { - count++; - } - - this.elementCount = count; - }, - - pick: function( event ) { - // Use sortedElements since they are all visible - var elements = this.sortedElements; - this.picks.length = 0; - // Loop backward to order picks from nearest to furthest - for ( var i = elements.length - 1; i >= 0; i-- ) { - var pos = elements[ i ].position; - var width = pos.x + elements[ i ].width; - var height = pos.y + elements[ i ].height; - - if ( event.clientX > pos.x && event.clientX < width && - event.clientY > pos.y && event.clientY < height ) { - - if ( elements[ i ].isMouseOver !== true ) { - elements[ i ].isMouseOver = true; - elements[ i ].onMouseOver( event ); - } - this.picks.push( elements[ i ] ); - - } else if ( elements[ i ].isMouseOver === true ) { - elements[ i ].isMouseOver = false; - elements[ i ].onMouseOut( event ); - } - } - }, - - registerEventListeners: function( gameCanvas ) { - var emptyEvent = function( event ) {}; - this.defaultHandlers.onClick = gameCanvas.onclick; - gameCanvas.onclick = emptyEvent; - gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; - gameCanvas.onmouseup = emptyEvent; - gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; - gameCanvas.onmousedown = emptyEvent; - gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; - gameCanvas.onmousemove = emptyEvent; - gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); - }, - - handleEvent: function( event ) { - this.pick( event ); - var topPick = this.picks[ 0 ]; - var type; - - switch ( event.type ) { - case "click": - type = "onClick"; - break; - case "mouseup": - type = "onMouseUp"; - break; - case "mousedown": - type = "onMouseDown"; - break; - case "mousemove": - type = "onMouseMove"; - break; - default: - console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); - return; - } - - if ( topPick ) { - if ( topPick.enabled ) { - this.elements[ topPick.id ][ type ]( event ); - } - } else if ( this.defaultHandlers[ type ] instanceof Function ) { - this.defaultHandlers[ type ]( event ); - } - }, - - moveToTop: function( id ) { - var index = this.elements[ id ].drawOrder; - for ( var el in this.elements ) { - if ( this.elements[ el ].drawOrder > index ) { - this.elements[ el ].drawOrder--; - } - } - this.elements[ id ].drawOrder = this.elementCount; - }, - - // Draw instructions that occur prior to the element's preDraw - // and draw functions. Executes on each element in the HUD. - elementPreDraw: function( context, element ) { }, - - // Draw instructions that occur after the element's draw and - // postDraw functions. Executes on each element in the HUD. - elementPostDraw: function( context, element ) { }, - - // Draw instructions that occur before anything is drawn to - // the HUD. - globalPreDraw: function( context ) { }, - - // Draw instructions that occur after everything is drawn to - // the HUD. - globalPostDraw: function( context ) { } - - } - - Element = function( id, drawFunc, width, height, visible ) { - this.initialize( id, drawFunc, width, height ); - return this; - } - - Element.prototype = { - constructor: HUD.Element, - id: undefined, - width: undefined, - height: undefined, - isMouseOver: undefined, - visible: undefined, - enabled: undefined, - - initialize: function( id, drawFunc, width, height, visible ) { - this.id = id; - - if ( drawFunc instanceof Function ) { - this.draw = drawFunc; - } - - this.width = isNaN( width ) ? 0 : width; - this.height = isNaN( height ) ? 0 : height; - - if ( visible === true || visible === undefined ) { - this.visible = true; + function loadImages( node, images ) { + var keys = Object.keys( images ); + var newImage, oldImage; + for ( var i = 0; i < keys.length; i++ ) { + newImage = images[ keys[ i ] ]; + if ( !newImage.hasOwnProperty( "src" ) ) { + logger.errorx( "loadImages", "Image \"" + keys[ i ] + "\" is malformed! It " + + "does not contain a \"src\" property! Skipping image load!" ); + continue; + } else if ( !newImage.hasOwnProperty( "value" ) ) { + logger.warnx( "loadImages", "Image \"" + keys[ i ] + "\" does not contain a " + + "\"value\" property! One will be generated automatically." ); + } + oldImage = node.properties.images[ keys[ i ] ]; + // If the image property doesn't exist or the image hasn't been loaded or the image src + // has changed, then we need to load the image. Otherwise, just copy the old image data + if ( !oldImage || !( oldImage.value instanceof Image ) || oldImage.src !== newImage.src ) { + newImage.value = new Image(); + newImage.value.src = newImage.src; } else { - this.visible = false; + newImage = oldImage; } - - this.enabled = true; - }, - - // Draw instructions for the element. Executes after the HUD's - // elementPreDraw funtion and the element's preDraw function. - draw: function( context, position ) { }, - - // Draw instructions that execute just befor the element's - // draw function. - preDraw: function( context, position ) { }, - - // Draw instructions that execute immediately after the element's - // draw function. - postDraw: function( context, position ) { }, - - onClick: function( event ) { }, - - onMouseDown: function( event ) { }, - - onMouseUp: function( event ) { }, - - onMouseMove: function( event ) { }, - - onMouseOver: function( event ) { }, - - onMouseOut: function( event ) { } - + } + return images; } } ); \ No newline at end of file diff --git a/support/proxy/vwf.example.com/HUD/element.vwf.yaml b/support/proxy/vwf.example.com/HUD/element.vwf.yaml index ddfd0c7a5..9b4441dad 100644 --- a/support/proxy/vwf.example.com/HUD/element.vwf.yaml +++ b/support/proxy/vwf.example.com/HUD/element.vwf.yaml @@ -15,4 +15,4 @@ properties: methods: draw: events: -scripts: \ No newline at end of file +scripts: diff --git a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml index 785ba03d5..84e0dbd32 100644 --- a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml +++ b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml @@ -1,7 +1,6 @@ extends: http://vwf.example.com/node.vwf properties: - drawRate: 30 visible: true methods: events: -scripts: \ No newline at end of file +scripts: From 4609fb85452dd5b99075874c552aff5b6499939d Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 17 Feb 2015 14:57:15 -0500 Subject: [PATCH 03/25] Delete HUD.js for renaming --- support/client/lib/vwf/model/hud/HUD.js | 327 ------------------------ 1 file changed, 327 deletions(-) delete mode 100644 support/client/lib/vwf/model/hud/HUD.js diff --git a/support/client/lib/vwf/model/hud/HUD.js b/support/client/lib/vwf/model/hud/HUD.js deleted file mode 100644 index 74064310d..000000000 --- a/support/client/lib/vwf/model/hud/HUD.js +++ /dev/null @@ -1,327 +0,0 @@ -HUD = function() { - this.initialize(); - return this; -} - -HUD.prototype = { - constructor: HUD, - elements: undefined, - elementCount: undefined, - sortedElements: undefined, - picks: undefined, - canvas: undefined, - visible: undefined, - defaultHandlers: undefined, - - initialize: function() { - var gameCanvas = document.getElementById( vwf_view.kernel.application() ); - this.elements = {}; - this.elementCount = 0; - this.sortedElements = []; - this.picks = []; - this.canvas = document.createElement( "CANVAS" ); - this.canvas.id = "HUDCanvas2"; - gameCanvas.parentElement.appendChild( this.canvas ); - this.visible = true; - this.update(); - this.defaultHandlers = {}; - this.registerEventListeners( gameCanvas ); - }, - - update: function() { - this.canvas.width = window.innerWidth; - this.canvas.height = window.innerHeight; - if ( this.visible ) { - this.draw(); - } - }, - - draw: function() { - var context = this.canvas.getContext( '2d' ); - this.sortedElements.length = 0; - - for ( var el in this.elements ) { - var element = this.elements[ el ]; - element.position.x = 0; - element.position.y = 0; - - switch ( element.alignH ) { - case "left": - element.position.x = 0; - break; - case "center": - element.position.x = -element.width / 2; - element.position.x += this.canvas.width / 2; - break; - case "right": - element.position.x = -element.width; - element.position.x += this.canvas.width; - break; - } - - switch ( element.alignV ) { - case "top": - element.position.y = 0; - break; - case "middle": - element.position.y = -element.height / 2; - element.position.y += this.canvas.height / 2; - break; - case "bottom": - element.position.y = -element.height; - element.position.y += this.canvas.height; - break; - } - - element.position.x += element.offsetH; - element.position.y += element.offsetV; - - if ( element.visible ) { - this.sortedElements.push( element ); - } - } - - this.globalPreDraw( context ); - this.sortedElements.sort( this.sortFunction ); - for ( var i = 0; i < this.sortedElements.length; i++ ) { - this.elementPreDraw( context, this.sortedElements[ i ] ); - this.sortedElements[ i ].preDraw( context, this.sortedElements[ i ].position ); - this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); - this.sortedElements[ i ].postDraw( context, this.sortedElements[ i ].position ); - this.elementPostDraw( context, this.sortedElements[ i ] ); - } - this.globalPostDraw( context ); - - }, - - add: function( element, alignH, alignV, offsetH, offsetV ) { - - // Add the element to the HUD's elements list - // Initialize the offset position - this.elements[ element.id ] = element; - var newElement = this.elements[ element.id ]; - - newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; - newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; - - newElement[ "position" ] = { - "x": 0, - "y": 0 - } - - switch ( alignH ) { - case "left": - case "center": - case "right": - newElement[ "alignH" ] = alignH; - break; - default: - newElement[ "alignH" ] = "left"; - break; - } - - switch ( alignV ) { - case "top": - case "middle": - case "bottom": - newElement[ "alignV" ] = alignV; - break; - default: - newElement[ "alignV" ] = "top"; - break; - } - - this.countElements(); - newElement[ "drawOrder" ] = this.elementCount; - }, - - sortFunction: function( a, b ) { - return a.drawOrder - b.drawOrder; - }, - - remove: function( element ) { - var index = this.elements[ element.id ].drawOrder; - delete this.elements[ element.id ]; - - for ( var el in this.elements ) { - if ( this.elements[ el ].drawOrder > index ) { - this.elements[ el ].drawOrder--; - } - } - - this.countElements(); - }, - - countElements: function() { - var count = 0; - - for ( var el in this.elements ) { - count++; - } - - this.elementCount = count; - }, - - pick: function( event ) { - // Use sortedElements since they are all visible - var elements = this.sortedElements; - this.picks.length = 0; - // Loop backward to order picks from nearest to furthest - for ( var i = elements.length - 1; i >= 0; i-- ) { - var pos = elements[ i ].position; - var width = pos.x + elements[ i ].width; - var height = pos.y + elements[ i ].height; - - if ( event.clientX > pos.x && event.clientX < width && - event.clientY > pos.y && event.clientY < height ) { - - if ( elements[ i ].isMouseOver !== true ) { - elements[ i ].isMouseOver = true; - elements[ i ].onMouseOver( event ); - } - this.picks.push( elements[ i ] ); - - } else if ( elements[ i ].isMouseOver === true ) { - elements[ i ].isMouseOver = false; - elements[ i ].onMouseOut( event ); - } - } - }, - - registerEventListeners: function( gameCanvas ) { - var emptyEvent = function( event ) {}; - this.defaultHandlers.onClick = gameCanvas.onclick; - gameCanvas.onclick = emptyEvent; - gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; - gameCanvas.onmouseup = emptyEvent; - gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; - gameCanvas.onmousedown = emptyEvent; - gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; - gameCanvas.onmousemove = emptyEvent; - gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); - }, - - handleEvent: function( event ) { - this.pick( event ); - var topPick = this.picks[ 0 ]; - var type; - - switch ( event.type ) { - case "click": - type = "onClick"; - break; - case "mouseup": - type = "onMouseUp"; - break; - case "mousedown": - type = "onMouseDown"; - break; - case "mousemove": - type = "onMouseMove"; - break; - default: - console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); - return; - } - - if ( topPick ) { - if ( topPick.enabled ) { - this.elements[ topPick.id ][ type ]( event ); - } - } else if ( this.defaultHandlers[ type ] instanceof Function ) { - this.defaultHandlers[ type ]( event ); - } - }, - - moveToTop: function( id ) { - var index = this.elements[ id ].drawOrder; - for ( var el in this.elements ) { - if ( this.elements[ el ].drawOrder > index ) { - this.elements[ el ].drawOrder--; - } - } - this.elements[ id ].drawOrder = this.elementCount; - }, - - // Draw instructions that occur prior to the element's preDraw - // and draw functions. Executes on each element in the HUD. - elementPreDraw: function( context, element ) { }, - - // Draw instructions that occur after the element's draw and - // postDraw functions. Executes on each element in the HUD. - elementPostDraw: function( context, element ) { }, - - // Draw instructions that occur before anything is drawn to - // the HUD. - globalPreDraw: function( context ) { }, - - // Draw instructions that occur after everything is drawn to - // the HUD. - globalPostDraw: function( context ) { } - -} - -HUD.Element = function( id, drawFunc, width, height, visible ) { - this.initialize( id, drawFunc, width, height ); - return this; -} - -HUD.Element.prototype = { - constructor: HUD.Element, - id: undefined, - width: undefined, - height: undefined, - isMouseOver: undefined, - visible: undefined, - enabled: undefined, - - initialize: function( id, drawFunc, width, height, visible ) { - this.id = id; - - if ( drawFunc instanceof Function ) { - this.draw = drawFunc; - } - - this.width = isNaN( width ) ? 0 : width; - this.height = isNaN( height ) ? 0 : height; - - if ( visible === true || visible === undefined ) { - this.visible = true; - } else { - this.visible = false; - } - - this.enabled = true; - }, - - // Draw instructions for the element. Executes after the HUD's - // elementPreDraw funtion and the element's preDraw function. - draw: function( context, position ) { }, - - // Draw instructions that execute just befor the element's - // draw function. - preDraw: function( context, position ) { }, - - // Draw instructions that execute immediately after the element's - // draw function. - postDraw: function( context, position ) { }, - - onClick: function( event ) { }, - - onMouseDown: function( event ) { }, - - onMouseUp: function( event ) { }, - - onMouseMove: function( event ) { }, - - onMouseOver: function( event ) { }, - - onMouseOut: function( event ) { } - -} \ No newline at end of file From 8e44a0b207bfe487ec6060eb7eabfe89f99a4832 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 17 Feb 2015 14:57:31 -0500 Subject: [PATCH 04/25] Re-add hud.js for renaming --- support/client/lib/vwf/model/hud/hud.js | 327 ++++++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 support/client/lib/vwf/model/hud/hud.js diff --git a/support/client/lib/vwf/model/hud/hud.js b/support/client/lib/vwf/model/hud/hud.js new file mode 100644 index 000000000..92ab30681 --- /dev/null +++ b/support/client/lib/vwf/model/hud/hud.js @@ -0,0 +1,327 @@ +HUD = function() { + this.initialize(); + return this; +} + +HUD.prototype = { + constructor: HUD, + elements: undefined, + elementCount: undefined, + sortedElements: undefined, + picks: undefined, + canvas: undefined, + visible: undefined, + defaultHandlers: undefined, + + initialize: function() { + var gameCanvas = document.getElementById( vwf_view.kernel.application() ); + this.elements = {}; + this.elementCount = 0; + this.sortedElements = []; + this.picks = []; + this.canvas = document.createElement( "CANVAS" ); + this.canvas.id = "HUDCanvas"; + gameCanvas.parentElement.appendChild( this.canvas ); + this.visible = true; + this.update(); + this.defaultHandlers = {}; + this.registerEventListeners( gameCanvas ); + }, + + update: function() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + if ( this.visible ) { + this.draw(); + } + }, + + draw: function() { + var context = this.canvas.getContext( '2d' ); + this.sortedElements.length = 0; + + for ( var el in this.elements ) { + var element = this.elements[ el ]; + element.position.x = 0; + element.position.y = 0; + + switch ( element.alignH ) { + case "left": + element.position.x = 0; + break; + case "center": + element.position.x = -element.width / 2; + element.position.x += this.canvas.width / 2; + break; + case "right": + element.position.x = -element.width; + element.position.x += this.canvas.width; + break; + } + + switch ( element.alignV ) { + case "top": + element.position.y = 0; + break; + case "middle": + element.position.y = -element.height / 2; + element.position.y += this.canvas.height / 2; + break; + case "bottom": + element.position.y = -element.height; + element.position.y += this.canvas.height; + break; + } + + element.position.x += element.offsetH; + element.position.y += element.offsetV; + + if ( element.visible ) { + this.sortedElements.push( element ); + } + } + + this.globalPreDraw( context ); + this.sortedElements.sort( this.sortFunction ); + for ( var i = 0; i < this.sortedElements.length; i++ ) { + this.elementPreDraw( context, this.sortedElements[ i ] ); + this.sortedElements[ i ].preDraw( context, this.sortedElements[ i ].position ); + this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); + this.sortedElements[ i ].postDraw( context, this.sortedElements[ i ].position ); + this.elementPostDraw( context, this.sortedElements[ i ] ); + } + this.globalPostDraw( context ); + + }, + + add: function( element, alignH, alignV, offsetH, offsetV ) { + + // Add the element to the HUD's elements list + // Initialize the offset position + this.elements[ element.id ] = element; + var newElement = this.elements[ element.id ]; + + newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; + newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; + + newElement[ "position" ] = { + "x": 0, + "y": 0 + } + + switch ( alignH ) { + case "left": + case "center": + case "right": + newElement[ "alignH" ] = alignH; + break; + default: + newElement[ "alignH" ] = "left"; + break; + } + + switch ( alignV ) { + case "top": + case "middle": + case "bottom": + newElement[ "alignV" ] = alignV; + break; + default: + newElement[ "alignV" ] = "top"; + break; + } + + this.countElements(); + newElement[ "drawOrder" ] = this.elementCount; + }, + + sortFunction: function( a, b ) { + return a.drawOrder - b.drawOrder; + }, + + remove: function( element ) { + var index = this.elements[ element.id ].drawOrder; + delete this.elements[ element.id ]; + + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + + this.countElements(); + }, + + countElements: function() { + var count = 0; + + for ( var el in this.elements ) { + count++; + } + + this.elementCount = count; + }, + + pick: function( event ) { + // Use sortedElements since they are all visible + var elements = this.sortedElements; + this.picks.length = 0; + // Loop backward to order picks from nearest to furthest + for ( var i = elements.length - 1; i >= 0; i-- ) { + var pos = elements[ i ].position; + var width = pos.x + elements[ i ].width; + var height = pos.y + elements[ i ].height; + + if ( event.clientX > pos.x && event.clientX < width && + event.clientY > pos.y && event.clientY < height ) { + + if ( elements[ i ].isMouseOver !== true ) { + elements[ i ].isMouseOver = true; + elements[ i ].onMouseOver( event ); + } + this.picks.push( elements[ i ] ); + + } else if ( elements[ i ].isMouseOver === true ) { + elements[ i ].isMouseOver = false; + elements[ i ].onMouseOut( event ); + } + } + }, + + registerEventListeners: function( gameCanvas ) { + var emptyEvent = function( event ) {}; + this.defaultHandlers.onClick = gameCanvas.onclick; + gameCanvas.onclick = emptyEvent; + gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; + gameCanvas.onmouseup = emptyEvent; + gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; + gameCanvas.onmousedown = emptyEvent; + gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; + gameCanvas.onmousemove = emptyEvent; + gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); + }, + + handleEvent: function( event ) { + this.pick( event ); + var topPick = this.picks[ 0 ]; + var type; + + switch ( event.type ) { + case "click": + type = "onClick"; + break; + case "mouseup": + type = "onMouseUp"; + break; + case "mousedown": + type = "onMouseDown"; + break; + case "mousemove": + type = "onMouseMove"; + break; + default: + console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); + return; + } + + if ( topPick ) { + if ( topPick.enabled ) { + this.elements[ topPick.id ][ type ]( event ); + } + } else if ( this.defaultHandlers[ type ] instanceof Function ) { + this.defaultHandlers[ type ]( event ); + } + }, + + moveToTop: function( id ) { + var index = this.elements[ id ].drawOrder; + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + this.elements[ id ].drawOrder = this.elementCount; + }, + + // Draw instructions that occur prior to the element's preDraw + // and draw functions. Executes on each element in the HUD. + elementPreDraw: function( context, element ) { }, + + // Draw instructions that occur after the element's draw and + // postDraw functions. Executes on each element in the HUD. + elementPostDraw: function( context, element ) { }, + + // Draw instructions that occur before anything is drawn to + // the HUD. + globalPreDraw: function( context ) { }, + + // Draw instructions that occur after everything is drawn to + // the HUD. + globalPostDraw: function( context ) { } + +} + +HUD.Element = function( id, drawFunc, width, height, visible ) { + this.initialize( id, drawFunc, width, height ); + return this; +} + +HUD.Element.prototype = { + constructor: HUD.Element, + id: undefined, + width: undefined, + height: undefined, + isMouseOver: undefined, + visible: undefined, + enabled: undefined, + + initialize: function( id, drawFunc, width, height, visible ) { + this.id = id; + + if ( drawFunc instanceof Function ) { + this.draw = drawFunc; + } + + this.width = isNaN( width ) ? 0 : width; + this.height = isNaN( height ) ? 0 : height; + + if ( visible === true || visible === undefined ) { + this.visible = true; + } else { + this.visible = false; + } + + this.enabled = true; + }, + + // Draw instructions for the element. Executes after the HUD's + // elementPreDraw funtion and the element's preDraw function. + draw: function( context, position ) { }, + + // Draw instructions that execute just befor the element's + // draw function. + preDraw: function( context, position ) { }, + + // Draw instructions that execute immediately after the element's + // draw function. + postDraw: function( context, position ) { }, + + onClick: function( event ) { }, + + onMouseDown: function( event ) { }, + + onMouseUp: function( event ) { }, + + onMouseMove: function( event ) { }, + + onMouseOver: function( event ) { }, + + onMouseOut: function( event ) { } + +} \ No newline at end of file From ff06d853edbc9e726bcc1b93f92117cb55cff367 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 17 Feb 2015 15:11:09 -0500 Subject: [PATCH 05/25] Fix HUD export --- support/client/lib/vwf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/support/client/lib/vwf.js b/support/client/lib/vwf.js index 285221074..55b11078d 100644 --- a/support/client/lib/vwf.js +++ b/support/client/lib/vwf.js @@ -324,7 +324,7 @@ deps: [ "vwf/model/blockly/blockly_compressed" ] }, "vwf/model/hud/hud": { - exports: "HUD2" + exports: "HUD" } } }; From 59337a7422a1b1c0bd82d53155801ee6c54592ec Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 17 Feb 2015 16:33:47 -0500 Subject: [PATCH 06/25] Handle events --- support/client/lib/vwf/model/hud.js | 2 +- support/client/lib/vwf/view/hud.js | 21 +++++++++++++++++++ .../vwf.example.com/HUD/element.vwf.yaml | 6 ++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index d26a86c9c..4f1de6d2f 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -126,7 +126,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return undefined; } } - }, + } } ); diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 3a8033338..83c3a391e 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -99,14 +99,35 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( var drawFunction = function( context, position ) { eval( node.draw ) }; var element = new HUD.Element( node.name, drawFunction, props.width, props.height, props.visible ); var i, keys; + // Add custom properties to the element keys = Object.keys( drawProps ); for ( i = 0; i < keys.length; i++ ) { element[ keys[ i ] ] = drawProps[ keys[ i ] ]; } + // Add images to the element as properties keys = Object.keys( props.images ); for ( i = 0; i < keys.length; i++ ) { element[ keys[ i ] ] = props.images[ keys[ i ] ].value; } + // Add event listeners to the element + element.onClick = function( event ) { + vwf_view.kernel.fireEvent( node.id, "onClick" ); + }; + element.onMouseDown = function( event ) { + vwf_view.kernel.fireEvent( node.id, "onMouseDown" ); + }; + element.onMouseUp = function( event ) { + vwf_view.kernel.fireEvent( node.id, "onMouseUp" ); + }; + element.onMouseMove = function( event ) { + vwf_view.kernel.fireEvent( node.id, "onMouseMove" ); + }; + element.onMouseOver = function( event ) { + vwf_view.kernel.fireEvent( node.id, "onMouseOver" ); + }; + element.onMouseOut = function( event ) { + vwf_view.kernel.fireEvent( node.id, "onMouseOut" ); + }; return element; } diff --git a/support/proxy/vwf.example.com/HUD/element.vwf.yaml b/support/proxy/vwf.example.com/HUD/element.vwf.yaml index 9b4441dad..1dedcd70a 100644 --- a/support/proxy/vwf.example.com/HUD/element.vwf.yaml +++ b/support/proxy/vwf.example.com/HUD/element.vwf.yaml @@ -15,4 +15,10 @@ properties: methods: draw: events: + onClick: + onMouseDown: + onMouseUp: + onMouseMove: + onMouseOver: + onMouseOut: scripts: From f0712b274e901e9e7d3bf5c81f611b0fe66a1bc3 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 17 Feb 2015 17:58:41 -0500 Subject: [PATCH 07/25] Properly handle empty image placeholders and extra properties --- support/client/lib/vwf/view/hud.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 83c3a391e..88e2f4bad 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -68,7 +68,7 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( node = this.state.elements[ nodeID ]; if ( propertyName === "images" ) { node.properties.images = loadImages( node, propertyValue ); - } else if ( node.drawProperties.hasOwnProperty( propertyName ) ) { + } else if ( node.initialized && node.drawProperties.hasOwnProperty( propertyName ) ) { node.viewObject[ propertyName ] = propertyValue; } } @@ -148,8 +148,14 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( // If the image property doesn't exist or the image hasn't been loaded or the image src // has changed, then we need to load the image. Otherwise, just copy the old image data if ( !oldImage || !( oldImage.value instanceof Image ) || oldImage.src !== newImage.src ) { - newImage.value = new Image(); - newImage.value.src = newImage.src; + if ( oldImage.value instanceof Image ) { + newImage.value = oldImage.value; + } else { + newImage.value = new Image(); + } + if ( newImage.src ) { + newImage.value.src = newImage.src; + } } else { newImage = oldImage; } From c9d0f13b13d4455519c6ee626d1cd1a7115d02da Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Wed, 18 Feb 2015 10:39:52 -0500 Subject: [PATCH 08/25] Code cleanup --- support/client/lib/vwf/model/hud.js | 20 +++----------------- support/client/lib/vwf/view/hud.js | 22 ++++------------------ 2 files changed, 7 insertions(+), 35 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index 4f1de6d2f..adf1b79c9 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -21,11 +21,9 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili creatingNode: function( nodeID, childID, childExtendsID, childImplementsIDs, childSource, childType, childIndex, childName, callback /* ( ready ) */ ) { - var node = undefined; + var node; var protos = getPrototypes.call( this, this.state.kernel, childExtendsID ); - if ( protos && isOverlay( protos ) ) { - node = this.state.overlays[ childID ] = { "id": childID, "name": childName, @@ -35,7 +33,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili }, "initialized": false }; - } else if ( protos && isElement( protos ) ) { node = this.state.elements[ childID ] = { "id": childID, @@ -56,8 +53,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili "initialized": false }; node.overlay.elements[ childID ] = node; - node.initialized = false; - } }, @@ -66,8 +61,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili }, initializingProperty: function( nodeID, propertyName, propertyValue ) { - var value = undefined; - + var value; if ( propertyValue !== undefined ) { var node = this.state.overlays[ nodeID ] || this.state.elements[ nodeID ] ; if ( node !== undefined ) { @@ -78,23 +72,18 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili } } } - return value; }, settingProperty: function( nodeID, propertyName, propertyValue ) { var node, value; - if ( this.state.overlays[ nodeID ] ) { - node = this.state.overlays[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { node.properties[ propertyName ] = propertyValue; value = propertyValue; } - } else if ( this.state.elements[ nodeID ] ) { - node = this.state.elements[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { node.properties[ propertyName ] = propertyValue; @@ -102,7 +91,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili node.drawProperties[ propertyName ] = propertyValue; } value = propertyValue; - } return value; @@ -123,7 +111,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili if ( methodName === "draw" ) { this.logger.errorx( "callingMethod", "The draw method should not be called " + "from outside the HUD driver!" ); - return undefined; + return; } } } @@ -147,7 +135,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili foundOverlay = ( prototypes[i] == "http-vwf-example-com-hud-overlay-vwf" ); } } - return foundOverlay; } @@ -158,7 +145,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili foundElement = ( prototypes[i] == "http-vwf-example-com-hud-element-vwf" ); } } - return foundElement; } diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 88e2f4bad..6c2ea1d2e 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -1,14 +1,10 @@ "use strict"; -var debugHUD; - define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( module, model, utility, HUD ) { return model.load( module, { - initialize: function() { - this.runningOverlays = {}; - }, + initialize: function() {}, initializedNode: function( nodeID, childID, childExtendsID, childImplementsIDs, childSource, childType, childIndex, childName ) { @@ -27,7 +23,6 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( }, deletedNode: function( nodeID ) { - if ( this.state.overlays[ nodeID ] ) { var node, keys, i; node = this.state.overlays[ nodeID ]; @@ -38,7 +33,6 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( node = this.state.elements[ nodeID ]; delete this.state.elements[ nodeID ]; } - }, createdProperty: function( nodeID, propertyName, propertyValue ) { @@ -46,8 +40,7 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( }, initializedProperty: function( nodeID, propertyName, propertyValue ) { - var value = undefined; - + var value; if ( propertyValue !== undefined ) { var node = this.state.overlays[ nodeID ] || this.state.elements[ nodeID ] ; if ( node !== undefined ) { @@ -58,7 +51,6 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( } } } - return value; }, @@ -136,14 +128,6 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( var newImage, oldImage; for ( var i = 0; i < keys.length; i++ ) { newImage = images[ keys[ i ] ]; - if ( !newImage.hasOwnProperty( "src" ) ) { - logger.errorx( "loadImages", "Image \"" + keys[ i ] + "\" is malformed! It " + - "does not contain a \"src\" property! Skipping image load!" ); - continue; - } else if ( !newImage.hasOwnProperty( "value" ) ) { - logger.warnx( "loadImages", "Image \"" + keys[ i ] + "\" does not contain a " + - "\"value\" property! One will be generated automatically." ); - } oldImage = node.properties.images[ keys[ i ] ]; // If the image property doesn't exist or the image hasn't been loaded or the image src // has changed, then we need to load the image. Otherwise, just copy the old image data @@ -155,6 +139,8 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( } if ( newImage.src ) { newImage.value.src = newImage.src; + } else { + newImage.src = ""; } } else { newImage = oldImage; From 4cdc2baa37027b4d5f3d82a33fa0559afd755b22 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Wed, 18 Feb 2015 16:57:03 -0500 Subject: [PATCH 09/25] Initialize empty image objects --- support/client/lib/vwf/view/hud.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 6c2ea1d2e..07bcc995b 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -127,7 +127,7 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( var keys = Object.keys( images ); var newImage, oldImage; for ( var i = 0; i < keys.length; i++ ) { - newImage = images[ keys[ i ] ]; + newImage = images[ keys[ i ] ] || {}; oldImage = node.properties.images[ keys[ i ] ]; // If the image property doesn't exist or the image hasn't been loaded or the image src // has changed, then we need to load the image. Otherwise, just copy the old image data From bf9bfb085e5cca933093b89bba5f8db2a54ef902 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Wed, 18 Feb 2015 18:26:08 -0500 Subject: [PATCH 10/25] Added support for pre/post draw functions --- support/client/lib/vwf/model/hud.js | 42 +++++++++++++++++-- support/client/lib/vwf/model/hud/hud.js | 20 --------- support/client/lib/vwf/view/hud.js | 20 +++++++++ .../vwf.example.com/HUD/overlay.vwf.yaml | 4 ++ 4 files changed, 62 insertions(+), 24 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index adf1b79c9..a665ab5f8 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -31,6 +31,10 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili "properties": { "visible": undefined }, + "elementPreDraw": undefined, + "elementPostDraw": undefined, + "globalPreDraw": undefined, + "globalPostDraw": undefined, "initialized": false }; } else if ( protos && isElement( protos ) ) { @@ -76,7 +80,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili }, settingProperty: function( nodeID, propertyName, propertyValue ) { - var node, value; + var node, value, images, keys, i, image; if ( this.state.overlays[ nodeID ] ) { node = this.state.overlays[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { @@ -86,7 +90,26 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili } else if ( this.state.elements[ nodeID ] ) { node = this.state.elements[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { - node.properties[ propertyName ] = propertyValue; + if ( propertyName === "images" ) { + images = propertyValue; + keys = Object.keys( images ); + for ( i = 0; i < keys.length; i++ ) { + image = images[ keys[ i ] ]; + if ( !image ) { + image = {}; + } + if ( !image.hasOwnProperty( "src" ) ) { + image.src = undefined; + } + if ( !image.hasOwnProperty( "value" ) ) { + image.value = undefined; + } + images[ keys[ i ] ] = image; + } + node.properties.images = images; + } else { + node.properties[ propertyName ] = propertyValue; + } } else { node.drawProperties[ propertyName ] = propertyValue; } @@ -97,8 +120,19 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili }, creatingMethod: function( nodeID, methodName, methodParameters, methodBody ) { - if ( this.state.elements[ nodeID ] ) { - var node = this.state.elements[ nodeID ]; + var node; + if ( this.state.overlays[ nodeID ] ) { + node = this.state.overlays[ nodeID ]; + switch ( methodName ) { + case "elementPreDraw": + case "elementPostDraw": + case "globalPreDraw": + case "globalPostDraw": + node[ methodName ] = methodBody; + break; + } + } else if ( this.state.elements[ nodeID ] ) { + node = this.state.elements[ nodeID ]; if ( methodName === "draw" ) { node.draw = methodBody; } diff --git a/support/client/lib/vwf/model/hud/hud.js b/support/client/lib/vwf/model/hud/hud.js index 92ab30681..0e533f7ec 100644 --- a/support/client/lib/vwf/model/hud/hud.js +++ b/support/client/lib/vwf/model/hud/hud.js @@ -85,9 +85,7 @@ HUD.prototype = { this.sortedElements.sort( this.sortFunction ); for ( var i = 0; i < this.sortedElements.length; i++ ) { this.elementPreDraw( context, this.sortedElements[ i ] ); - this.sortedElements[ i ].preDraw( context, this.sortedElements[ i ].position ); this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); - this.sortedElements[ i ].postDraw( context, this.sortedElements[ i ].position ); this.elementPostDraw( context, this.sortedElements[ i ] ); } this.globalPostDraw( context ); @@ -249,20 +247,12 @@ HUD.prototype = { this.elements[ id ].drawOrder = this.elementCount; }, - // Draw instructions that occur prior to the element's preDraw - // and draw functions. Executes on each element in the HUD. elementPreDraw: function( context, element ) { }, - // Draw instructions that occur after the element's draw and - // postDraw functions. Executes on each element in the HUD. elementPostDraw: function( context, element ) { }, - // Draw instructions that occur before anything is drawn to - // the HUD. globalPreDraw: function( context ) { }, - // Draw instructions that occur after everything is drawn to - // the HUD. globalPostDraw: function( context ) { } } @@ -300,18 +290,8 @@ HUD.Element.prototype = { this.enabled = true; }, - // Draw instructions for the element. Executes after the HUD's - // elementPreDraw funtion and the element's preDraw function. draw: function( context, position ) { }, - // Draw instructions that execute just befor the element's - // draw function. - preDraw: function( context, position ) { }, - - // Draw instructions that execute immediately after the element's - // draw function. - postDraw: function( context, position ) { }, - onClick: function( event ) { }, onMouseDown: function( event ) { }, diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 07bcc995b..6af5cb826 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -82,6 +82,26 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( props = element.properties; overlay.add( element.viewObject, props.alignH, props.alignV, props.offsetH, props.offsetV ); } + if ( node.elementPreDraw ) { + overlay.elementPreDraw = function( context, element ) { + eval( node.elementPreDraw ) + } + } + if ( node.elementPostDraw ) { + overlay.elementPostDraw = function( context, element ) { + eval( node.elementPostDraw ) + } + } + if ( node.globalPreDraw ) { + overlay.globalPreDraw = function( context ) { + eval( node.globalPreDraw ) + } + } + if ( node.globalPostDraw ) { + overlay.globalPostDraw = function( context ) { + eval( node.globalPostDraw ) + } + } return overlay; } diff --git a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml index 84e0dbd32..182fd4ca5 100644 --- a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml +++ b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml @@ -2,5 +2,9 @@ extends: http://vwf.example.com/node.vwf properties: visible: true methods: + elementPreDraw: + elementPostDraw: + globalPreDraw: + globalPostDraw: events: scripts: From d7d1d1de18227a7dc706ee3a81a9a50a63aa439b Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Thu, 19 Feb 2015 16:55:22 -0500 Subject: [PATCH 11/25] Fixed bugs with images --- support/client/lib/vwf/model/hud.js | 52 +++++++++------ support/client/lib/vwf/view/hud.js | 64 +++++++++++-------- .../vwf.example.com/HUD/element.vwf.yaml | 4 -- .../vwf.example.com/HUD/overlay.vwf.yaml | 2 - 4 files changed, 73 insertions(+), 49 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index a665ab5f8..0511569f7 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -91,22 +91,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili node = this.state.elements[ nodeID ]; if ( node.properties.hasOwnProperty( propertyName ) ) { if ( propertyName === "images" ) { - images = propertyValue; - keys = Object.keys( images ); - for ( i = 0; i < keys.length; i++ ) { - image = images[ keys[ i ] ]; - if ( !image ) { - image = {}; - } - if ( !image.hasOwnProperty( "src" ) ) { - image.src = undefined; - } - if ( !image.hasOwnProperty( "value" ) ) { - image.value = undefined; - } - images[ keys[ i ] ] = image; - } - node.properties.images = images; + node.properties.images = propertyValue; } else { node.properties[ propertyName ] = propertyValue; } @@ -119,6 +104,24 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return value; }, + gettingProperty: function( nodeID, propertyName ) { + var node, value; + if ( this.state.overlays[ nodeID ] ) { + node = this.state.overlays[ nodeID ]; + if ( node.properties.hasOwnProperty( propertyName ) ) { + value = node.properties[ propertyName ]; + } + } else if ( this.state.elements[ nodeID ] ) { + node = this.state.elements[ nodeID ]; + if ( node.properties.hasOwnProperty( propertyName ) ) { + value = node.properties[ propertyName ]; + } else if ( node.drawProperties.hasOwnProperty( propertyName ) ) { + value = node.drawProperties[ propertyName ]; + } + } + return value; + }, + creatingMethod: function( nodeID, methodName, methodParameters, methodBody ) { var node; if ( this.state.overlays[ nodeID ] ) { @@ -140,8 +143,21 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili }, callingMethod: function( nodeID, methodName, methodParameters, methodValue ) { - if ( this.state.elements[ nodeID ] ) { - var node = this.state.elements[ nodeID ]; + var node; + if ( this.state.overlays[ nodeID ] ) { + node = this.state.overlays[ nodeID ]; + switch ( methodName ) { + case "elementPreDraw": + case "elementPostDraw": + case "globalPreDraw": + case "globalPostDraw": + this.logger.errorx( "callingMethod", "The " + methodName + " method should not " + + "be called from outside the HUD driver!" ); + return; + break; + } + } else if ( this.state.elements[ nodeID ] ) { + node = this.state.elements[ nodeID ]; if ( methodName === "draw" ) { this.logger.errorx( "callingMethod", "The draw method should not be called " + "from outside the HUD driver!" ); diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 6af5cb826..ba8041e1c 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -56,14 +56,25 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( satProperty: function( nodeID, propertyName, propertyValue ) { var value, node; - if ( this.state.elements[ nodeID ] ) { + if ( this.state.overlays[ nodeID ] ) { + node = this.state.overlays[ nodeID ]; + if ( node.initialized && node.properties.hasOwnProperty( propertyName ) ) { + node.viewObject[ propertyName ] = propertyValue; + } + value = propertyValue; + } else if ( this.state.elements[ nodeID ] ) { node = this.state.elements[ nodeID ]; if ( propertyName === "images" ) { - node.properties.images = loadImages( node, propertyValue ); + value = propertyValue; + if ( node.initialized ) { + updateImages( node, propertyValue ); + } } else if ( node.initialized && node.drawProperties.hasOwnProperty( propertyName ) ) { node.viewObject[ propertyName ] = propertyValue; + value = propertyValue; } } + return value; } } ); @@ -110,16 +121,17 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( var drawProps = node.drawProperties; var drawFunction = function( context, position ) { eval( node.draw ) }; var element = new HUD.Element( node.name, drawFunction, props.width, props.height, props.visible ); - var i, keys; + var i, keys, images; // Add custom properties to the element keys = Object.keys( drawProps ); for ( i = 0; i < keys.length; i++ ) { element[ keys[ i ] ] = drawProps[ keys[ i ] ]; } // Add images to the element as properties - keys = Object.keys( props.images ); + images = loadImages( node ); + keys = Object.keys( images ); for ( i = 0; i < keys.length; i++ ) { - element[ keys[ i ] ] = props.images[ keys[ i ] ].value; + element[ keys[ i ] ] = images[ keys[ i ] ]; } // Add event listeners to the element element.onClick = function( event ) { @@ -143,30 +155,32 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( return element; } - function loadImages( node, images ) { + function loadImages( node ) { + var images = node.properties.images; var keys = Object.keys( images ); - var newImage, oldImage; + var image, src; + var results = {}; for ( var i = 0; i < keys.length; i++ ) { - newImage = images[ keys[ i ] ] || {}; - oldImage = node.properties.images[ keys[ i ] ]; - // If the image property doesn't exist or the image hasn't been loaded or the image src - // has changed, then we need to load the image. Otherwise, just copy the old image data - if ( !oldImage || !( oldImage.value instanceof Image ) || oldImage.src !== newImage.src ) { - if ( oldImage.value instanceof Image ) { - newImage.value = oldImage.value; - } else { - newImage.value = new Image(); - } - if ( newImage.src ) { - newImage.value.src = newImage.src; - } else { - newImage.src = ""; - } - } else { - newImage = oldImage; + image = new Image(); + src = images[ keys[ i ] ]; + if ( src ) { + image.src = src; + } + results[ keys[ i ] ] = image; + } + return results; + } + + function updateImages( node, images ) { + var keys = Object.keys( images ); + var newImageSrc, oldImage; + for ( var i = 0; i < keys.length; i++ ) { + newImageSrc = images[ keys[ i ] ]; + oldImage = node.viewObject[ keys[ i ] ]; + if ( newImageSrc && oldImage instanceof Image && newImageSrc !== oldImage.src ) { + oldImage.src = newImageSrc; } } - return images; } } ); \ No newline at end of file diff --git a/support/proxy/vwf.example.com/HUD/element.vwf.yaml b/support/proxy/vwf.example.com/HUD/element.vwf.yaml index 1dedcd70a..992d2d9dd 100644 --- a/support/proxy/vwf.example.com/HUD/element.vwf.yaml +++ b/support/proxy/vwf.example.com/HUD/element.vwf.yaml @@ -1,9 +1,6 @@ extends: http://vwf.example.com/node.vwf properties: images: - # image: - # src: - # value: width: height: visible: @@ -21,4 +18,3 @@ events: onMouseMove: onMouseOver: onMouseOut: -scripts: diff --git a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml index 182fd4ca5..6394ba501 100644 --- a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml +++ b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml @@ -6,5 +6,3 @@ methods: elementPostDraw: globalPreDraw: globalPostDraw: -events: -scripts: From 0552cc60cb9bf8b0eb1e2cf84a352c8f24992608 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Thu, 19 Feb 2015 17:16:13 -0500 Subject: [PATCH 12/25] Moved hud.js to view folder and removed global reference --- support/client/lib/vwf/model/hud/hud.js | 307 ----------------------- support/client/lib/vwf/view/hud.js | 2 +- support/client/lib/vwf/view/hud/hud.js | 313 ++++++++++++++++++++++++ 3 files changed, 314 insertions(+), 308 deletions(-) delete mode 100644 support/client/lib/vwf/model/hud/hud.js create mode 100644 support/client/lib/vwf/view/hud/hud.js diff --git a/support/client/lib/vwf/model/hud/hud.js b/support/client/lib/vwf/model/hud/hud.js deleted file mode 100644 index 0e533f7ec..000000000 --- a/support/client/lib/vwf/model/hud/hud.js +++ /dev/null @@ -1,307 +0,0 @@ -HUD = function() { - this.initialize(); - return this; -} - -HUD.prototype = { - constructor: HUD, - elements: undefined, - elementCount: undefined, - sortedElements: undefined, - picks: undefined, - canvas: undefined, - visible: undefined, - defaultHandlers: undefined, - - initialize: function() { - var gameCanvas = document.getElementById( vwf_view.kernel.application() ); - this.elements = {}; - this.elementCount = 0; - this.sortedElements = []; - this.picks = []; - this.canvas = document.createElement( "CANVAS" ); - this.canvas.id = "HUDCanvas"; - gameCanvas.parentElement.appendChild( this.canvas ); - this.visible = true; - this.update(); - this.defaultHandlers = {}; - this.registerEventListeners( gameCanvas ); - }, - - update: function() { - this.canvas.width = window.innerWidth; - this.canvas.height = window.innerHeight; - if ( this.visible ) { - this.draw(); - } - }, - - draw: function() { - var context = this.canvas.getContext( '2d' ); - this.sortedElements.length = 0; - - for ( var el in this.elements ) { - var element = this.elements[ el ]; - element.position.x = 0; - element.position.y = 0; - - switch ( element.alignH ) { - case "left": - element.position.x = 0; - break; - case "center": - element.position.x = -element.width / 2; - element.position.x += this.canvas.width / 2; - break; - case "right": - element.position.x = -element.width; - element.position.x += this.canvas.width; - break; - } - - switch ( element.alignV ) { - case "top": - element.position.y = 0; - break; - case "middle": - element.position.y = -element.height / 2; - element.position.y += this.canvas.height / 2; - break; - case "bottom": - element.position.y = -element.height; - element.position.y += this.canvas.height; - break; - } - - element.position.x += element.offsetH; - element.position.y += element.offsetV; - - if ( element.visible ) { - this.sortedElements.push( element ); - } - } - - this.globalPreDraw( context ); - this.sortedElements.sort( this.sortFunction ); - for ( var i = 0; i < this.sortedElements.length; i++ ) { - this.elementPreDraw( context, this.sortedElements[ i ] ); - this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); - this.elementPostDraw( context, this.sortedElements[ i ] ); - } - this.globalPostDraw( context ); - - }, - - add: function( element, alignH, alignV, offsetH, offsetV ) { - - // Add the element to the HUD's elements list - // Initialize the offset position - this.elements[ element.id ] = element; - var newElement = this.elements[ element.id ]; - - newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; - newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; - - newElement[ "position" ] = { - "x": 0, - "y": 0 - } - - switch ( alignH ) { - case "left": - case "center": - case "right": - newElement[ "alignH" ] = alignH; - break; - default: - newElement[ "alignH" ] = "left"; - break; - } - - switch ( alignV ) { - case "top": - case "middle": - case "bottom": - newElement[ "alignV" ] = alignV; - break; - default: - newElement[ "alignV" ] = "top"; - break; - } - - this.countElements(); - newElement[ "drawOrder" ] = this.elementCount; - }, - - sortFunction: function( a, b ) { - return a.drawOrder - b.drawOrder; - }, - - remove: function( element ) { - var index = this.elements[ element.id ].drawOrder; - delete this.elements[ element.id ]; - - for ( var el in this.elements ) { - if ( this.elements[ el ].drawOrder > index ) { - this.elements[ el ].drawOrder--; - } - } - - this.countElements(); - }, - - countElements: function() { - var count = 0; - - for ( var el in this.elements ) { - count++; - } - - this.elementCount = count; - }, - - pick: function( event ) { - // Use sortedElements since they are all visible - var elements = this.sortedElements; - this.picks.length = 0; - // Loop backward to order picks from nearest to furthest - for ( var i = elements.length - 1; i >= 0; i-- ) { - var pos = elements[ i ].position; - var width = pos.x + elements[ i ].width; - var height = pos.y + elements[ i ].height; - - if ( event.clientX > pos.x && event.clientX < width && - event.clientY > pos.y && event.clientY < height ) { - - if ( elements[ i ].isMouseOver !== true ) { - elements[ i ].isMouseOver = true; - elements[ i ].onMouseOver( event ); - } - this.picks.push( elements[ i ] ); - - } else if ( elements[ i ].isMouseOver === true ) { - elements[ i ].isMouseOver = false; - elements[ i ].onMouseOut( event ); - } - } - }, - - registerEventListeners: function( gameCanvas ) { - var emptyEvent = function( event ) {}; - this.defaultHandlers.onClick = gameCanvas.onclick; - gameCanvas.onclick = emptyEvent; - gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; - gameCanvas.onmouseup = emptyEvent; - gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; - gameCanvas.onmousedown = emptyEvent; - gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); - - this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; - gameCanvas.onmousemove = emptyEvent; - gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); - }, - - handleEvent: function( event ) { - this.pick( event ); - var topPick = this.picks[ 0 ]; - var type; - - switch ( event.type ) { - case "click": - type = "onClick"; - break; - case "mouseup": - type = "onMouseUp"; - break; - case "mousedown": - type = "onMouseDown"; - break; - case "mousemove": - type = "onMouseMove"; - break; - default: - console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); - return; - } - - if ( topPick ) { - if ( topPick.enabled ) { - this.elements[ topPick.id ][ type ]( event ); - } - } else if ( this.defaultHandlers[ type ] instanceof Function ) { - this.defaultHandlers[ type ]( event ); - } - }, - - moveToTop: function( id ) { - var index = this.elements[ id ].drawOrder; - for ( var el in this.elements ) { - if ( this.elements[ el ].drawOrder > index ) { - this.elements[ el ].drawOrder--; - } - } - this.elements[ id ].drawOrder = this.elementCount; - }, - - elementPreDraw: function( context, element ) { }, - - elementPostDraw: function( context, element ) { }, - - globalPreDraw: function( context ) { }, - - globalPostDraw: function( context ) { } - -} - -HUD.Element = function( id, drawFunc, width, height, visible ) { - this.initialize( id, drawFunc, width, height ); - return this; -} - -HUD.Element.prototype = { - constructor: HUD.Element, - id: undefined, - width: undefined, - height: undefined, - isMouseOver: undefined, - visible: undefined, - enabled: undefined, - - initialize: function( id, drawFunc, width, height, visible ) { - this.id = id; - - if ( drawFunc instanceof Function ) { - this.draw = drawFunc; - } - - this.width = isNaN( width ) ? 0 : width; - this.height = isNaN( height ) ? 0 : height; - - if ( visible === true || visible === undefined ) { - this.visible = true; - } else { - this.visible = false; - } - - this.enabled = true; - }, - - draw: function( context, position ) { }, - - onClick: function( event ) { }, - - onMouseDown: function( event ) { }, - - onMouseUp: function( event ) { }, - - onMouseMove: function( event ) { }, - - onMouseOver: function( event ) { }, - - onMouseOut: function( event ) { } - -} \ No newline at end of file diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index ba8041e1c..e1e9f1f51 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -1,6 +1,6 @@ "use strict"; -define( [ "module", "vwf/model", "vwf/utility", "vwf/model/hud/hud" ], function( module, model, utility, HUD ) { +define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( module, model, utility, HUD ) { return model.load( module, { diff --git a/support/client/lib/vwf/view/hud/hud.js b/support/client/lib/vwf/view/hud/hud.js new file mode 100644 index 000000000..fa9bb232a --- /dev/null +++ b/support/client/lib/vwf/view/hud/hud.js @@ -0,0 +1,313 @@ +define( function() { + + var HUD = function() { + this.initialize(); + return this; + } + + HUD.prototype = { + constructor: HUD, + elements: undefined, + elementCount: undefined, + sortedElements: undefined, + picks: undefined, + canvas: undefined, + visible: undefined, + defaultHandlers: undefined, + + initialize: function() { + var gameCanvas = document.getElementById( vwf_view.kernel.application() ); + this.elements = {}; + this.elementCount = 0; + this.sortedElements = []; + this.picks = []; + this.canvas = document.createElement( "CANVAS" ); + this.canvas.id = "HUDCanvas"; + gameCanvas.parentElement.appendChild( this.canvas ); + this.visible = true; + this.update(); + this.defaultHandlers = {}; + this.registerEventListeners( gameCanvas ); + }, + + update: function() { + this.canvas.width = window.innerWidth; + this.canvas.height = window.innerHeight; + if ( this.visible ) { + this.draw(); + } + }, + + draw: function() { + var context = this.canvas.getContext( '2d' ); + this.sortedElements.length = 0; + + for ( var el in this.elements ) { + var element = this.elements[ el ]; + element.position.x = 0; + element.position.y = 0; + + switch ( element.alignH ) { + case "left": + element.position.x = 0; + break; + case "center": + element.position.x = -element.width / 2; + element.position.x += this.canvas.width / 2; + break; + case "right": + element.position.x = -element.width; + element.position.x += this.canvas.width; + break; + } + + switch ( element.alignV ) { + case "top": + element.position.y = 0; + break; + case "middle": + element.position.y = -element.height / 2; + element.position.y += this.canvas.height / 2; + break; + case "bottom": + element.position.y = -element.height; + element.position.y += this.canvas.height; + break; + } + + element.position.x += element.offsetH; + element.position.y += element.offsetV; + + if ( element.visible ) { + this.sortedElements.push( element ); + } + } + + this.globalPreDraw( context ); + this.sortedElements.sort( this.sortFunction ); + for ( var i = 0; i < this.sortedElements.length; i++ ) { + this.elementPreDraw( context, this.sortedElements[ i ] ); + this.sortedElements[ i ].draw( context, this.sortedElements[ i ].position ); + this.elementPostDraw( context, this.sortedElements[ i ] ); + } + this.globalPostDraw( context ); + + }, + + add: function( element, alignH, alignV, offsetH, offsetV ) { + + // Add the element to the HUD's elements list + // Initialize the offset position + this.elements[ element.id ] = element; + var newElement = this.elements[ element.id ]; + + newElement[ "offsetH" ] = isNaN( offsetH ) ? 0 : offsetH; + newElement[ "offsetV" ] = isNaN( offsetV ) ? 0 : offsetV; + + newElement[ "position" ] = { + "x": 0, + "y": 0 + } + + switch ( alignH ) { + case "left": + case "center": + case "right": + newElement[ "alignH" ] = alignH; + break; + default: + newElement[ "alignH" ] = "left"; + break; + } + + switch ( alignV ) { + case "top": + case "middle": + case "bottom": + newElement[ "alignV" ] = alignV; + break; + default: + newElement[ "alignV" ] = "top"; + break; + } + + this.countElements(); + newElement[ "drawOrder" ] = this.elementCount; + }, + + sortFunction: function( a, b ) { + return a.drawOrder - b.drawOrder; + }, + + remove: function( element ) { + var index = this.elements[ element.id ].drawOrder; + delete this.elements[ element.id ]; + + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + + this.countElements(); + }, + + countElements: function() { + var count = 0; + + for ( var el in this.elements ) { + count++; + } + + this.elementCount = count; + }, + + pick: function( event ) { + // Use sortedElements since they are all visible + var elements = this.sortedElements; + this.picks.length = 0; + // Loop backward to order picks from nearest to furthest + for ( var i = elements.length - 1; i >= 0; i-- ) { + var pos = elements[ i ].position; + var width = pos.x + elements[ i ].width; + var height = pos.y + elements[ i ].height; + + if ( event.clientX > pos.x && event.clientX < width && + event.clientY > pos.y && event.clientY < height ) { + + if ( elements[ i ].isMouseOver !== true ) { + elements[ i ].isMouseOver = true; + elements[ i ].onMouseOver( event ); + } + this.picks.push( elements[ i ] ); + + } else if ( elements[ i ].isMouseOver === true ) { + elements[ i ].isMouseOver = false; + elements[ i ].onMouseOut( event ); + } + } + }, + + registerEventListeners: function( gameCanvas ) { + var emptyEvent = function( event ) {}; + this.defaultHandlers.onClick = gameCanvas.onclick; + gameCanvas.onclick = emptyEvent; + gameCanvas.addEventListener( "click", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseUp = gameCanvas.onmouseup; + gameCanvas.onmouseup = emptyEvent; + gameCanvas.addEventListener( "mouseup", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseDown = gameCanvas.onmousedown; + gameCanvas.onmousedown = emptyEvent; + gameCanvas.addEventListener( "mousedown", this.handleEvent.bind( this ) ); + + this.defaultHandlers.onMouseMove = gameCanvas.onmousemove; + gameCanvas.onmousemove = emptyEvent; + gameCanvas.addEventListener( "mousemove", this.handleEvent.bind( this ) ); + }, + + handleEvent: function( event ) { + this.pick( event ); + var topPick = this.picks[ 0 ]; + var type; + + switch ( event.type ) { + case "click": + type = "onClick"; + break; + case "mouseup": + type = "onMouseUp"; + break; + case "mousedown": + type = "onMouseDown"; + break; + case "mousemove": + type = "onMouseMove"; + break; + default: + console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); + return; + } + + if ( topPick ) { + if ( topPick.enabled ) { + this.elements[ topPick.id ][ type ]( event ); + } + } else if ( this.defaultHandlers[ type ] instanceof Function ) { + this.defaultHandlers[ type ]( event ); + } + }, + + moveToTop: function( id ) { + var index = this.elements[ id ].drawOrder; + for ( var el in this.elements ) { + if ( this.elements[ el ].drawOrder > index ) { + this.elements[ el ].drawOrder--; + } + } + this.elements[ id ].drawOrder = this.elementCount; + }, + + elementPreDraw: function( context, element ) { }, + + elementPostDraw: function( context, element ) { }, + + globalPreDraw: function( context ) { }, + + globalPostDraw: function( context ) { } + + } + + HUD.Element = function( id, drawFunc, width, height, visible ) { + this.initialize( id, drawFunc, width, height ); + return this; + } + + HUD.Element.prototype = { + constructor: HUD.Element, + id: undefined, + width: undefined, + height: undefined, + isMouseOver: undefined, + visible: undefined, + enabled: undefined, + + initialize: function( id, drawFunc, width, height, visible ) { + this.id = id; + + if ( drawFunc instanceof Function ) { + this.draw = drawFunc; + } + + this.width = isNaN( width ) ? 0 : width; + this.height = isNaN( height ) ? 0 : height; + + if ( visible === true || visible === undefined ) { + this.visible = true; + } else { + this.visible = false; + } + + this.enabled = true; + }, + + draw: function( context, position ) { }, + + onClick: function( event ) { }, + + onMouseDown: function( event ) { }, + + onMouseUp: function( event ) { }, + + onMouseMove: function( event ) { }, + + onMouseOver: function( event ) { }, + + onMouseOut: function( event ) { } + + } + + return HUD; + +} ); \ No newline at end of file From a6f96aa582e59785eb9c188d5e3a1e3812d4aa85 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Fri, 20 Feb 2015 13:29:00 -0500 Subject: [PATCH 13/25] Allow an element to have no images --- support/client/lib/vwf/view/hud.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index e1e9f1f51..ee776fbed 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -128,10 +128,12 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( element[ keys[ i ] ] = drawProps[ keys[ i ] ]; } // Add images to the element as properties - images = loadImages( node ); - keys = Object.keys( images ); - for ( i = 0; i < keys.length; i++ ) { - element[ keys[ i ] ] = images[ keys[ i ] ]; + if ( props.images ) { + images = loadImages( node ); + keys = Object.keys( images ); + for ( i = 0; i < keys.length; i++ ) { + element[ keys[ i ] ] = images[ keys[ i ] ]; + } } // Add event listeners to the element element.onClick = function( event ) { From 922471c9a3af44ada202dfcd1dad2f67ba2996fb Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Fri, 20 Feb 2015 13:53:47 -0500 Subject: [PATCH 14/25] Fix setting properties on elements --- support/client/lib/vwf/view/hud.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index ee776fbed..e7e2e6b10 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -64,15 +64,15 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( value = propertyValue; } else if ( this.state.elements[ nodeID ] ) { node = this.state.elements[ nodeID ]; - if ( propertyName === "images" ) { - value = propertyValue; - if ( node.initialized ) { + if ( node.initialized ) { + if ( propertyName === "images" ) { updateImages( node, propertyValue ); + } else if ( node.properties.hasOwnProperty( propertyName ) || + node.drawProperties.hasOwnProperty( propertyName ) ) { + node.viewObject[ propertyName ] = propertyValue; } - } else if ( node.initialized && node.drawProperties.hasOwnProperty( propertyName ) ) { - node.viewObject[ propertyName ] = propertyValue; - value = propertyValue; } + value = propertyValue; } return value; } From 75c169ecfba01800e419bb1bef089bee8218fbcb Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Fri, 20 Feb 2015 18:40:26 -0500 Subject: [PATCH 15/25] Set draw functions after initialize to allow them to be defined in external scripts --- support/client/lib/vwf/model/hud.js | 20 -------- support/client/lib/vwf/view/hud.js | 71 ++++++++++++++++++++--------- 2 files changed, 49 insertions(+), 42 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index 0511569f7..d57f62a6b 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -122,26 +122,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return value; }, - creatingMethod: function( nodeID, methodName, methodParameters, methodBody ) { - var node; - if ( this.state.overlays[ nodeID ] ) { - node = this.state.overlays[ nodeID ]; - switch ( methodName ) { - case "elementPreDraw": - case "elementPostDraw": - case "globalPreDraw": - case "globalPostDraw": - node[ methodName ] = methodBody; - break; - } - } else if ( this.state.elements[ nodeID ] ) { - node = this.state.elements[ nodeID ]; - if ( methodName === "draw" ) { - node.draw = methodBody; - } - } - }, - callingMethod: function( nodeID, methodName, methodParameters, methodValue ) { var node; if ( this.state.overlays[ nodeID ] ) { diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index e7e2e6b10..272b6d089 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -75,6 +75,54 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( value = propertyValue; } return value; + }, + + createdMethod: function( nodeID, methodName, methodParameters, methodBody ) { + var node; + if ( this.state.overlays[ nodeID ] ) { + node = this.state.overlays[ nodeID ]; + switch ( methodName ) { + case "elementPreDraw": + case "elementPostDraw": + case "globalPreDraw": + case "globalPostDraw": + this.kernel.getMethod( nodeID, methodName ); + break; + } + } else if ( this.state.elements[ nodeID ] ) { + node = this.state.elements[ nodeID ]; + if ( methodName === "draw" ) { + this.kernel.getMethod( nodeID, "draw" ); + } + } + }, + + gotMethod: function( nodeID, methodName, methodHandler ) { + var node; + if ( this.state.overlays[ nodeID ] ) { + node = this.state.overlays[ nodeID ]; + switch ( methodName ) { + case "elementPreDraw": + case "elementPostDraw": + node.viewObject[ methodName ] = function( context, element ) { + eval( methodHandler.body ); + }; + break; + case "globalPreDraw": + case "globalPostDraw": + node.viewObject[ methodName ] = function( context ) { + eval( methodHandler.body ); + }; + break; + } + } else if ( this.state.elements[ nodeID ] ) { + node = this.state.elements[ nodeID ]; + if ( methodName === "draw" ) { + node.viewObject[ methodName ] = function( context, position ) { + eval( methodHandler.body ); + }; + } + } } } ); @@ -93,34 +141,13 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( props = element.properties; overlay.add( element.viewObject, props.alignH, props.alignV, props.offsetH, props.offsetV ); } - if ( node.elementPreDraw ) { - overlay.elementPreDraw = function( context, element ) { - eval( node.elementPreDraw ) - } - } - if ( node.elementPostDraw ) { - overlay.elementPostDraw = function( context, element ) { - eval( node.elementPostDraw ) - } - } - if ( node.globalPreDraw ) { - overlay.globalPreDraw = function( context ) { - eval( node.globalPreDraw ) - } - } - if ( node.globalPostDraw ) { - overlay.globalPostDraw = function( context ) { - eval( node.globalPostDraw ) - } - } return overlay; } function createElement( node ) { var props = node.properties; var drawProps = node.drawProperties; - var drawFunction = function( context, position ) { eval( node.draw ) }; - var element = new HUD.Element( node.name, drawFunction, props.width, props.height, props.visible ); + var element = new HUD.Element( node.name, undefined, props.width, props.height, props.visible ); var i, keys, images; // Add custom properties to the element keys = Object.keys( drawProps ); From aae079f7a00db0e03125695c34325f38a50b8ec8 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 24 Feb 2015 15:18:27 -0500 Subject: [PATCH 16/25] Fixed HUD prototype test --- support/client/lib/vwf/model/hud.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index d57f62a6b..f41dd4590 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -162,7 +162,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili var foundOverlay = false; if ( prototypes ) { for ( var i = 0; i < prototypes.length && !foundOverlay; i++ ) { - foundOverlay = ( prototypes[i] == "http-vwf-example-com-hud-overlay-vwf" ); + foundOverlay = ( prototypes[i] == "http://vwf.example.com/hud/overlay.vwf" ); } } return foundOverlay; @@ -172,7 +172,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili var foundElement = false; if ( prototypes ) { for ( var i = 0; i < prototypes.length && !foundElement; i++ ) { - foundElement = ( prototypes[i] == "http-vwf-example-com-hud-element-vwf" ); + foundElement = ( prototypes[i] == "http://vwf.example.com/hud/element.vwf" ); } } return foundElement; From 8473079e848b88e95be9764eb5bb8667c3011e38 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Wed, 25 Feb 2015 16:17:19 -0500 Subject: [PATCH 17/25] Delete HUD components for renaming --- .../vwf.example.com/HUD/element.vwf.yaml | 20 ------------------- .../vwf.example.com/HUD/overlay.vwf.yaml | 8 -------- 2 files changed, 28 deletions(-) delete mode 100644 support/proxy/vwf.example.com/HUD/element.vwf.yaml delete mode 100644 support/proxy/vwf.example.com/HUD/overlay.vwf.yaml diff --git a/support/proxy/vwf.example.com/HUD/element.vwf.yaml b/support/proxy/vwf.example.com/HUD/element.vwf.yaml deleted file mode 100644 index 992d2d9dd..000000000 --- a/support/proxy/vwf.example.com/HUD/element.vwf.yaml +++ /dev/null @@ -1,20 +0,0 @@ -extends: http://vwf.example.com/node.vwf -properties: - images: - width: - height: - visible: - enabled: - alignH: - alignV: - offsetH: - offsetV: -methods: - draw: -events: - onClick: - onMouseDown: - onMouseUp: - onMouseMove: - onMouseOver: - onMouseOut: diff --git a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml b/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml deleted file mode 100644 index 6394ba501..000000000 --- a/support/proxy/vwf.example.com/HUD/overlay.vwf.yaml +++ /dev/null @@ -1,8 +0,0 @@ -extends: http://vwf.example.com/node.vwf -properties: - visible: true -methods: - elementPreDraw: - elementPostDraw: - globalPreDraw: - globalPostDraw: From 0b7471f6d3f4184516ce978fe4511aa0499ce733 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Wed, 25 Feb 2015 16:17:39 -0500 Subject: [PATCH 18/25] Add hud components with renamed directory --- .../vwf.example.com/hud/element.vwf.yaml | 20 +++++++++++++++++++ .../vwf.example.com/hud/overlay.vwf.yaml | 8 ++++++++ 2 files changed, 28 insertions(+) create mode 100644 support/proxy/vwf.example.com/hud/element.vwf.yaml create mode 100644 support/proxy/vwf.example.com/hud/overlay.vwf.yaml diff --git a/support/proxy/vwf.example.com/hud/element.vwf.yaml b/support/proxy/vwf.example.com/hud/element.vwf.yaml new file mode 100644 index 000000000..992d2d9dd --- /dev/null +++ b/support/proxy/vwf.example.com/hud/element.vwf.yaml @@ -0,0 +1,20 @@ +extends: http://vwf.example.com/node.vwf +properties: + images: + width: + height: + visible: + enabled: + alignH: + alignV: + offsetH: + offsetV: +methods: + draw: +events: + onClick: + onMouseDown: + onMouseUp: + onMouseMove: + onMouseOver: + onMouseOut: diff --git a/support/proxy/vwf.example.com/hud/overlay.vwf.yaml b/support/proxy/vwf.example.com/hud/overlay.vwf.yaml new file mode 100644 index 000000000..6394ba501 --- /dev/null +++ b/support/proxy/vwf.example.com/hud/overlay.vwf.yaml @@ -0,0 +1,8 @@ +extends: http://vwf.example.com/node.vwf +properties: + visible: true +methods: + elementPreDraw: + elementPostDraw: + globalPreDraw: + globalPostDraw: From 360abcea09d9a725f4f1e253a53405a0ac29e35b Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Fri, 27 Feb 2015 16:25:34 -0500 Subject: [PATCH 19/25] Add information to element events --- support/client/lib/vwf/view/hud.js | 36 +++++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 272b6d089..6d79b4870 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -164,22 +164,46 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( } // Add event listeners to the element element.onClick = function( event ) { - vwf_view.kernel.fireEvent( node.id, "onClick" ); + var elementMousePosition = { + "x": event.clientX - this.position.x, + "y": event.clientY - this.position.y + }; + vwf_view.kernel.fireEvent( node.id, "onClick", [ elementMousePosition ] ); }; element.onMouseDown = function( event ) { - vwf_view.kernel.fireEvent( node.id, "onMouseDown" ); + var elementMousePosition = { + "x": event.clientX - this.position.x, + "y": event.clientY - this.position.y + }; + vwf_view.kernel.fireEvent( node.id, "onMouseDown", [ elementMousePosition ] ); }; element.onMouseUp = function( event ) { - vwf_view.kernel.fireEvent( node.id, "onMouseUp" ); + var elementMousePosition = { + "x": event.clientX - this.position.x, + "y": event.clientY - this.position.y + }; + vwf_view.kernel.fireEvent( node.id, "onMouseUp", [ elementMousePosition ] ); }; element.onMouseMove = function( event ) { - vwf_view.kernel.fireEvent( node.id, "onMouseMove" ); + var elementMousePosition = { + "x": event.clientX - this.position.x, + "y": event.clientY - this.position.y + }; + vwf_view.kernel.fireEvent( node.id, "onMouseMove", [ elementMousePosition ] ); }; element.onMouseOver = function( event ) { - vwf_view.kernel.fireEvent( node.id, "onMouseOver" ); + var elementMousePosition = { + "x": event.clientX - this.position.x, + "y": event.clientY - this.position.y + }; + vwf_view.kernel.fireEvent( node.id, "onMouseOver", [ elementMousePosition ] ); }; element.onMouseOut = function( event ) { - vwf_view.kernel.fireEvent( node.id, "onMouseOut" ); + var elementMousePosition = { + "x": event.clientX - this.position.x, + "y": event.clientY - this.position.y + }; + vwf_view.kernel.fireEvent( node.id, "onMouseOut", [ elementMousePosition ] ); }; return element; } From 923dcbbb562c7cd6362d7d239e7774698fac2c93 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Mon, 9 Mar 2015 14:48:46 -0400 Subject: [PATCH 20/25] Allow images to be inserted at run time --- support/client/lib/vwf/view/hud.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 6d79b4870..fc1c42dd9 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -232,6 +232,9 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( oldImage = node.viewObject[ keys[ i ] ]; if ( newImageSrc && oldImage instanceof Image && newImageSrc !== oldImage.src ) { oldImage.src = newImageSrc; + } else if ( !oldImage ) { + var newImage = node.viewObject[ keys[ i ] ] = new Image(); + newImage.src = newImageSrc; } } } From acf78855fa313efaeb2a937dc3dec1070e14a141 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Sun, 2 Aug 2015 23:01:50 -0400 Subject: [PATCH 21/25] Allow entire HUD to be disabled --- support/client/lib/vwf/model/hud.js | 3 +++ support/client/lib/vwf/view/hud.js | 7 +++++-- support/client/lib/vwf/view/hud/hud.js | 4 +++- support/proxy/vwf.example.com/hud/overlay.vwf.yaml | 1 + 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index f41dd4590..b52a9e09b 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -31,6 +31,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili "properties": { "visible": undefined }, + "drawProperties" : {}, "elementPreDraw": undefined, "elementPostDraw": undefined, "globalPreDraw": undefined, @@ -86,6 +87,8 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili if ( node.properties.hasOwnProperty( propertyName ) ) { node.properties[ propertyName ] = propertyValue; value = propertyValue; + } else { + node.drawProperties[ propertyName ] = propertyValue; } } else if ( this.state.elements[ nodeID ] ) { node = this.state.elements[ nodeID ]; diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index fc1c42dd9..7f19297ca 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -58,8 +58,11 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( var value, node; if ( this.state.overlays[ nodeID ] ) { node = this.state.overlays[ nodeID ]; - if ( node.initialized && node.properties.hasOwnProperty( propertyName ) ) { - node.viewObject[ propertyName ] = propertyValue; + if ( node.initialized ) { + if ( node.properties.hasOwnProperty( propertyName ) || + node.drawProperties.hasOwnProperty( propertyName ) ) { + node.viewObject[ propertyName ] = propertyValue; + } } value = propertyValue; } else if ( this.state.elements[ nodeID ] ) { diff --git a/support/client/lib/vwf/view/hud/hud.js b/support/client/lib/vwf/view/hud/hud.js index fa9bb232a..d4603e4b6 100644 --- a/support/client/lib/vwf/view/hud/hud.js +++ b/support/client/lib/vwf/view/hud/hud.js @@ -13,6 +13,7 @@ define( function() { picks: undefined, canvas: undefined, visible: undefined, + enabled: undefined, defaultHandlers: undefined, initialize: function() { @@ -25,6 +26,7 @@ define( function() { this.canvas.id = "HUDCanvas"; gameCanvas.parentElement.appendChild( this.canvas ); this.visible = true; + this.enabled = true; this.update(); this.defaultHandlers = {}; this.registerEventListeners( gameCanvas ); @@ -230,7 +232,7 @@ define( function() { return; } - if ( topPick ) { + if ( this.enabled && topPick ) { if ( topPick.enabled ) { this.elements[ topPick.id ][ type ]( event ); } diff --git a/support/proxy/vwf.example.com/hud/overlay.vwf.yaml b/support/proxy/vwf.example.com/hud/overlay.vwf.yaml index 6394ba501..b752ad0d7 100644 --- a/support/proxy/vwf.example.com/hud/overlay.vwf.yaml +++ b/support/proxy/vwf.example.com/hud/overlay.vwf.yaml @@ -1,6 +1,7 @@ extends: http://vwf.example.com/node.vwf properties: visible: true + enabled: true methods: elementPreDraw: elementPostDraw: From 92b7c89af35af9030501d83e5eb53a862196adde Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Sun, 2 Aug 2015 23:30:53 -0400 Subject: [PATCH 22/25] Disable events when hud is disabled --- support/client/lib/vwf/model/hud.js | 3 +- support/client/lib/vwf/view/hud/hud.js | 52 ++++++++++++++------------ 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index b52a9e09b..91aa5b6c0 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -29,7 +29,8 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili "name": childName, "elements": {}, "properties": { - "visible": undefined + "visible": undefined, + "enabled": undefined }, "drawProperties" : {}, "elementPreDraw": undefined, diff --git a/support/client/lib/vwf/view/hud/hud.js b/support/client/lib/vwf/view/hud/hud.js index d4603e4b6..430aa4aa9 100644 --- a/support/client/lib/vwf/view/hud/hud.js +++ b/support/client/lib/vwf/view/hud/hud.js @@ -210,31 +210,35 @@ define( function() { }, handleEvent: function( event ) { - this.pick( event ); - var topPick = this.picks[ 0 ]; - var type; - - switch ( event.type ) { - case "click": - type = "onClick"; - break; - case "mouseup": - type = "onMouseUp"; - break; - case "mousedown": - type = "onMouseDown"; - break; - case "mousemove": - type = "onMouseMove"; - break; - default: - console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); - return; - } + if ( this.enabled ) { + this.pick( event ); + var topPick = this.picks[ 0 ]; + var type; + + switch ( event.type ) { + case "click": + type = "onClick"; + break; + case "mouseup": + type = "onMouseUp"; + break; + case "mousedown": + type = "onMouseDown"; + break; + case "mousemove": + type = "onMouseMove"; + break; + default: + console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); + return; + } - if ( this.enabled && topPick ) { - if ( topPick.enabled ) { - this.elements[ topPick.id ][ type ]( event ); + if ( topPick ) { + if ( topPick.enabled ) { + this.elements[ topPick.id ][ type ]( event ); + } + } else if ( this.defaultHandlers[ type ] instanceof Function ) { + this.defaultHandlers[ type ]( event ); } } else if ( this.defaultHandlers[ type ] instanceof Function ) { this.defaultHandlers[ type ]( event ); From 59a335cc65ee5ea4d3ed9154ff048802a22606a9 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 4 Aug 2015 18:08:50 -0400 Subject: [PATCH 23/25] Allow manual setting of hud element draw order --- support/client/lib/vwf/model/hud.js | 3 ++- support/client/lib/vwf/view/hud.js | 2 +- support/client/lib/vwf/view/hud/hud.js | 9 +++++++-- support/proxy/vwf.example.com/hud/element.vwf.yaml | 1 + 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index 91aa5b6c0..6ba76432c 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -53,7 +53,8 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili "alignH": undefined, "alignV": undefined, "offsetH": undefined, - "offsetV": undefined + "offsetV": undefined, + "drawOrder": undefined }, "drawProperties": {}, "initialized": false diff --git a/support/client/lib/vwf/view/hud.js b/support/client/lib/vwf/view/hud.js index 7f19297ca..3d15633de 100644 --- a/support/client/lib/vwf/view/hud.js +++ b/support/client/lib/vwf/view/hud.js @@ -142,7 +142,7 @@ define( [ "module", "vwf/model", "vwf/utility", "vwf/view/hud/hud" ], function( for ( var i = 0; i < keys.length; i++ ) { element = node.elements[ keys[ i ] ]; props = element.properties; - overlay.add( element.viewObject, props.alignH, props.alignV, props.offsetH, props.offsetV ); + overlay.add( element.viewObject, props.alignH, props.alignV, props.offsetH, props.offsetV, props.drawOrder ); } return overlay; } diff --git a/support/client/lib/vwf/view/hud/hud.js b/support/client/lib/vwf/view/hud/hud.js index 430aa4aa9..357f45ca2 100644 --- a/support/client/lib/vwf/view/hud/hud.js +++ b/support/client/lib/vwf/view/hud/hud.js @@ -96,7 +96,7 @@ define( function() { }, - add: function( element, alignH, alignV, offsetH, offsetV ) { + add: function( element, alignH, alignV, offsetH, offsetV, drawOrder ) { // Add the element to the HUD's elements list // Initialize the offset position @@ -134,7 +134,12 @@ define( function() { } this.countElements(); - newElement[ "drawOrder" ] = this.elementCount; + if ( isNaN( drawOrder ) ) { + newElement[ "drawOrder" ] = this.elementCount; + } else { + newElement[ "drawOrder" ] = drawOrder; + } + }, sortFunction: function( a, b ) { diff --git a/support/proxy/vwf.example.com/hud/element.vwf.yaml b/support/proxy/vwf.example.com/hud/element.vwf.yaml index 992d2d9dd..d9bd34392 100644 --- a/support/proxy/vwf.example.com/hud/element.vwf.yaml +++ b/support/proxy/vwf.example.com/hud/element.vwf.yaml @@ -9,6 +9,7 @@ properties: alignV: offsetH: offsetV: + drawOrder: methods: draw: events: From 9b318b966250d22108c4b7ab76ae16f4be3787b8 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Wed, 4 Nov 2015 17:40:08 -0500 Subject: [PATCH 24/25] Fix bug where disabling hud prevented mouse events on canvas --- support/client/lib/vwf/view/hud/hud.js | 38 ++++++++++++-------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/support/client/lib/vwf/view/hud/hud.js b/support/client/lib/vwf/view/hud/hud.js index 357f45ca2..627803675 100644 --- a/support/client/lib/vwf/view/hud/hud.js +++ b/support/client/lib/vwf/view/hud/hud.js @@ -215,29 +215,27 @@ define( function() { }, handleEvent: function( event ) { + var type; + switch ( event.type ) { + case "click": + type = "onClick"; + break; + case "mouseup": + type = "onMouseUp"; + break; + case "mousedown": + type = "onMouseDown"; + break; + case "mousemove": + type = "onMouseMove"; + break; + default: + console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); + return; + } if ( this.enabled ) { this.pick( event ); var topPick = this.picks[ 0 ]; - var type; - - switch ( event.type ) { - case "click": - type = "onClick"; - break; - case "mouseup": - type = "onMouseUp"; - break; - case "mousedown": - type = "onMouseDown"; - break; - case "mousemove": - type = "onMouseMove"; - break; - default: - console.log( "HUD.handleEvent - Unhandled event type: " + event.type ); - return; - } - if ( topPick ) { if ( topPick.enabled ) { this.elements[ topPick.id ][ type ]( event ); From 4a96b6077aeaba9ad3dfae5be0c8176e2959ad03 Mon Sep 17 00:00:00 2001 From: Brett Swift Date: Tue, 15 Dec 2015 17:03:51 -0500 Subject: [PATCH 25/25] Replicate David's kernel changes --- support/client/lib/vwf/model/hud.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/support/client/lib/vwf/model/hud.js b/support/client/lib/vwf/model/hud.js index 6ba76432c..2eeab935d 100644 --- a/support/client/lib/vwf/model/hud.js +++ b/support/client/lib/vwf/model/hud.js @@ -7,14 +7,8 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili return model.load( module, { initialize: function() { - var lastKernel; this.state.overlays = {}; this.state.elements = {}; - lastKernel = this.kernel; - while ( lastKernel.kernel ) { - lastKernel = lastKernel.kernel; - } - this.state.kernel = lastKernel; logger = this.logger; }, @@ -22,7 +16,7 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili childSource, childType, childIndex, childName, callback /* ( ready ) */ ) { var node; - var protos = getPrototypes.call( this, this.state.kernel, childExtendsID ); + var protos = this.kernel.prototypes( childID ); if ( protos && isOverlay( protos ) ) { node = this.state.overlays[ childID ] = { "id": childID, @@ -153,16 +147,6 @@ define( [ "module", "vwf/model", "vwf/utility" ], function( module, model, utili } ); - function getPrototypes( kernel, extendsID ) { - var prototypes = []; - var id = extendsID; - while ( id !== undefined ) { - prototypes.push( id ); - id = kernel.prototype( id ); - } - return prototypes; - } - function isOverlay( prototypes ) { var foundOverlay = false; if ( prototypes ) {