Skip to content

Commit 5a1744e

Browse files
davidson-engineeringdavidson-engineering
committed
updated example html
1 parent 0597cbd commit 5a1744e

File tree

2 files changed

+89
-77
lines changed

2 files changed

+89
-77
lines changed

‎static/styles.css‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,45 +23,62 @@ body {
2323
justify-content: center;
2424
flex-direction: column;
2525
background-color: rgb(94, 99, 105);
26-
margin-top: 30px;
2726
width: 1024px;
2827
}
2928

3029
.section {
3130
display: flex;
3231
width: auto;
33-
padding-top: 20px;
34-
padding-bottom: 20px;
32+
padding-top: 15px;
3533
background:
3634
url('../static/textures/brushed-alumnium.png') no-repeat center center fixed; /* Background image */
3735
background-size: cover;
3836
background-blend-mode: overlay, soft-light; /* Blend for a realistic finish */
3937
background-color: rgba(0, 0, 0, 0.2);
4038
}
4139

40+
.section-metrics {
41+
padding-top: 2px;
42+
padding-bottom: 16px;
43+
}
44+
4245
.labels {
4346
display: grid;
4447
flex-direction: column;
4548
text-align: right;
4649
align-items: center;
47-
font-size: 3.6rem;
48-
width: 5%;
50+
font-size: 3rem;
51+
width: 6%;
4952
font-family: 'Arial Narrow';
5053
font-weight: bold;
5154
color: white;
5255
text-shadow: 1px 1px 1px black;
5356
margin-right: 14px;
5457
-webkit-text-stroke: #181818 0.08rem;
5558
z-index: 1;
59+
padding-top: 6px;
60+
padding-bottom: 6px;
5661
}
5762

5863

5964
.labels-metrics {
65+
padding-top: 38px;
6066
font-size: 1.1rem;
6167
align-content: center;
6268
line-height: 1.5em;
6369
-webkit-text-stroke: #181818 0.04rem;
70+
}
6471

72+
.labels-metrics-horizontal {
73+
font-size: 1.3em;
74+
padding-top: 0px;
75+
display: flex;
76+
flex-direction: row;
77+
text-align: center;
78+
justify-content: space-around;
79+
align-items: center;
80+
padding-bottom: 4px;
81+
width: 100%;
6582
}
6683

6784

‎templates/example.html‎

Lines changed: 67 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,21 @@
1515
<div class="labels">
1616
<div>X</div>
1717
<div>Y</div>
18-
<div>Z</div>
18+
<div>Z0</div>
19+
<div>Z1</div>
1920
</div>
2021
<div class="position-display lcd-display">
2122
<div class="lcd-display-layer lcd-display-dimmed">
2223
<span class="lcd-char-dim">~~~~~~.~~~</span>
2324
<span class="lcd-char-dim">~~~~~~.~~~</span>
2425
<span class="lcd-char-dim">~~~~~~.~~~</span>
26+
<span class="lcd-char-dim">~~~~~~.~~~</span>
2527
</div>
2628
<div class="lcd-display-layer">
2729
<span id="posX">+00000.000</span>
2830
<span id="posY">+00000.000</span>
29-
<span id="posZ">+00000.000</span>
31+
<span id="posZ0">+00000.000</span>
32+
<span id="posZ1">+00000.000</span>
3033
</div>
3134
</div>
3235

@@ -60,90 +63,81 @@
6063
</div>
6164

