Skip to content

Commit

Permalink
Colorize and preserve newlines in log output (#39)
Browse files Browse the repository at this point in the history
* Colorize and preserve newlines in log output

* Review comments
  • Loading branch information
Rangi42 authored Sep 19, 2024
1 parent 581c008 commit b00f846
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 72 deletions.
33 changes: 27 additions & 6 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
:root {
--selectedfile-background: #ccf;
--color:#2D2D2C;
--color: #2D2D2C;
--background: #FAFAFA;
--background-alt: #EFEFEF;
--border-color: #D6D6D6;
--log-info: #7D7D7C;
--log-out: #1D1D1C;
--log-err: #FF0000;
}

@media (prefers-color-scheme: dark) {
:root {
--selectedfile-background: #557;
--color:#CCCCCC;
--color: #CCCCCC;
--background: #2D2D2D;
--background-alt: #424242;
--border-color: #575757;
--log-info: #999999;
--log-out: #FFFFFF;
--log-err: #FF0000;
}
}

body
{
color:var(--color);
body {
color: var(--color);
background:var(--background);
}

Expand Down Expand Up @@ -237,6 +242,22 @@ canvas {
grid-column: 1 / 3;
grid-row: 3;
}
.output {
border: 1px inset #999;
padding: 2px;
width: calc(100% - 6px);
height: calc(100% - 6px);
overflow: auto;
}
.output .info {
color: var(--log-info);
}
.output .stdout {
color: var(--log-out);
}
.output .stderr {
color: var(--log-err);
}

.emulator_screen_container {
width: 512;
Expand Down Expand Up @@ -290,4 +311,4 @@ canvas {
grid-column: 1;
grid-row: 5;
}
}
}
14 changes: 6 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="google" content="notranslate" />
<link rel="stylesheet" href="css/style.css" />
Expand Down Expand Up @@ -70,7 +72,7 @@
>: Rednex Game Boy Development System
</li>
<li>
(MIT License, Copyright (c) 1997-2023, Carsten Sorensen and
(MIT License, Copyright (c) 1997-2024, Carsten Sørensen and
RGBDS contributors)
</li>
<li>
Expand Down Expand Up @@ -231,11 +233,7 @@
</table>
</div>
<div class="console">
<textarea
style="height: 100%; width: 100%"
id="output"
readonly
></textarea>
<pre id="output" class="output" readonly></pre>
</div>

<div id="infodialog" class="modal">
Expand Down Expand Up @@ -400,7 +398,7 @@
</div>
</div>
</div>

<div id="settingsdialog" class="modal">
<div class="content">
<span id="settingsdialogclose" class="close"></span>
Expand All @@ -417,7 +415,7 @@
<p>RGBLINK: <input id="copmpiler_settings_link" /></p>
<p>RGBFIX: <input id="copmpiler_settings_fix" /></p>
<p><button id="copmpiler_settings_set">Set</button></p>
</div>
</div>
</div>
</div>
</div>
Expand Down
72 changes: 32 additions & 40 deletions js/compiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,15 @@ var link_options = [];

var line_nr_regex = /([\w\.]+)[\w\.\:~]*\(([0-9]+)\)/gi;

var buffered_log = "";
function logFunction(str) {
if (/^[^:\s]+:/.test(str)) {
// If the log starts with a label, we can emit the previously buffered one.
flushLog();
buffered_log = str.trim();
} else {
// If the log doesn’t start with a label, it’s a follow-up to the previous log,
// so add it to the buffer.
buffered_log += " " + str.trim();
}
}

function flushLog() {
unbufferedLogFunction(buffered_log);
buffered_log = "";
}

function unbufferedLogFunction(str) {
if (log_callback) log_callback(str);
function logFunction(str, kind) {
if (log_callback) log_callback(str, kind);

if (
str.startsWith("error: ") ||
str.startsWith("ERROR: ") ||
str.startsWith("warning: ")
kind == "stderr" && (
str.startsWith("error: ") ||
str.startsWith("ERROR: ") ||
str.startsWith("warning: ")
)
) {
var type = "error";
if (str.startsWith("warning: ")) type = "warning";
Expand All @@ -55,6 +39,18 @@ function unbufferedLogFunction(str) {
}
}

function infoFunction(str) {
logFunction(str, "info");
}

function outFunction(str) {
logFunction(str, "stdout");
}

function errFunction(str) {
logFunction(str, "stderr");
}

export function setLogCallback(callback) {
log_callback = callback;
}
Expand Down Expand Up @@ -99,7 +95,7 @@ function trigger() {
}

function startCompile() {
if (log_callback) log_callback(null);
if (log_callback) log_callback(null, null);
error_list = [];
rom_symbols = [];
ram_symbols = [];
Expand All @@ -113,7 +109,7 @@ function startCompile() {
function runRgbAsm(targets, obj_files) {
var target = targets.pop();
var args = [target, "-o", "output.o", "-Wall"].concat(asm_options);
logFunction("Running: rgbasm " + args.join(" "));
infoFunction("Running: rgbasm " + args.join(" "));
createRgbAsm({
arguments: args,
preRun: function (m) {
Expand All @@ -122,10 +118,9 @@ function runRgbAsm(targets, obj_files) {
FS.writeFile(key, value);
}
},
print: logFunction,
printErr: logFunction,
print: outFunction,
printErr: errFunction,
}).then(function (m) {
flushLog();
if (repeat) {
buildFailed();
return;
Expand All @@ -146,17 +141,16 @@ function runRgbAsm(targets, obj_files) {
function runRgbLink(obj_files) {
var args = ["-o", "output.gb", "--map", "output.map"].concat(link_options);
for (var name in obj_files) args.push(name + ".o");
logFunction("Running: rgblink " + args.join(" "));
infoFunction("Running: rgblink " + args.join(" "));
createRgbLink({
arguments: args,
preRun: function (m) {
var FS = m.FS;
for (var name in obj_files) FS.writeFile(name + ".o", obj_files[name]);
},
print: logFunction,
printErr: logFunction,
print: outFunction,
printErr: errFunction,
}).then(function (m) {
flushLog();
if (repeat) {
buildFailed();
return;
Expand All @@ -181,17 +175,16 @@ function runRgbLink(obj_files) {

function runRgbFix(input_rom_file, map_file) {
var args = ["-v", "output.gb", "-p", "0xff"].concat(fix_options);
logFunction("Running: rgbfix " + args.join(" "));
infoFunction("Running: rgbfix " + args.join(" "));
createRgbFix({
arguments: args,
preRun: function (m) {
var FS = m.FS;
FS.writeFile("output.gb", input_rom_file);
},
print: logFunction,
printErr: logFunction,
print: outFunction,
printErr: errFunction,
}).then(function (m) {
flushLog();
var FS = m.FS;
try {
var rom_file = FS.readFile("output.gb");
Expand All @@ -205,7 +198,7 @@ function runRgbFix(input_rom_file, map_file) {
}

function buildFailed() {
logFunction("Build failed");
infoFunction("Build failed");
if (repeat) {
repeat = false;
trigger();
Expand Down Expand Up @@ -277,7 +270,7 @@ function buildDone(rom_file, map_file) {
var total = 0x4000;
if (section_type.startsWith("WRAM")) total = 0x1000;
else if (section_type.startsWith("HRAM")) total = 127;
logFunction(
infoFunction(
"Space left: " +
section_type +
"[" +
Expand All @@ -290,8 +283,7 @@ function buildDone(rom_file, map_file) {
);
}
}
logFunction("Build done");
flushLog();
infoFunction("Build done");
done_callback(rom_file, start_address, addr_to_line);
}
}
44 changes: 27 additions & 17 deletions js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,32 @@ export function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

compiler.setLogCallback(function (str) {
function escapeHTML(str) {
var escapedHTML = document.createElement("div");
escapedHTML.innerText = str;
return escapedHTML.innerHTML;
}

compiler.setLogCallback(function (str, kind) {
var output = document.getElementById("output");
if (str === null) {
output.value = "";
if (str == null && kind == null) {
output.innerHTML = "";
return;
}
output.value += str + "\n";
output.scrollTop = output.clientHeight;
output.innerHTML += "<span class=\"" + kind + "\">" + escapeHTML(str) + "</span>\n";
output.scrollTop = output.scrollHeight;
});
emulator.setSerialCallback(function (value) {
var output = document.getElementById("output");
if ((value >= 32 && value < 128) || value == 13)
output.value += String.fromCharCode(value);
else output.value += "[" + ("00" + value.toString(16)).slice(-2) + "]";
output.scrollTop = output.clientHeight;
if ((value >= 32 && value < 128) || value == 13) {
output.innerHTML += escapeHTML(String.fromCharCode(value));
} else {
output.innerHTML +=
"<u>" +
escapeHTML("[" + ("00" + value.toString(16)).slice(-2) + "]") +
"</u>";
}
output.scrollTop = output.scrollHeight;
});

export function compileCode() {
Expand Down Expand Up @@ -118,7 +129,6 @@ export function updateBreakpoints() {
}

function handleGBKey(code, down) {

//Map the directional keys and A/S to B/A and shift/enter to select/start
if (code == 'ArrowRight') emulator.setKeyPad("right", down);
if (code == 'ArrowLeft') emulator.setKeyPad("left", down);
Expand Down Expand Up @@ -341,13 +351,13 @@ export function init(event) {
if(linkOptions != '') {
document.getElementById("copmpiler_settings_link").value = linkOptions;
compiler.setLinkOptions(linkOptions.split(' '));
}
}
const fixOptions =(urlParams.get('fix') ?? '').trim();
if(fixOptions != '') {
document.getElementById("copmpiler_settings_fix").value = fixOptions;
compiler.setFixOptions(fixOptions.split(' '));
}
}

storage.autoLoad();
editors.setCurrentFile(Object.keys(storage.getFiles()).pop());
updateFileList();
Expand Down Expand Up @@ -637,7 +647,7 @@ export function init(event) {
).checked;
storage.update();
};

document.getElementById("settingsmenu").onclick = function () {
document.getElementById("settingsdialog").style.display = "block";
};
Expand Down Expand Up @@ -674,7 +684,7 @@ export function init(event) {
} else {
urlParams.delete('fix');
compiler.setFixOptions([]);
}
}
var url = new URL(window.location);
url.search = urlParams.toString();
window.history.replaceState({}, '', url);
Expand All @@ -684,5 +694,5 @@ export function init(event) {
if(urlParams.has('autorun')) {
document.getElementById("cpu_run_check").checked = true;
document.getElementById("cpu_run_check").onclick();
}
}
}
}
9 changes: 8 additions & 1 deletion tracker/js/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@ class Player {

constructor()
{
compiler.setLogCallback(console.log);
compiler.setLogCallback(function (str, kind) {
if (kind == "info")
console.info(str);
else if (kind == "stdout")
console.log(str);
else if (kind == "stderr")
console.error(str);
});
compiler.setLinkOptions(['-t', '-w']);

function getFile(url, name)
Expand Down

0 comments on commit b00f846

Please sign in to comment.