Improve novnc

web-frontend/src/app/console/console.component.html

@@ -1,10 +1,7 @@
-<p>A VNC console should be seen now</p>
-<button type="submit" (click)="startClient()">Start Vnc Client</button>
-
 <div>
-  <div id="vnc-screen" class="content">
+  <div id="vnc-screen" style="height: 80vh; margin-bottom: 10px;">
     <!-- This is where the remote screen will appear -->
   </div>
 </div>
 
-<p>End of VNC console</p>
+<button mat-stroked-button (click)="startClient()">Reconnect</button>

web-frontend/src/app/console/console.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 // @ts-expect-error no types
 import RFB from '@novnc/novnc/lib/rfb';
 
@@ -8,24 +9,44 @@ import RFB from '@novnc/novnc/lib/rfb';
 
 @Component({
   selector: 'app-console',
-  imports: [],
+  imports: [MatButtonModule],
   templateUrl: './console.component.html',
   styleUrl: './console.component.scss'
 })
-export class ConsoleComponent {
+export class ConsoleComponent implements AfterViewInit {
   title = "vnc-client";
 
   public rfb: any;
 
-  startClient() {
-    console.log("Starting !!!");
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
 
-    // Creating a new RFB object will start a new connection
-    //this.rfb = new RFB(document.getElementById("screen"), url);
+  ngAfterViewInit(): void {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.startClient();
+        }
+      });
+    }, { threshold: 0.1 });
+
+    observer.observe(this.el.nativeElement);
+  }
+
+  startClient() {
     const container: HTMLElement | null = document.getElementById('vnc-screen');
     if (container) {
-      const rfb = new RFB(container, "ws://127.0.0.1:5700");
-      //rfb.scaleViewport = true;
+      // Creating a new RFB object will start a new connection
+      if (this.rfb === undefined) {
+        console.log("Connect to qemu");
+        this.rfb = new RFB(container, "ws://127.0.0.1:5700");
+        this.rfb.scaleViewport = true;
+      }
+      else {
+        console.log("Already connected to qemu, so reconnect");
+        this.rfb.disconnect();
+        this.rfb = new RFB(container, "ws://127.0.0.1:5700");
+        this.rfb.scaleViewport = true;
+      }
     }
   }
 }