ChK/appRobotDriver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design

Browse Source
This commit is contained in:
ChK
2026-04-04 23:08:11 +02:00
parent 5bbd3f5525
commit 3e874e70c9
5 changed files with 2644 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app.js
View File

@@ -16,7 +16,6 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('state-y').textContent = fmt(p.y);
document.getElementById('state-z').textContent = fmt(p.z);
document.getElementById('state-a').textContent = fmt(p.a);
document.getElementById('state-phi').textContent = fmt(p.a*180/Math.PI);
document.getElementById('state-theta').textContent = fmt(p.b*180/Math.PI);
document.getElementById('state-psi').textContent = fmt(p.c*180/Math.PI);

18
public/index.html
View File

@@ -4,6 +4,7 @@
<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="style.css">
</head>
<body>
@@ -21,27 +22,32 @@
</div>
<div id="driverState" class="section full" data-id="driver">
<div id="driverState" class="section half" data-id="driver">
<h2>Zustand 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><span>A</span><span id="state-a">–</span></li>
<li><span>Φ</span><span id="state-phi">–</span></li>
<li><span>Θ</span><span id="state-theta">–</span></li>
<li><span>Ψ</span><span id="state-psi">–</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" data-id="motors">
<div id="motorState" class="section half" data-id="motors">
<h2>Zustand 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>

21
public/style.css
View File

@@ -19,8 +19,8 @@ body {
margin: 16px;
background: linear-gradient(
to bottom,
#ffffff -20%,
var(--bg) 110%
#dddddd -20%,
var(--bg) 130%
);
color: var(--text);
font-size: 14px;
@@ -130,6 +130,23 @@ h1 {
list-style: none;
}
.math-symbol {
font-family: "Noto Sans Math", system-ui, sans-serif;
font-weight: 400;
font-style: italic; /* ✅ echte math italic */
font-synthesis: none; /* extrem wichtig */
font-size: 1.1em;
line-height: 1;
vertical-align: -0.05em;
transform: skewX(-8deg);
display: inline-block;
}
.state-grid li {
display: flex;
justify-content: space-between;