4 files changed, 69 insertions, 7 deletions

diff --git a/index.html b/index.html
index 879b87c..6041f26 100644
--- a/index.html
+++ b/index.html
@@ -32,9 +32,11 @@
         <a class="nav-el" href="?page=automation">Home Automation</a>
     </nav>
 
-    <content>
-    </content>
+    <content></content>
 
+    <log></log>
+
+    <script src="scripts/gui-common/log.js"></script>
     <script src="scripts/gui-common/color.js"></script>
     <script src="scripts/gui-common/temperature.js"></script>
     <script src="scripts/gui-common/widgets.js"></script>
diff --git a/scripts/gui-common/log.js b/scripts/gui-common/log.js
new file mode 100644
index 0000000..dcf5ac2
--- /dev/null
+++ b/scripts/gui-common/log.js
@@ -0,0 +1,38 @@
+'use strict';
+
+
+const LOG_EL = document.getElementsByTagName("log")[0];
+let LAST_LOG_TYPE = "";
+
+function at_bot(el) {
+    return el.scrollTop >= (el.scrollHeight - el.clientHeight)
+}
+
+function addLogEntry(object) {
+
+    let do_scroll = at_bot(LOG_EL);
+
+    let out = {
+        type: object.type,
+        target: object.target.classList.toString()
+    };
+
+    if (LAST_LOG_TYPE == "mousemove" || LAST_LOG_TYPE == "touchmove") {
+        if (LAST_LOG_TYPE == out.type)
+            return;
+    }
+
+    LAST_LOG_TYPE = out.type;
+
+    let entry = document.createElement("entry");
+    entry.innerText = JSON.stringify(out);
+
+    LOG_EL.appendChild(entry);
+
+    if (do_scroll) {
+        LOG_EL.scroll({
+            top: LOG_EL.scrollHeight,
+            behavior: "instant",
+        });
+    }
+}
\ No newline at end of file
diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js
index 86bc5b1..c99c3b1 100644
--- a/scripts/gui-common/widgets.js
+++ b/scripts/gui-common/widgets.js
@@ -109,7 +109,7 @@ class Widget extends EventTarget{
     #emitMouseEvent(event)
     {
         if (WIDGETS_DEBUG) {
-            console.log(event);
+            addLogEntry(event);
         }
 
         if (this.#inactive)
@@ -122,7 +122,7 @@ class Widget extends EventTarget{
     #emitTouchEvent(event)
     {
         if (WIDGETS_DEBUG) {
-            console.log(event);
+            addLogEntry(event);
         }
 
         if (event.type == "touchstart")
@@ -141,7 +141,7 @@ class Widget extends EventTarget{
     /** @param {KeyboardEvent} event */
     #emitKeyboardEvent(event) {
         if (WIDGETS_DEBUG) {
-            console.log(event);
+            addLogEntry(event);
         }
 
         if (this.#inactive)
@@ -156,7 +156,7 @@ class Widget extends EventTarget{
     /** @param {FocusEvent} event */
     #emitFocusEvent(event) {
         if (WIDGETS_DEBUG) {
-            console.log(event);
+            addLogEntry(event);
         }
 
         if (this.#inactive)
@@ -172,7 +172,7 @@ class Widget extends EventTarget{
     #emitContextEvent(event)
     {
         if (WIDGETS_DEBUG) {
-            console.log(event);
+            addLogEntry(event);
         }
         
         if (this.#inactive)
diff --git a/styles/main.css b/styles/main.css
index b37552e..cd73155 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -70,3 +70,25 @@ content {
     margin-right: 50px;
     margin-bottom:50px;
 }
+
+log {
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    width: 90%;
+    height: 20vh;
+    left: 5%;
+    bottom: 5vw;
+    border-radius: 3px;
+    background-color: white;
+    overflow: scroll;
+}
+
+log entry {
+    display: block;
+    width: 90%;
+    border: 2px solid gray;
+    border-radius: 5px;
+}
\ No newline at end of file