goTool/api/frontend.go

@@ -4,52 +4,8 @@ const (
 	TopicFrontendCmd = "front:cmd"
 )
 
-const (
-	CmdUpdateValue = "update_value"
-	CmdInitState   = "init_state"
-	CmdConnect     = "connect"
-	CmdDisconnect  = "disconnect"
-	CmdSendMessage = "send"
-	CmdRX          = "uart_rx"
-	CmdTX          = "uart_tx"
-)
-
-var MessageReceiveRegistry = map[string]func() any{
-	CmdConnect:     func() any { return &WsUartConnect{} },
-	CmdDisconnect:  func() any { return &WsUartDisconnect{} },
-	CmdSendMessage: func() any { return &WsUartSendMessage{} },
-}
-
-type WsMessage struct {
-	Cmd     string `json:"cmd"`
-	Payload []byte `json:"payload,omitempty"`
-}
-
-type SystemState struct {
-	Adapters         []string `json:"adapters"`
-	SelectedAdapter  string   `json:"selected_adapter"`
-	Baudrates        string   `json:"baudrates"`
-	SelectedBaudrate string   `json:"selected_baudrate"`
-	UartConnected    bool     `json:"uart_connected"`
-}
-
-type WsUartConnect struct {
-	SelectedAdapter string `json:"selected_adapter"`
-	Baudrate        int    `json:"baudrate"`
-}
-
-type WsUartDisconnect struct {
-}
-
-type WsUartSendMessage struct {
-	MsgId byte   `json:"msg_id"`
-	Data  []byte `json:"data"`
-}
-
-type WsUartRX struct {
-	Data []byte `json:"data"`
-}
-
-type WsUartTX struct {
+type FrontendCmd struct {
+	Action string `json:"action"`
+	ID     byte   `json:"id"`
 	Data   []byte `json:"data"`
 }

goTool/api/uart.go

@@ -5,7 +5,6 @@ const (
 	TopicUARTRx    = "uart:rx"
 	TopicUARTTx    = "uart:tx"
 	TopicUARTError = "uart:error"
-	TopicUartAction = "uart:action"
 
 	TopicOTA = "ota"
 )
@@ -86,25 +85,3 @@ type PayloadOtaPayload struct {
 type PayloadOtaStartEspNow struct {
 	Data []byte
 }
-
-type ActionUartConnect struct {
-	Adapter  string
-	Baudrate int
-}
-
-type ActionUartConnected struct {
-	Adapter  string
-	Baudrate int
-	Error    error
-}
-
-type ActionUartDisconnect struct {
-}
-
-type ActionUartDisconnected struct {
-}
-
-type ActionUartSendMessage struct {
-	MsgId byte
-	Data  []byte
-}

goTool/frontend/server.go

@@ -3,7 +3,6 @@ package frontend
 import (
 	"context"
 	"embed"
-	"encoding/json"
 	"io/fs"
 	"log"
 	"net/http"
@@ -34,15 +33,16 @@ func New(bus eventbus.EventBus) *FServer {
 }
 
 func (fsrv *FServer) routes() {
-	// Static files from the Embed-FS
-	// remove "www" prefix, so index.html is reachable over /
+	// Statische Dateien aus dem Embed-FS
+	// "www" Präfix entfernen, damit index.html unter / verfügbar ist
 	root, _ := fs.Sub(staticFiles, "www")
 	fsrv.mux.Handle("/", http.FileServer(http.FS(root)))
 
+	// WebSocket Endpunkt
 	fsrv.mux.HandleFunc("/ws", fsrv.handleWS)
 }
 
-func (fs *FServer) handleWS(w http.ResponseWriter, r *http.Request) {
+func (fsrv *FServer) handleWS(w http.ResponseWriter, r *http.Request) {
 	conn, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
 		log.Printf("Upgrade error: %v", err)
@@ -50,126 +50,53 @@ func (fs *FServer) handleWS(w http.ResponseWriter, r *http.Request) {
 	}
 	defer conn.Close()
 
+	// Kanäle für die Hardware-Events abonnieren
+	rxChan := fsrv.bus.Subscribe(api.TopicUARTRx)
+	txChan := fsrv.bus.Subscribe(api.TopicUARTTx)
+
 	// Context nutzen, um Goroutinen zu stoppen, wenn die Verbindung abreißt
 	ctx, cancel := context.WithCancel(r.Context())
 	defer cancel()
 
 	// WRITER: Send Events to Browser
-	go fs.HandleAppEvents(ctx, conn)
+	go func() {
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case f := <-rxChan:
+				if err := conn.WriteJSON(map[string]any{"type": "rx", "frame": f}); err != nil {
+					return
+				}
+			case f := <-txChan:
+				if err := conn.WriteJSON(map[string]any{"type": "tx", "frame": f}); err != nil {
+					return
+				}
+			}
+		}
+	}()
 
 	// READER: Commands from Browser
-	// This Function is Blocking
-	fs.GetFrontendEvents(ctx, conn)
+	for {
+		var cmd api.FrontendCmd
+		if err := conn.ReadJSON(&cmd); err != nil {
+			log.Printf("WS Read Error: %v", err)
+			break
+		}
+
+		fsrv.bus.Publish(api.TopicFrontendCmd, cmd)
+		log.Printf("Browser Action: %s auf ID 0x%02X", cmd.Action, cmd.ID)
+	}
 }
 
-func (fs *FServer) Start(addr string) error {
+func (fsrv *FServer) Start(addr string) error {
 	server := &http.Server{
 		Addr:         addr,
-		Handler:      fs.mux,
+		Handler:      fsrv.mux,
 		ReadTimeout:  5 * time.Second,
 		WriteTimeout: 10 * time.Second,
 	}
 
-	ctx, cancle := context.WithCancel(context.Background())
-	defer cancle()
-
-	go fs.HandleFrontendEvents(ctx)
-
 	log.Printf("Frontend Server gestartet auf %s", addr)
 	return server.ListenAndServe()
 }
-
-func (fs *FServer) HandleAppEvents(ctx context.Context, conn *websocket.Conn) error {
-	// Kanäle für die Hardware-Events abonnieren
-	rxChan := fs.bus.Subscribe(api.TopicUARTRx)
-	txChan := fs.bus.Subscribe(api.TopicUARTTx)
-	UartActions := fs.bus.Subscribe(api.TopicUartAction)
-
-	for {
-		select {
-		case <-ctx.Done():
-			return nil
-		case f := <-rxChan:
-			if err := conn.WriteJSON(map[string]any{"type": "rx", "frame": f}); err != nil {
-				return nil
-			}
-		case f := <-txChan:
-			if err := conn.WriteJSON(map[string]any{"type": "tx", "frame": f}); err != nil {
-				return nil
-			}
-		case msgT := <-UartActions:
-			switch msg := msgT.(type) {
-			case api.ActionUartConnected:
-				// TODO: nicht hier die daten nachhaltig speichern damit sie ans frontend gesendet werden können
-				// TODO: das muss irgendwo central passieren nicht für jeden client
-				if msg.Error != nil {
-				}
-				continue
-			case api.ActionUartDisconnected:
-				continue
-			}
-		}
-	}
-}
-
-func (fs *FServer) GetFrontendEvents(ctx context.Context, conn *websocket.Conn) error {
-	for {
-		select {
-		case <-ctx.Done():
-			return nil
-		default:
-			var cmd api.WsMessage
-			if err := conn.ReadJSON(&cmd); err != nil {
-				log.Printf("WS Read Error: %v", err)
-				return err
-			}
-
-			val, ok := api.MessageReceiveRegistry[cmd.Cmd]
-			if !ok {
-				log.Printf("No Message Type mapped to %v", cmd.Cmd)
-				continue
-			}
-			valM := val()
-
-			err := json.Unmarshal(cmd.Payload, valM)
-			if err != nil {
-				log.Printf("Could not Unmarshal payload %v", cmd.Payload)
-			}
-
-			fs.bus.Publish(api.TopicFrontendCmd, valM)
-			log.Printf("Browser Action: %s auf with %v", cmd.Cmd, cmd.Payload)
-		}
-	}
-}
-
-func (fs *FServer) HandleFrontendEvents(ctx context.Context) error {
-	fChan := fs.bus.Subscribe(api.TopicFrontendCmd)
-
-	for {
-		select {
-		case <-ctx.Done():
-			return nil
-		case msg := <-fChan:
-			switch msgT := msg.(type) {
-			case api.WsUartSendMessage:
-				log.Printf("Sending Uart Data % X", msgT.Data)
-				fs.bus.Publish(api.TopicUartAction, api.ActionUartSendMessage{
-					MsgId: msgT.MsgId,
-					Data:  msgT.Data,
-				})
-				continue
-			case api.WsUartConnect:
-				log.Printf("Connect with %s : %d", msgT.SelectedAdapter, msgT.Baudrate)
-				fs.bus.Publish(api.TopicUartAction, api.ActionUartConnect{
-					Adapter:  msgT.SelectedAdapter,
-					Baudrate: msgT.Baudrate,
-				})
-				continue
-			case api.WsUartDisconnect:
-				log.Printf("Disconnect from Uart Adapter")
-				fs.bus.Publish(api.TopicUartAction, api.ActionUartDisconnect{})
-				continue
-			}
-		}
-	}
-}

goTool/frontend/www/index.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <html>
   <head>
-    <link href="bootstrap.min.css" rel="stylesheet" />
-    <script src="bootstrap.bundle.min.js"></script>
-    <script defer src="windows.js"></script>
-    <script defer src="alpinejs.min.js"></script>
+    <link href="www/bootstrap.min.css" rel="stylesheet" />
+    <script src="www/bootstrap.bundle.min.js"></script>
+    <script defer src="www/alpinejs.min.js"></script>
+    <script defer src="www/windows.js"></script>
 
     <style>
       [x-cloak] {
@@ -13,118 +13,197 @@
 
       body {
         background-color: #f8f9fa;
+        /* Create 20px x 20px Grid */
         background-image:
           linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
           linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
         background-size: 20px 20px;
         height: 100vh;
         margin: 0;
-        padding-top: 56px; /* Space for navbar */
         overflow: hidden;
       }
 
+      .draggable-card {
+        width: 450px;
+        z-index: 1000;
+        user-select: none;
+      }
+
       .drag-handle {
         cursor: move;
       }
+
+      .card {
+        transition:
+          width 0.1s ease,
+          height 0.1s ease,
+          left 0.1s ease,
+          top 0.1s ease;
+      }
+
       .card[style*="cursor: move"] {
         transition: none;
       }
-
-      .navbar {
-        z-index: 2000; /* Above windows */
-      }
-
-      .ws-indicator {
-        width: 12px;
-        height: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-        transition: all 0.3s ease;
-      }
-      .glow-success {
-        box-shadow: 0 0 10px #198754;
-      }
-      .glow-danger {
-        box-shadow: 0 0 10px #dc3545;
-      }
     </style>
 
     <script>
       document.addEventListener("alpine:init", () => {
-        Alpine.store("sys", {
-          ws_connected: false,
-          adapters: ["/dev/ttyUSB0"],
-          selected_adapter: "",
-          baudrates: ["115200", "916000"],
-          selected_baudrate: "",
-          uart_connected: false,
+        Alpine.store("ui", {
+          topZ: 1000,
+          getNewZ() {
+            return ++this.topZ;
+          },
         });
+
+        Alpine.store("adapters", ["can0", "can1", "vcan0"]);
+        Alpine.store("selected_adapter", "");
+        Alpine.store("selected_bitrate", "");
+        Alpine.store("can_connected", false);
       });
     </script>
 
     <script>
-      let socket;
+      let socket = new WebSocket("ws://localhost:8000/echo");
 
-      function connectWS() {
-        socket = new WebSocket("ws://" + window.location.host + "/ws");
-
-        socket.onopen = () => {
+      socket.onopen = function (e) {
         console.log("[open] Connection established");
-          Alpine.store("sys").ws_connected = true;
+        console.log("Sending to server");
       };
 
-        socket.onmessage = (event) => {
+      socket.onmessage = function (event) {
+        console.log(`[message] Data received from server: ${event.data}`);
+        let mes;
         try {
-            let mes = JSON.parse(event.data);
-            if (mes && mes.cmd === "value") {
-              Alpine.store(mes.name, mes.value);
+          mes = JSON.parse(event.data);
+        } catch {
+          mes = null;
         }
-          } catch (e) {
-            console.log("Invalid JSON:", event.data);
+
+        if (mes != null) {
+          handleCommand(mes);
+        } else {
+          console.log(`${event.data} is not valid JSON`);
         }
       };
 
-        socket.onclose = () => {
+      socket.onclose = function (event) {
+        if (event.wasClean) {
+          alert(
+            `[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`,
+          );
+        } else {
+          // e.g. server process killed or network down
+          // event.code is usually 1006 in this case
           console.log("[close] Connection died");
-          Alpine.store("sys").ws_connected = false;
-          setTimeout(connectWS, 2000);
-        };
-
-        socket.onerror = (error) => {
-          console.log("[error]");
-          socket.close();
-        };
         }
+      };
 
-      connectWS();
+      socket.onerror = function (error) {
+        console.log(`[error]`);
+      };
+
+      function handleCommand(command) {
+        switch (command.cmd) {
+          case "value":
+            console.log("CHANGE VALUE");
+            Alpine.store(command.name, command.value);
+            break;
+        }
+      }
     </script>
   </head>
 
-  <body x-data>
-    <!-- Top Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
-      <div class="container-fluid">
-        <a class="navbar-brand fw-bold" href="#">
-          <span class="text-primary">Alox</span> Debug Tool
-        </a>
-
-        <div class="d-flex align-items-center gap-2">
-          <span class="text-light small opacity-75">Websocket:</span>
+  <body>
+    <h1>Alox Debug Tool</h1>
     <div
-            class="rounded-circle ws-indicator"
-            :class="$store.sys.ws_connected ? 'bg-success glow-success' : 'bg-danger glow-danger'"
-          ></div>
-        </div>
-      </div>
-    </nav>
-
-    <!-- UART Configuration Window -->
-    <yet-window
-      id="uart_config"
-      title="UART Configuration"
-      x="50"
-      y="80"
-      width="400px"
+      x-data="windowBox('window_id' ,100, 100)"
+      @mousemove.window="onDrag"
+      @mouseup.window="stopDrag"
+      @mousedown="focus"
+      class="card shadow-lg position-absolute"
+      :class="{ 'w-100 h-100 m-0 shadow-none': fullscreen }"
+      :style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '400px'};`"
+      x-cloak
     >
+      <div
+        class="card-header bg-dark text-white d-flex justify-content-between align-items-center drag-handle"
+        @mousedown="startDrag"
+        @dblclick="toggleFullscreen"
+      >
+        <h6 class="mb-0">CAN Interface</h6>
+
+        <div class="d-flex align-items-center gap-1">
+          <span
+            class="badge me-1"
+            :class="socket.readyState === 1 ? 'bg-success' : 'bg-danger'"
+            >WS</span
+          >
+
+          <button
+            class="btn btn-sm btn-outline-light py-0 px-2"
+            @click="toggleFullscreen"
+          >
+            <span>▢</span>
+          </button>
+
+          <button
+            class="btn btn-sm btn-outline-light py-0 px-2"
+            @click="minimized = !minimized"
+          >
+            <span x-text="minimized ? '+' : '−'"></span>
+          </button>
+        </div>
+      </div>
+
+      <div x-show="!minimized" class="flex-grow-1 overflow-auto">
+        <div class="card-body">
+          <p>HIER DER INHALT DER COMPONENT</p>
+        </div>
+      </div>
+    </div>
+
+    <div
+      x-data="windowBox('can_config', 100, 100)"
+      @mousemove.window="onDrag"
+      @mouseup.window="stopDrag"
+      @mousedown="focus"
+      class="card shadow-lg position-absolute"
+      :class="{ 'w-100 h-100 m-0 shadow-none': fullscreen }"
+      :style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '400px'};`"
+      x-cloak
+    >
+      <div
+        class="card-header bg-dark text-white d-flex justify-content-between align-items-center drag-handle"
+        @mousedown="startDrag"
+        @dblclick="toggleFullscreen"
+      >
+        <h6 class="mb-0">CAN Interface</h6>
+
+        <div class="d-flex align-items-center gap-1">
+          <span
+            class="badge me-1"
+            :class="socket.readyState === 1 ? 'bg-success' : 'bg-danger'"
+            >WS</span
+          >
+
+          <button
+            class="btn btn-sm btn-outline-light py-0 px-2"
+            @click="toggleFullscreen"
+          >
+            <span>▢</span>
+          </button>
+
+          <button
+            class="btn btn-sm btn-outline-light py-0 px-2"
+            @click="minimized = !minimized"
+          >
+            <span x-text="minimized ? '+' : '−'"></span>
+          </button>
+        </div>
+      </div>
+
+      <div x-show="!minimized" class="flex-grow-1 overflow-auto">
+        <div class="card-body">
           <label class="form-label small fw-bold text-uppercase text-muted"
             >Interface</label
           >
@@ -137,18 +216,23 @@
               class="btn btn-outline-secondary dropdown-toggle"
               type="button"
               @click="open = !open"
-          :disabled="$store.sys.uart_connected"
+              :disabled="$store.can_connected"
             >
               Adapter
             </button>
-        <ul class="dropdown-menu" :class="{ 'show': open }" x-show="open">
-          <template x-for="adapter in $store.sys.adapters">
+            <ul
+              class="dropdown-menu"
+              :class="{ 'show': open }"
+              x-show="open"
+              style="display: block"
+            >
+              <template x-for="adapter in $store.adapters">
                 <li>
                   <button
                     class="dropdown-item"
                     type="button"
                     x-text="adapter"
-                @click="$store.sys.selected_adapter = adapter; open = false"
+                    @click="$store.selected_adapter = adapter; open = false"
                   ></button>
                 </li>
               </template>
@@ -157,12 +241,12 @@
               type="text"
               class="form-control bg-light"
               readonly
-          :value="$store.sys.selected_adapter || 'Select Interface...'"
+              :value="$store.selected_adapter || 'Select Interface...'"
             />
           </div>
 
           <label class="form-label small fw-bold text-uppercase text-muted"
-        >Baudrate</label
+            >Bitrate (kbps)</label
           >
           <div
             class="input-group mb-4"
@@ -173,18 +257,25 @@
               class="btn btn-outline-secondary dropdown-toggle"
               type="button"
               @click="open = !open"
-          :disabled="$store.sys.uart_connected"
+              :disabled="$store.can_connected"
             >
               Speed
             </button>
-        <ul class="dropdown-menu" :class="{ 'show': open }" x-show="open">
-          <template x-for="rate in $store.sys.baudrates">
+            <ul
+              class="dropdown-menu"
+              :class="{ 'show': open }"
+              x-show="open"
+              style="display: block"
+            >
+              <template
+                x-for="rate in ['10', '20', '50', '100', '125', '250', '500', '800', '1000']"
+              >
                 <li>
                   <button
                     class="dropdown-item"
                     type="button"
-                x-text="rate"
-                @click="$store.sys.selected_baudrate = rate; open = false"
+                    x-text="rate + ' kbps'"
+                    @click="$store.selected_bitrate = rate; open = false"
                   ></button>
                 </li>
               </template>
@@ -193,22 +284,23 @@
               type="text"
               class="form-control bg-light"
               readonly
-          :value="$store.sys.selected_baudrate || 'Select Baudrate...'"
+              :value="$store.selected_bitrate ? $store.selected_bitrate + ' kbps' : 'Select Speed...'"
             />
           </div>
 
           <div class="d-grid">
             <button
-          x-show="!$store.sys.uart_connected"
+              x-show="!$store.can_connected"
               class="btn btn-primary btn-lg"
               type="button"
-          :disabled="!$store.sys.selected_adapter || !$store.sys.selected_baudrate"
-          @click="socket.send(JSON.stringify({cmd: 'connect', adapter: $store.sys.selected_adapter, baudrate: parseInt($store.sys.selected_baudrate)}))"
+              :disabled="!$store.selected_adapter || !$store.selected_bitrate"
+              @click="socket.send(JSON.stringify({cmd: 'connect', adapter: $store.selected_adapter, bitrate: parseInt($store.selected_bitrate)}))"
             >
-          Connect to UART
+              Connect to CAN
             </button>
+
             <button
-          x-show="$store.sys.uart_connected"
+              x-show="$store.can_connected"
               x-cloak
               class="btn btn-danger btn-lg"
               type="button"
@@ -217,25 +309,41 @@
               Disconnect
             </button>
           </div>
-    </yet-window>
+        </div>
+      </div>
+    </div>
 
-    <!-- UART Log Window -->
-    <yet-window
-      id="uart_log"
-      title="UART Log"
-      x="500"
-      y="80"
-      width="550px"
-      header-class="bg-primary text-white"
+    <div
+      x-data="windowBox('can_log', 500, 50)"
+      @mousemove.window="onDrag"
+      @mouseup.window="stopDrag"
+      @mousedown="focus"
+      class="card shadow-lg position-absolute draggable-card"
+      :style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '500px'};`"
+      x-cloak
     >
       <div
-        class="bg-dark text-success font-monospace small p-2 rounded shadow-inner"
-        style="height: 400px; overflow-y: auto"
+        class="card-header bg-primary text-white d-flex justify-content-between align-items-center drag-handle"
+        @mousedown="startDrag"
       >
-        <div class="text-muted small mt-2">
-          // UART log data will appear here...
+        <h6 class="mb-0">📜 CAN Log</h6>
+        <div class="d-flex gap-1">
+          <button
+            class="btn btn-sm btn-outline-light py-0"
+            @click="toggleMinimize"
+          >
+            <span x-text="minimized ? '+' : '−'"></span>
+          </button>
+        </div>
+      </div>
+      <div
+        x-show="!minimized"
+        class="card-body bg-dark text-success font-monospace small"
+        style="height: 200px; overflow-y: auto"
+      >
+        <div>[0.001] ID: 0x123 Data: FF AA 00</div>
+        <div>[0.005] ID: 0x456 Data: 12 34 56</div>
       </div>
     </div>
-    </yet-window>
   </body>
 </html>

goTool/frontend/www/windows.js

@@ -1,45 +1,32 @@
-// windows.js
+function windowBox(id, initialX = 50, initialY = 50) {
+  // Load saved data or user defaults
+  const saved = JSON.parse(localStorage.getItem(`win_${id}`)) || {
+    x: initialX,
+    y: initialY,
+    min: false,
+  };
 
-document.addEventListener("alpine:init", () => {
-  // 1. Globaler Store for Window Managment
-  Alpine.store("Yet_WM", {
-    topZ: 1000,
-    getNewZ() {
-      return ++this.topZ;
-    },
-  });
-
-  Alpine.data("YetWindow", (id, initialX = 50, initialY = 50) => ({
+  return {
     id: id,
-    pos: { x: parseInt(initialX), y: parseInt(initialY) },
-    lastPos: { x: 0, y: 0 },
+    pos: { x: saved.x, y: saved.y },
+    lastPos: { x: saved.x, y: saved.y },
     dragging: false,
-    minimized: false,
+    minimized: saved.min,
     fullscreen: false,
-    zIndex: 1000,
+    zIndex: Alpine.store("ui").topZ,
     offset: { x: 0, y: 0 },
 
     init() {
-      // Lade gespeicherten Zustand (einheitlicher Key: yet_win_)
-      const saved = JSON.parse(localStorage.getItem(`yet_win_${this.id}`));
-      if (saved) {
-        this.pos = { x: saved.x, y: saved.y };
-        this.minimized = saved.min;
-      }
-      this.focus();
+      // Move window in viewport when browser is other size
       this.keepInBounds();
     },
 
     focus() {
-      this.zIndex = Alpine.store("Yet_WM").getNewZ();
+      this.zIndex = Alpine.store("ui").getNewZ();
     },
 
     startDrag(e) {
       if (e.target.closest("button") || this.fullscreen) return;
-      
-      // Verhindert Text-Markierung während des Verschiebens
-      e.preventDefault();
-      
       this.focus();
       this.dragging = true;
       this.offset.x = e.clientX - this.pos.x;
@@ -48,19 +35,44 @@ document.addEventListener("alpine:init", () => {
 
     onDrag(e) {
       if (!this.dragging) return;
+
+      // Calc new position
       let newX = e.clientX - this.offset.x;
       let newY = e.clientY - this.offset.y;
 
+      // Boundary Check
       const margin = 20;
-      this.pos.x = Math.max(margin - 350, Math.min(newX, window.innerWidth - 50));
+      this.pos.x = Math.max(
+        margin - 350,
+        Math.min(newX, window.innerWidth - 50),
+      );
       this.pos.y = Math.max(0, Math.min(newY, window.innerHeight - 40));
     },
 
     stopDrag() {
-      if (this.dragging) {
       this.dragging = false;
       this.save();
-      }
+    },
+
+    keepInBounds() {
+      if (this.pos.x > window.innerWidth) this.pos.x = window.innerWidth - 400;
+      if (this.pos.y > window.innerHeight) this.pos.y = 50;
+    },
+
+    save() {
+      localStorage.setItem(
+        `win_${this.id}`,
+        JSON.stringify({
+          x: this.pos.x,
+          y: this.pos.y,
+          min: this.minimized,
+        }),
+      );
+    },
+
+    reset() {
+      localStorage.removeItem(`win_${this.id}`);
+      location.reload();
     },
 
     toggleMinimize() {
@@ -70,84 +82,14 @@ document.addEventListener("alpine:init", () => {
 
     toggleFullscreen() {
       if (!this.fullscreen) {
-        this.lastPos = { ...this.pos };
+        this.lastPos = { ...this.pos }; // Save Position
         this.pos = { x: 0, y: 0 };
         this.fullscreen = true;
       } else {
-        this.pos = { ...this.lastPos };
+        this.pos = { ...this.lastPos }; // Back to old Position
         this.fullscreen = false;
       }
       this.focus();
     },
-
-    save() {
-      localStorage.setItem(
-        `yet_win_${this.id}`,
-        JSON.stringify({
-          x: this.pos.x,
-          y: this.pos.y,
-          min: this.minimized,
-        })
-      );
-    },
-
-    keepInBounds() {
-      if (this.pos.x > window.innerWidth) this.pos.x = 50;
-      if (this.pos.y > window.innerHeight) this.pos.y = 50;
-    },
-  }));
-});
-
-// Definition der Web Component
-class YetWindowElement extends HTMLElement {
-  connectedCallback() {
-    const id = this.getAttribute("id") || "win_" + Math.random().toString(36).substr(2, 9);
-    const title = this.getAttribute("title") || "Window";
-    const x = this.getAttribute("x") || "50";
-    const y = this.getAttribute("y") || "50";
-    const width = this.getAttribute("width") || "450px";
-    const headerClass = this.getAttribute("header-class") || "bg-dark text-white";
-
-    const content = this.innerHTML;
-
-    this.innerHTML = `
-      <div
-        x-data="YetWindow('${id}', ${x}, ${y})"
-        @mousemove.window="onDrag"
-        @mouseup.window="stopDrag"
-        @mousedown="focus"
-        class="card shadow-lg position-absolute"
-        :class="{ 'w-100 h-100 m-0 shadow-none': fullscreen }"
-        :style="\`left: \${pos.x}px; top: \${pos.y}px; z-index: \${zIndex}; width: \${fullscreen ? '100vw' : '${width}'}; user-select: \${dragging ? 'none' : 'auto'};\`"
-        x-cloak
-      >
-        <div
-          class="card-header d-flex justify-content-between align-items-center drag-handle ${headerClass}"
-          @mousedown="startDrag"
-          @dblclick="toggleFullscreen"
-          style="user-select: none;"
-        >
-          <h6 class="mb-0">${title}</h6>
-
-          <div class="d-flex align-items-center gap-1">
-            <button class="btn btn-sm btn-outline-light py-0 px-2" @click="toggleFullscreen">
-              <span>▢</span>
-            </button>
-
-            <button class="btn btn-sm btn-outline-light py-0 px-2" @click="toggleMinimize">
-              <span x-text="minimized ? '+' : '−'"></span>
-            </button>
-          </div>
-        </div>
-
-        <div x-show="!minimized" class="flex-grow-1 overflow-auto">
-          <div class="card-body">
-            ${content}
-          </div>
-        </div>
-      </div>
-    `;
-  }
+  };
 }
-
-customElements.define("yet-window", YetWindowElement);

goTool/main.go

@@ -58,18 +58,7 @@ func StartTests(config Config) {
 
 func StartApp(config Config) {
 	bus := eventbus.New()
-	com, err := uart.NewCom(bus)
-
-	ctx, cancle := context.WithCancel(context.Background())
-	defer cancle()
-
-	go com.EventbusHandler(ctx)
-
-	if err != nil {
-		log.Printf("Could not Create Com with Uart Device %v", err)
-		return
-	}
-	err = com.Connect(config.UartPort, config.Baudrate)
+	com, err := uart.Connect(bus, config.UartPort, config.Baudrate)
 	if err != nil {
 		log.Printf("Could not Connect with Uart Device %v", err)
 	}
@@ -83,6 +72,8 @@ func StartApp(config Config) {
 	updateSlices := SliceUpdate(update, 200)
 
 	oManager := NewOTAManager(bus, com, updateSlices)
+	ctx, cancle := context.WithCancel(context.Background())
+	defer cancle()
 
 	StartMessageHandling(ctx, bus)
 	oManager.StartUpdateHandler(ctx)

goTool/uart/com.go

@@ -2,7 +2,6 @@ package uart
 
 import (
 	"context"
-	"fmt"
 	"log"
 	"time"
 
@@ -17,26 +16,15 @@ type Com struct {
 	cancel context.CancelFunc
 }
 
-func NewCom(bus eventbus.EventBus) (*Com, error) {
-	return &Com{
-		bus:    bus,
-		port:   nil,
-		cancel: nil,
-	}, nil
-}
-
-func (c *Com) Connect(portName string, baudrate int) error {
-	if c.port != nil {
-		return fmt.Errorf("Port already connected")
-	}
+func Connect(bus eventbus.EventBus, portName string, baudrate int) (*Com, error) {
 	mode := &serial.Mode{BaudRate: baudrate}
 	port, err := serial.Open(portName, mode)
 	if err != nil {
-		return err
+		return nil, err
 	}
 
 	ctx, cancel := context.WithCancel(context.Background())
-	drv := New(c.bus)
+	drv := New(bus)
 
 	go func() {
 		buff := make([]byte, 1024)
@@ -60,9 +48,11 @@ func (c *Com) Connect(portName string, baudrate int) error {
 		}
 	}()
 
-	c.port = port
-	c.cancel = cancel
-	return nil
+	return &Com{
+		bus:    bus,
+		port:   port,
+		cancel: cancel,
+	}, nil
 }
 
 func (c *Com) Close() {
@@ -110,29 +100,3 @@ func (c *Com) Send(id byte, payload []byte) error {
 
 	return err
 }
-
-func (c *Com) EventbusHandler(ctx context.Context) error {
-	UActions := c.bus.Subscribe(api.TopicUartAction)
-
-	for {
-		select {
-		case <-ctx.Done():
-			return nil
-		case msgT := <-UActions:
-			switch msg := msgT.(type) {
-			case api.ActionUartConnect:
-				err := c.Connect(msg.Adapter, msg.Baudrate)
-				c.bus.Publish(api.TopicUartAction, api.ActionUartConnected{
-					Adapter:  msg.Adapter,
-					Baudrate: msg.Baudrate,
-					Error:    err,
-				})
-			case api.ActionUartDisconnect:
-				c.Close()
-				c.bus.Publish(api.TopicUartAction, api.ActionUartDisconnected{})
-			case api.ActionUartSendMessage:
-				c.Send(msg.MsgId, msg.Data)
-			}
-		}
-	}
-}