We Keep Coding

How to parse cursor ANSI escape codes?

I'm writing code for processing ANSI escape codes for cursor for jQuery Terminal. but have problems, not sure how it should work, I've got weird results.
I'm testing with ervy library.
and using this code:
function scatter_plot() {
const scatterData = [];
for (let i = 1; i < 17; i++) {
i < 6 ? scatterData.push({ key: 'A', value: [i, i], style: ervy.fg('red', '*') })
: scatterData.push({ key: 'A', value: [i, 6], style: ervy.fg('red', '*') });
}
scatterData.push({ key: 'B', value: [2, 6], style: ervy.fg('blue', '# '), side: 2 });
scatterData.push({ key: 'C', value: [0, 0], style: ervy.bg('cyan', 2) });
var plot = ervy.scatter(scatterData, { legendGap: 18, width: 15 });
// same as Linux XTERM where 0 code is interpreted as 1.
var formatting = $.terminal.from_ansi(plot.replace(/\x1b\[0([A-D])/g, '\x1b[1$1'));
return formatting;
}
$.terminal.defaults.formatters = [];
var term = $('body').terminal();
term.echo(scatter_plot());
it should look like in Linux Xterm:
But it looks like this, see codepen demo
While I was writing the question changing few +1 and -1 (see processing A-F ANSI escapes in the code) when moving cursor give this result (code snippet have latest code).
First line got overwritten by spaces and whole plot is one to top and one to right (except 0,0 cyan dot that should be below " |" and 2 characters wide, so you should see right half of it, this one is correct but the rest is not)
this is my new code for processing cursor, I'm doing this just before processing colors, so the code is not that complex.
// -------------------------------------------------------------------------------
var ansi_re = /(\x1B\[[0-9;]*[A-Za-z])/g;
var cursor_re = /(.*)\r?\n\x1b\[1A\x1b\[([0-9]+)C/;
var move_cursor_split = /(\x1b\[[0-9]+[A-G])/g;
var move_cursor_match = /^\x1b\[([0-9]+)([A-G])/;
// -------------------------------------------------------------------------------
function parse_ansi_cursor(input) {
/*
(function(log) {
console.log = function(...args) {
if (true || cursor.y === 11) {
return log.apply(console, args);
}
};
})(console.log);
*/
function length(text) {
return text.replace(ansi_re, '').length;
}
function get_index(text, x) {
var splitted = text.split(ansi_re);
var format = 0;
var count = 0;
var prev_count = 0;
for (var i = 0; i < splitted.length; i++) {
var string = splitted[i];
if (string) {
if (string.match(ansi_re)) {
format += string.length;
} else {
count += string.length;
if (count >= x) {
var rest = x - prev_count;
return format + rest;
}
prev_count = count;
}
}
}
return i;
}
// ansi aware substring, it just and add removed ansi escapes
// at the beginning we don't care if the were disabled with 0m
function substring(text, start, end) {
var result = text.substring(start, end);
if (start === 0 || !text.match(ansi_re)) {
return result;
}
var before = text.substring(0, start);
var match = before.match(ansi_re);
if (match) {
return before.match(ansi_re).join('') + result;
}
return result;
}
// insert text at cursor position
// result is array of splitted arrays that form single line
function insert(text) {
if (!text) {
return;
}
if (!result[cursor.y]) {
result[cursor.y] = [];
}
var index = 0;
var sum = 0;
var len, after;
function inject() {
index++;
if (result[cursor.y][index]) {
result[cursor.y].splice(index, 0, null);
}
}
if (cursor.y === 11) {
//debugger;
}
if (text == "[46m [0m") {
//debugger;
}
console.log({...cursor, text});
if (cursor.x === 0 && result[cursor.y][index]) {
source = result[cursor.y][0];
len = length(text);
var i = get_index(source, len);
if (length(source) < len) {
after = result[cursor.y][index + 1];
if (after) {
i = get_index(after, len - length(source));
after = substring(after, i);
result[cursor.y].splice(index, 2, null, after);
} else {
result[cursor.y].splice(index, 1, null);
}
} else {
after = substring(source, i);
result[cursor.y].splice(index, 1, null, after);
}
} else {
var limit = 100000; // infite loop guard
var prev_sum = 0;
// find in which substring to insert the text
while (index < cursor.x) {
if (!limit--) {
warn('[WARN] To many loops');
break;
}
var source = result[cursor.y][index];
if (!source) {
result[cursor.y].push(new Array(cursor.x - prev_sum).join(' '));
index++;
break;
}
if (sum === cursor.x) {
inject();
break;
}
len = length(source);
prev_sum = sum;
sum += len;
if (sum === cursor.x) {
inject();
break;
}
if (sum > cursor.x) {
var pivot = get_index(source, cursor.x - prev_sum);
var before = substring(source, 0, pivot);
var end = get_index(source, length(text));
after = substring(source, pivot + end);
if (!after.length) {
result[cursor.y].splice(index, 1, before);
} else {
result[cursor.y].splice(index, 1, before, null, after);
}
index++;
break;
} else {
index++;
}
}
}
cursor.x += length(text);
result[cursor.y][index] = text;
}
if (input.match(move_cursor_split)) {
var lines = input.split('\n').filter(Boolean);
var cursor = {x: 0, y: -1};
var result = [];
for (var i = 0; i < lines.length; ++i) {
console.log('-------------------------------------------------');
var string = lines[i];
cursor.x = 0;
cursor.y++;
var splitted = string.split(move_cursor_split).filter(Boolean);
for (var j = 0; j < splitted.length; ++j) {
var part = splitted[j];
console.log(part);
var match = part.match(move_cursor_match);
if (match) {
var ansi_code = match[2];
var value = +match[1];
console.log({code: ansi_code, value, ...cursor});
if (value === 0) {
continue;
}
switch (ansi_code) {
case 'A': // UP
cursor.y -= value;
break;
case 'B': // Down
cursor.y += value - 1;
break;
case 'C': // forward
cursor.x += value + 1;
break;
case 'D': // Back
cursor.x -= value + 1;
break;
case 'E': // Cursor Next Line
cursor.x = 0;
cursor.y += value - 1;
break;
case 'F': // Cursor Previous Line
cursor.x = 0;
cursor.y -= value + 1;
break;
}
if (cursor.x < 0) {
cursor.x = 0;
}
if (cursor.y < 0) {
cursor.y = 0;
}
} else {
insert(part);
}
}
}
return result.map(function(line) {
return line.join('');
}).join('\n');
}
return input;
}
The result = []; in code is array of lines where single line may be split into multiple sub strings when inserting the text at cursor, maybe the code would be simpler if they would be array of strings. Right now I want only fix the cursor position.
Here is the codepen demo with from_ansi function embeded (inside there is parse_ansi_cursor that is problematic). Sorry there is lot of code, but parsing ANSI escape codes is not simple.
What I'm not sure how should work is moving the cursor (right now it have + 1 or - 1, I'm not sure about this) I'm also not sure if I should increase cursor.y before each line. I'm not 100% sure how this should work. I've looked into Linux Xterm code but didn't found a clues. Looked at Xterm.js but the ervy plot is completely broken for those scatter plot.
my from_ansi function had original code that was processing some ANSI cursor codes like this one:
input = input.replace(/\x1b\[([0-9]+)C/g, function(_, num) {
return new Array(+num + 1).join(' ');
});
only C, forward just add blanks, it was working for ANSI art but not work with ervy scatter plot.
I think it's not too broad, it's just question about moving cursor and processing newlines using ANSI escape codes. Also it's suppose to be simple case, cursor should move only inside single string not outside like in real terminal (ervy plot output ANSI escape codes like that).
I'm fine with answers that explain how to process the string and how to move the cursor that will work, but if you can provide fixes to the code I would be great. I prefer fixes to my code now whole new implementation unless is much simpler and it's a function parse_ansi_cursor(input) and work the same with rest of the code but with fixed cursor movement.
EDIT:
I've found that my input.split('\n').filter(Boolean) was wrong it should be:
var lines = input.split('\n');
if (input.match(/^\n/)) {
lines.shift();
}
if (input.match(/\n$/)) {
lines.pop();
}
and it seems that some old spec for ANSI escapes say that 0 is not zero but placeholder for default which is 1. That was removed from spec but Xterm is still using this. So I've added this line for parsing code, if there is 0A or A got value 1.
var value = match[1].match(/^0?$/) ? 1 : +match[1];
the plot looks better, but there are still issues with the cursor. (I think it's cursor - I'm not 100% sure).
I've changed the +1/-1 again now it's closer (Almost the same as in XTerm). Buss still there's need to be bug in my code.
EDIT:
afer answer by #jerch I've tried to use node ansi parser, have the same issue don't know how to process the cursor:
var cursor = {x:0,y:0};
result = [];
var terminal = {
inst_p: function(s) {
var line = result[cursor.y];
if (!line) {
result[cursor.y] = s;
} else if (cursor.x === 0) {
result[cursor.y] = s + line.substring(s.length);
} else if (line.length < cursor.x) {
var len = cursor.x - (line.length - 1);
result[cursor.y] += new Array(len).join(' ') + s;
} else if (line.length === cursor.x) {
result[cursor.y] += s;
} else {
var before = line.substring(0, cursor.x);
var after = line.substring(cursor.x + s.length);
result[cursor.y] = before + s + after;
}
cursor.x += s.length;
console.log({s, ...cursor, line: result[cursor.y]});
},
inst_o: function(s) {console.log('osc', s);},
inst_x: function(flag) {
var code = flag.charCodeAt(0);
if (code === 10) {
cursor.y++;
cursor.x = 0;
}
},
inst_c: function(collected, params, flag) {
console.log({collected, params, flag});
var value = params[0] === 0 ? 1 : params[0];
switch(flag) {
case 'A': // UP
cursor.y -= value;
break;
case 'B': // Down
cursor.y += value - 1;
break;
case 'C': // forward
cursor.x += value;
break;
case 'D': // Back
cursor.x -= value;
break;
case 'E': // Cursor Next Line
cursor.x = 0;
cursor.y += value;
break;
case 'F': // Cursor Previous Line
cursor.x = 0;
cursor.y -= value;
break;
}
},
inst_e: function(collected, flag) {console.log('esc', collected, flag);},
inst_H: function(collected, params, flag) {console.log('dcs-Hook', collected, params, flag);},
inst_P: function(dcs) {console.log('dcs-Put', dcs);},
inst_U: function() {console.log('dcs-Unhook');}
};
var parser = new AnsiParser(terminal);
parser.parse(input);
return result.join('\n');
This is just simple example that ignore everything except newline and cursor movement.
Here is the output:
UPDATE:
It seems that every cursor movement should be just += value or -= value and my value - 1; was just correcting to bug in ervy library that was not working on clear terminal.

To begin with - a Regexp based approach is not ideal to handle escape sequences. The reason for this are complicated interactions between various terminal sequences, as some break a former not yet closed one while others keep working in the middle of another (like some control codes) and the "outer" sequence would still finish correctly. You would have to pull in all these edge cases into every single regexp (see https://github.com/xtermjs/xterm.js/issues/2607#issuecomment-562648768 for an illustration).
In general parsing escape sequences is quite tricky, we even have an issue regarding that in terminal-wg. Hopefully we manage to get some minimal parsing requirements from this in the future. Most certainly it will not be regexp-based ;)
All that said, its much easier to go with a real parser, that deals with all the edge cases. A good starting point for a DEC compatible parser is https://vt100.net/emu/dec_ansi_parser. For cursor handling you have to handle at least these states with all actions:
ground
escape
csi_entry
csi_ignore
csi_param
csi_intermediate
plus all other states as dummy entries. Also control codes need special care (action execute), as they might interfer anytime with any other sequence with different results.
To make things even worse, the official ECMA-48 specifiction slightly differs for certain aspects from the DEC parser. Still most emulators used these days try to aim for DEC VT100+ compatibility.
If you dont want to write the parser yourself, you can either use/modify my old parser or the one we have in xterm.js (the latter might be harder to integrate as it operates on UTF32 codepoints).

Javascript - Undefined arrays in iteration

I am working on a Nodejs tool which uses an API.
My issue is that I don't understand why the previous element of the array is not registered properly and is "Undefined" when the iterator is incremented.
this.pptab = new Array();
this.tabplayers = new Array();
for (var i = 0; i < (argsname.length - 1); i++) {
osuApi.getUser({ "u": argsname[i], "m": argsmode.join('=') }).then(user => { //calling the osu!api
this.pptab[i] = user[0].pp_raw;
this.tabplayers[i] = user[0].username;
console.log("Player -1: " + this.tabplayers[i - 1]); // This displays "Undefined" in each iteration
});
}

Two issue one in loop condition [ i **<** (argsname.length-1)] you do not require (-1 ) as of smaller then condition. Second if condition required for first step.
this.pptab = new Array();
this.tabplayers = new Array();
for (var i = 0; i < (argsname.length); i++) {
osuApi.getUser({ "u": argsname[i], "m": argsmode.join('=') }).then(user => { //calling the osu!api
this.pptab[i] = user[0].pp_raw;
this.tabplayers[i] = user[0].username;
if(i>0) {
console.log("Player -1: " + this.tabplayers[i-1]); // for first player -1 does not exist
}
});
}

I think you are doing something wrong when converting your string command to an array and then shifting it. See this:
Code is here:
https://repl.it/#LatinWarrior/StackoverflowQuestion
This is what I wrote:
let argsname = "!topsetup Player1 Player2 Player3 m=2".split(' ');
let argsnameWithShift = argsname.shift();
console.log(argsname);
console.log(argsnameWithShift);

Two identical functions one works one does not

I created two functions, GOODself and BADself, called in succession to debug a problem I have in a larger script illustrated here. I can't figure out why BADself stalls at the line aryVarAbi[0] = 5;.
If I call it first it still happens. According to the console in Firefox aryVarAbi is not defined.
GAB = GOODself(0, 4, 1);
GAB = BADself(0, 4, 1);
function GOODself(GABin, nCols, nRows) {
var aCol = 0;
var aryVarABi = [1,1,1,1];
for (aCol=0; aCol < nCols - 1; aCol++) {
alert("GOOD1 " + aryVarABi[aCol]);
aryVarABi[0]= 5;
alert("GOOD2 " + aryVarABi[aCol]);
} // for aCol
return (aryVarABi[0]);
} // GOODself
function BADself(GABin, nCols, nRows) {
var aCol = 0;
var aryVarABi = [1,1,1,1];
for (aCol=0; aCol < nCols - 1; aCol++) {
alert("BAD1 " + aryVarABi[aCol]);
aryVarAbi[0] = 5;
alert("BAD2 " + aryVarABi[aCol]);
} // for aCol
return (aryVarABi[0]);
} // BADself

JavaScript is case senstive. You've defined var aryVarABi = [1,1,1,1];. Notice the capital B. You're referring to aryVarAbi[0] = 5;. Notice the lowercase b.

I think you want aryVarABi[0] = 5; as opposed to aryVarAbi[0] = 5;
The 'b' in the latter is lowercase.

Javascript variables are case sensitive, so aryVarABi is a different variable from aryVarAbi.
Please change the line aryVarAbi[0] = 5; to aryVarABi[0] = 5;.

JavaScript - For loop with switch statement continually looping

I'm relatively new to coding and working on a text based RPG game in JavaScript. The following code allows me to progress through the different scenarios where you are approached with a different bad guy.
I used a For loop in conjunction with a Switch statement and had it working prior, but then I re factored my code to make it more OO & prototypal. Now my For loop continues looping and does not exit. I checked the value of [i] throughout and see it properly goes 0-4, but then it restarts at 0 and I can't figure out why?
var scenario = new Array();
//simple function to create the number of scenarios
function Scenario () {
howManyScenarios = function(number) {
for (i=0; i <= number; i++) {
scenario[i] = ("Scenario " + (1 + i));
};
};
howManyScenarios(4); //if you change the argument, add additional switch cases
//iterating through my howManyScenarios function to build out scenarios using a switch case
createScenarios = function () {
var ii = scenario.length;
for (i=0; i < ii; i++) {
switch(scenario[i]) {
case 'Scenario 1':
alert("You run into a troll");
b = 0;
break;
case 'Scenario 2':
alert("You find a store to purchase goods from");
ItemShop();
break;
case 'Scenario 3':
alert("You run into a ogre");
b = 1;
break;
case 'Scenario 4':
alert("You run into a warewolf");
b = 2;
break;
case 'Scenario 5':
alert("You run into a wizard");
b = 3;
return;
break;
}; //close out switch cases
}; //close out my for loop
}; //close out createScenarios function
createScenarios();
}; //close out Scenario function
Scenario();

Your loop will obviously still continue because you just only ended a case of every loop of i and will still test each value in the array of scenario[i].
How about using variable b as a handler that if an event like you run into a troll has been executed, then set b to a number greater than 0 then check if a value has been inserted into b before switching into the array again using if (b) break; where if b has a value greater than 0 then it will be set as true.
var scenario = new Array();
var b;
//simple function to create the number of scenarios
function Scenario() {
howManyScenarios = function (number) {
for (i = 0; i <= number; i++) {
scenario[i] = ("Scenario " + (1 + i));
};
};
howManyScenarios(4); //if you change the argument, add additional switch cases
console.log(scenario[i]);
//iterating through my howManyScenarios function to build out scenarios using a switch case
createScenarios = function () {
var ii = scenario.length;
for (i = 0; i < ii; i++) {
if (b) break;
switch (scenario[i]) {
case 'Scenario 1':
alert("You run into a troll");
b = 1;
break;
case 'Scenario 2':
alert("You find a store to purchase goods from");
b = 2;
ItemShop();
break;
case 'Scenario 3':
alert("You run into a ogre");
b = 3;
break;
case 'Scenario 4':
alert("You run into a warewolf");
b = 4;
break;
case 'Scenario 5':
alert("You run into a wizard");
b = 5;
return;
break;
}; //close out switch cases
}; //close out my for loop
}; //close out createScenarios function
createScenarios();
}; //close out Scenario function
Scenario();
function ItemShop() {}
ANSWER 2
This one is one way on how we game developers make a functional game by using a series of object arrays, object classes and the like.
I remade your code into something easier to read, hope you learn something from this. :)
var numberofscenarios = 5;
var scenario = []; //array where scenarios will be
//this will be the accessible properties of scenario[] array
var _scenario = function(){
this.name = ""; //name of scenario
this.message = "";
this.doSomething = 0;
this.status = 0 ;//1 = finished and 0 = false
};
var _event = function(mobname){
this.mobname = mobname;
this.battle = function(){//doSomething
console.log("Battle VS "+ this.mobname +" Start!");
};
this.itemShop = function(){//doSomething
console.log(this.mobname + ": Welcome to the shop! How may I help you?");
};
};
//generate the scenarios in the scenario[] array
function generateScenarios() {
for (i = 0; i <= numberofscenarios; i++) {
scenario[i] = new _scenario();
scenario[i].name = i;
switch (scenario[i].name) {
case 1:
scenario[i].message = "You run into a Troll";
scenario[i].doSomething = new _event("Troll");
break;
case 2:
scenario[i].message = "You find a store to purchase goods from";
scenario[i].doSomething = new _event("Shop Keeper");
break;
case 3:
scenario[i].message = "You run into a Ogre";
scenario[i].doSomething = new _event("Ogre");
break;
case 4:
scenario[i].message = "You run into a Werewolf";
scenario[i].doSomething = new _event("Werewolf");
break;
case 5:
scenario[i].message = "You run into a Wizard";
scenario[i].doSomething = new _event("Wizard");
break;
}
}
}
generateScenarios(); //generate the scenarios
//test the array of scenario class
//test the battle with Troll
console.log(scenario[1].message);
scenario[1].doSomething.battle();
//test the shop
console.log(scenario[2].message);
scenario[2].doSomething.itemShop();
//attempt to fight the Shopkeeper
console.log(scenario[2].message);
scenario[2].doSomething.battle();

Javascript Sorting By Algorithm, jquery maybe

Okay, I am trying to create a sorting application but, its kinda busting my mind. Maybe because of thinking too much.
What I wanted
I want to sort values from an array, maybe using bubble sort
I want to push each iteration to <tr> of a table
and be able to know which values has been replaced
What must happen
Each iteration, I will get a list of values
each list will highlight the values affected
What I currently have
var sort = {
init : function() {
sort.vars.$oldList = [6,4,7,1,8];
sort.play.bubble();
}
}
sort.vars = {
$oldList : new Array(),
$newList : new Array()
}
sort.play = {
bubble : function() {
var list = sort.vars.$oldList;
var n = list.length;
var isSorted = false;
while(!isSorted) {
var tmp, i;
isSorted = true;
for (i = 0; i < n; i++) {
if (list[i] > list[i+1]) {
tmp = list[i];
list[i] = list[i+1];
list[i+1] = tmp;
isSorted = false;
}
sort.ui.pushtToTable(list);
}
}
}
}
sort.ui = {
pushtToTable : function(list) {
$.each(list, function(n, val){
$('tr').append('<td>' + val);
})
}
}
$(document).ready(function(){
sort.init();
})
If possible I wanted to display values one by one, maybe setting a timeout, right?

Yes, setTimeout is a good idea if you want to "see" the algorithm's progress. However, setTimeout only accepts functions as arguments, so each iteration of the sorting algorithm has to be performed in a separate function. See the following code for an example (the code doesn't produce output in each iteration, instead it "animates" the swapping action - but I'm sure you can easily adjust this to fit your needs).
DEMO (JSFiddle)
var SORT = function(type, list, selector){
var container, containerTr, animSteps = [];
// Show all elements in the container
var printArray = function(list){
var str = ["<table>"], i = 0, l = list.length;
for (i; i < l; ++i) {
str.push("<tr><td>", list[i], "</td></tr>");
}
str.push("</table>");
container.html(str.join(""));
};
// This is the interesting part... ;)
var swap = function(list, i1, i2) {
var tmp = list[i1];
list[i1] = list[i2];
list[i2] = tmp;
// Add 3 functions for each swapping action:
// 1. highlight elements, 2. swap, 3. remove highlight
animSteps.push(function(){
containerTr.eq(i1).add(containerTr.eq(i2)).addClass("highlight");
}, function(){
var tmp = containerTr.eq(i1).text();
containerTr.eq(i1).text(containerTr.eq(i2).text());
containerTr.eq(i2).text(tmp);
}, function(){
containerTr.eq(i1).add(containerTr.eq(i2)).removeClass("highlight");
});
};
var animation = function(){
// Execute all iteration functions one after another
if (animSteps.length) {
setTimeout(function(){
animSteps.splice(0,1)[0]();
animation();
}, 250);
}
};
// Collection of sorting algorithms
var algorithms = {
bubblesort: function(list) {
for (var n = list.length; n > 1; --n) {
for (var i = 0; i < n-1; ++i) {
if (list[i] > list[i+1]) {
swap(list, i, i+1);
}
}
}
}
// Add more algorithms using "swap" here...
};
if (algorithms[type] != undefined) {
container = $(selector);
printArray(list);
containerTr = container.find("tr");
algorithms[type](list);
this.sorted = list;
animation();
}
};
// Usage:
var s = new SORT("bubblesort", [5,8,2,4,1,9,7,3,0,6], "#container");
console.log(s.sorted); //the sorted array