feat(rtsa): ✨ configurable canvas sizes, marker detection, and UI tweaks

- introduce width/height parameters on RTSAScreen and use them to size canvases (higher resolution)
- pass explicit sizes to SpectralDensityPlot and WaterfallDisplay for single/both modes
- compute topMarkers, select highest markerIndex, and draw selected marker; add isUpdateMarkers flag
- add marker navigation and logging in ACMkrBtn
- refactor info bar markup/CSS and add config button; adjust canvas height and label fonts
- remove noisy Logger.warn from continuous rotary knob wheel handler

Author: thkruz

src/components/rotary-knob/continuous-rotary-knob.ts

@@ -2,7 +2,6 @@ import { html } from "@app/engine/utils/development/formatter";
 import { qs } from "@app/engine/utils/query-selector";
 import { EventBus } from "@app/events/event-bus";
 import { Events } from "@app/events/events";
-import { Logger } from "@app/logging/logger";
 import './continuous-rotary-knob.css';
 
 export class ContinuousRotaryKnob {
@@ -86,8 +85,6 @@ export class ContinuousRotaryKnob {
     e.preventDefault();
     const delta = -Math.sign(e.deltaY) * this.step;
 
-    Logger.warn('ContinuousRotaryKnob', `Wheel event delta: ${delta}`);
-
     this.setAngle_(this.angle + delta);
   }
 

src/equipment/real-time-spectrum-analyzer/analyzer-control/ac-mkr-btn/ac-mkr-btn.ts

@@ -1,3 +1,4 @@
+import { Logger } from "@app/logging/logger";
 import { AnalyzerControl } from "../../analyzer-control";
 import { BaseControlButton } from "../base-control-button";
 import './ac-mkr-btn.css';
@@ -21,8 +22,33 @@ export class ACMkrBtn extends BaseControlButton {
 
     this.analyzerControl.specA.state.isMarkerOn = !this.analyzerControl.specA.state.isMarkerOn;
 
+    // Trigger marker update if marker is turned on
+    this.analyzerControl.specA.state.isUpdateMarkers = this.analyzerControl.specA.state.isMarkerOn;
+
     // Note: Marker drawing would need to be implemented in SpectrumAnalyzer
 
     this.playSound();
   }
+
+  onMajorTickChange(value: number): void {
+    // Positive value means increment marker index, negative means decrement
+    this.changeMarkerIndex(value < 0 ? 1 : -1);
+  }
+
+  onMinorTickChange(value: number): void {
+    // Positive value means increment marker index, negative means decrement
+    this.changeMarkerIndex(value < 0 ? 1 : -1);
+  }
+
+  private changeMarkerIndex(delta: number): void {
+    if (!this.analyzerControl.specA.state.isMarkerOn || this.analyzerControl.specA.state.topMarkers.length === 0) {
+      return;
+    }
+
+    const numMarkers = this.analyzerControl.specA.state.topMarkers.length;
+    this.analyzerControl.specA.state.markerIndex =
+      (this.analyzerControl.specA.state.markerIndex + delta + numMarkers) % numMarkers;
+
+    Logger.info('ACMkrBtn', 'changeMarkerIndex', `Marker index changed to ${this.analyzerControl.specA.state.markerIndex}`);
+  }
 }

src/equipment/real-time-spectrum-analyzer/real-time-spectrum-analyzer.css

@@ -29,7 +29,7 @@
 .spec-a-canvas-container canvas.spec-a-canvas-single {
   display: block;
   width: 100%;
-  height: 400px;
+  height: 460px;
 }
 
 /* Both mode canvases */
@@ -46,15 +46,39 @@
 }
 
 /* Info Section */
