Added many Eventbus Structs for the Frontend Handling

goTool/api/frontend.go

@@ -4,8 +4,52 @@ const (
 	TopicFrontendCmd = "front:cmd"
 )
 
-type FrontendCmd struct {
+const (
-	Action string `json:"action"`
+	CmdUpdateValue = "update_value"
-	ID     byte   `json:"id"`
+	CmdInitState   = "init_state"
-	Data   []byte `json:"data"`
+	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 {
+	Data []byte `json:"data"`
 }

goTool/api/uart.go

@@ -2,9 +2,10 @@ package api
 
 // Topics
 const (
-	TopicUARTRx    = "uart:rx"
+	TopicUARTRx     = "uart:rx"
-	TopicUARTTx    = "uart:tx"
+	TopicUARTTx     = "uart:tx"
-	TopicUARTError = "uart:error"
+	TopicUARTError  = "uart:error"
+	TopicUartAction = "uart:action"
 
 	TopicOTA = "ota"
 )
@@ -85,3 +86,25 @@ 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,6 +3,7 @@ package frontend
 import (
 	"context"
 	"embed"
+	"encoding/json"
 	"io/fs"
 	"log"
 	"net/http"
@@ -33,16 +34,15 @@ func New(bus eventbus.EventBus) *FServer {
 }
 
 func (fsrv *FServer) routes() {
-	// Statische Dateien aus dem Embed-FS
+	// Static files from the Embed-FS
-	// "www" Präfix entfernen, damit index.html unter / verfügbar ist
+	// remove "www" prefix, so index.html is reachable over /
 	root, _ := fs.Sub(staticFiles, "www")
 	fsrv.mux.Handle("/", http.FileServer(http.FS(root)))
 
-	// WebSocket Endpunkt
 	fsrv.mux.HandleFunc("/ws", fsrv.handleWS)
 }
 
-func (fsrv *FServer) handleWS(w http.ResponseWriter, r *http.Request) {
+func (fs *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,53 +50,126 @@ func (fsrv *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 func() {
+	go fs.HandleAppEvents(ctx, conn)
-		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
-	for {
+	// This Function is Blocking
-		var cmd api.FrontendCmd
+	fs.GetFrontendEvents(ctx, conn)
-		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 (fsrv *FServer) Start(addr string) error {
+func (fs *FServer) Start(addr string) error {
 	server := &http.Server{
 		Addr:         addr,
-		Handler:      fsrv.mux,
+		Handler:      fs.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="www/bootstrap.min.css" rel="stylesheet" />
+    <link href="bootstrap.min.css" rel="stylesheet" />
-    <script src="www/bootstrap.bundle.min.js"></script>
+    <script src="bootstrap.bundle.min.js"></script>
-    <script defer src="www/alpinejs.min.js"></script>
+    <script defer src="windows.js"></script>
-    <script defer src="www/windows.js"></script>
+    <script defer src="alpinejs.min.js"></script>
 
     <style>
       [x-cloak] {
@@ -13,337 +13,229 @@
 
       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("ui", {
+        Alpine.store("sys", {
-          topZ: 1000,
+          ws_connected: false,
-          getNewZ() {
+          adapters: ["/dev/ttyUSB0"],
-            return ++this.topZ;
+          selected_adapter: "",
-          },
+          baudrates: ["115200", "916000"],
+          selected_baudrate: "",
+          uart_connected: false,
         });
-
-        Alpine.store("adapters", ["can0", "can1", "vcan0"]);
-        Alpine.store("selected_adapter", "");
-        Alpine.store("selected_bitrate", "");
-        Alpine.store("can_connected", false);
       });
     </script>
 
     <script>
-      let socket = new WebSocket("ws://localhost:8000/echo");
+      let socket;
 
-      socket.onopen = function (e) {
+      function connectWS() {
-        console.log("[open] Connection established");
+        socket = new WebSocket("ws://" + window.location.host + "/ws");
-        console.log("Sending to server");
-      };
 
-      socket.onmessage = function (event) {
+        socket.onopen = () => {
-        console.log(`[message] Data received from server: ${event.data}`);
+          console.log("[open] Connection established");
-        let mes;
+          Alpine.store("sys").ws_connected = true;
-        try {
+        };
-          mes = JSON.parse(event.data);
-        } catch {
-          mes = null;
-        }
 
-        if (mes != null) {
+        socket.onmessage = (event) => {
-          handleCommand(mes);
+          try {
-        } else {
+            let mes = JSON.parse(event.data);
-          console.log(`${event.data} is not valid JSON`);
+            if (mes && mes.cmd === "value") {
-        }
+              Alpine.store(mes.name, mes.value);
-      };
+            }
+          } catch (e) {
+            console.log("Invalid JSON:", event.data);
+          }
+        };
 
-      socket.onclose = function (event) {
+        socket.onclose = () => {
-        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 = function (error) {
+        socket.onerror = (error) => {
-        console.log(`[error]`);
+          console.log("[error]");
-      };
+          socket.close();
-
+        };
-      function handleCommand(command) {
-        switch (command.cmd) {
-          case "value":
-            console.log("CHANGE VALUE");
-            Alpine.store(command.name, command.value);
-            break;
-        }
       }
+
+      connectWS();
     </script>
   </head>
 
-  <body>
+  <body x-data>
-    <h1>Alox Debug Tool</h1>
+    <!-- Top Navbar -->
-    <div
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
-      x-data="windowBox('window_id' ,100, 100)"
+      <div class="container-fluid">
-      @mousemove.window="onDrag"
+        <a class="navbar-brand fw-bold" href="#">
-      @mouseup.window="stopDrag"
+          <span class="text-primary">Alox</span> Debug Tool
-      @mousedown="focus"
+        </a>
-      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">
+        <div class="d-flex align-items-center gap-2">
-          <span
+          <span class="text-light small opacity-75">Websocket:</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
-          >
           <div
-            class="input-group mb-3"
+            class="rounded-circle ws-indicator"
-            x-data="{ open: false }"
+            :class="$store.sys.ws_connected ? 'bg-success glow-success' : 'bg-danger glow-danger'"
-            @click.outside="open = false"
+          ></div>
-          >
-            <button
-              class="btn btn-outline-secondary dropdown-toggle"
-              type="button"
-              @click="open = !open"
-              :disabled="$store.can_connected"
-            >
-              Adapter
-            </button>
-            <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.selected_adapter = adapter; open = false"
-                  ></button>
-                </li>
-              </template>
-            </ul>
-            <input
-              type="text"
-              class="form-control bg-light"
-              readonly
-              :value="$store.selected_adapter || 'Select Interface...'"
-            />
-          </div>
-
-          <label class="form-label small fw-bold text-uppercase text-muted"
-            >Bitrate (kbps)</label
-          >
-          <div
-            class="input-group mb-4"
-            x-data="{ open: false }"
-            @click.outside="open = false"
-          >
-            <button
-              class="btn btn-outline-secondary dropdown-toggle"
-              type="button"
-              @click="open = !open"
-              :disabled="$store.can_connected"
-            >
-              Speed
-            </button>
-            <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 + ' kbps'"
-                    @click="$store.selected_bitrate = rate; open = false"
-                  ></button>
-                </li>
-              </template>
-            </ul>
-            <input
-              type="text"
-              class="form-control bg-light"
-              readonly
-              :value="$store.selected_bitrate ? $store.selected_bitrate + ' kbps' : 'Select Speed...'"
-            />
-          </div>
-
-          <div class="d-grid">
-            <button
-              x-show="!$store.can_connected"
-              class="btn btn-primary btn-lg"
-              type="button"
-              :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 CAN
-            </button>
-
-            <button
-              x-show="$store.can_connected"
-              x-cloak
-              class="btn btn-danger btn-lg"
-              type="button"
-              @click="socket.send(JSON.stringify({cmd: 'disconnect'}))"
-            >
-              Disconnect
-            </button>
-          </div>
         </div>
       </div>
-    </div>
+    </nav>
 
-    <div
+    <!-- UART Configuration Window -->
-      x-data="windowBox('can_log', 500, 50)"
+    <yet-window
-      @mousemove.window="onDrag"
+      id="uart_config"
-      @mouseup.window="stopDrag"
+      title="UART Configuration"
-      @mousedown="focus"
+      x="50"
-      class="card shadow-lg position-absolute draggable-card"
+      y="80"
-      :style="`left: ${pos.x}px; top: ${pos.y}px; z-index: ${zIndex}; width: ${fullscreen ? '100vw' : '500px'};`"
+      width="400px"
-      x-cloak
+    >
+      <label class="form-label small fw-bold text-uppercase text-muted"
+        >Interface</label
+      >
+      <div
+        class="input-group mb-3"
+        x-data="{ open: false }"
+        @click.outside="open = false"
+      >
+        <button
+          class="btn btn-outline-secondary dropdown-toggle"
+          type="button"
+          @click="open = !open"
+          :disabled="$store.sys.uart_connected"
+        >
+          Adapter
+        </button>
+        <ul class="dropdown-menu" :class="{ 'show': open }" x-show="open">
+          <template x-for="adapter in $store.sys.adapters">
+            <li>
+              <button
+                class="dropdown-item"
+                type="button"
+                x-text="adapter"
+                @click="$store.sys.selected_adapter = adapter; open = false"
+              ></button>
+            </li>
+          </template>
+        </ul>
+        <input
+          type="text"
+          class="form-control bg-light"
+          readonly
+          :value="$store.sys.selected_adapter || 'Select Interface...'"
+        />
+      </div>
+
+      <label class="form-label small fw-bold text-uppercase text-muted"
+        >Baudrate</label
+      >
+      <div
+        class="input-group mb-4"
+        x-data="{ open: false }"
+        @click.outside="open = false"
+      >
+        <button
+          class="btn btn-outline-secondary dropdown-toggle"
+          type="button"
+          @click="open = !open"
+          :disabled="$store.sys.uart_connected"
+        >
+          Speed
+        </button>
+        <ul class="dropdown-menu" :class="{ 'show': open }" x-show="open">
+          <template x-for="rate in $store.sys.baudrates">
+            <li>
+              <button
+                class="dropdown-item"
+                type="button"
+                x-text="rate"
+                @click="$store.sys.selected_baudrate = rate; open = false"
+              ></button>
+            </li>
+          </template>
+        </ul>
+        <input
+          type="text"
+          class="form-control bg-light"
+          readonly
+          :value="$store.sys.selected_baudrate || 'Select Baudrate...'"
+        />
+      </div>
+
+      <div class="d-grid">
+        <button
+          x-show="!$store.sys.uart_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)}))"
+        >
+          Connect to UART
+        </button>
+        <button
+          x-show="$store.sys.uart_connected"
+          x-cloak
+          class="btn btn-danger btn-lg"
+          type="button"
+          @click="socket.send(JSON.stringify({cmd: 'disconnect'}))"
+        >
+          Disconnect
+        </button>
+      </div>
+    </yet-window>
+
+    <!-- UART Log Window -->
+    <yet-window
+      id="uart_log"
+      title="UART Log"
+      x="500"
+      y="80"
+      width="550px"
+      header-class="bg-primary text-white"
     >
       <div
-        class="card-header bg-primary text-white d-flex justify-content-between align-items-center drag-handle"
+        class="bg-dark text-success font-monospace small p-2 rounded shadow-inner"
-        @mousedown="startDrag"
+        style="height: 400px; overflow-y: auto"
       >
-        <h6 class="mb-0">📜 CAN Log</h6>
+        <div class="text-muted small mt-2">
-        <div class="d-flex gap-1">
+          // UART log data will appear here...
-          <button
-            class="btn btn-sm btn-outline-light py-0"
-            @click="toggleMinimize"
-          >
-            <span x-text="minimized ? '+' : '−'"></span>
-          </button>
         </div>
       </div>
-      <div
+    </yet-window>
-        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>
   </body>
 </html>

goTool/frontend/www/windows.js

@@ -1,32 +1,45 @@
-function windowBox(id, initialX = 50, initialY = 50) {
+// windows.js
-  // Load saved data or user defaults
-  const saved = JSON.parse(localStorage.getItem(`win_${id}`)) || {
-    x: initialX,
-    y: initialY,
-    min: false,
-  };
 
-  return {
+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) => ({
     id: id,
-    pos: { x: saved.x, y: saved.y },
+    pos: { x: parseInt(initialX), y: parseInt(initialY) },
-    lastPos: { x: saved.x, y: saved.y },
+    lastPos: { x: 0, y: 0 },
     dragging: false,
-    minimized: saved.min,
+    minimized: false,
     fullscreen: false,
-    zIndex: Alpine.store("ui").topZ,
+    zIndex: 1000,
     offset: { x: 0, y: 0 },
 
     init() {
-      // Move window in viewport when browser is other size
+      // 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();
       this.keepInBounds();
     },
 
     focus() {
-      this.zIndex = Alpine.store("ui").getNewZ();
+      this.zIndex = Alpine.store("Yet_WM").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;
@@ -35,44 +48,19 @@ function windowBox(id, initialX = 50, initialY = 50) {
 
     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(
+      this.pos.x = Math.max(margin - 350, Math.min(newX, window.innerWidth - 50));
-        margin - 350,
-        Math.min(newX, window.innerWidth - 50),
-      );
       this.pos.y = Math.max(0, Math.min(newY, window.innerHeight - 40));
     },
 
     stopDrag() {
-      this.dragging = false;
+      if (this.dragging) {
-      this.save();
+        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() {
@@ -82,14 +70,84 @@ function windowBox(id, initialX = 50, initialY = 50) {
 
     toggleFullscreen() {
       if (!this.fullscreen) {
-        this.lastPos = { ...this.pos }; // Save Position
+        this.lastPos = { ...this.pos };
         this.pos = { x: 0, y: 0 };
         this.fullscreen = true;
       } else {
-        this.pos = { ...this.lastPos }; // Back to old Position
+        this.pos = { ...this.lastPos };
         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,7 +58,18 @@ func StartTests(config Config) {
 
 func StartApp(config Config) {
 	bus := eventbus.New()
-	com, err := uart.Connect(bus, config.UartPort, config.Baudrate)
+	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)
 	if err != nil {
 		log.Printf("Could not Connect with Uart Device %v", err)
 	}
@@ -72,8 +83,6 @@ 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,6 +2,7 @@ package uart
 
 import (
 	"context"
+	"fmt"
 	"log"
 	"time"
 
@@ -16,15 +17,26 @@ type Com struct {
 	cancel context.CancelFunc
 }
 
-func Connect(bus eventbus.EventBus, portName string, baudrate int) (*Com, error) {
+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")
+	}
 	mode := &serial.Mode{BaudRate: baudrate}
 	port, err := serial.Open(portName, mode)
 	if err != nil {
-		return nil, err
+		return err
 	}
 
 	ctx, cancel := context.WithCancel(context.Background())
-	drv := New(bus)
+	drv := New(c.bus)
 
 	go func() {
 		buff := make([]byte, 1024)
@@ -48,11 +60,9 @@ func Connect(bus eventbus.EventBus, portName string, baudrate int) (*Com, error)
 		}
 	}()
 
-	return &Com{
+	c.port = port
-		bus:    bus,
+	c.cancel = cancel
-		port:   port,
+	return nil
-		cancel: cancel,
-	}, nil
 }
 
 func (c *Com) Close() {
@@ -100,3 +110,29 @@ 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)
+			}
+		}
+	}
+}