Skip to content

Commit 092a8b7

Browse files
claudeclaude
committed
Integrate speed/inclination buttons into existing rows
Replace AVG/MAX labels with -/+ buttons on speed and inclination rows instead of having separate control tiles. This provides a cleaner UI where users can see all metrics (avg, current, max) while also having control buttons on the same row. Layout: [-] AVG_VALUE | CURRENT_VALUE | [+] MAX_VALUE https://claude.ai/code/session_01QgLyRenM7sSWqqGU1Esy3s
1 parent 3bd68b5 commit 092a8b7

2 files changed

Lines changed: 18 additions & 52 deletions

File tree

‎src/inner_templates/floating/floating.htm‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -73,19 +73,23 @@ <h2 style="color: #FFFFFF; font-family: sans-serif">Peloton Workout in progress!
7373
<tr class="speed" sort-order="0">
7474
<td class="icon">🏃</td>
7575
<td style="text-align: left">SPEED</td>
76-
<td class="speed-avg-title"><small>AVG</small></td>
76+
<td class="speed-avg-title"><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
77+
onclick="SpeedMinus()">-</button></td>
7778
<td class="speed-avg">0.0</td>
7879
<td class="speed-value values"><b>0.0</b></td>
79-
<td class="speed-max-title"><small>MAX</small></td>
80+
<td class="speed-max-title"><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
81+
onclick="SpeedPlus()">+</button></td>
8082
<td class="speed-max">0.0</td>
8183
</tr>
8284
<tr class="inclination" sort-order="1">
8385
<td class="icon">📐</td>
8486
<td style="text-align: left">INCLINE</td>
85-
<td><small>AVG</small></td>
87+
<td><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
88+
onclick="InclinationMinus()">-</button></td>
8689
<td class="inclination-avg">0.0</td>
8790
<td class="inclination-value values"><b>0.0</b></td>
88-
<td><small>MAX</small></td>
91+
<td><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
92+
onclick="InclinationPlus()">+</button></td>
8993
<td class="inclination-max">0.0</td>
9094
</tr>
9195
<tr class="pace" sort-order="2">
@@ -199,25 +203,7 @@ <h2 style="color: #FFFFFF; font-family: sans-serif">Peloton Workout in progress!
199203
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
200204
onclick="GearsPlus()">+</button></td>
201205
</tr>
202-
<tr class="speedcontrol" sort-order="18">
203-
<td class="icon">🏃</td>
204-
<td style="text-align: left">SPEED</td>
205-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
206-
onclick="SpeedMinus()">-</button></td>
207-
<td class="speedcontrol-value values"><b>0.0</b></td>
208-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
209-
onclick="SpeedPlus()">+</button></td>
210-
</tr>
211-
<tr class="inclinecontrol" sort-order="19">
212-
<td class="icon">📐</td>
213-
<td style="text-align: left">INCLINE</td>
214-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
215-
onclick="InclinationMinus()">-</button></td>
216-
<td class="inclinecontrol-value values"><b>0.0</b></td>
217-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
218-
onclick="InclinationPlus()">+</button></td>
219-
</tr>
220-
<tr class="nextrow" sort-order="20">
206+
<tr class="nextrow" sort-order="17">
221207
<td class="icon">🕶</td>
222208
<td style="text-align: left">NEXT</td>
223209
<td class="nextrow-value values" colspan="5"><b></b></td>
@@ -919,8 +905,6 @@ <h2 style="color: #FFFFFF; font-family: sans-serif">Peloton Workout in progress!
919905
$('.inclination-value').html("<b>" + inclination.toFixed(1) + "</b>");
920906
$('.inclination-avg').html(inclination_lapavg.toFixed(1));
921907
$('.inclination-max').html(inclination_lapmax.toFixed(1));
922-
$('.speedcontrol-value').html("<b>" + speed.toFixed(1) + "</b>");
923-
$('.inclinecontrol-value').html("<b>" + inclination.toFixed(1) + "</b>");
924908
$('.elevation-value').html("<b>" + elevation.toFixed(1) + "</b>");
925909
if (tile_target_cadence_enabled && target_cadence > 0)
926910
$('.cadence-value').html("<b>" + cadence.toFixed(0) + "/" + target_cadence.toFixed(0) + "</b>");

