OSDN Git Service

added color to debug console
authorJohn-Anthony Elenis <johnanthonyelenis@gmail.com>
Wed, 21 Aug 2019 17:33:16 +0000 (13:33 -0400)
committerJohn-Anthony Elenis <johnanthonyelenis@gmail.com>
Wed, 21 Aug 2019 17:33:16 +0000 (13:33 -0400)
index.html
js/theme.js

index 2e7ad04..dc5fc40 100644 (file)
       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>
@@ -69,7 +75,7 @@
 <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 -->
index c758cc4..dd0cb2c 100644 (file)
@@ -53,21 +53,35 @@ window.onerror = function() {
 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;
        }
 }