-.spec-a-info {
+.spec-a-info-bar {
   display: flex;
-  justify-content: space-around;
-  margin-bottom: 12px;
+  justify-content: space-between;
+  align-items: center;
+  width: auto;
+  border-radius: 4px;
+  margin: 0 8px 12px 8px;
   padding: 8px;
   background-color: #1a1a1a;
-  border-radius: 4px;
-  color: #fff;
-  font-size: 14px;
+
+  .btn-config {
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+    background: rgba(0, 0, 0, 0.7);
+    border: none;
+    color: #fff;
+    padding: 2px 12px;
+    font-size: 28px;
+    font-weight: bold;
+    border-radius: 4px;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    text-shadow: 0 1px 2px #000, 0 0 2px #fff;
+  }
+
+  .spec-a-info {
+    display: flex;
+    justify-content: space-around;
+    color: #fff;
+    font-size: 14px;
+    flex: 1;
+  }
 }
 
 .spec-a-info div {
@@ -77,22 +101,6 @@
   color: #fff;
 }
 
-.spec-a-controls button:hover {
-  filter: brightness(1.1);
-}
-
-.btn-mode-screen {
-  min-width: 160px;
-}
-
-.btn-mode-if-rf {
-  width: 65px;
-}
-
-.btn-pause.active {
-  background-color: #f44336;
-  color: #fff;
-}
 
 /* Responsive adjustments */
 @media (max-width: 768px) {

src/equipment/real-time-spectrum-analyzer/real-time-spectrum-analyzer.ts

@@ -11,6 +11,8 @@ import './real-time-spectrum-analyzer.css';
 import { SpectralDensityPlot } from './rtsa-screen/spectral-density-plot';
 import { WaterfallDisplay } from "./rtsa-screen/waterfall-display";
 
+type MarkerPoint = { x: number; y: number; signal: number };
+
 export interface RealTimeSpectrumAnalyzerState {
   /** This is the reference level that all dBm values are relative to */
   referenceLevel: number;
@@ -28,6 +30,9 @@ export interface RealTimeSpectrumAnalyzerState {
   isMaxHold: boolean;
   isMinHold: boolean;
   isMarkerOn: boolean;
+  isUpdateMarkers: boolean;
+  topMarkers: MarkerPoint[];
+  markerIndex: number;
   refreshRate: number; // in Hz
   centerFrequency: Hertz; // Hz - center frequency
   span: Hertz;
@@ -74,6 +79,9 @@ export class RealTimeSpectrumAnalyzer extends BaseEquipment {
       isMaxHold: false,
       isMinHold: false,
       isMarkerOn: false,
+      isUpdateMarkers: false,
+      topMarkers: [],
+      markerIndex: 0,
 
       referenceLevel: 0, // dBm
 
@@ -127,22 +135,22 @@ export class RealTimeSpectrumAnalyzer extends BaseEquipment {
           <canvas id="specA${this.uuid}-waterfall" width="747" height="200" class="spec-a-canvas-waterfall"></canvas>
         </div>
 
-        <div class="spec-a-info">
-          <div>CF: ${this.state.centerFrequency / 1e6} MHz</div>
-          <div>Input: ${this.state.inputValue} ${this.state.inputUnit}</div>
-          <div>RF Front End: ${this.state.rfFeUuid.split('-')[0]}</div>
+        <div class="spec-a-info-bar">
+          <button class="btn-config" data-action="config" title="Open Configuration Panel">
+            <span class="icon-advanced">&#9881;</span>
+          </button>
+          <div class="spec-a-info">
+            <div>CF: ${this.state.centerFrequency / 1e6} MHz</div>
+            <div>Input: ${this.state.inputValue} ${this.state.inputUnit}</div>
+            <div>RF Front End: ${this.state.rfFeUuid.split('-')[0]}</div>
+          </div>
         </div>
 
         <!-- Bottom Status Bar -->
         <div class="equipment-case-footer">
           <div class="bottom-status-bar">
             SYSTEM NORMAL
           </div>
-          <div>
-          <button class="btn-config" data-action="config" title="Open Configuration Panel">
-            <span class="icon-advanced">&#9881;</span>
-          </button>
-          </div>
         </div>
       </div>
     `;
@@ -192,12 +200,12 @@ export class RealTimeSpectrumAnalyzer extends BaseEquipment {
     if (!this.domCache['canvasWaterfall']) throw new Error('Waterfall canvas element not found for Spectrum Analyzer');
 
     // Initialize single-mode screens
-    this.spectralDensity = new SpectralDensityPlot(this.domCache['canvas'] as HTMLCanvasElement, this);
-    this.waterfall = new WaterfallDisplay(this.domCache['canvas'] as HTMLCanvasElement, this);
+    this.spectralDensity = new SpectralDensityPlot(this.domCache['canvas'] as HTMLCanvasElement, this, 1600, 1000);
+    this.waterfall = new WaterfallDisplay(this.domCache['canvas'] as HTMLCanvasElement, this, 1600, 1000);
 
     // Initialize "both" mode screens with their dedicated canvases
-    this.spectralDensityBoth = new SpectralDensityPlot(this.domCache['canvasSpectral'] as HTMLCanvasElement, this);
-    this.waterfallBoth = new WaterfallDisplay(this.domCache['canvasWaterfall'] as HTMLCanvasElement, this);
+    this.spectralDensityBoth = new SpectralDensityPlot(this.domCache['canvasSpectral'] as HTMLCanvasElement, this, 1600, 500);
+    this.waterfallBoth = new WaterfallDisplay(this.domCache['canvasWaterfall'] as HTMLCanvasElement, this, 1600, 500);
 
     // Set initial screen mode
     this.updateScreenVisibility();

src/equipment/real-time-spectrum-analyzer/rtsa-screen/rtsa-screen.ts

@@ -1,3 +1,4 @@
+import { Logger } from "@app/logging/logger";
 import { RealTimeSpectrumAnalyzer } from "../real-time-spectrum-analyzer";
 
 export abstract class RTSAScreen {
@@ -7,14 +8,18 @@ export abstract class RTSAScreen {
   protected readonly specA: RealTimeSpectrumAnalyzer;
 
   // Canvas dimensions
-  protected width: number = 1600; // More width to increase resolution (especially for noise floor)
-  protected height: number = 400;
+  protected width_: number = 1600; // More width to increase resolution (especially for noise floor)
+  protected height_: number = 460;
 
-  constructor(canvas: HTMLCanvasElement, specA: RealTimeSpectrumAnalyzer) {
+  constructor(canvas: HTMLCanvasElement, specA: RealTimeSpectrumAnalyzer, width = 1600, height = 1000) {
     this.canvas = canvas;
     this.specA = specA;
-    this.width = canvas.width;
-    this.height = canvas.height;
+    this.width_ = width;
+    this.height_ = height;
+    this.canvas.width = this.width_;
+    this.canvas.height = this.height_;
+
+    Logger.info('RTSAScreen', 'constructor', `Canvas initialized with width=${this.width_}, height=${this.height_}`);
 
     const context = this.canvas.getContext('2d');
     if (!context) {
@@ -23,6 +28,24 @@ export abstract class RTSAScreen {
     this.ctx = context;
   }
 
+  get width(): number {
+    return this.width_;
+  }
+
+  get height(): number {
+    return this.height_;
+  }
+
+  set width(value: number) {
+    this.width_ = value;
+    Logger.warn('RTSAScreen', 'set width', `Width set to ${value}, resizing canvas`);
+  }
+
+  set height(value: number) {
+    this.height_ = value;
+    Logger.warn('RTSAScreen', 'set height', `Height set to ${value}, resizing canvas`);
+  }
+
   public resetMaxHold(): void {
     // To be implemented by subclasses if needed
   }