-
diff --git a/templates/telemetry/template.js b/templates/telemetry/template.js
index 67137de..1c3e494 100644
--- a/templates/telemetry/template.js
+++ b/templates/telemetry/template.js
@@ -1,143 +1,124 @@
-/**
- * The Telemetry template class
- *
- * @class TelemetryTemplate
- */
-class TelemetryTemplate {
- /**
- * Creates an instance of TelemetryTemplate.
- */
- constructor() {
- this.AXES = ['clutch', 'brake', 'throttle', 'direction'];
-
- this.frequency = 1000 / 60;
- this.historyLength = 5000;
- this.length = this.historyLength / this.frequency;
- this.index = 0;
-
- this.$clutchValue = document.querySelector('#clutch .value');
- this.$clutchBar = document.querySelector('#clutch .bar .filler');
- this.$brakeValue = document.querySelector('#brake .value');
- this.$brakeBar = document.querySelector('#brake .bar .filler');
- this.$throttleValue = document.querySelector('#throttle .value');
- this.$throttleBar = document.querySelector('#throttle .bar .filler');
- this.$directionIndicator = document.querySelector('#direction #wheel--indicator');
-
- this.init();
- }
-
- toPercentage(value, min, max) {
- // debugger;
- return value !== undefined
- ? Math.round((value - min) * (100 / (max - min)))
- : 0;
- }
-
- toDegrees(value, min, max) {
- const percentage = this.toPercentage(value, min, max);
- return (this.directionDegrees) * (percentage - 50) / 100;
- }
-
- toAxisValue(gamepad, axis) {
- const { [`${axis}Type`]: type, [`${axis}Index`]: index, [`${axis}Min`]: min, [`${axis}Max`]: max } = this[axis];
- const value = type === 'button' ? gamepad.buttons[index].value : gamepad.axes[index];
- return axis === 'direction' ? this.toDegrees(value, min, max) : this.toPercentage(value, min, max);
- }
-
- loadAxes() {
- this.AXES.forEach((axis) => {
- this[axis] = {
- [`${axis}Type`]: (window.gamepad.getUrlParam(`${axis}Type`) || 'axis').replace('axis', 'axe'),
- [`${axis}Index`]: window.gamepad.getUrlParam(`${axis}Index`),
- [`${axis}Min`]: window.gamepad.getUrlParam(`${axis}Min`) || -1,
- [`${axis}Max`]: window.gamepad.getUrlParam(`${axis}Max`) || 1,
- }
- });
- this.directionDegrees = window.gamepad.getUrlParam('directionDegrees') || 360;
- }
-
- init() {
- this.loadAxes();
-
- if (!window.google) {
- window.setTimeout(this.init.bind(this), 100);
- return;
- }
-
- google.charts.load('current', {
- packages: ['corechart', 'line'],
- });
- google.charts.setOnLoadCallback(this.drawChart.bind(this));
- }
-
- drawChart() {
- this.initialData = [['Time', 'Clutch', 'Brake', 'Throttle']];
- for (this.index = 0; this.index < this.length; this.index++) {
- this.initialData.push([this.index, 0, 0, 0]);
- }
- this.data = google.visualization.arrayToDataTable(this.initialData);
- this.options = {
- backgroundColor: 'transparent',
- chartArea: {
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- backgroundColor: 'transparent',
- },
- hAxis: {
- textPosition: 'none',
- gridlines: {
- color: 'transparent',
+function TelemetryTemplate(gamepad) {
+ return {
+ $clutchBar: document.querySelector('#clutch .bar'),
+ $clutchValue: document.querySelector('#clutch .value'),
+ $brakeBar: document.querySelector('#brake .bar'),
+ $brakeValue: document.querySelector('#brake .value'),
+ $throttleBar: document.querySelector('#throttle .bar'),
+ $throttleValue: document.querySelector('#throttle .value'),
+ $directionIndicator: document.querySelector('#direction .indicator'),
+ AXES: ['clutch', 'brake', 'throttle', 'direction'],
+ frequency: gamepad.getUrlParam('fps') || 60,
+ historyLength: gamepad.getUrlParam('history') || 5000,
+ index: 0,
+ init: function () {
+ this.interval = 1000 / this.frequency;
+ this.length = this.historyLength / this.interval;
+ this.loadAxes();
+ this.initChart();
+ },
+ toPercentage: function (value, min, max) {
+ return value !== undefined
+ ? Math.round((value - min) * (100 / (max - min)))
+ : 0;
+ },
+ toDegrees: function (value, min, max) {
+ const percentage = this.toPercentage(value, min, max);
+ return (this.directionDegrees) * (percentage - 50) / 100;
+ },
+ toAxisValue: function (gamepad, axis) {
+ const { [`${axis}Type`]: type, [`${axis}Index`]: index, [`${axis}Min`]: min, [`${axis}Max`]: max } = this[axis];
+ const value = type === 'button' ? gamepad.buttons[index].value : gamepad.axes[index];
+ return axis === 'direction' ? this.toDegrees(value, min, max) : this.toPercentage(value, min, max);
+ },
+ loadAxes: function () {
+ this.AXES.forEach((axis) => {
+ this[axis] = {
+ [`${axis}Type`]: (gamepad.getUrlParam(`${axis}Type`) || 'axis').replace('axis', 'axe'),
+ [`${axis}Index`]: gamepad.getUrlParam(`${axis}Index`),
+ [`${axis}Min`]: gamepad.getUrlParam(`${axis}Min`) || -1,
+ [`${axis}Max`]: gamepad.getUrlParam(`${axis}Max`) || 1,
}
- },
- vAxis: {
- textPosition: 'none',
- gridlines: {
- color: 'transparent',
- },
- minValue: 0,
- maxValue: 100,
- },
- colors: ['blue', 'red', 'lime'],
- legend: 'none'
- };
- this.chart = new google.visualization.LineChart(document.querySelector('#chart'));
- this.chart.draw(this.data, this.options);
-
- this.update();
- }
-
- update() {
- const gamepad = window.gamepad.getActive();
- if (!gamepad) return;
-
- const [clutch, brake, throttle, direction] = this.AXES.map((axis) => this.toAxisValue(gamepad, axis));
-
- this.updateChart(clutch, brake, throttle);
- this.updateMeters(clutch, brake, throttle, direction);
- window.setTimeout(this.update.bind(this), this.frequency);
- }
-
- updateChart(clutch, brake, throttle) {
- if (this.data.getNumberOfRows() > this.length) {
- this.data.removeRows(0, this.data.getNumberOfRows() - this.length);
- }
- this.data.addRow([this.index, clutch, brake, throttle]);
- this.chart.draw(this.data, this.options);
- this.index++;
- }
-
- updateMeters(clutch, brake, throttle, direction) {
- Object.entries({ clutch, brake, throttle, direction }).forEach(([axis, value]) => {
- if (axis === 'direction') {
- this.$directionIndicator.style.transform = `rotate(${value}deg)`;
+ });
+ this.directionDegrees = gamepad.getUrlParam('directionDegrees') || 360;
+ },
+ initChart: function () {
+ if (!window.google) {
+ window.setTimeout(this.loadGoogleCharts.bind(this), 100);
return;
}
- this[`$${axis}Value`].innerHTML = value;
- this[`$${axis}Bar`].style.height = `${value}%`;
- });
- };
-}
+ this.drawChart();
+ },
+ loadGoogleCharts: function () {
+ google.charts.load('current', { packages: ['corechart', 'line'], });
+ google.charts.setOnLoadCallback(this.drawChart.bind(this));
+ },
+ drawChart: function () {
+ this.initialData = [['time', 'clutch', 'brake', 'throttle']];
+ for (this.index = 0; this.index < this.length; this.index++) {
+ this.initialData.push([this.index, 0, 0, 0]);
+ }
+ this.data = google.visualization.arrayToDataTable(this.initialData);
+ this.options = {
+ backgroundColor: 'transparent',
+ chartArea: {
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
+ backgroundColor: 'transparent',
+ },
+ hAxis: {
+ textPosition: 'none',
+ gridlines: {
+ color: 'transparent',
+ }
+ },
+ vAxis: {
+ textPosition: 'none',
+ gridlines: {
+ color: 'transparent',
+ },
+ minValue: 0,
+ maxValue: 100,
+ viewWindow: {
+ min: 2,
+ max: 102,
+ }
+ },
+ colors: ['#2D64B9', '#A52725', '#0CA818'],
+ legend: 'none'
+ };
+ this.chart = new google.visualization.LineChart(document.querySelector('#chart'));
+ this.chart.draw(this.data, this.options);
+ this.update();
+ },
+ update: function () {
+ const activeGamepad = gamepad.getActive();
+ if (!activeGamepad) return;
+ const [clutch, brake, throttle, direction] = this.AXES.map((axis) => this.toAxisValue(activeGamepad, axis));
+ this.updateChart(clutch, brake, throttle);
+ this.updateMeters(clutch, brake, throttle, direction);
+ window.setTimeout(this.update.bind(this), this.interval);
+ },
+ updateChart: function (clutch, brake, throttle) {
+ this.data.removeRows(0, 1);
+ this.data.addRow([this.index, clutch, brake, throttle]);
+ this.chart.draw(this.data, this.options);
+ this.index++;
+ },
+ updateMeters: function (clutch, brake, throttle, direction) {
+ Object.entries({ clutch, brake, throttle, direction }).forEach(([axis, value]) => {
+ if (axis === 'direction') {
+ this.$directionIndicator.style.transform = `rotate(${value}deg)`;
+ return;
+ }
+ this[`$${axis}Value`].innerHTML = value;
+ this[`$${axis}Value`].style.opacity = `${Math.round(33 + (value / 1.5))}%`;
+ this[`$${axis}Bar`].style.height = `${value}%`;
+ });
+ }
+ }.init();
+};
-window.telemetryTemplate = new TelemetryTemplate();
+new TelemetryTemplate(window.gamepad);
diff --git a/templates/xbox-one/template.js b/templates/xbox-one/template.js
index 505d715..dfd8130 100644
--- a/templates/xbox-one/template.js
+++ b/templates/xbox-one/template.js
@@ -1,33 +1,37 @@
-gamepad.updateButton = function ($button) {
- const value = parseFloat($button.attr("data-value"), 10);
-
- if ($button.is(".trigger")) {
- $button.css(
- gamepad.triggersMeter
- ? {
- opacity: 1,
- "clip-path": `inset(${(1 - value) * 100}% 0px 0px 0pc)`,
- }
- : {
- opacity: `${value * 100}%`,
- "clip-path": "none",
- }
- );
- }
-};
-
-gamepad.updateAxis = function ($axis) {
- const axisX = $axis.attr("data-value-x");
- const axisY = $axis.attr("data-value-y");
-
- if ($axis.is(".stick")) {
- $axis.css({
- "margin-top": axisY * 25,
- "margin-left": axisX * 25,
- transform: `rotateX(${-parseFloat(
- axisY * 30,
- 8
- )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`,
- });
- }
+function XboxOneTemplate(gamepad) {
+ return {
+ init: function () {
+ gamepad.updateButton = function ($button) {
+ const value = parseFloat($button.attr('data-value'), 10);
+ if ($button.is('.trigger')) {
+ $button.css(
+ gamepad.triggersMeter
+ ? {
+ opacity: 1,
+ 'clip-path': `inset(${(1 - value) * 100}% 0px 0px 0pc)`,
+ }
+ : {
+ opacity: `${value * 100}%`,
+ 'clip-path': 'none',
+ }
+ );
+ }
+ };
+ gamepad.updateAxis = function ($axis) {
+ const axisX = $axis.attr('data-value-x');
+ const axisY = $axis.attr('data-value-y');
+ if ($axis.is('.stick')) {
+ $axis.css({
+ 'margin-top': axisY * 25,
+ 'margin-left': axisX * 25,
+ transform: `rotateX(${-parseFloat(
+ axisY * 30,
+ 8
+ )}deg) rotateY(${parseFloat(axisX * 30, 8)}deg)`,
+ });
+ }
+ };
+ },
+ }.init();
};
+new XboxOneTemplate(window.gamepad);