CSS anpassen
This commit is contained in:
@@ -2,7 +2,7 @@ import websocket
|
|||||||
import json
|
import json
|
||||||
|
|
||||||
ws = websocket.WebSocket()
|
ws = websocket.WebSocket()
|
||||||
ws.connect("wss://server:3000")
|
ws.connect("wss://localhost:3000")
|
||||||
|
|
||||||
ws.send(json.dumps({
|
ws.send(json.dumps({
|
||||||
"type":"jog",
|
"type":"jog",
|
||||||
|
|||||||
@@ -6,6 +6,6 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
server: {
|
server: {
|
||||||
port: Number(process.env.PORT) || 3000
|
port: Number(process.env.PORT) || 10000
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -37,6 +37,7 @@ wss.on("connection", (ws) => {
|
|||||||
try {
|
try {
|
||||||
const data = JSON.parse(msg);
|
const data = JSON.parse(msg);
|
||||||
|
|
||||||
|
console.log("Message from WSS: " + msg);
|
||||||
if (data.type === "jog") {
|
if (data.type === "jog") {
|
||||||
fluid.jog(data.axis, data.value);
|
fluid.jog(data.axis, data.value);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<title>SCARA Robot Control</title>
|
<title>SCARA Robot Control</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background: #202020;
|
background: #234;
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -15,11 +15,15 @@
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
#posBox {
|
#posBox {
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
width: 406px;
|
width: 406px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background: #333;
|
background: #356;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
@@ -33,12 +37,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: #444;
|
background: #478;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 8px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -46,6 +50,10 @@
|
|||||||
background: #666;
|
background: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.noMouseHover:hover{
|
||||||
|
background: #478;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.gcodeRow {
|
.gcodeRow {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -55,20 +63,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.controlInput {
|
.controlInput {
|
||||||
height: 48px; /* gleiche Höhe wie Button */
|
height: 48px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 0 10px; /* vertikal 0, dadurch exakte Höhe */
|
padding: 0 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #555;
|
border: 1px solid #555;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
min-width: 260px; /* optional: Breite ähnlich wie vorher */
|
min-width: 260px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controlButton {
|
.controlButton {
|
||||||
height: 48px; /* gleiche Höhe wie Input */
|
height: 48px;
|
||||||
padding: 0 18px; /* vertikal 0, zentriert via flex */
|
padding: 0 18px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -91,18 +99,17 @@
|
|||||||
<div class="btnGrid">
|
<div class="btnGrid">
|
||||||
<button onclick="jog('X', -10)">X -10</button>
|
<button onclick="jog('X', -10)">X -10</button>
|
||||||
<button onclick="jog('X', -1)">X -1</button>
|
<button onclick="jog('X', -1)">X -1</button>
|
||||||
<button></button>
|
<button class="noMouseHover"></button>
|
||||||
<button onclick="jog('X', 1)">X +1</button>
|
<button onclick="jog('X', 1)">X +1</button>
|
||||||
<button onclick="jog('X', 10)">X +10</button>
|
<button onclick="jog('X', 10)">X +10</button>
|
||||||
|
|
||||||
<button onclick="jog('Z', -10)">Z -10</button>
|
<button onclick="jog('Z', -10)">Z -10</button>
|
||||||
<button onclick="jog('Z', -1)">Z -1</button>
|
<button onclick="jog('Z', -1)">Z -1</button>
|
||||||
<button></button>
|
<button class="noMouseHover"></button>
|
||||||
<button onclick="jog('Z', 1)">Z +1</button>
|
<button onclick="jog('Z', 1)">Z +1</button>
|
||||||
<button onclick="jog('Z', 10)">Z +10</button>
|
<button onclick="jog('Z', 10)">Z +10</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>G‑Code Eingabe</h2>
|
<h2>G‑Code Eingabe</h2>
|
||||||
<div class="gcodeRow">
|
<div class="gcodeRow">
|
||||||
<input id="gcodeInput" class="controlInput" type="text"
|
<input id="gcodeInput" class="controlInput" type="text"
|
||||||
@@ -121,6 +128,7 @@
|
|||||||
let ws;
|
let ws;
|
||||||
|
|
||||||
function connectWS() {
|
function connectWS() {
|
||||||
|
console.log("Try to connect to " + "wss://" + window.location.hostname + ":" + window.location.port);
|
||||||
ws = new WebSocket("wss://" + window.location.hostname + ":" + window.location.port);
|
ws = new WebSocket("wss://" + window.location.hostname + ":" + window.location.port);
|
||||||
|
|
||||||
ws.onopen = () => {
|
ws.onopen = () => {
|
||||||
@@ -202,12 +210,12 @@
|
|||||||
|
|
||||||
|
|
||||||
function sendGcodeFeld() {
|
function sendGcodeFeld() {
|
||||||
const el = document.getElementById("gcodeInput"); // ← neu
|
const el = document.getElementById("gcodeInput");
|
||||||
const cmd = el.value.trim();
|
const cmd = el.value.trim();
|
||||||
sendGcode("G90");
|
sendGcode("G90");
|
||||||
sendGcode(cmd);
|
sendGcode(cmd);
|
||||||
|
|
||||||
el.value = ""; // ← neu
|
el.value = "";
|
||||||
el.focus();
|
el.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user