Changed to new Frontend for UI Components
This commit is contained in:
parent
6edf7e6e5f
commit
9efef034f0
@ -1,42 +0,0 @@
|
|||||||
package frontendhandler
|
|
||||||
|
|
||||||
import (
|
|
||||||
"embed"
|
|
||||||
"io/fs"
|
|
||||||
"log"
|
|
||||||
"net/http"
|
|
||||||
)
|
|
||||||
|
|
||||||
//go:embed templates
|
|
||||||
var templatesFs embed.FS
|
|
||||||
|
|
||||||
//go:embed templates/static
|
|
||||||
var staticFiles embed.FS
|
|
||||||
|
|
||||||
func StartStaticFileServer() {
|
|
||||||
staticFS, err := fs.Sub(staticFiles, "templates/static")
|
|
||||||
if err != nil {
|
|
||||||
log.Fatal(err)
|
|
||||||
}
|
|
||||||
|
|
||||||
http.HandleFunc("/", IndexHandler)
|
|
||||||
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticFS))))
|
|
||||||
|
|
||||||
err = http.ListenAndServe(":8000", nil)
|
|
||||||
if err != nil {
|
|
||||||
panic(err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
func IndexHandler(w http.ResponseWriter, r *http.Request) {
|
|
||||||
fileContent, err := templatesFs.ReadFile("templates/index.html")
|
|
||||||
if err != nil {
|
|
||||||
log.Printf("Error Reading index.html %v", err)
|
|
||||||
http.Error(w, "Could not read index.html", 500)
|
|
||||||
}
|
|
||||||
_, err = w.Write(fileContent)
|
|
||||||
if err != nil {
|
|
||||||
log.Printf("Could not Write to ReponseWrite %v", err)
|
|
||||||
http.Error(w, "Could not write data", 500)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>Alox PowerPods Debug/Test Tool</title>
|
|
||||||
<script defer src="/static/alpinejs.cdn.min.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<h1>Alox PowerPods Debug/Test Tool</h1>
|
|
||||||
|
|
||||||
<div x-data="websocketApp()">
|
|
||||||
|
|
||||||
<div style="margin-bottom: 1rem;">
|
|
||||||
Status: <span x-text="status" :style="{ color: isConnected ? 'green' : 'red' }"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input type="text" x-model="inputMessage" placeholder="Message" @keyup.enter="sendMessage()" />
|
|
||||||
<button @click="sendMessage()" :disabled="!isConnected">Send</button>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div id="messages">
|
|
||||||
<template x-for="(msg, index) in messages" :key="index">
|
|
||||||
<p x-text="msg"></p>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function websocketApp() {
|
|
||||||
return {
|
|
||||||
socket: null,
|
|
||||||
inputMessage: '',
|
|
||||||
messages: [],
|
|
||||||
status: 'Disconnected',
|
|
||||||
isConnected: false,
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this.connect();
|
|
||||||
},
|
|
||||||
|
|
||||||
connect() {
|
|
||||||
this.socket = new WebSocket("ws://localhost:8080/cmd");
|
|
||||||
|
|
||||||
this.socket.onopen = () => {
|
|
||||||
this.status = 'Connected';
|
|
||||||
this.isConnected = true;
|
|
||||||
this.addLog('Connected to Server');
|
|
||||||
};
|
|
||||||
|
|
||||||
this.socket.onmessage = (event) => {
|
|
||||||
this.addLog(event.data);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.socket.onclose = () => {
|
|
||||||
this.status = 'Disconnected';
|
|
||||||
this.isConnected = false;
|
|
||||||
this.addLog('Disconnected from Server');
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
sendMessage() {
|
|
||||||
if (this.inputMessage && this.isConnected) {
|
|
||||||
this.socket.send(this.inputMessage);
|
|
||||||
this.inputMessage = ''; // Input leeren nach Senden
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
addLog(text) {
|
|
||||||
this.messages.push(text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
package frontendhandler
|
|
||||||
|
|
||||||
import (
|
|
||||||
"flag"
|
|
||||||
"log"
|
|
||||||
"net/http"
|
|
||||||
|
|
||||||
"github.com/gorilla/websocket"
|
|
||||||
)
|
|
||||||
|
|
||||||
type WebHandler struct {
|
|
||||||
MessageC chan string
|
|
||||||
ErrorC chan string
|
|
||||||
}
|
|
||||||
|
|
||||||
var addr = flag.String("addr", "localhost:8080", "http service address")
|
|
||||||
var upgrader = websocket.Upgrader{
|
|
||||||
CheckOrigin: func(r *http.Request) bool { return true },
|
|
||||||
}
|
|
||||||
|
|
||||||
func cmdHandler(w http.ResponseWriter, r *http.Request) {
|
|
||||||
c, err := upgrader.Upgrade(w, r, nil)
|
|
||||||
if err != nil {
|
|
||||||
log.Print("upgrade:", err)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
defer c.Close()
|
|
||||||
for {
|
|
||||||
mt, message, err := c.ReadMessage()
|
|
||||||
if err != nil {
|
|
||||||
log.Println("read:", err)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
log.Printf("recv: %s", message)
|
|
||||||
err = c.WriteMessage(mt, message)
|
|
||||||
if err != nil {
|
|
||||||
log.Println("write:", err)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
func StartServer() {
|
|
||||||
http.HandleFunc("/cmd", cmdHandler)
|
|
||||||
log.Fatal(http.ListenAndServe(*addr, nil))
|
|
||||||
}
|
|
||||||
71
goTool/frontend/server.go
Normal file
71
goTool/frontend/server.go
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
package frontend
|
||||||
|
|
||||||
|
import (
|
||||||
|
"embed"
|
||||||
|
"fmt"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"github.com/gorilla/websocket"
|
||||||
|
)
|
||||||
|
|
||||||
|
//go:embed www
|
||||||
|
var staticFiles embed.FS
|
||||||
|
|
||||||
|
func home(w http.ResponseWriter, r *http.Request) {
|
||||||
|
content, err := staticFiles.ReadFile("www/index.html")
|
||||||
|
if err != nil {
|
||||||
|
log.Printf("Could not Read file %v", err)
|
||||||
|
}
|
||||||
|
fmt.Fprintf(w, string(content))
|
||||||
|
}
|
||||||
|
|
||||||
|
var upgrader = websocket.Upgrader{} // use default options
|
||||||
|
|
||||||
|
type ValueChangeResp struct {
|
||||||
|
Cmd string `json:"cmd"`
|
||||||
|
Name string `json:"name"`
|
||||||
|
Value string `json:"value"`
|
||||||
|
}
|
||||||
|
|
||||||
|
func echo(w http.ResponseWriter, r *http.Request) {
|
||||||
|
|
||||||
|
type resp struct {
|
||||||
|
Cmd string `json:"cmd"`
|
||||||
|
Arg string `json:"arg"`
|
||||||
|
}
|
||||||
|
|
||||||
|
c, err := upgrader.Upgrade(w, r, nil)
|
||||||
|
if err != nil {
|
||||||
|
log.Print("upgrade:", err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
defer c.Close()
|
||||||
|
for {
|
||||||
|
_, message, err := c.ReadMessage()
|
||||||
|
if err != nil {
|
||||||
|
log.Println("read:", err)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
log.Printf("recv: %s", message)
|
||||||
|
|
||||||
|
jsonResp := resp{
|
||||||
|
Cmd: "echo",
|
||||||
|
Arg: string(message),
|
||||||
|
}
|
||||||
|
|
||||||
|
err = c.WriteJSON(jsonResp)
|
||||||
|
if err != nil {
|
||||||
|
log.Println("write:", err)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func StartServer() {
|
||||||
|
http.Handle("/www/", http.FileServer(http.FS(staticFiles)))
|
||||||
|
http.HandleFunc("/", home)
|
||||||
|
http.HandleFunc("/echo", echo)
|
||||||
|
|
||||||
|
http.ListenAndServe("0.0.0.0:8000", nil)
|
||||||
|
}
|
||||||
7
goTool/frontend/www/bootstrap.bundle.min.js
vendored
Normal file
7
goTool/frontend/www/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
goTool/frontend/www/bootstrap.bundle.min.js.map
Normal file
1
goTool/frontend/www/bootstrap.bundle.min.js.map
Normal file
File diff suppressed because one or more lines are too long
6
goTool/frontend/www/bootstrap.min.css
vendored
Normal file
6
goTool/frontend/www/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
32
goTool/frontend/www/component.tmpl
Normal file
32
goTool/frontend/www/component.tmpl
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<div 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>
|
||||||
337
goTool/frontend/www/index.html
Normal file
337
goTool/frontend/www/index.html
Normal file
@ -0,0 +1,337 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link href="www/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<script src="www/bootstrap.bundle.min.js"></script>
|
||||||
|
<script defer src="www/alpinejs.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
[x-cloak] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
/* Create 20px x 20px Grid */
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
|
||||||
|
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('alpine:init', () => {
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let socket = new WebSocket("ws://localhost:8000/echo");
|
||||||
|
|
||||||
|
socket.onopen = function (e) {
|
||||||
|
console.log("[open] Connection established");
|
||||||
|
console.log("Sending to server");
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onmessage = function (event) {
|
||||||
|
console.log(`[message] Data received from server: ${event.data}`);
|
||||||
|
let mes;
|
||||||
|
try {
|
||||||
|
mes = JSON.parse(event.data)
|
||||||
|
} catch {
|
||||||
|
mes = null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mes != null) {
|
||||||
|
handleCommand(mes)
|
||||||
|
} else {
|
||||||
|
console.log(`${event.data} is not valid JSON`)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
<h1>Alox Debug Tool</h1>
|
||||||
|
<div 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>
|
||||||
|
<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.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>
|
||||||
|
|
||||||
|
<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="card-header bg-primary text-white d-flex justify-content-between align-items-center drag-handle"
|
||||||
|
@mousedown="startDrag">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -3,6 +3,7 @@ module alox.tool
|
|||||||
go 1.24.5
|
go 1.24.5
|
||||||
|
|
||||||
require (
|
require (
|
||||||
|
github.com/gorilla/websocket v1.5.3
|
||||||
github.com/pterm/pterm v0.12.81
|
github.com/pterm/pterm v0.12.81
|
||||||
go.bug.st/serial v1.6.4
|
go.bug.st/serial v1.6.4
|
||||||
)
|
)
|
||||||
|
|||||||
@ -28,6 +28,8 @@ github.com/gookit/color v1.4.2/go.mod h1:fqRyamkC1W8uxl+lxCQxOT09l/vYfZ+QeiX3rKQ
|
|||||||
github.com/gookit/color v1.5.0/go.mod h1:43aQb+Zerm/BWh2GnrgOQm7ffz7tvQXEKV6BFMl7wAo=
|
github.com/gookit/color v1.5.0/go.mod h1:43aQb+Zerm/BWh2GnrgOQm7ffz7tvQXEKV6BFMl7wAo=
|
||||||
github.com/gookit/color v1.5.4 h1:FZmqs7XOyGgCAxmWyPslpiok1k05wmY3SJTytgvYFs0=
|
github.com/gookit/color v1.5.4 h1:FZmqs7XOyGgCAxmWyPslpiok1k05wmY3SJTytgvYFs0=
|
||||||
github.com/gookit/color v1.5.4/go.mod h1:pZJOeOS8DM43rXbp4AZo1n9zCU2qjpcRko0b6/QJi9w=
|
github.com/gookit/color v1.5.4/go.mod h1:pZJOeOS8DM43rXbp4AZo1n9zCU2qjpcRko0b6/QJi9w=
|
||||||
|
github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
|
||||||
|
github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
|
||||||
github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
|
github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
|
||||||
github.com/klauspost/cpuid/v2 v2.0.10/go.mod h1:g2LTdtYhdyuGPqyWyv7qRAmj1WBqxuObKfj5c0PQa7c=
|
github.com/klauspost/cpuid/v2 v2.0.10/go.mod h1:g2LTdtYhdyuGPqyWyv7qRAmj1WBqxuObKfj5c0PQa7c=
|
||||||
github.com/klauspost/cpuid/v2 v2.0.12/go.mod h1:g2LTdtYhdyuGPqyWyv7qRAmj1WBqxuObKfj5c0PQa7c=
|
github.com/klauspost/cpuid/v2 v2.0.12/go.mod h1:g2LTdtYhdyuGPqyWyv7qRAmj1WBqxuObKfj5c0PQa7c=
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import (
|
|||||||
"strconv"
|
"strconv"
|
||||||
"time"
|
"time"
|
||||||
|
|
||||||
frontendhandler "alox.tool/FrontendHandler"
|
"alox.tool/frontend"
|
||||||
"github.com/pterm/pterm"
|
"github.com/pterm/pterm"
|
||||||
"go.bug.st/serial"
|
"go.bug.st/serial"
|
||||||
)
|
)
|
||||||
@ -364,9 +364,8 @@ var (
|
|||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
|
|
||||||
go frontendhandler.StartStaticFileServer()
|
frontend.StartServer()
|
||||||
frontendhandler.StartServer()
|
os.Exit(0)
|
||||||
os.Exit(1)
|
|
||||||
|
|
||||||
flag.StringVar(&updatePath, "update", "", "Path to Updatefile")
|
flag.StringVar(&updatePath, "update", "", "Path to Updatefile")
|
||||||
flag.Parse()
|
flag.Parse()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user