diff --git a/goTool/frontend/www/index.html b/goTool/frontend/www/index.html index 37374c0..5f06361 100644 --- a/goTool/frontend/www/index.html +++ b/goTool/frontend/www/index.html @@ -1,337 +1,349 @@ - + + + + + + - - - - + - .card[style*="cursor: move"] { - transition: none; - } - + - Alpine.store("ui", { - topZ: 1000, - getNewZ() {return ++this.topZ} - }); + + - // Calc new position - let newX = e.clientX - this.offset.x; - let newY = e.clientY - this.offset.y; + +

Alox Debug Tool

+
+
+
CAN Interface
- // Boundary Check - const margin = 20; - 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)); - }, +
+ WS - stopDrag() { - 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 - })); - }, +
+
+

HIER DER INHALT DER COMPONENT

+
+
+
- reset() { - localStorage.removeItem(`win_${this.id}`); - location.reload(); - }, +
+
+
CAN Interface
- toggleMinimize() { - this.minimized = !this.minimized; - this.save(); - }, +
+ WS - toggleFullscreen() { - if (!this.fullscreen) { - this.lastPos = {...this.pos}; // Save Position - this.pos = {x: 0, y: 0}; - this.fullscreen = true; - } else { - this.pos = {...this.lastPos}; // Back to old Position - this.fullscreen = false; - } - this.focus(); - } - } - } + - + +
+
- - - - -

Alox Debug Tool

-
- -
-
CAN Interface
- -
- WS - - - - -
-
- -
-
-

HIER DER INHALT DER COMPONENT

-
-
-
- -
- -
-
CAN Interface
- -
- WS - - - - -
-
- -
-
- -
- -
    - -
- -
- - -
- -
    - -
- -
- -
- - - -
-
- -
-
- -
- -
-
📜 CAN Log
-
- -
-
-
-
[0.001] ID: 0x123 Data: FF AA 00
-
[0.005] ID: 0x456 Data: 12 34 56
-
-
- - + +
+ + + +
+
+
📜 CAN Log
+
+ +
+
+
+
[0.001] ID: 0x123 Data: FF AA 00
+
[0.005] ID: 0x456 Data: 12 34 56
+
+
+ diff --git a/goTool/frontend/www/windows.js b/goTool/frontend/www/windows.js new file mode 100644 index 0000000..768e159 --- /dev/null +++ b/goTool/frontend/www/windows.js @@ -0,0 +1,95 @@ +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, + }; + + return { + id: id, + pos: { x: saved.x, y: saved.y }, + lastPos: { x: saved.x, y: saved.y }, + dragging: false, + minimized: saved.min, + fullscreen: false, + zIndex: Alpine.store("ui").topZ, + offset: { x: 0, y: 0 }, + + init() { + // Move window in viewport when browser is other size + this.keepInBounds(); + }, + + focus() { + this.zIndex = Alpine.store("ui").getNewZ(); + }, + + startDrag(e) { + if (e.target.closest("button") || this.fullscreen) return; + this.focus(); + this.dragging = true; + this.offset.x = e.clientX - this.pos.x; + this.offset.y = e.clientY - this.pos.y; + }, + + 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.y = Math.max(0, Math.min(newY, window.innerHeight - 40)); + }, + + stopDrag() { + 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() { + this.minimized = !this.minimized; + this.save(); + }, + + toggleFullscreen() { + if (!this.fullscreen) { + this.lastPos = { ...this.pos }; // Save Position + this.pos = { x: 0, y: 0 }; + this.fullscreen = true; + } else { + this.pos = { ...this.lastPos }; // Back to old Position + this.fullscreen = false; + } + this.focus(); + }, + }; +}