position: absolute;
top: 4px;
}
- #console textarea {
+ div#console .terminal {
overflow-y: scroll;
background-color: rgba(0,0,0,0.8);
- font-size: 16pt;
+ font-size: 14pt;
color: white;
height: 30vh;
width: 85vw;
+ resize: both;
+ }
+ div#console .terminal text {
+ display: block;
+ padding: 0;
+ margin: 0;
}
</style>
<script src="js/theme.js"></script>
<body>
-
+ <!-- Debug Console -->
<div id="console" class="row">
<div class="col">
<div class="switch">
</div>
</div>
<div class="col">
- <textarea rows="10" readonly="true"></textarea>
+ <div class="terminal"></div>
</div>
-
-
</div>
+<!-- End Debug Console -->
<div id="splash-screen">
<!--TODO autogenerate this content -->
var $log;
var $autoscroll;
$(document).ready(()=> {
- $log = $("#console textarea");
+ $log = $("#console .terminal");
$autoscroll = $("#console input");
});
var log = {
+ _parse(str, color) {
+ if (typeof str == "object") str = JSON.stringify(str,null, 2);
+ str = "[" + moment().format("hh:mm:ss") + "]: " + str;
+ str = "<text style='color: " + color + "'>" + str + "</text>";
+ return $log.html() + str;
+ },
+ normal (str) {
+ $log.html(this._parse(str,"white"));
+ if ($autoscroll.prop('checked'))
+ $log[0].scrollTop = $log[0].scrollHeight;
+ },
error (str) {
- if (typeof str == "object") str = JSON.stringify(str,null, 2);
- $log.val($log.val() + str + "\n");
+ $log.html(this._parse(str,"red"));
if ($autoscroll.prop('checked'))
- $log[0].scrollTop = $log[0].scrollHeight;
+ $log[0].scrollTop = $log[0].scrollHeight;
},
- warn () {
-
+ warn (str) {
+ $log.html(this._parse(str,"yellow"));
+ if ($autoscroll.prop('checked'))
+ $log[0].scrollTop = $log[0].scrollHeight;
},
- debug () {
-
+ debug (str) {
+ $log.html(this._parse(str,"lightblue"));
+ if ($autoscroll.prop('checked'))
+ $log[0].scrollTop = $log[0].scrollHeight;
}
}