Bar-AudioVisualizer: vertical bar support

Modules/Audio/WaveSpectrum.qml

@@ -7,6 +7,7 @@ Item {
   property color strokeColor: Color.mOnSurface
   property int strokeWidth: 0
   property var values: []
+  property bool vertical: false
 
   // Minimum signal properties
   property bool showMinimumSignal: false
@@ -20,6 +21,7 @@ Item {
   onStrokeColorChanged: canvas.requestPaint()
   onShowMinimumSignalChanged: canvas.requestPaint()
   onMinimumSignalValueChanged: canvas.requestPaint()
+  onVerticalChanged: canvas.requestPaint()
 
   Canvas {
     id: canvas
@@ -52,34 +54,65 @@ Item {
       ctx.lineWidth = root.strokeWidth
 
       const count = mirroredValues.length
-      const stepX = width / (count - 1)
-      const centerY = height / 2
-      const amplitude = height / 2
 
-      ctx.beginPath()
+      if (root.vertical) {
+        // Vertical orientation
+        const stepY = height / (count - 1)
+        const centerX = width / 2
+        const amplitude = width / 2
 
-      // Draw the top half of the waveform from left to right
-      // Use the calculated offset for the first point
-      var yOffset = mirroredValues[0] * amplitude
-      ctx.moveTo(0, centerY - yOffset)
+        ctx.beginPath()
 
-      for (var i = 1; i < count; i++) {
-        const x = i * stepX
-        yOffset = mirroredValues[i] * amplitude
-        const y = centerY - yOffset
-        ctx.lineTo(x, y)
+        // Draw the left half of the waveform from top to bottom
+        var xOffset = mirroredValues[0] * amplitude
+        ctx.moveTo(centerX - xOffset, 0)
+
+        for (var i = 1; i < count; i++) {
+          const y = i * stepY
+          xOffset = mirroredValues[i] * amplitude
+          const x = centerX - xOffset
+          ctx.lineTo(x, y)
+        }
+
+        // Draw the right half of the waveform from bottom to top to create a closed shape
+        for (var i = count - 1; i >= 0; i--) {
+          const y = i * stepY
+          xOffset = mirroredValues[i] * amplitude
+          const x = centerX + xOffset // Mirrored across the center
+          ctx.lineTo(x, y)
+        }
+
+        ctx.closePath()
+      } else {
+        // Horizontal orientation
+        const stepX = width / (count - 1)
+        const centerY = height / 2
+        const amplitude = height / 2
+
+        ctx.beginPath()
+
+        // Draw the top half of the waveform from left to right
+        var yOffset = mirroredValues[0] * amplitude
+        ctx.moveTo(0, centerY - yOffset)
+
+        for (var i = 1; i < count; i++) {
+          const x = i * stepX
+          yOffset = mirroredValues[i] * amplitude
+          const y = centerY - yOffset
+          ctx.lineTo(x, y)
+        }
+
+        // Draw the bottom half of the waveform from right to left to create a closed shape
+        for (var i = count - 1; i >= 0; i--) {
+          const x = i * stepX
+          yOffset = mirroredValues[i] * amplitude
+          const y = centerY + yOffset // Mirrored across the center
+          ctx.lineTo(x, y)
+        }
+
+        ctx.closePath()
       }
 
-      // Draw the bottom half of the waveform from right to left to create a closed shape
-      for (var i = count - 1; i >= 0; i--) {
-        const x = i * stepX
-        yOffset = mirroredValues[i] * amplitude
-        const y = centerY + yOffset // Mirrored across the center
-        ctx.lineTo(x, y)
-      }
-
-      ctx.closePath()
-
       // --- Render the path ---
       if (root.fillColor.a > 0) {
         ctx.fill()