@ -0,0 +1,48 @@ | |||
/** | |||
* @file page_handler.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.PageHandler = { | |||
currPage: '', | |||
pages: [], | |||
// | |||
setup: function() { | |||
var self = this; | |||
self.currPage = 'login'; | |||
// create login page | |||
self.createLoginPage(); | |||
}, | |||
// | |||
getCurrPageUIElems: function() { | |||
var self = this; | |||
return self.getPageByName(self.currPage).getUIElems(); | |||
}, | |||
// | |||
getPageByName: function(name) { | |||
var self = this; | |||
if (self.pages.length > 0) { | |||
for (var i = 0; i < self.pages.length; i++) { | |||
if (name == self.pages[i].name) return self.pages[i]; | |||
} | |||
} | |||
return undefined; | |||
}, | |||
// create login page | |||
createLoginPage: function() { | |||
// | |||
var self = this; | |||
var p = new NPGClient.AppPage('login'); | |||
// Title label | |||
p.addUIObject(new NPGClient.UILabel('login', NPGClient.LABELS.TITLE)); | |||
self.pages.push(p); | |||
}, | |||
}; | |||
@ -0,0 +1,40 @@ | |||
/** | |||
* @file ui_label.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.UILabel = function(n, o) { | |||
// obj name | |||
this.name = n !== undefined ? n : ''; | |||
// bkg rect | |||
//this.bkg = r !== undefined ? r : new NPGClient.UIRect(); | |||
// pos | |||
this.x = o.x !== undefined ? o.x : 0; | |||
this.y = o.y !== undefined ? o.y : 0; | |||
// text | |||
this.text = o.text !== undefined ? o.text : ''; | |||
// font | |||
this.font = o.f !== undefined ? o.f : ''; | |||
// color | |||
this.col = o.c !== undefined ? o.c : ''; | |||
}; | |||
NPGClient.UILabel.prototype = { | |||
// Constructor | |||
constructor: NPGClient.UILabel, | |||
// | |||
draw: function(ctx) { | |||
var self = this; | |||
//self.rect.draw(ctx); | |||
ctx.font = self.font | |||
ctx.fillStyle = self.col; | |||
ctx.fillText(self.text, self.x, self.y); | |||
} | |||
}; | |||
@ -0,0 +1,35 @@ | |||
/** | |||
* @file ui_line.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.Line = function(name, p1, p2, style) { | |||
NPGClient.UIObject.call(this, name, style); | |||
this.p1 = p1 !== undefined ? p1 : new NPGClient.Point2D(); | |||
this.p2 = p2 !== undefined ? p2 : new NPGClient.Point2D(); | |||
}; | |||
NPGClient.Line.prototype = Object.create(NPGClient.UIObject.prototype); | |||
NPGClient.Line.prototype.constructor = NPGClient.Line; | |||
NPGCLient.Line.prototype.draw = function(ctx) { | |||
var self = this; | |||
self.drawLine(ctx); | |||
}; | |||
NPGClient.Line.prototype.drawLine = function(ctx) { | |||
var self = this; | |||
self.applyStyle(ctx); | |||
ctx.beginPath(); | |||
ctx.moveTo(self.p1.x, self.p1.y); | |||
ctx.lineTo(self.p2.x, self.p2.y); | |||
ctx.stroke(); | |||
}; | |||
@ -0,0 +1,45 @@ | |||
/** | |||
* @file ui_object | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.UIObject = function(name, style) { | |||
//Object.defineProperty( this, 'id', { value: GT4UI.Object2DIdCount++ }); | |||
this.name = name !== undefined ? name : ''; | |||
this.style = style !== undefined ? style : new NPGClient.UIStyle(); | |||
}; | |||
NPGClient.UIObject.prototype = { | |||
constructor: NPGClient.UIObject, | |||
setStyle: function(s) { | |||
this.style = s; | |||
}, | |||
hasBorders: function() { | |||
return this.style.getBorderMode(); | |||
}, | |||
hasFillStyle: function() { | |||
return this.style.getFillMode(); | |||
}, | |||
applyStyle: function(ctx) { | |||
var self = this; | |||
if (self.style.getBorderMode()) { | |||
ctx.lineWidth = self.style.bw; | |||
ctx.strokeStyle = self.style.bc; | |||
} | |||
if (self.style.getFillMode()) { | |||
ctx.fillStyle = self.style.fc; | |||
} | |||
} | |||
}; | |||
@ -0,0 +1,37 @@ | |||
/** | |||
* @file ui_point2d.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.UIPoint2D = function(x, y) { | |||
// (x,y) position | |||
this.x = x !== undefined ? x : 0; | |||
this.y = y !== undefined ? y : 0; | |||
}; | |||
NPGClient.UIPoint2D.prototype = { | |||
// Constructor | |||
constructor: NPGClient.UIPoint2D, | |||
// | |||
set: function(x, y) { | |||
this.x = x; | |||
this.y = y; | |||
}, | |||
// | |||
setX: function(x) { | |||
this.x = x; | |||
}, | |||
// | |||
setY: function(y) { | |||
this.y = y; | |||
} | |||
}; | |||
@ -0,0 +1,54 @@ | |||
/** | |||
* @file ui_rect.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.UIRect = function(n, p, w, h, s) { | |||
// obj name | |||
this.name = n !== undefined ? n : ''; | |||
// geom | |||
this.pos = p !== undefined ? p : new NPGClient.UIPoint2D(); | |||
this.w = w !== undefined ? w : 0; | |||
this.h = h !== undefined ? h : 0; | |||
// style | |||
this.style = s !== undefined ? s : new NPGclient.UIStyle(); | |||
}; | |||
NPGClient.UIRect.prototype = { | |||
// Constructor | |||
constructor: NPGClient.UIRect, | |||
// | |||
// | |||
draw: function(ctx) { | |||
var self = this; | |||
if (!self.s.fillMode()) { | |||
drawNoFill(ctx, self.x, self.y, self.w, self.h, self.lw, self.lc); | |||
} else { | |||
drawFill(ctx, self.x, self.y, self.w, self.h, self.fc); | |||
} | |||
}, | |||
// | |||
drawFill: function(ctx) { | |||
var self = this; | |||
self.applyStyle(ctx); | |||
ctx.fillRect(self.pos.x, self.pos.y, self.w, self.h); | |||
}, | |||
// | |||
drawNoFill: function(ctx, x1, y1, w, h, lw, c) { | |||
var self = this; | |||
ctx.beginPath(); | |||
self.applyStyle(ctx); | |||
ctx.rect(self.pos.x, self.pos.y, self.w, self.h); | |||
ctx.stroke(); | |||
}, | |||
}; | |||
@ -0,0 +1,51 @@ | |||
/** | |||
* @file ui_style.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.UIStyle = function(fm, fc, bm, bw, bc) { | |||
this.fm = fm !== undefined ? fm : false; | |||
this.fc = fc !== undefined ? fc : ''; | |||
this.bm = bm !== undefined ? bm : false; | |||
this.bw = bw !== undefined ? bw : 0; | |||
this.bc = bc !== undefined ? bc : ''; | |||
}; | |||
NPGClient.UIStyle.prototype = { | |||
constructor: NPGClient.UIStyle, | |||
borderMode: function() { | |||
return this.bm; | |||
}, | |||
fillMode: function() { | |||
return this.fm; | |||
}, | |||
setBorders: function(m, w, c) { | |||
this.bm = m; | |||
this.bw = w; | |||
this.bc = c; | |||
}, | |||
setFillStyle: function(m, c) { | |||
this.fm = m; | |||
this.fc = c; | |||
}, | |||
applyStyle: function(ctx) { | |||
var self = this; | |||
// fill style | |||
if (fm == true) ctx.fillStyle = self.fc; | |||
// border mode | |||
if (bm == true) { | |||
ctx.lineWidth = bw; | |||
ctx.strokeStyle = bc; | |||
} | |||
} | |||
}; | |||
@ -0,0 +1,101 @@ | |||
/** | |||
* @file ui.js | |||
* @author frtk@tetalab | |||
*/ | |||
NPGClient.ui = { | |||
// canvas | |||
canvas_id: '', | |||
canvas_bcol: '', | |||
canvas: {}, | |||
ctx: {}, | |||
// draw loop paramaters | |||
loopIntervalId: 0, | |||
loopDelay: 40, | |||
/* | |||
* init | |||
*/ | |||
// | |||
setupUI: 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; | |||
// start draw loop | |||
self.startDrawLoop(); | |||
}, | |||
/* | |||
* Draw loop | |||
*/ | |||
// | |||
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.drawPage(); | |||
}, | |||
/* | |||
* Draw functions | |||
*/ | |||
// | |||
drawPage: 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; | |||
var elems = NPGClient.PageHandler.getCurrPageUIElems(); | |||
if (elems !== undefined && elems.length > 0) { | |||
for (var i = 0; i < elems.length; i++) elems[i].draw(self.ctx); | |||
} | |||
}, | |||
// | |||
clear: function() { | |||
var self = this; | |||
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height); | |||
}, | |||
}; | |||