Skip to content

Commit

Permalink
Merge pull request #2740 from DenizUgur/wasm-demo-fixes
Browse files Browse the repository at this point in the history 
Improved console experience in gpac wasm demo page
  • Loading branch information
@jeanlf
jeanlf committed Jan 29, 2024
2 parents b352e21 + 845c9c6 commit 0717529
Show file tree
Hide file tree
Showing 2 changed files with 237 additions and 15 deletions.
250 changes: 236 additions & 14 deletions share/emscripten/gpac.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

#output {
width: 99%;
height: 400px;
height: 60vh;
margin: 0 auto;
margin-top: 10px;
border-left: 0px;
Expand All @@ -47,6 +47,8 @@
font-family: 'Lucida Console', Monaco, monospace;
outline: none;
resize: vertical;
border: 1px solid #ccc;
overflow-y: scroll;
}

#logo { transform-origin: center; }
Expand All @@ -64,6 +66,7 @@
padding-left: 0px;
padding-right: 0px;
display: block;
border: 1px solid #ccc;
}
</style>
</head>
Expand Down Expand Up @@ -271,9 +274,9 @@
if (element) {
element.setAttribute('readonly', true);
if (do_save) {
FS.writeFile(edit_name, element.value);
FS.writeFile(edit_name, element.innerText);
}
element.value = '';
element.innerHTML = '';
}
edit_name = null;
return com_exit();
Expand Down Expand Up @@ -536,7 +539,7 @@
var element = document.getElementById('output');
if (element) {
element.removeAttribute('readonly');
element.value = str;
element.innerText = str;
}
return;
}
Expand All @@ -559,7 +562,7 @@
//clear console
if (args[0]=='clear') {
var element = document.getElementById('output');
if (element) element.value = '';
if (element) element.innerText = '';
return com_exit();
}
//clear history
Expand Down Expand Up @@ -592,7 +595,7 @@
var element = document.getElementById('output');
if (element) {
element.removeAttribute('readonly');
element.value = '';
element.innerText = '';
set_status('Edit your JS and type return or "go" in prompt to evaluate, anything else to cancel');
}
is_eval = true;
Expand Down Expand Up @@ -743,6 +746,180 @@
}
//end of command line processing

// Include ANSI escape codes convert
// @link: https://www.npmjs.com/package/ansi-html
// Reference to https://github.com/sindresorhus/ansi-regex
var _regANSI = /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/

var _defColors = {
reset: ['fff', '000'], // [FOREGROUD_COLOR, BACKGROUND_COLOR]
black: '000',
red: 'ff0000',
green: '209805',
yellow: 'e8bf03',
blue: '0000ff',
magenta: 'ff00ff',
cyan: '00ffee',
lightgrey: 'f0f0f0',
darkgrey: '888'
}
var _styles = {
30: 'black',
31: 'red',
32: 'green',
33: 'yellow',
34: 'blue',
35: 'magenta',
36: 'cyan',
37: 'lightgrey'
}
var _openTags = {
'1': 'font-weight:bold', // bold
'2': 'opacity:0.5', // dim
'3': '<i>', // italic
'4': '<u>', // underscore
'8': 'display:none', // hidden
'9': '<del>' // delete
}
var _closeTags = {
'23': '</i>', // reset italic
'24': '</u>', // reset underscore
'29': '</del>' // reset delete
}

;[0, 21, 22, 27, 28, 39, 49].forEach(function (n) {
_closeTags[n] = '</span>'
})

