115 lines
2.1 KiB
JavaScript
115 lines
2.1 KiB
JavaScript
|
/**
|
||
|
|
* @file AppPage.js
|
||
|
|
* @author frtk@tetalab
|
||
|
|
*/
|
||
|
|
|
||
|
|
NPGClient.AppPage = function(n) {
|
||
|
|
|
||
|
|
Object.defineProperty(this, 'id', { value: NPGClient.pageCount++ });
|
||
|
|
|
||
|
|
this.name = n || '';
|
||
|
|
// draw loop paramaters
|
||
|
|
this.loopIntervalId = 0;
|
||
|
|
this.loopDelay = 40;
|
||
|
|
// canvas
|
||
|
|
this.canvas_id = "";
|
||
|
|
this.canvas_bcol = "";
|
||
|
|
this.canvas = {};
|
||
|
|
this.ctx = {};
|
||
|
|
|
||
|
|
// ui elements
|
||
|
|
this.uiElems = [];
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
NPGClient.AppPage.prototype = {
|
||
|
|
|
||
|
|
constructor: NPGClient.AppPage,
|
||
|
|
|
||
|
|
//
|
||
|
|
setLoopDelay: function(d) {
|
||
|
|
this.loopDelay = d;
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
startDrawLoop: function() {
|
||
|
|
var self = this;
|
||
|
|
self.loopIntervalId = setInterval(function() {
|
||
|
|
self.run();
|
||
|
|
}, self.loopDelay);
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
stopDrawLoop: function() {
|
||
|
|
var self = this;
|
||
|
|
clearInterval(self.loopIntervalId);
|
||
|
|
self.loopIntervalId = 0;
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
run: function() {
|
||
|
|
var self = this;
|
||
|
|
self.drawUI();
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
configUI: function(id, w, h, c) {
|
||
|
|
var self = this;
|
||
|
|
self.canvas_id = id;
|
||
|
|
self.canvas = document.getElementById(id);
|
||
|
|
self.ctx = self.canvas.getContext("2d");
|
||
|
|
self.canvas.width = w;
|
||
|
|
self.canvas.height = h;
|
||
|
|
self.canvas_bcol = c;
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
addUIObject: function(c) {
|
||
|
|
var self = this;
|
||
|
|
self.uiElems.push(c);
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
getUIElemByName: function(name) {
|
||
|
|
var self = this;
|
||
|
|
if (self.uiElems.length > 0) {
|
||
|
|
for (var i = 0; i < self.uiElems.length; i++)
|
||
|
|
if (self.uiElems[i].name == name) return self.uiElems[i];
|
||
|
|
}
|
||
|
|
return undefined;
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
drawUI: function() {
|
||
|
|
var self = this;
|
||
|
|
self.clear();
|
||
|
|
self.drawUIBackground();
|
||
|
|
self.drawUIObjects();
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
drawUIBackground: function() {
|
||
|
|
var self = this;
|
||
|
|
self.ctx.fillStyle = self.canvas_bcol;
|
||
|
|
self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
drawUIObjects: function() {
|
||
|
|
var self = this;
|
||
|
|
if (self.uiElems.length > 0) {
|
||
|
|
for (var i = 0; i < self.uiElems.length; i++)
|
||
|
|
self.uiElems[i].draw(self.ctx);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
clear: function() {
|
||
|
|
var self = this;
|
||
|
|
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
};
|
||
|
|
|