Merge pull request #523 from PRATHAM-SPS/automatic_scrolling

Automatic_Scrolling for arduino console.
frg-fossee · Jun 23, 2023 · c2f7649 · c2f7649
2 parents 989b334 + 1ac06cf
commit c2f7649
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/ArduinoFrontend/src/app/Libs/outputs/Arduino.ts b/ArduinoFrontend/src/app/Libs/outputs/Arduino.ts
@@ -286,12 +286,31 @@ export class ArduinoUno extends CircuitElement {
       }
     });
 
+    // Flag to control automatic scrolling
+    let shouldScrollToBottom = true;
+    const msg = document.getElementById('msg');
+
+     // Scroll Listener in console
+    msg.addEventListener('scroll', () => {
+      const isScrolledToBottom = msg.scrollHeight - msg.clientHeight <= msg.scrollTop + 1;
+      shouldScrollToBottom = isScrolledToBottom;
+    });
+
     this.runner.usart.onByteTransmit = (value) => {
-      /// TODO: Show On Console
-      myOutput.textContent += String.fromCharCode(value);
-    };
+      {
+        // TODO: Show On Console
+        const isScrolledToBottom = msg.scrollHeight - msg.clientHeight <= msg.scrollTop + 1;
+        myOutput.textContent += String.fromCharCode(value);
 
-    document.getElementById('msg').append(myOutput);
+        if (shouldScrollToBottom && isScrolledToBottom) {
+          // Scroll to bottom if both conditions are met
+          msg.scrollTop = msg.scrollHeight;
+        }
+      }
+    };
+     // Appending output to console
+    msg.appendChild(myOutput);
+    msg.scrollTop = msg.scrollHeight;
     this.pinNameMap['5V'].setValue(5, null);
     this.pinNameMap['3.3V'].setValue(3.3, null);
 

diff --git a/ArduinoFrontend/src/app/simulator/simulator.component.css b/ArduinoFrontend/src/app/simulator/simulator.component.css
@@ -350,6 +350,7 @@ body {
   display: flex;
   color: #fff;
   flex-direction: column;
+  max-height: 200px;
 }
 
 #msg label {