/**
* Converts text with ANSI color codes to HTML markup.
* @param {String} text
* @returns {*}
*/
function ansiHTML (text) {
// Returns the text if the string has no ANSI escape code.
if (!_regANSI.test(text)) {
return text
}

// Cache opened sequence.
var ansiCodes = []
// Replace with markup.
var ret = text.replace(/\033\[(\d+)m/g, function (match, seq) {
var ot = _openTags[seq]
if (ot) {
// If current sequence has been opened, close it.
if (!!~ansiCodes.indexOf(seq)) { // eslint-disable-line no-extra-boolean-cast
ansiCodes.pop()
return '</span>'
}
// Open tag.
ansiCodes.push(seq)
return ot[0] === '<' ? ot : '<span style="' + ot + ';">'
}

var ct = _closeTags[seq]
if (ct) {
// Pop sequence
ansiCodes.pop()
return ct
}
return ''
})

// Make sure tags are closed.
var l = ansiCodes.length
;(l > 0) && (ret += Array(l + 1).join('</span>'))

return ret
}

/**
* Customize colors.
* @param {Object} colors reference to _defColors
*/
ansiHTML.setColors = function (colors) {
if (typeof colors !== 'object') {
throw new Error('`colors` parameter must be an Object.')
}

var _finalColors = {}
for (var key in _defColors) {
var hex = colors.hasOwnProperty(key) ? colors[key] : null
if (!hex) {
_finalColors[key] = _defColors[key]
continue
}
if ('reset' === key) {
if (typeof hex === 'string') {
hex = [hex]
}
if (!Array.isArray(hex) || hex.length === 0 || hex.some(function (h) {
return typeof h !== 'string'
})) {
throw new Error('The value of `' + key + '` property must be an Array and each item could only be a hex string, e.g.: FF0000')
}
var defHexColor = _defColors[key]
if (!hex[0]) {
hex[0] = defHexColor[0]
}
if (hex.length === 1 || !hex[1]) {
hex = [hex[0]]
hex.push(defHexColor[1])
}

hex = hex.slice(0, 2)
} else if (typeof hex !== 'string') {
throw new Error('The value of `' + key + '` property must be a hex string, e.g.: FF0000')
}
_finalColors[key] = hex
}
_setTags(_finalColors)
}

/**
* Reset colors.
*/
ansiHTML.reset = function () {
_setTags(_defColors)
}

/**
* Expose tags, including open and close.
* @type {Object}
*/
ansiHTML.tags = {}

if (Object.defineProperty) {
Object.defineProperty(ansiHTML.tags, 'open', {
get: function () { return _openTags }
})
Object.defineProperty(ansiHTML.tags, 'close', {
get: function () { return _closeTags }
})
} else {
ansiHTML.tags.open = _openTags
ansiHTML.tags.close = _closeTags
}

function _setTags (colors) {
// reset all
_openTags['0'] = 'font-weight:normal;opacity:1;color:#' + colors.reset[0] + ';background:#' + colors.reset[1]
// inverse
_openTags['7'] = 'color:#' + colors.reset[1] + ';background:#' + colors.reset[0]
// dark grey
_openTags['90'] = 'color:#' + colors.darkgrey

for (var code in _styles) {
var color = _styles[code]
var oriColor = colors[color] || '000'
_openTags[code] = 'color:#' + oriColor
code = parseInt(code)
_openTags[(code + 10).toString()] = 'background:#' + oriColor
}
}

ansiHTML.reset()

//
//Until end of this script: GFIO wrapper
Expand Down Expand Up @@ -1401,13 +1578,17 @@
<div class="gpac">
<canvas class="gpac" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="0" height="0"></canvas>
</div>
<textarea id="output" rows="8" readonly></textarea>
<div id="output" readonly></div>

<!-- command line input -->
<div class="gpac">
<!-- span>Enter command: </span -->
<span><input type="text" id="cmd" placeholder="Enter command or type h for help" autofocus onkeypress="
if (event.keyCode == 13) { process_command(); }
if (event.keyCode == 13) {
var cwd = FS.cwd() == '/' ? '~' : FS.cwd();
document.getElementById('output').innerHTML += 'user@gpac:' + cwd + '$ ' + this.value + '<br><br>';
process_command();
}
" onkeyup="
let idx=cmd_idx;
if (event.keyCode == 38) { idx++; }
Expand All @@ -1426,6 +1607,32 @@
}
cmd_idx = idx;
cmd_e.value = cmd_history[cmd_history.length-1-idx];
if (event.ctrlKey) {
switch (event.keyCode) {
case 67: // Ctrl+C
var cmdElement = document.getElementById('cmd');
cmdElement.value = '';
break;
case 76: // Ctrl+L
event.preventDefault();
var outputElement = document.getElementById('output');
outputElement.innerHTML = '';
break;
case 65: // Ctrl+A
event.preventDefault();
var cmdElement = document.getElementById('cmd');
cmdElement.selectionStart = 0;
cmdElement.selectionEnd = 0;
break;
case 69: // Ctrl+E
event.preventDefault();
var cmdElement = document.getElementById('cmd');
cmdElement.selectionStart = cmdElement.value.length;
cmdElement.selectionEnd = cmdElement.value.length;
break;
}
}
" onkeydown="
if (event.keyCode == 17) ctrl_down=true;
else if (event.keyCode == 18) opt_down=true;
Expand Down Expand Up @@ -1572,18 +1779,33 @@
],
print: (function() {
var element = document.getElementById('output');
if (element) element.value = ''; // clear browser cache
if (element) element.innerHTML = ''; // clear browser cache
return function(text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
// These replacements are necessary if you render to raw HTML
//text = text.replace(/&/g, "&amp;");
//text = text.replace(/</g, "&lt;");
//text = text.replace(/>/g, "&gt;");
//text = text.replace('\n', '<br>', 'g');
text = text.replace(/&/g, "&amp;");
text = text.replace(/</g, "&lt;");
text = text.replace(/>/g, "&gt;");
text = text.replace(/\n/g, '<br>', 'g');
text = text.replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');

// handle \r
var prevPos = 0;
var output = '';
for (var i = 0; i < text.length; i++) {
if (text.charCodeAt(i) == 13) {
output += text.substring(prevPos, i);
prevPos = i + 1;
}
}

// convert ANSI colors to HTML
text = ansiHTML(text);

if (GPAC.no_log)
console.log(text);
else if (element) {
element.value += text + "\n";
element.innerHTML += text + "<br>";
element.scrollTop = element.scrollHeight; // focus on bottom
}
};
Expand Down
2 changes: 1 addition & 1 deletion src/utils/error.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ static void gf_on_progress_std(const char *_title, u64 done, u64 total)

static gf_on_progress_cbk prog_cbk = NULL;
static void *user_cbk = NULL;
#if defined(GPAC_CONFIG_IOS) || defined(GPAC_CONFIG_ANDROID) || defined(GPAC_CONFIG_EMSCRIPTEN)
#if defined(GPAC_CONFIG_IOS) || defined(GPAC_CONFIG_ANDROID)
static Bool gpac_no_color_logs = GF_TRUE;
#else
static Bool gpac_no_color_logs = GF_FALSE;
Expand Down

0 comments on commit 0717529

Please sign in to comment.