6265
<!-- Motor Control Section -->
63-
<div class="section">
66+
<div class="section section-metrics">
6467
<div class="labels labels-metrics">
6568
<div>VEL</div>
6669
<div>TRQ</div>
6770
<div>STS</div>
6871
<div>FLT</div>
6972
</div>
70-
<div class="metrics-display lcd-display" id="motorContainer">
71-
<div class="metrics" id="motor1">
72-
<div class="lcd-display-layer lcd-display-dimmed">
73-
<span class="lcd-char-dim">~~~~~~~~~~</span>
74-
<span class="lcd-char-dim">~~~~~~~~~~</span>
75-
<span class="lcd-char-dim">~~~~~~~~~~</span>
76-
<span class="lcd-char-dim">~~~~~~~~~~</span>
77-
</div>
78-
<div class="lcd-display-layer">
79-
<span id="motor1-speed">~~~~~~</span>
80-
<span id="motor1-torque">~~~~~~~~</span>
81-
<span id="motor1-status">ABCDEF</span>
82-
<span id="motor1-faults">ABCDEF</span>
83-
</div>
73+
<div>
74+
<div class="labels labels-metrics labels-metrics-horizontal">
75+
<div>MOTOR1</div>
76+
<div>MOTOR2</div>
77+
<div>MOTOR3</div>
78+
<div>MOTOR4</div>
8479
</div>
85-
<div class="metrics" id="motor1">
86-
<div class="lcd-display-layer lcd-display-dimmed">
87-
<span class="lcd-char-dim">~~~~~~~~~~</span>
88-
<span class="lcd-char-dim">~~~~~~~~~~</span>
89-
<span class="lcd-char-dim">~~~~~~~~~~</span>
90-
<span class="lcd-char-dim">~~~~~~~~~~</span>
80+
<div class="metrics-display lcd-display" id="motorContainer">
81+
<div class="metrics" id="motor1">
82+
<div class="lcd-display-layer lcd-display-dimmed">
83+
<span class="lcd-char-dim">~~~~~~~~~~</span>
84+
<span class="lcd-char-dim">~~~~~~~~~~</span>
85+
<span class="lcd-char-dim">~~~~~~~~~~</span>
86+
<span class="lcd-char-dim">~~~~~~~~~~</span>
87+
</div>
88+
<div class="lcd-display-layer">
89+
<span id="motor1-speed">~~~~~~</span>
90+
<span id="motor1-torque">~~~~~~~~</span>
91+
<span id="motor1-status">ABCDEF</span>
92+
<span id="motor1-faults">ABCDEF</span>
93+
</div>
9194
</div>
92-
<div class="lcd-display-layer">
93-
<span id="motor1-speed">~~~~~~</span>
94-
<span id="motor1-torque">~~~~~~~~~</span>
95-
<span id="motor1-status">ABCDEF</span>
96-
<span id="motor1-faults">ABCDEF</span>
95+
<div class="metrics" id="motor1">
96+
<div class="lcd-display-layer lcd-display-dimmed">
97+
<span class="lcd-char-dim">~~~~~~~~~~</span>
98+
<span class="lcd-char-dim">~~~~~~~~~~</span>
99+
<span class="lcd-char-dim">~~~~~~~~~~</span>
100+
<span class="lcd-char-dim">~~~~~~~~~~</span>
101+
</div>
102+
<div class="lcd-display-layer">
103+
<span id="motor1-speed">~~~~~~</span>
104+
<span id="motor1-torque">~~~~~~~~~</span>
105+
<span id="motor1-status">ABCDEF</span>
106+
<span id="motor1-faults">ABCDEF</span>
107+
</div>
97108
</div>
98-
</div>
99-
<div class="metrics" id="motor1">
100-
<div class="lcd-display-layer lcd-display-dimmed">
101-
<span class="lcd-char-dim">~~~~~~~~~~</span>
102-
<span class="lcd-char-dim">~~~~~~~~~~</span>
103-
<span class="lcd-char-dim">~~~~~~~~~~</span>
104-
<span class="lcd-char-dim">~~~~~~~~~~</span>
109+
<div class="metrics" id="motor1">
110+
<div class="lcd-display-layer lcd-display-dimmed">
111+
<span class="lcd-char-dim">~~~~~~~~~~</span>
112+
<span class="lcd-char-dim">~~~~~~~~~~</span>
113+
<span class="lcd-char-dim">~~~~~~~~~~</span>
114+
<span class="lcd-char-dim">~~~~~~~~~~</span>
115+
</div>
116+
<div class="lcd-display-layer">
117+
<span id="motor1-speed">~~~~~~</span>
118+
<span id="motor1-torque">~~~~~~~~~</span>
119+
<span id="motor1-status">ABCDEF</span>
120+
<span id="motor1-faults">ABCDEF</span>
121+
</div>
105122
</div>
106-
<div class="lcd-display-layer">
107-
<span id="motor1-speed">~~~~~~</span>
108-
<span id="motor1-torque">~~~~~~~~~</span>
109-
<span id="motor1-status">ABCDEF</span>
110-
<span id="motor1-faults">ABCDEF</span>
111-
</div>
112-
</div>
113-
<div class="metrics" id="motor1">
114-
<div class="lcd-display-layer lcd-display-dimmed">
115-
<span class="lcd-char-dim">~~~~~~~~~~</span>
116-
<span class="lcd-char-dim">~~~~~~~~~~</span>
117-
<span class="lcd-char-dim">~~~~~~~~~~</span>
118-
<span class="lcd-char-dim">~~~~~~~~~~</span>
119-
</div>
120-
<div class="lcd-display-layer">
121-
<span id="motor1-speed">~~~~~~</span>
122-
<span id="motor1-torque">~~~~~~~~~</span>
123-
<span id="motor1-status">ABCDEF</span>
124-
<span id="motor1-faults">ABCDEF</span>
123+
<div class="metrics" id="motor1">
124+
<div class="lcd-display-layer lcd-display-dimmed">
125+
<span class="lcd-char-dim">~~~~~~~~~~</span>
126+
<span class="lcd-char-dim">~~~~~~~~~~</span>
127+
<span class="lcd-char-dim">~~~~~~~~~~</span>
128+
<span class="lcd-char-dim">~~~~~~~~~~</span>
129+
</div>
130+
<div class="lcd-display-layer">
131+
<span id="motor1-speed">~~~~~~</span>
132+
<span id="motor1-torque">~~~~~~~~~</span>
133+
<span id="motor1-status">ABCDEF</span>
134+
<span id="motor1-faults">ABCDEF</span>
135+
</div>
125136
</div>
126137
</div>
127138
</div>
128139
</div>
129-
<!-- <script src="/templates/js/script.js"></script> -->
130140
<script>
131-
// function fillWithCharacters() {
132-
// const rows = document.querySelectorAll('.lcd-char-dim'); // Get all rows
133-
// rows.forEach(row => {
134-
// const parentWidth = row.parentElement.clientWidth; // Get parent width
135-
// const charWidth = 10; // Approximate width of a monospace character (adjust as needed)
136-
// const numChars = Math.floor(parentWidth / charWidth); // Calculate the number of ~ to fit
137-
// row.textContent = '~'.repeat(numChars); // Fill with ~
138-
// });
139-
// }
140-
141-
// // Call the function on page load
142-
// window.addEventListener('load', fillWithCharacters);
143-
144-
// // Recalculate on window resize
145-
// window.addEventListener('resize', fillWithCharacters);
146-
147141

148142
const socket = io();
149143
const maxTorque = 100; // Define maximum torque value for scaling
@@ -167,7 +161,8 @@
167161
// Update position values
168162
document.getElementById('posX').textContent = parsedData['position_x'];
169163
document.getElementById('posY').textContent = parsedData['position_y'];
170-
document.getElementById('posZ').textContent = parsedData['position_z'];
164+
document.getElementById('posZ0').textContent = parsedData['position_z'];
165+
document.getElementById('posZ1').textContent = parsedData['position_z'];
171166

172167
// Update motor values and set torque bar width
173168
for (let i = 1; i <= 4; i++) {

0 commit comments

Comments
 (0)