MUOS Node GUI Prototype

A prototype for interfacing with regions, networks, terminals, and their interrelations.

by Nick Iaconis

HTML

<canvas id="canvas1" width="600" height="310"></canvas>
<div style="float:left; padding-left:1em;">
    <span style="color:lightskyblue;">Regions</span>
    <br />
    <span style="color:orange;">Networks (Alt + double-click)</span>
    <br />
    <span style="color:#aaaaaa;">Terminals (Ctrl + double-click)</span>
    <br />
    Left-click + drag to move nodes.
    <br />
    Right-click + drag to link/unlink nodes.
</div>

CSS

canvas {
    border: 1px solid black;
    float: left;
}

JavaScript

// These websites were invaluable in getting this working:
// http://simonsarris.com/blog/510-making-html5-canvas-useful
// http://phrogz.net/JS/classes/OOPinJS2.html

// Setup JS inheritance
Function.prototype.inheritsFrom = function( parentClassOrObject ) {
  if (parentClassOrObject.constructor == Function) {
    // normal inheritance
	this.prototype = new parentClassOrObject;
	this.prototype.constructor = this;
	this.prototype._super = parentClassOrObject.prototype;
  } else {
    // pure virtual inheritance (broken)
	this.prototype = parentClassOrObject;
	this.prototype.constructor = this;
	this.prototype._super = parentClassOrObject;
  }
  return this;
};

// Node holds properties and methods common to all Node objects.
function Node() {
  // Width and height properties
  this.w = 40;
  this.h = 40;
};
// Draws this node to a given context
Node.prototype.draw = function(ctx) {
  ctx.fillStyle = this.fill;
  ctx.fillRect(this.x, this.y, this.w, this.h);
};
// Determine if a point is inside the node's bounds
Node.prototype.contains = function(mx, my) {
  // All we have to do is make sure the Mouse X,Y fall in the area between
  // the node's X and (X + Height) and its Y and (Y + Height)
  return  (this.x <= mx) && (this.x + this.w >= mx) &&
          (this.y <= my) && (this.y + this.h >= my);
};
// Query node type
Node.prototype.type = function() {
  return this.constructor.name;
}

// Constructor for Terminal objects to hold data for all drawn objects.
// For now they will just be defined as rectangles.
function Terminal(x, y) {
  // This is a very simple and unsafe constructor. All we're doing is checking if the values exist.
  // "x || 0" just means "if there is a value for x, use that. Otherwise use 0."
  this.x = x || 0;
  this.y = y || 0;
  this.fill = '#AAAAAA';
  this.network = null;
  this.region = null;
}
// Terminal objects inherit from Node
Terminal.inheritsFrom(Node);
// Link/unlink a Network
Terminal.prototype.updateNetwork =...