git @ Cat's Eye Technologies yoob.js / 36f7925
TextConsole completely dumb, onWriteChar() callback, TextTerminal. --HG-- rename : eg/text-console.html => eg/text-terminal.html rename : src/yoob/text-console.js => src/yoob/text-terminal.js catseye 12 years ago
4 changed file(s) with 112 addition(s) and 41 deletion(s). Raw diff Collapse all Expand all
+4
-10
eg/text-console.html less more
22 <meta charset="utf-8">
33 <title>yoob.TextConsole Demo</title>
44 <script src="../src/yoob/text-console.js"></script>
5 <script src="../src/yoob/line-input-buffer.js"></script>
65 </head>
76 <body>
87
2827 t.write("That's nice.");
2928 t.textColor = "green";
3029 t.backgroundColor = "black";
31 t.write(" Supercalifragilisticexpialadociousness!!!!!\n");
32 t.overStrike = true;
33 t.write("Whatever\b\b!!\n");
34 t.overStrike = false;
35 t.write("Whatever\b\b!!\n");
30 t.write(" Supercalifragilisticexpialadociousness!!!!!");
31 t.advanceRow();
32 t.write("What??");
33 t.advanceRow();
3634 z++;
3735 };
38 var ib = new yoob.LineInputBuffer();
39 ib.init(canvas, t, function(str) {
40 alert(str);
41 });
4236 canvas.focus();
4337 </script>
+29
-0
eg/text-terminal.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>yoob.TextTerminal Demo</title>
4 <script src="../src/yoob/text-console.js"></script>
5 <script src="../src/yoob/text-terminal.js"></script>
6 <script src="../src/yoob/line-input-buffer.js"></script>
7 </head>
8 <body>
9
10 <h1>yoob.TextTerminal Demo</h1>
11
12 <canvas id="canvas" width="400" height="400" tabindex="0">
13 Your browser doesn't support displaying an HTML5 canvas.
14 </canvas>
15
16 </body>
17 <script>
18 var canvas = document.getElementById('canvas');
19 var t = new yoob.TextTerminal();
20 var z = 0;
21 t.init(canvas, 20, 80, 25);
22 t.write("Focus me and\ntype something. Try backspacing.\n\n");
23 var ib = new yoob.LineInputBuffer();
24 ib.init(canvas, t, function(str) {
25 alert(str);
26 });
27 canvas.focus();
28 </script>
+59
-31
src/yoob/text-console.js less more
1919 * simulated screen (to the selected backgroundColor.) You can also set
2020 * or clear overStrike mode.
2121 *
22 * TODO:
23 * - make this completely dumb, with no control codes whatsoever, even
24 * newline. then make a text-terminal which inherits from it, but
25 * which knows about control codes.
26 * - add onDrawCharacter() callback, which can draw the character
27 * itself and return false, or return true to allow the console to
28 * draw it.
22 * Note, this console is completely "dumb": it does not understand any
23 * control codes whatsoever, not even newline. For a subclass of this
24 * which does understand (some) control codes, use text-terminal.js.
2925 */
3026 yoob.TextConsole = function() {
3127 this.canvas = undefined;
132128 };
133129
134130 /*
135 * Advance the cursor to the next line, scrolling the
131 * Advance the cursor to the next row, scrolling the
136132 * TextConsole display if necessary.
137133 */
138 this.advance = function() {
134 this.advanceRow = function() {
135 this._stopCursor();
139136 this.col = 0;
140137 this.row += 1;
141138 var ctx = this.canvas.getContext('2d');
150147 );
151148 this.row -= 1;
152149 }
153 };
154
155 /*
156 * Write a string to the TextConsole. Line feeds will cause a
157 * new line, and backspaces will move the cursor left if it is not
158 * already at the left edge.
150 this._startCursor();
151 };
152
153 /*
154 * Advance the cursor to the next column, advancing to the
155 * next row if necessary.
156 */
157 this.advanceCol = function() {
158 this._stopCursor();
159 this.col += 1;
160 if (this.col >= this.cols) {
161 this.advanceRow();
162 }
163 this._startCursor();
164 };
165
166 /*
167 * Called when a character is written to the console. This
168 * may be overridden by subclasses. If it returns false, the
169 * character is written with the default logic. If it returns
170 * true, it is not, and neither is the cursor advanced. (A
171 * subclass which overrides this may write the character and/or
172 * advance the cursor itself.
173 */
174 this.onWriteChar = function(character, ctx) {
175 return false;
176 };
177
178 /*
179 * Write a character to the console.
180 */
181 this.writeChar = function(c) {
182 // Inefficient!
183 var ctx = this.canvas.getContext('2d');
184 ctx.textBaseline = "top";
185 ctx.font = this.charHeight + "px monospace";
186 ctx.fillStyle = this.textColor;
187
188 if (this.onWriteChar(c))
189 return;
190 if (c >= ' ') { // && c != DEL ?
191 ctx.fillText(c, this.col * this.charWidth, this.row * this.charHeight);
192 this.advanceCol();
193 }
194 };
195
196 /*
197 * Write a string to the TextConsole. Control characters are not heeded.
159198 */
160199 this.write = function(string) {
161200 var i = 0;
165204 this._stopCursor();
166205 while (i < string.length) {
167206 var c = string.charAt(i);
168 if (c === '\n') {
169 this.advance();
170 } else if (c === '\b' && this.col > 0) {
171 this.col--;
172 } else if (c >= ' ') {
173 if (!this.overStrike) {
174 ctx.fillStyle = this.backgroundColor;
175 ctx.fillRect(this.col * this.charWidth, this.row * this.charHeight,
176 this.charWidth, this.charHeight);
177 }
178 ctx.fillStyle = this.textColor;
179 ctx.fillText(c, this.col * this.charWidth, this.row * this.charHeight);
180 this.col += 1;
181 if (this.col >= this.cols) {
182 this.advance();
183 }
207 if (!this.overStrike) {
208 ctx.fillStyle = this.backgroundColor;
209 ctx.fillRect(this.col * this.charWidth, this.row * this.charHeight,
210 this.charWidth, this.charHeight);
184211 }
212 this.writeChar(c);
185213 i++;
186214 };
187215 this._startCursor();
+20
-0
src/yoob/text-terminal.js less more
0 if (window.yoob === undefined) yoob = {};
1
2 /*
3 * A text-based terminal simulation in Javascript on an HTML5 canvas.
4 *
5 * This module requires text-console.js be included first.
6 */
7 yoob.TextTerminal = function() {
8 this.onWriteChar = function(c, ctx) {
9 if (c === '\n') {
10 this.advanceRow();
11 return true;
12 } else if (c === '\b' && this.col > 0) {
13 this.col--;
14 return true;
15 }
16 return false;
17 };
18 };
19 yoob.TextTerminal.prototype = new yoob.TextConsole();