version v0.1.1

client/lib/ui/objects/ui_label.js

@@ -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);  
+  }
+
+};
+

client/lib/ui/objects/ui_line.js

@@ -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();
+
+};
+

client/lib/ui/objects/ui_object.js

@@ -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;
+	}
+    }
+    
+};
+

client/lib/ui/objects/ui_point2d.js

@@ -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;
+  }
+  
+
+};
+

client/lib/ui/objects/ui_rect.js

@@ -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();
+  },
+
+};
+

client/lib/ui/objects/ui_style.js

@@ -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;
+    }	
+  }
+    
+};
+

client/lib/ui/ui.js

@@ -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); 
+  },
+
+    
+};
+