控制台下的字符图像界面

tty_gui.js

// 输出流
var stream = process.stdout;
 
// 输出
var write = function (str) {
  stream.write(str);
};
 
// 生成ANSI escape sequences代码：http://en.wikipedia.org/wiki/ANSI_escape_code
var CSI = exports.CSI = function (str, c) {
  return '\x1b[' + str + c;
};
 
// 生成带颜色的文本
var color = exports.color = function (text, c, bgc) {
  if (isNaN(bgc)) bgc = 0;
  c = Number(c) + 30;
  bgc = Number(bgc) + 40;
  var ret = CSI(c + ';' + bgc, 'm') + text + CSI('37;40', 'm');
  return ret;
};
 
// 设置光标位置，位置从1开始
var setCursor = exports.setCursor = function (row, column) {
  write(CSI(row + ';' + column, 'H'));
};
 
// 清屏
var clear = function (bgcolor) {
  setCursor(1, 1);
  for (var i = 0; i < stream.rows; i++) {
    var line = '';
    for (var j = 0; j < stream.columns; j++) {
      line += ' ';
    }
    write(color(line, 0, bgcolor));
  }
};
 
// 画矩形
var DOUBLE_LINE = '══════════════════════════════════════════════════════════' +
                  '══════════════════════════════════════════';
var SPACE_LINE = '                                                           ' +
                 '                                         ';
var drawRect = function (top, left, width, height, bgcolor) {
  setCursor(top, left);
  var w = width / 2 - 2;
  var c = function (str) {
    return color(str, 0, 7);
  };
  write(c('╔') + c(DOUBLE_LINE.substr(0, w)) + c('╗'));
  for (var i = 1; i < height - 1; i++) {
    setCursor(top + i, left)
    write(c('‖') + color(SPACE_LINE.substr(0, w), 0, bgcolor) +
          color(SPACE_LINE.substr(0, w), 0, bgcolor) + c('‖'));
  }
  setCursor(top + height - 1, left);
  write(c('╚') + c(DOUBLE_LINE.substr(0, w)) + c('╝'));
  setCursor(top + 1, left + 2);
};
 
 
// -----------------------------------------------------------------------------
// --------------- 开始 --------------------------------------------------------
 
// 开始
clear(6);
// 要绘制的窗口宽度和高度
var w = 68;
var h = 7;
var t = (stream.rows - h) / 2;
var l = (stream.columns - w) / 2;
drawRect(t, l, w, h, 7);
 
// 更新时间
(function () {
  var randomColor = function () {
    var r = Math.round(Math.random() * 5);
    return r + 1;
  };
  var update = function () {
    setCursor(t + 2, (stream.columns - 48) / 2);
    write(color(new Date().toLocaleString() + '   ', randomColor(), 7));
  };
  update();
  setInterval(update, 1000);
})();
 
// 更新进度条
(function () {
  var randomSleep = function () {
    return Math.random() * 500;
  };
  var pos = 0;
  var top = t + 4;
  var left = l + 10;
  var update = function () {
    if (pos >= 25) {
      // 清除旧的进度条
      pos = 0;
      setCursor(top, left);
      for (var i = 0; i < 25; i++) {
        write(color('  ', 0, 7));
      }
    }
    // 绘制当前进度
    setCursor(top, left + pos * 2);
    write(color('█', 3, 7));
    // 进度百分比
    setCursor(top, left - 4);
    write(color((pos * 4) + '%', 0, 7));
    pos++;
    setTimeout(update, randomSleep());
  };
  update();
})();
 
// 更新转动图标
(function () {
  var pos = 0;
  var offsetLeft = stream.columns / 2 - 2;
  var offsetTop = 4;
  var update = function () {
    pos++;
    if (pos > 4) pos = 1;
    var show = function (top, left) {
      for (var i = 0; i < 3; i++) {
        setCursor(offsetTop + i + 1, 1 + offsetLeft);
        write(color('      ', 1, 6));
      }
      setCursor(offsetTop + top, left + offsetLeft);
      write(color('●', 1, 6));
    };
    switch (pos) {
      case 1:
        show(1, 3);
        break;
      case 2:
        show(2, 5);
        break;
      case 3:
        show(3, 3);
        break;
      case 4:
        show(2, 1);
        break;
    }
  };
  setInterval(update, 200);
})();

cool