Rim-Modules/gamepad-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

telemetry fixes and optimizations

Browse Source
This commit is contained in:
e7d 2023-06-10 18:28:42 +02:00
parent 0f5bd684c7
commit 7b18ed568f
No known key found for this signature in database
GPG Key ID: F320BE007C0B8881
1 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
templates/telemetry/template.js
View File

@ -137,10 +137,10 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
scaleChart() { scaleChart() {
const { width, height } = this.$chart.getBoundingClientRect(); const { width, height } = this.$chart.getBoundingClientRect();
const pixelRatio = window.devicePixelRatio; const pixelRatio = window.devicePixelRatio;
console.log(pixelRatio);
this.$chart.width = width * pixelRatio * 2; this.$chart.width = width * pixelRatio * 2;
this.$chart.height = height * pixelRatio * 2; this.$chart.height = height * pixelRatio * 2;
this.chartContext.scale(pixelRatio, pixelRatio); this.chartContext.scale(pixelRatio, pixelRatio);
this.chartContext.lineWidth = pixelRatio * 4;
this.$chart.style.width = `${width}px`; this.$chart.style.width = `${width}px`;
this.$chart.style.height = `${height}px`; this.$chart.style.height = `${height}px`;
} }
@ -197,15 +197,12 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
* @param {number} throttle * @param {number} throttle
*/ */
updateChartData(now, clutch, brake, throttle) { updateChartData(now, clutch, brake, throttle) {
const threshold = now - this.historyLength;
let remove = 0; let remove = 0;
for (let index = 0; index < this.chartData.length - 1; index++) { while (this.chartData[remove].timestamp <= threshold) {
if (this.chartData[index].timestamp < now - this.historyLength) {
remove++; remove++;
} else {
break;
} }
} this.chartData = this.chartData.slice(remove);
this.chartData.splice(0, remove);
this.chartData.push({ timestamp: now, clutch, brake, throttle }); this.chartData.push({ timestamp: now, clutch, brake, throttle });
} }
@ -220,18 +217,24 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
const now = Date.now(); const now = Date.now();
this.updateChartData(now, clutch, brake, throttle); this.updateChartData(now, clutch, brake, throttle);
this.chartContext.clearRect(0, 0, this.$chart.width, this.$chart.height); const chartContext = this.chartContext;
const { width, height } = this.$chart;
chartContext.clearRect(0, 0, width, height);
this.AXES.forEach((axis) => { this.AXES.forEach((axis) => {
if (axis === 'steering') return; if (axis === 'steering') return;
this.chartContext.beginPath();
this.chartData.forEach((entry, index) => { chartContext.beginPath();
const x = (entry.timestamp + this.historyLength - now) / this.historyLength * this.$chart.width;
const y = (101 - (entry[axis] || 0)) * this.$chart.height / 100; for (let index = 0; index < this.chartData.length; index++) {
this.chartContext[index === 0 ? 'moveTo' : 'lineTo'](x, y); const entry = this.chartData[index];
}); const x = (entry.timestamp + this.historyLength - now) / this.historyLength * width;
this.chartContext.lineWidth = 4; const y = (101 - (entry[axis] || 0)) * height / 100;
this.chartContext.strokeStyle = this.chartColors[axis]; chartContext[index === 0 ? 'moveTo' : 'lineTo'](x, y);
this.chartContext.stroke(); }
chartContext.strokeStyle = this.chartColors[axis];
chartContext.stroke();
}); });
} }
@ -244,12 +247,12 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
* @param {number} steering * @param {number} steering
*/ */
updateMeters(clutch, brake, throttle) { updateMeters(clutch, brake, throttle) {
Object.entries({ clutch, brake, throttle }).forEach(([axis, value]) => { for (const [axis, value] of Object.entries({ clutch, brake, throttle })) {
if (value === null) return; if (value === null) return;
this[`$${axis}Value`].innerHTML = value; this[`$${axis}Value`].innerHTML = value;
this[`$${axis}Value`].style.opacity = `${Math.round(33 + (value / 1.5))}%`; this[`$${axis}Value`].style.opacity = `${Math.round(33 + (value / 1.5))}%`;
this[`$${axis}Bar`].style.height = `${value}%`; this[`$${axis}Bar`].style.height = `${value}%`;
}); }
} }
/** /**
@ -307,8 +310,8 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
* Waits for an axis to be pushed out, and of the reference value, if any * Waits for an axis to be pushed out, and of the reference value, if any
* *
* @param {number} index * @param {number} index
* @param {number} [referenceValue] * @param {number|undefined} [referenceValue = undefined]
* @param {number} [duration] * @param {number} [duration = 1000]
* @returns {Promise} * @returns {Promise}
*/ */
async getAxisPush(index, referenceValue = undefined, duration = 1000) { async getAxisPush(index, referenceValue = undefined, duration = 1000) {
@ -323,6 +326,7 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
return; return;
} }
if (referenceValue !== undefined && Math.abs(gamepad.axes[index] - referenceValue) < 0.5) { if (referenceValue !== undefined && Math.abs(gamepad.axes[index] - referenceValue) < 0.5) {
return;
} }
if (Math.abs(gamepad.axes[index] - value) > 0.05) { if (Math.abs(gamepad.axes[index] - value) > 0.05) {
start = undefined; start = undefined;
@ -476,7 +480,7 @@ window.gamepad.TemplateClass = class TelemetryTemplate {
} }
this.$wizardInstructions.innerHTML = ` this.$wizardInstructions.innerHTML = `
<p>Press and hold the <strong>${name}</strong> axis.</p> <p>Hold down the <strong>${name}</strong> axis.</p>
`; `;
const pressedValue = await this.getAxisPush(index); const pressedValue = await this.getAxisPush(index);