121 lines
5.2 KiB
HTML
121 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Robot Driver Info</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="allApps.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!--<h1>Robot Driver Status</h1>-->
|
||
|
||
<div class="sections">
|
||
<div id="status" class="section half" data-id="clients">
|
||
<h2>WebClients</h2>
|
||
<ul id="clients"></ul>
|
||
</div>
|
||
|
||
<div id="senders" class="section half" data-id="senders">
|
||
<h2>FluidNC-Controller</h2>
|
||
<ul id="senderList"></ul>
|
||
</div>
|
||
|
||
|
||
<div id="driverState" class="section half" data-id="driver">
|
||
<h2>Position Driver</h2>
|
||
<ul class="state-grid">
|
||
<li><span>X</span><span id="state-x">–</span></li>
|
||
<li><span>Y</span><span id="state-y">–</span></li>
|
||
<li><span>Z</span><span id="state-z">–</span></li>
|
||
<li></li>
|
||
</ul>
|
||
<ul class="state-grid">
|
||
<li><span class="math-symbol">ϕ</span><span id="state-phi">–</span></li>
|
||
<li><span class="math-symbol">ϴ</span><span id="state-theta">–</span></li>
|
||
<li><span class="math-symbol">Ψ</span><span id="state-psi">–</span></li>
|
||
<li><span>E</span><span id="state-e">–</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div id="motorState" class="section half" data-id="motors">
|
||
<h2>Postion Motoren</h2>
|
||
<ul class="state-grid">
|
||
<li><span>X</span><span id="motor-x">–</span></li>
|
||
<li><span>Y</span><span id="motor-y">–</span></li>
|
||
<li><span>Z</span><span id="motor-z">–</span></li>
|
||
<li></li>
|
||
</ul>
|
||
<ul class="state-grid">
|
||
<li><span>A</span><span id="motor-a">–</span></li>
|
||
<li><span>B</span><span id="motor-b">–</span></li>
|
||
<li><span>C</span><span id="motor-c">–</span></li>
|
||
<li><span>E</span><span id="motor-e">–</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div id="commands" class="section" data-id="commands">
|
||
<h2>Commands</h2>
|
||
<ul id="commandList"></ul>
|
||
</div>
|
||
|
||
<div id="pings" class="section" data-id="pings">
|
||
<h2>Ping Messages</h2>
|
||
<ul id="pingList"></ul>
|
||
</div>
|
||
|
||
<div id="robotJson" class="section" data-id="robotjson">
|
||
<h2>Robot.json <span id="robotJsonLabel"></span></h2>
|
||
<div id="robotJsonTree"></div>
|
||
</div>
|
||
|
||
<div id="robotHistory" class="section half" data-id="robothistory">
|
||
<h2>Robot.json History</h2>
|
||
<ul id="robotHistoryList"></ul>
|
||
</div>
|
||
|
||
<div id="emergencyStopPanel" class="section half" data-id="emergencystop">
|
||
<h2>Emergency Stop</h2>
|
||
<div class="estop-actions">
|
||
|
||
<!-- E-Stop / Start-Button: Farbe + Text wechseln je nach Strom-Zustand -->
|
||
<div class="estop-center">
|
||
<div id="emergency-stop" title="Emergency Stop">
|
||
<svg width="78" height="78" viewBox="0 0 78 78" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<radialGradient id="estopGrad" cx="38%" cy="32%" r="62%">
|
||
<stop offset="0%" stop-color="#ff5555"/>
|
||
<stop offset="65%" stop-color="#cc0000"/>
|
||
<stop offset="100%" stop-color="#880000"/>
|
||
</radialGradient>
|
||
<path id="estop-textarc" d="M 9,39 A 30,30 0 0,0 69,39"/>
|
||
</defs>
|
||
<!-- Äusserer Ring -->
|
||
<circle cx="39" cy="39" r="36" fill="#FFD700" stroke="#C8960A" stroke-width="1.5"/>
|
||
<!-- Knopf -->
|
||
<circle cx="39" cy="39" r="21" fill="url(#estopGrad)" stroke="#660000" stroke-width="2"/>
|
||
<!-- Gebogener Text -->
|
||
<text font-size="7.5" fill="#1a1000" font-weight="bold"
|
||
font-family="system-ui,sans-serif" letter-spacing="0.3" word-spacing="5">
|
||
<textPath href="#estop-textarc" startOffset="50%" text-anchor="middle">EMERGENCY STOP</textPath>
|
||
</text>
|
||
</svg>
|
||
</div>
|
||
<div id="armed-status" class="estop-armed-label"></div>
|
||
<div id="estop-action-status" class="estop-status"></div>
|
||
</div>
|
||
|
||
<button id="btn-alarm-unlock" class="btn btn-unlock">
|
||
Restart — Alarm-Unlock
|
||
</button>
|
||
<div id="alarm-unlock-status" class="estop-status"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html> |