Skip to content

Commit 57c167c

Browse files
JohannesDemlJohannesDeml
committed
Merge branch 'master' into 2022.2
2 parents 4507fa4 + 40e92b1 commit 57c167c

File tree

5 files changed

+291
-74
lines changed

5 files changed

+291
-74
lines changed

‎Assets/WebGLTemplates/Develop/debug-console.js‎

Lines changed: 119 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (getCookie("addTimestamp") === "false") {
1919
}
2020

2121
initializeToggleButton(false);
22-
initialzeDebugConsole();
22+
initializeDebugConsole();
2323

2424

2525
function setCookie(cname, cvalue, exdays) {
@@ -44,7 +44,7 @@ function getCookie(cname) {
4444
return "";
4545
}
4646

47-
function initialzeDebugConsole() {
47+
function initializeDebugConsole() {
4848
let debugConsole = document.createElement('div');
4949
debugConsole.id = 'debugConsole';
5050
document.body.appendChild(debugConsole);
@@ -279,52 +279,128 @@ function setupConsoleLogPipe() {
279279

280280
parseMessageAndLog = (message, logLevel, consoleLogFunction) => {
281281
updateLogCounter(logLevel);
282-
let index = 0;
283-
let consoleArgs = [];
284-
let consoleMessage = "";
285-
let divMessage = "";
286-
287-
// parse unity color tags to render them nicely in the console
288-
while (index <= message.length) {
289-
let startTagStart = message.indexOf("<color=", index);
290-
if (startTagStart == -1) {
291-
// Parse the reset of the message without styling
292-
let remainingMessage = message.substring(index);
293-
consoleMessage += `%c${remainingMessage}`;
294-
consoleArgs.push("color:inherit");
295-
divMessage += remainingMessage;
296-
break;
297-
}
282+
let styledTextParts = parseUnityRichText(message);
283+
284+
let consoleText = '';
285+
let consoleStyle = [];
286+
let htmlText = '';
287+
styledTextParts.forEach(textPart => {
288+
consoleText += textPart.toConsoleTextString();
289+
consoleStyle.push(textPart.toConsoleStyleString());
290+
htmlText += textPart.toHTML();
291+
});
292+
htmlLog(htmlText.trim(), logLevel);
293+
consoleLogFunction(consoleText, ...consoleStyle);
294+
};
295+
}
296+
297+
class StyledTextPart {
298+
constructor(text, styles) {
299+
this.text = text;
300+
this.styles = styles;
301+
}
302+
303+
toHTML() {
304+
if(this.styles.length > 0) {
305+
return `<span style="${this.styles.join(';')}">${this.text}</span>`;
306+
}
307+
return this.text;
308+
}
309+
310+
toConsoleStyleString() {
311+
if(this.styles.length > 0) {
312+
return this.styles.join(';');
313+
}
314+
return 'color:inherit';
315+
}
298316

299-
if (startTagStart > index) {
300-
let textBeforeTag = message.substring(index, startTagStart);
301-
consoleMessage += `%c${textBeforeTag}`;
302-
consoleArgs.push("color:inherit");
303-
divMessage += textBeforeTag;
317+
toConsoleTextString() {
318+
return `%c${this.text}`;
319+
}
320+
}
321+
322+
function parseUnityRichText(message) {
323+
// Mapping for unity tags to css style tags
324+
const tagMap = {
325+
'color': {startTag: '<color=', closeTag: '</color>', styleTag: 'color:', postfix: '', hasParameter: true},
326+
'size': {startTag: '<size=', closeTag: '</size>', styleTag: 'font-size:', postfix: 'px', hasParameter: true},
327+
'bold': {startTag: '<b', closeTag: '</b>', styleTag: 'font-weight:', styleValue: 'bold', hasParameter: false},
328+
'italic': {startTag: '<i', closeTag: '</i>', styleTag: 'font-style:', styleValue: 'italic', hasParameter: false}
329+
};
330+
331+
let index = 0;
332+
const styledTextParts = [];
333+
334+
// Stack of applied styles, so we can also nest styling
335+
let styleStack = [];
336+
// next start index for each tag
337+
let nextStartIndex = [];
338+
// next end index for each tag
339+
let nextEndIndex = [];
340+
Object.keys(tagMap).forEach(key => {
341+
nextStartIndex[key] = message.indexOf(tagMap[key].startTag, index);
342+
nextEndIndex[key] = message.indexOf(tagMap[key].closeTag, index);
343+
});
344+
345+
while (index < message.length) {
346+
let nextTagFound = false;
347+
let nextKey;
348+
let fromArray = [];
349+
let nextIndex = message.length;
350+
351+
// find the next tag start or end
352+
Object.keys(tagMap).forEach(key => {
353+
if(nextStartIndex[key] >= 0 && nextStartIndex[key] < nextIndex) {
354+
nextIndex = nextStartIndex[key];
355+
nextKey = key;
356+
fromArray = nextStartIndex;
357+
nextTagFound = true;
304358
}
305359

306-
let startTagEnd = message.indexOf(">", startTagStart);
307-
let closingTag = message.indexOf("</color>", startTagStart);
308-
if (startTagEnd == -1 || closingTag == -1) {
309-
// Tag is set up in the wrong way, abort parsing
310-
defaultConsoleError({ error: "Could not parse color tag, since no end tag was found", startStartIndex: startTagStart, startEndIndex: startTagEnd, closingIndex: closingTag });
311-
let remainingMessage = message.substring(index);
312-
consoleMessage += `%c${remainingMessage}`;
313-
consoleArgs.push("color:inherit");
314-
divMessage += remainingMessage;
315-
break;
360+
if(nextEndIndex[key] >= 0 && nextEndIndex[key] < nextIndex) {
361+
nextIndex = nextEndIndex[key];
362+
nextKey = key;
363+
fromArray = nextEndIndex;
364+
nextTagFound = true;
316365
}
317-
let color = message.substring(startTagStart + "<color=".length, startTagEnd);
318-
let text = message.substring(startTagEnd + 1, closingTag);
319-
consoleMessage += `%c${text}`;
320-
consoleArgs.push("color:" + color);
321-
divMessage += `<span style="color:${color};">${text}</span>`;
322-
index = closingTag + "</color>".length;
366+
});
367+
368+
// write the text in before the next tag to our style text part array
369+
if(nextIndex > index) {
370+
let messageToNextTag = message.substring(index, nextIndex);
371+
let styles = [...styleStack];
372+
styledTextParts.push(new StyledTextPart(messageToNextTag, styles));
323373
}
324374

325-
htmlLog(divMessage.trim(), logLevel);
326-
consoleLogFunction(consoleMessage, ...consoleArgs);
327-
};
375+
// end if no more tags exist
376+
if(nextTagFound === false) {
377+
index = message.length;
378+
break;
379+
}
380+
381+
// Process start tag
382+
if(fromArray === nextStartIndex) {
383+
nextStartIndex[nextKey] = message.indexOf(tagMap[nextKey].startTag, nextIndex+1);
384+
let closeTagIndex = message.indexOf('>', nextIndex+1);
385+
let styleValue;
386+
if(tagMap[nextKey].hasParameter) {
387+
styleValue = message.substring(nextIndex + tagMap[nextKey].startTag.length, closeTagIndex);
388+
styleValue+=tagMap[nextKey].postfix;
389+
} else {
390+
styleValue = tagMap[nextKey].styleValue;
391+
}
392+
styleStack.push(`${tagMap[nextKey].styleTag}${styleValue}`);
393+
index = closeTagIndex+1;
394+
}
395+
// process end tag
396+
else if(fromArray === nextEndIndex) {
397+
nextEndIndex[nextKey] = message.indexOf(tagMap[nextKey].closeTag, nextIndex+1);
398+
let closeTagIndex = message.indexOf('>', nextIndex+1);
399+
styleStack.pop();
400+
index = closeTagIndex+1;
401+
}
402+
}
403+
return styledTextParts;
328404
}
329405

330406
function updateLogCounter(logLevel) {
@@ -352,8 +428,7 @@ function htmlLog(message, className) {
352428
hour: "numeric",
353429
minute: "numeric",
354430
second: "numeric"
355-
}
356-
);
431+
});
357432
message = "<span class='timestamplog'>[" + time + "] </span>" + message;
358433
message = message.replaceAll("\n", "<br />");
359434
text.innerHTML = message;

‎Assets/WebGLTemplates/Release/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
</head>
5858

5959
<body>
60+
<script src="./pretty-console.js"></script>
6061
<canvas id="unity-canvas"></canvas>
6162
<div id="unity-loading-bar">
6263
<div id="unity-progress-bar">

‎Assets/WebGLTemplates/Release/pretty-console.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/// Processes all unity log messages and converts unity rich text to css styled console messages
2+
/// from https://github.com/JohannesDeml/UnityWebGL-LoadingTest
3+
4+
function setupConsoleLogPipe() {
5+
// Store actual console log functions
6+
let defaultConsoleLog = console.log;
7+
let defaultConsoleInfo = console.info;
8+
let defaultConsoleDebug = console.debug;
9+
let defaultConsoleWarn = console.warn;
10+
let defaultConsoleError = console.error;
11+
12+
// Overwrite log functions to parse and pipe to debug html console
13+
console.log = (message) => { parseMessageAndLog(message, defaultConsoleLog); };
14+
console.info = (message) => { parseMessageAndLog(message, defaultConsoleInfo); };
15+
console.debug = (message) => { parseMessageAndLog(message, defaultConsoleDebug); };
16+
console.warn = (message) => { parseMessageAndLog(message, defaultConsoleWarn); };
17+
console.error = (message) => { parseMessageAndLog(message, defaultConsoleError); };
18+
19+
20+
parseMessageAndLog = (message, consoleLogFunction) => {
21+
let styledTextParts = parseUnityRichText(message);
22+
let consoleText = '';
23+
let consoleStyle = [];
24+
styledTextParts.forEach(textPart => {
25+
consoleText += textPart.toConsoleTextString();
26+
consoleStyle.push(textPart.toConsoleStyleString());
27+
});
28+
consoleLogFunction(consoleText, ...consoleStyle);
29+
};
30+
}
31+
32+
class StyledTextPart {
33+
constructor(text, styles) {
34+
this.text = text;
35+
this.styles = styles;
36+
}
37+
38+
toHTML() {
39+
if(this.styles.length > 0) {
40+
return `<span style="${this.styles.join(';')}">${this.text}</span>`;
41+
}
42+
return this.text;
43+
}
44+
45+
toConsoleStyleString() {
46+
if(this.styles.length > 0) {
47+
return this.styles.join(';');
48+
}
49+
return 'color:inherit';
50+
}
51+
52+
toConsoleTextString() {
53+
return `%c${this.text}`;
54+
}
55+
}
56+
57+
function parseUnityRichText(message) {
58+
// Mapping for unity tags to css style tags
59+
const tagMap = {
60+
'color': {startTag: '<color=', closeTag: '</color>', styleTag: 'color:', postfix: '', hasParameter: true},
61+
'size': {startTag: '<size=', closeTag: '</size>', styleTag: 'font-size:', postfix: 'px', hasParameter: true},
62+
'bold': {startTag: '<b', closeTag: '</b>', styleTag: 'font-weight:', styleValue: 'bold', hasParameter: false},
63+
'italic': {startTag: '<i', closeTag: '</i>', styleTag: 'font-style:', styleValue: 'italic', hasParameter: false}
64+
};
65+
66+
let index = 0;
67+
const styledTextParts = [];
68+
69+
// Stack of applied styles, so we can also nest styling
70+
let styleStack = [];
71+
// next start index for each tag
72+
let nextStartIndex = [];
73+
// next end index for each tag
74+
let nextEndIndex = [];
75+
Object.keys(tagMap).forEach(key => {
76+
nextStartIndex[key] = message.indexOf(tagMap[key].startTag, index);
77+
nextEndIndex[key] = message.indexOf(tagMap[key].closeTag, index);
78+
});
79+
80+
while (index < message.length) {
81+
let nextTagFound = false;
82+
let nextKey;
83+
let fromArray = [];
84+
let nextIndex = message.length;
85+
86+
// find the next tag start or end
87+
Object.keys(tagMap).forEach(key => {
88+
if(nextStartIndex[key] >= 0 && nextStartIndex[key] < nextIndex) {
89+
nextIndex = nextStartIndex[key];
90+
nextKey = key;
91+
fromArray = nextStartIndex;
92+
nextTagFound = true;
93+
}
94+
95+
if(nextEndIndex[key] >= 0 && nextEndIndex[key] < nextIndex) {
96+
nextIndex = nextEndIndex[key];
97+
nextKey = key;
98+
fromArray = nextEndIndex;
99+
nextTagFound = true;
100+
}
101+
});
102+
103+
// write the text in before the next tag to our style text part array
104+
if(nextIndex > index) {
105+
let messageToNextTag = message.substring(index, nextIndex);
106+
let styles = [...styleStack];
107+
styledTextParts.push(new StyledTextPart(messageToNextTag, styles));
108+
}
109+
110+
// end if no more tags exist
111+
if(nextTagFound === false) {
112+
index = message.length;
113+
break;
114+
}
115+
116+
// Process start tag
117+
if(fromArray === nextStartIndex) {
118+
nextStartIndex[nextKey] = message.indexOf(tagMap[nextKey].startTag, nextIndex+1);
119+
let closeTagIndex = message.indexOf('>', nextIndex+1);
120+
let styleValue;
121+
if(tagMap[nextKey].hasParameter) {
122+
styleValue = message.substring(nextIndex + tagMap[nextKey].startTag.length, closeTagIndex);
123+
styleValue+=tagMap[nextKey].postfix;
124+
} else {
125+
styleValue = tagMap[nextKey].styleValue;
126+
}
127+
styleStack.push(`${tagMap[nextKey].styleTag}${styleValue}`);
128+
index = closeTagIndex+1;
129+
}
130+
// process end tag
131+
else if(fromArray === nextEndIndex) {
132+
nextEndIndex[nextKey] = message.indexOf(tagMap[nextKey].closeTag, nextIndex+1);
133+
let closeTagIndex = message.indexOf('>', nextIndex+1);
134+
styleStack.pop();
135+
index = closeTagIndex+1;
136+
}
137+
}
138+
return styledTextParts;
139+
}
140+
141+
setupConsoleLogPipe();

‎Documentation/DebugConsole.png‎

-55 KB
Loading

0 commit comments

Comments
 (0)