Show LX, LY, RX, RY in the range calibration modal

This commit is contained in:
Mathias Malmqvist
2025-11-22 01:01:55 +01:00
parent 21d2cc3630
commit 4693e5a08f
2 changed files with 18 additions and 4 deletions

View File

@@ -1,6 +1,6 @@
'use strict';
import { sleep } from '../utils.js';
import { sleep, float_to_str } from '../utils.js';
import { l } from '../translations.js';
import { CIRCULARITY_DATA_SIZE, draw_stick_dial } from '../stick-renderer.js';
@@ -386,6 +386,12 @@ export class CalibRangeModal {
draw_stick_dial(this.leftCanvasCtx, centerX, centerY, size, left.x, left.y);
draw_stick_dial(this.rightCanvasCtx, centerX, centerY, size, right.x, right.y);
const precision = 2;
$("#range-lx-lbl").text(float_to_str(left.x, precision));
$("#range-ly-lbl").text(float_to_str(left.y, precision));
$("#range-rx-lbl").text(float_to_str(right.x, precision));
$("#range-ry-lbl").text(float_to_str(right.y, precision));
}
}

View File

@@ -9,13 +9,21 @@
<p class="ds-i18n"><b class="pulsing-text">The controller is now sampling data!</b></p>
<p class="ds-i18n">Rotate the sticks slowly at least 2 times in one direction and 2 times in the other direction to cover the whole range.</p>
<div style="display: flex; justify-content: center; gap: 0px;">
<div style="text-align: center; margin-right: 0px;">
<div style="display: flex; justify-content: center; gap: 0px; align-items: center;">
<div style="text-align: left; min-width: 65px;">
<div><small>LX: <span id="range-lx-lbl">0.00</span></small></div>
<div><small>LY: <span id="range-ly-lbl">0.00</span></small></div>
</div>
<div style="text-align: center;">
<canvas id="range-left-stick-canvas" width="150" height="150"></canvas>
</div>
<div style="text-align: center; margin-left: 0px;">
<div style="text-align: center;">
<canvas id="range-right-stick-canvas" width="150" height="150"></canvas>
</div>
<div style="text-align: left; min-width: 65px;">
<div><small>RX: <span id="range-rx-lbl">0.00</span></small></div>
<div><small>RY: <span id="range-ry-lbl">0.00</span></small></div>
</div>
</div>
<div class="progress mt-2" id="range-progress-container" role="progressbar" aria-label="Range calibration progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">