Show a info-icon and modal when average circularity error is below 5%

assets/icons.svg

@@ -5,7 +5,7 @@
   <symbol id="ethereum" viewBox="0 0 320 512">
     <path fill="currentColor" d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z"/>
   </symbol>
-  <symbol id="info" viewBox="0 -860 960 960">
+  <symbol id="info" viewBox="0 -880 960 960">
     <path fill="currentColor" d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
   </symbol>
   <symbol id="discord" viewBox="0 0 640 512">

index.html

@@ -216,7 +216,15 @@
                   <div class="card-header"><i class="fas fa-crosshairs"></i>&nbsp;&nbsp;<span class="ds-i18n">Joystick Info</span></div>
                   <div class="vstack px-2">
                     <center>
-                      <canvas id="stickCanvas" width="300" height="150"></canvas>
+                      <div style="position: relative; display: inline-block;">
+                        <canvas id="stickCanvas" width="300" height="150"></canvas>
+                        <svg
+                          id="circularityCheckIcon" class="bi" width="32" height="32"
+                          style="cursor: pointer; color: #ff4000cb; position: absolute; top: 25px; right: -30px; display: none;"
+                          onclick="show_circularity_warning()"
+                        >
+                          <use xlink:href="#info"/></svg>
+                      </div>
                     </center>
                   </div>
                   <div class="px-2">

js/core.js

@@ -5,7 +5,7 @@ import { initControllerManager } from './controller-manager.js';
 import ControllerFactory from './controllers/controller-factory.js';
 import { lang_init, l } from './translations.js';
 import { loadAllTemplates } from './template-loader.js';
-import { draw_stick_dial, CIRCULARITY_DATA_SIZE } from './stick-renderer.js';
+import { draw_stick_dial, CIRCULARITY_DATA_SIZE, calculateCircularityError } from './stick-renderer.js';
 import { ds5_finetune, isFinetuneVisible, finetune_handle_controller_input } from './modals/finetune-modal.js';
 import { calibrate_stick_centers, auto_calibrate_stick_centers } from './modals/calib-center-modal.js';
 import { calibrate_range, rangeCalibHandleControllerInput } from './modals/calib-range-modal.js';
@@ -617,6 +617,17 @@ function refresh_stick_pos() {
   } catch (e) {
     // Fail silently if SVG not present
   }
+
+  const circularityCheckIcon = document.getElementById('circularityCheckIcon');
+  if (!enable_circ_test) {
+    circularityCheckIcon.style.display = 'none';
+    return;
+  }
+
+  const ll_error = calculateCircularityError(ll_data);
+  const rr_error = calculateCircularityError(rr_data);
+  const isTooSmall = (ll_error && ll_error < 5 || rr_error && rr_error < 5);
+  circularityCheckIcon.style.display = isTooSmall ? 'block' : 'none';
 }
 
 const circ_checked = () => $("#checkCircularityMode").is(':checked');
@@ -1019,6 +1030,15 @@ function show_info_tab() {
   $('#info-tab').tab('show');
 }
 
+function show_circularity_warning() {
+  const message = `<p>
+  ${l("Sony controllers come from the factory calibrated to have an average circularity error of nearly 10 %, and this is now what games expect. Too perfect circularity can make movements and aim feel stiff and unresponsive in some games.")
+  }</p><p>
+  ${l("Aim for a circularity error of around 7-9 % for the best playing experience.")}`;
+  
+  show_popup(message, true);
+}
+
 // Alert Management Functions
 let alertCounter = 0;
 
@@ -1265,6 +1285,7 @@ function initCalibrationMethod() {
 window.nvslock = nvslock;
 window.welcome_accepted = welcome_accepted;
 window.show_donate_modal = show_donate_modal;
+window.show_circularity_warning = show_circularity_warning;
 window.show_quick_test_modal = () => {
   show_quick_test_modal(controller).catch(error => {
     throw new Error("Failed to show quick test modal", { cause: error });

js/stick-renderer.js

@@ -168,7 +168,7 @@ export function draw_stick_dial(ctx, center_x, center_y, sz, stick_x, stick_y, o
  * @param {number[]} data - Array of distance values at different angular positions
  * @returns {number} RMS deviation as percentage
  */
-function calculateCircularityError(data) {
+export function calculateCircularityError(data) {
     // Sum of squared deviations from ideal distance of 1.0, only for values > 0.2
     const sumSquaredDeviations = data.reduce((acc, val) =>
         val > 0.2 ? acc + Math.pow(val - 1, 2) : acc, 0);