‎src/inner_templates/floating/hfloating.htm‎

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -247,19 +247,23 @@ <h2 style="color: #FFFFFF; font-family: sans-serif">Peloton Workout in progress!
247247
<tr class="speed" sort-order="0">
248248
<td class="icon">🏃</td>
249249
<td style="text-align: left">SPEED</td>
250-
<td class="speed-avg-title"><small>AVG</small></td>
250+
<td class="speed-avg-title"><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
251+
onclick="SpeedMinus()">-</button></td>
251252
<td class="speed-avg">0.0</td>
252253
<td class="speed-value values"><b>0.0</b></td>
253-
<td class="speed-max-title"><small>MAX</small></td>
254+
<td class="speed-max-title"><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
255+
onclick="SpeedPlus()">+</button></td>
254256
<td class="speed-max">0.0</td>
255257
</tr>
256258
<tr class="inclination" sort-order="1">
257259
<td class="icon">📐</td>
258260
<td style="text-align: left">INCLINE</td>
259-
<td><small>AVG</small></td>
261+
<td><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
262+
onclick="InclinationMinus()">-</button></td>
260263
<td class="inclination-avg">0.0</td>
261264
<td class="inclination-value values"><b>0.0</b></td>
262-
<td><small>MAX</small></td>
265+
<td><button style="width: 30px; font-size: 18px; color: white; background-color:#4C70BF; border: none; cursor: pointer;"
266+
onclick="InclinationPlus()">+</button></td>
263267
<td class="inclination-max">0.0</td>
264268
</tr>
265269
<tr class="pace" sort-order="2">
@@ -373,25 +377,7 @@ <h2 style="color: #FFFFFF; font-family: sans-serif">Peloton Workout in progress!
373377
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
374378
onclick="GearsPlus()">+</button></td>
375379
</tr>
376-
<tr class="speedcontrol" sort-order="18">
377-
<td class="icon">🏃</td>
378-
<td style="text-align: left">SPEED</td>
379-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
380-
onclick="SpeedMinus()">-</button></td>
381-
<td class="speedcontrol-value values"><b>0.0</b></td>
382-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
383-
onclick="SpeedPlus()">+</button></td>
384-
</tr>
385-
<tr class="inclinecontrol" sort-order="19">
386-
<td class="icon">📐</td>
387-
<td style="text-align: left">INCLINE</td>
388-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
389-
onclick="InclinationMinus()">-</button></td>
390-
<td class="inclinecontrol-value values"><b>0.0</b></td>
391-
<td colspan="2"><button style="width: 40px; font-size: 24px; color: white; background-color:#4C70BF"
392-
onclick="InclinationPlus()">+</button></td>
393-
</tr>
394-
<tr class="nextrow" sort-order="20">
380+
<tr class="nextrow" sort-order="17">
395381
<td class="icon">🕶</td>
396382
<td style="text-align: left">NEXT</td>
397383
<td class="nextrow-value values" colspan="5"><b></b></td>
@@ -1442,10 +1428,6 @@ <h3>Select metrics to display</h3>
14421428
$('.inclination-avg').html(data.inclination_lapavg.toFixed(1));
14431429
$('.inclination-max').html(data.inclination_lapmax.toFixed(1));
14441430

1445-
// Speed and Incline control tiles
1446-
$('.speedcontrol-value').html("<b>" + data.speed.toFixed(1) + "</b>");
1447-
$('.inclinecontrol-value').html("<b>" + data.inclination.toFixed(1) + "</b>");
1448-
14491431
// Elevation
14501432
$('.elevation-value').html("<b>" + data.elevation.toFixed(1) + "</b>");
14511433

0 commit comments

Comments
 (0)