Port UI across to blessed rather than doing it manually

amilajack · Jun 7, 2014 · 765ba4d · 765ba4d
1 parent 0ace748
commit 765ba4d
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 39 deletions.
diff --git a/app.js b/app.js
@@ -16,6 +16,12 @@ var App = function() {
 	// Load in required libs
 	var canvas = require('drawille');
 	var windowSize = require('window-size');
+	var blessed = require('blessed');
+	var program = blessed.program();
+	/**
+	 * Instance of blessed screen
+	 */
+	var screen;
 
 	// Private variables
 	var position = 0;
@@ -31,6 +37,11 @@ var App = function() {
 		}
 	};
 
+	// @todo: move this into charts array
+	// This is an instance of Blessed Box
+	var graph;
+	var graph2;
+
 	// Private functions
 
 	/**
@@ -39,11 +50,36 @@ var App = function() {
 	 * @param  {string} right This is the text for the right
 	 * @return {void}
 	 */
-	var drawHeader = function(left, right) {
-		var output = left;
-		output += stringRepeat(' ', size.character.width - (left.length + right.length));
-		output += right;
-		console.log(output);
+	var drawHeader = function() {
+		var header = blessed.text({
+			top: 'top',
+			left: 'left',
+			width: '50%',
+			height: '1',
+			fg: '#a537fd',
+			content: '{bold}vtop{/bold} {white-fg} - http://parall.ax/vtop{/white-fg}',
+			tags: true
+		});
+		var date = blessed.text({
+			top: 'top',
+			left: '50%',
+			width: '50%',
+			height: '1',
+			align: 'right',
+			content: '',
+			tags: true
+		});
+		screen.append(header);
+		screen.append(date);
+
+		var updateTime = function() {
+			var time = new Date();
+			date.setContent(time.getHours() + ':' + ('0' + time.getMinutes()).slice(-2) + ':' + ('0' + time.getSeconds()).slice(-2));
+			screen.render();
+		};
+
+		updateTime();
+		setInterval(updateTime, 1000);
 	};
 
 
@@ -63,31 +99,33 @@ var App = function() {
 		var c = chart.chart;
 		c.clear();
 
-		for (y = 0; y < size.pixel.height; y ++) {
-			c.set(0, y);
-			c.set(size.pixel.width - 1, y);
-		}
+		// for (y = 0; y < size.pixel.height; y ++) {
+		// 	c.set(0, y);
+		// 	c.set(size.pixel.width - 1, y);
+		// }
 
-		for (x = 0; x < size.pixel.width; x ++) {
-			c.set(x, 0);
-			c.set(x, size.pixel.height - 1);
-		}
+		// for (x = 0; x < size.pixel.width; x ++) {
+		// 	c.set(x, 0);
+		// 	c.set(x, size.pixel.height - 1);
+		// }
 
-		charts[chartKey].values[position] = size.pixel.height - Math.floor((size.pixel.height / 100) * charts[chartKey].plugin.currentValue) - 1;
+		charts[chartKey].values[position] = chart.height - Math.floor((chart.height / 100) * charts[chartKey].plugin.currentValue) - 1;
 
 		for (var pos in charts[chartKey].values) {
-			var p2 = parseInt(pos, 10) + (size.pixel.width - charts[chartKey].values.length);
-			if (p2 < 1 || charts[chartKey].values[pos] < 0) {
-				continue;
+			var p2 = parseInt(pos, 10) + (chart.width - charts[chartKey].values.length);
+			if (p2 > 1 && charts[chartKey].values[pos] > 0) {
+				c.set(p2, charts[chartKey].values[pos]);			
 			}
-			c.set(p2, charts[chartKey].values[pos]);
-			for (var y = charts[chartKey].values[pos]; y < size.pixel.height; y ++) {
-				c.set(p2, y);
+
+			for (var y = charts[chartKey].values[pos]; y < chart.height; y ++) {
+				if (p2 > 1 && y > 1) {
+					c.set(p2, y);
+				}
 			}
 		}
 
-		drawHeader(chart.plugin.title, chart.plugin.currentValue + '%');
-		console.log(c.frame());
+		//drawHeader(chart.plugin.title, chart.plugin.currentValue + '%');
+		return c.frame();
 	};
 
 	/**
@@ -97,14 +135,12 @@ var App = function() {
 	var draw = function() {
 		position ++;
 
-		for (var i = 0; i < 5; i ++) {
-			console.log('');
-		}
-		console.log('vtop');
-
 		var chartKey = 0;
-		drawChart(chartKey);
-		drawChart(chartKey + 1);
+		graph.setContent(drawChart(chartKey));
+
+		screen.render();
+
+		graph2.setContent(drawChart(chartKey + 1));
 
 		for (var plugin in charts) {
 			charts[plugin].plugin.poll();
@@ -115,22 +151,121 @@ var App = function() {
 	return {
 
 		init: function() {
-			size.character.width = windowSize.width;
-			size.character.height = windowSize.height;
+
+			// Create a screen object.
+			screen = blessed.screen();
+
+			// configure 'q' and 'escape' for quit
+			screen.on('keypress', function(ch, key) {
+				if (key.name === 'q' || key.name === 'escape') {
+					return process.exit(0);
+				}
+			});
+
+			drawHeader();
+
+			graph = blessed.box({
+				top: 1,
+				left: 'left',
+				width: '100%',
+				height: '50%',
+				content: 'test',
+				label: ' CPU Usage ',
+				fg: '#a537fd',
+				border: {
+					type: 'line',
+					fg: '#00ebbe'
+				}
+			});
+
+			screen.append(graph);
+
+			var graph2appended = false;
+
+			var createBottom = function() {
+				if (graph2appended) {
+					screen.remove(graph2);
+					screen.remove(processList)
+				}
+				graph2appended = true;
+				graph2 = blessed.box({
+					top: graph.bottom + 1,
+					left: 'left',
+					width: '50%',
+					height: '50%',
+					content: 'test',
+					label: ' Memory ',
+					fg: '#a537fd',
+					border: {
+						type: 'line',
+						fg: '#00ebbe'
+					}
+				});
+				screen.append(graph2);
+
+
+				processList = blessed.list({
+					top: graph.bottom + 1,
+					left: '50%',
+					width: '50%',
+					height: '50%',
+					label: ' Process List ',
+					keys: true,
+					mouse: true,
+					selectedBg: 'white',
+					selectedFg: 'black',
+					border: {
+						type: 'line',
+						fg: '#00ebbe'
+					},
+					items: ['one', 'two', 'three']
+				});
+				screen.append(processList);
+			};
+
+			screen.on('resize', function() {
+				createBottom();
+			});
+			createBottom();
+
+			screen.append(graph);
+			screen.append(processList);
+
+			// Render the screen.
+			screen.render();
+
+			// @todo: Change to height of box in blessed
+			size.character.width = windowSize.width - 2;
+			size.character.height = windowSize.height + 4;
 
 			// @todo: Fix these drunken magic numbers
-			size.pixel.width = Math.floor(size.character.width / 2) * 4;
-			size.pixel.height = Math.floor((size.character.height) / 16) * 36;
+			size.pixel.width = (graph.width - 2) * 2;
+			size.pixel.height = (graph.height - 2) * 4;
 
 			var plugins = ['cpu', 'memory'];
 
 			for (var plugin in plugins) {
+				var width, height;
+				// @todo Refactor this
+				if (plugins[plugin] == 'cpu') {
+					width = (graph.width - 2) * 2;
+					height = (graph.height - 2) * 4;
+				}
+				if (plugins[plugin] == 'memory') {
+					width = (graph2.width - 3) * 2;
+					height = ((graph2.height - 2) * 4);
+				}
+
 				charts[plugin] = {
-					chart: new canvas(size.pixel.width, size.pixel.height),
+					chart: new canvas(width, height),
 					values: [],
-					plugin: require('./sensors/' + plugins[plugin] + '.js')
+					plugin: require('./sensors/' + plugins[plugin] + '.js'),
+					width: width,
+					height: height 
 				};
 				charts[plugin].plugin.poll();
+
+
 			}
 
 			setInterval(draw, 100);

diff --git a/bin/vtop.js b/bin/vtop.js
@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../run.js');
+require('../app.js');
diff --git a/blessed.js b/blessed.js
@@ -49,9 +49,10 @@ screen.append(graph);
 var graph2;
 var graph2appended = false;
 
-var createGraphs = function() {
+var createBottom = function() {
 	if (graph2appended) {
 		screen.remove(graph2);
+		screen.remove(processList)
 	}
 	graph2appended = true;
 	graph2 = blessed.box({
@@ -68,14 +69,33 @@ var createGraphs = function() {
 	});
 	screen.append(graph2);
 
+
+	processList = blessed.list({
+		top: graph.bottom + 1,
+		left: '50%',
+		width: '50%',
+		height: '50%',
+		label: ' Process List ',
+		keys: true,
+		mouse: true,
+		selectedBg: 'white',
+		selectedFg: 'black',
+		border: {
+			type: 'line',
+			fg: '#00ebbe'
+		},
+		items: ['one', 'two', 'three']
+	});
+	screen.append(processList);
 };
 
 screen.on('resize', function() {
-	createGraphs();
+	createBottom();
 });
-createGraphs();
+createBottom();
 
 screen.append(graph);
+screen.append(processList);
 
 
 var updateTime = function() {