Add Options for Changing Color, Changing the FPS of the Visualizer, and Flipping the Visualizer Horizontally

README.md

@@ -3,25 +3,26 @@ A Sound Visualizer for Gnome Shell based on Gstreamer specially for Wayland
 
 ![demo](assets/visualization.gif)
 
-For Desktop Widgets I'm Using [Circular Widgets](https://extensions.gnome.org/extension/5530/circular-widgets/) Extension.
+For the Desktop Widgets, I'm using the [Circular Widgets](https://extensions.gnome.org/extension/5530/circular-widgets/) extension.
 
 # Features
 
-- Drag and Drop Supports
-- Change Audio source from Menu (To change right/left click on Visualizer)
-- Change Visualizer size
+- Drag and Drop Support
+- Change Audio Source from the Menu (To change right/left click on Visualizer)
+- Change Visualizer Size
 - Increase or Decrease Bands
-- Choose how many bands will appear on display
-- Now you can Flip Visualizer
-- Added older version Gnome Shell v3.36 to v43.0
+- Flip Visualizer Horizontally or Vertically
+- Ability to Change the FPS of the Visualizer
+- Ability to choose how many bands will appear on display
+- Added older version Gnome Shell support, from v3.36 to v43.0
 
-More Feature will be added in Future
+More features will be added in the future
 
 # Installation
 
-1. Download zip file : https://github.com/raihan2000/visualizer/archive/refs/heads/main.zip
+1. Download the zip file : https://github.com/raihan2000/visualizer/archive/refs/heads/main.zip
 2. Extract to visualizer-main
-4. make install
+3. `make install`
 
 or
 
@@ -33,4 +34,4 @@ make install
 
 # Credits
 
-This Extension is inspired by [Glava](https://github.com/jarcode-foss/glava)
+This extension is inspired by [Glava](https://github.com/jarcode-foss/glava).

src/metadata.json

@@ -1,6 +1,6 @@
 {
   "_generated": "Generated by SweetTooth, do not edit",
-  "description": "A Real Time Sound Visualizer Based On Gstreamer",
+  "description": "A Real Time Sound Visualizer Based On Gstreamer\nFor any Issues,Bugs and Suggestions please open an issue on Github",
   "name": "Sound Visualizer",
   "settings-schema": "org.gnome.shell.extensions.visualizer",
   "shell-version": [
@@ -13,5 +13,5 @@
   ],
   "url": "https://github.com/raihan2000/visualizer",
   "uuid": "visualizer@sound.org",
-  "version": 4
-}
+  "version": 5
+}

src/prefs.js

@@ -1,13 +1,23 @@
 'use strict';
 
 const { Gio, Gtk, Gdk, GLib, GObject } = imports.gi;
-const Params = imports.misc.params;
 const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
+const Params = imports.misc.params;
 const Config = imports.misc.config;
-const [major, minor] = Config.PACKAGE_VERSION.split('.').map(s => Number(s));
+const Me = ExtensionUtils.getCurrentExtension();
+
+const [MajorVersion, MinorVersion] = Config.PACKAGE_VERSION.split('.').map(s => Number(s));
 let Adw;
 
+const DEFAULT_SPIN_MIN = 1; // Minimum pixel size
+const DEFAULT_SPIN_MAX = 200; // Maximum pixel size
+const VISUALIZER_WIDTH_MAX = 1920; // Maximum pixel size for width
+const SPECTS_LINE_WIDTH_MAX = 20; // Maximum pixel size for spect line widths
+const TOTAL_SPECTS_BAND_MAX = 256; // Maximum # of spect bands possible to be chosen
+const FPS_OPTIONS = ["15", "30", "60", "90", "120"]; // Frame counts; going from 15 to 120 fps
+const GRID_COLUMN_SPACING = 200; // Spacing between columns
+const GRID_ROW_SPACING = 25; // Spacing between rows
+
 function init() {
 }
 
@@ -19,44 +29,68 @@ function fillPreferencesWindow(window) {
 
 function buildPrefsWidget() {
   let widget = new prefsWidget();
-  (major < 40) ? widget.show_all(): widget.show();
+  (MajorVersion < 40) ? widget.show_all(): widget.show();
   return widget;
 }
 
+function attachItems(grid, label, widget, row) {
+  grid.set_column_spacing(GRID_COLUMN_SPACING);
+  grid.set_row_spacing(GRID_ROW_SPACING);
+  grid.attach(label, 0, row, 1, 1);
+  grid.attach(widget, 1, row, 1, 1);
+}
+
+
 const prefsWidget = GObject.registerClass(
-  class prefsWidget extends Gtk.Notebook {
-
-    _init(params) {
-      super._init(params);
-      this._settings = ExtensionUtils.getSettings('org.gnome.shell.extensions.visualizer');
-      this.margin = 20;
-
-      let grid = new Gtk.Grid();
-      attachItems(grid, new Gtk.Label({ label: 'Flip the Visualizer' }), getSwitch('flip-visualizer', this._settings), 0);
-      attachItems(grid, new Gtk.Label({ label: 'Visualizer Height' }), getSpinButton(false, 'visualizer-height', 1, 200, 1, this._settings), 1);
-      attachItems(grid, new Gtk.Label({ label: 'Visualizer Width' }), getSpinButton(false, 'visualizer-width', 1, 1920, 1, this._settings), 2);
-      attachItems(grid, new Gtk.Label({ label: 'Spects Line Width' }), getSpinButton(false, 'spects-line-width', 1, 20, 1, this._settings), 3);
-      attachItems(grid, new Gtk.Label({ label: 'Change Spects Band to Get' }), getSpinButton(false, 'total-spects-band', 1, 256, 1, this._settings), 4);
-      this.attachHybridRow(grid, new Gtk.Label({ label: 'Override Spect Value' }), new Gtk.Label({ label: 'Set Spects Value' }), getSwitch('spect-over-ride-bool', this._settings), getSpinButton(false, 'spect-over-ride', 1, 256, 1, this._settings), 5);
-      this.append_page(grid, new Gtk.Label({ label: 'Visualizer' }));
-      let aboutBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
-      if (major < 40) {
-        aboutBox.add(new Gtk.Label({ label: Me.metadata.name }));
-        aboutBox.add(new Gtk.Label({ label: 'Version: ' + Me.metadata.version.toString() }));
-      } else {
-        aboutBox.append(new Gtk.Label({ label: Me.metadata.name }));
-        aboutBox.append(new Gtk.Label({ label: 'Version: ' + Me.metadata.version.toString() }));
+    class prefsWidget extends Gtk.Notebook {
+
+      _init(params) {
+        super._init(params);
+        let grid = new Gtk.Grid();
+        this._settings = ExtensionUtils.getSettings('org.gnome.shell.extensions.visualizer');
+        this.setupFpsOptions();
+        this.margin = 20;
+
+        attachItems(grid, new Gtk.Label({ label: 'Flip the Visualizer Vertically' }), getSwitch('flip-visualizer', this._settings), 0);
+        attachItems(grid, new Gtk.Label({ label: 'Flip the Visualizer Horizontally' }), getSwitch('horizontal-flip', this._settings), 1);
+        attachItems(grid, new Gtk.Label({ label: 'Visualizer Height' }), getSpinButton(false, 'visualizer-height', DEFAULT_SPIN_MIN, DEFAULT_SPIN_MAX, 1, this._settings), 2);
+        attachItems(grid, new Gtk.Label({ label: 'Visualizer Width' }), getSpinButton(false, 'visualizer-width', DEFAULT_SPIN_MIN, VISUALIZER_WIDTH_MAX, 1, this._settings), 3);
+        attachItems(grid, new Gtk.Label({ label: 'Spects Line Width' }), getSpinButton(false, 'spects-line-width', DEFAULT_SPIN_MIN, SPECTS_LINE_WIDTH_MAX, 1, this._settings), 5);
+        attachItems(grid, new Gtk.Label({ label: 'Change Spects Band to Get' }), getSpinButton(false, 'total-spects-band', DEFAULT_SPIN_MIN, TOTAL_SPECTS_BAND_MAX, 1, this._settings), 4);
+        attachItems(grid, new Gtk.Label({ label: 'Frames Per Second (FPS)' }), getDropDown(this._settings), 7);
+        attachItems(grid, new Gtk.Label({ label: 'Visualizer Color' }), getColorButton(this._settings), 8);
+        this.attachHybridRow(grid, new Gtk.Label({ label: 'Override Spect Value' }), new Gtk.Label({ label: 'Set Spects Value' }), getSwitch('spect-over-ride-bool', this._settings), getSpinButton(false, 'spect-over-ride', 1, 256, 1, this._settings), 6);
+        this.append_page(grid, new Gtk.Label({ label: 'Visualizer' }));
+
+        let aboutBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        if (MajorVersion < 40) {
+          aboutBox.add(new Gtk.Label({ label: Me.metadata.name }));
+          aboutBox.add(new Gtk.Label({ label: 'Version: ' + Me.metadata.version.toString() }));
+        } else {
+          aboutBox.append(new Gtk.Label({ label: Me.metadata.name }));
+          aboutBox.append(new Gtk.Label({ label: 'Version: ' + Me.metadata.version.toString() }));
+        }
+        this.append_page(aboutBox, new Gtk.Label({ label: 'About' }));
       }
-      this.append_page(aboutBox, new Gtk.Label({ label: 'About' }));
-    }
 
-    attachHybridRow(grid, label, label1, button, button1, row) {
-      grid.attach(label, 0, row, 1, 1);
-      grid.attach(button, 1, row, 1, 1);
-      grid.attach(label1, 0, row + 1, 1, 1);
-      grid.attach(button1, 1, row + 1, 1, 1);
-    }
-  });
+      setupFpsOptions() {
+        let fpsOptions = new Gtk.ComboBoxText();
+        FPS_OPTIONS.forEach(fps => fpsOptions.append_text(fps));
+        fpsOptions.connect('changed', (widget) => {
+          let fps = widget.get_active_text();
+          this._settings.set_int('fps', parseInt(fps, 10));
+        });
+        let currentFps = this._settings.get_int('fps');
+        fpsOptions.set_active_id(currentFps.toString());
+      }
+
+      attachHybridRow(grid, label, label1, button, button1, row) {
+        grid.attach(label, 0, row, 1, 1);
+        grid.attach(button, 1, row, 1, 1);
+        grid.attach(label1, 0, row + 1, 1, 1);
+        grid.attach(button1, 1, row + 1, 1, 1);
+      }
+    });
 
 class PrefsWindow {
   constructor(window) {
@@ -65,10 +99,12 @@ class PrefsWindow {
   }
 
   create_page(title) {
-    let page = new Adw.PreferencesPage({
-      title: title,
-      //icon_name: icon,
-    });
+    let page = new Adw.PreferencesPage(
+        {
+          title: title,
+          //icon_name: icon,
+        }
+    );
     this._window.add(page);
 
     // get the headerbar
@@ -99,9 +135,7 @@ class PrefsWindow {
   }
 
   append_row(group, title, widget) {
-    let row = new Adw.ActionRow({
-      title: title,
-    });
+    let row = new Adw.ActionRow({ title: title });
     group.add(row);
     row.add_suffix(widget);
     row.activatable_widget = widget;
@@ -114,12 +148,10 @@ class PrefsWindow {
       expanded: this._settings.get_boolean(key),
       enable_expansion: this._settings.get_boolean(key)
     });
-    let row = new Adw.ActionRow({
-      title: title,
-    });
+
+    let row = new Adw.ActionRow({ title: title });
     expand_row.connect("notify::enable-expansion", (widget) => {
-      let settingArray = this._settings.get_boolean(key);
-      settingArray = widget.enable_expansion;
+      let settingArray = widget.enable_expansion;
       this._settings.set_value(key, new GLib.Variant('b', settingArray));
     });
     row.add_suffix(key1);
@@ -129,20 +161,9 @@ class PrefsWindow {
 
   append_info_group(group, name, title) {
     let adw_group = new Adw.PreferencesGroup();
-    let infoBox = new Gtk.Box({
-      orientation: Gtk.Orientation.VERTICAL,
-      hexpand: false,
-      vexpand: false
-    });
-
-    let name_label = new Gtk.Label({
-      label: name,
-    });
-
-    let version = new Gtk.Label({
-      label: 'Version: ' + title,
-    });
-
+    let infoBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, hexpand: false, vexpand: false});
+    let name_label = new Gtk.Label({ label: name });
+    let version = new Gtk.Label({ label: 'Version: ' + title });
     infoBox.append(name_label);
     infoBox.append(version);
     adw_group.add(infoBox);
@@ -152,12 +173,15 @@ class PrefsWindow {
   fillPrefsWindow() {
     let visualWidget = this.create_page('Visualizer'); {
       let groupVisual = this.create_group(visualWidget);
-      this.append_row(groupVisual, 'Flip the Visualizer', getSwitch('flip-visualizer', this._settings));
-      this.append_row(groupVisual, 'Visualizer Height', getSpinButton(false, 'visualizer-height', 1, 200, 1, this._settings));
-      this.append_row(groupVisual, 'Visualizer Width', getSpinButton(false, 'visualizer-width', 1, 1920, 1, this._settings));
-      this.append_row(groupVisual, 'Spects Line Width', getSpinButton(false, 'spects-line-width', 1, 20, 1, this._settings));
-      this.append_row(groupVisual, 'Change Spects Band to Get', getSpinButton(false, 'total-spects-band', 1, 256, 1, this._settings));
-      this.append_expander_row(groupVisual, 'Override Spect Value', 'Set Spects Value', 'spect-over-ride-bool', getSpinButton(false, 'spect-over-ride', 1, 256, 1, this._settings));
+      this.append_row(groupVisual, 'Flip the Visualizer Vertically', getSwitch('flip-visualizer', this._settings));
+      this.append_row(groupVisual, 'Flip the Visualizer Horizontally', getSwitch('horizontal-flip', this._settings));
+      this.append_row(groupVisual, 'Visualizer Height (px)', getSpinButton(false, 'visualizer-height', 1, 200, 1, this._settings));
+      this.append_row(groupVisual, 'Visualizer Width (px)', getSpinButton(false, 'visualizer-width', 1, 1920, 1, this._settings));
+      this.append_row(groupVisual, 'Spects Line Width (px)', getSpinButton(false, 'spects-line-width', 1, 20, 1, this._settings));
+      this.append_row(groupVisual, 'Change # of Spect Bands to Get', getSpinButton(false, 'total-spects-band', 1, 256, 1, this._settings));
+      this.append_row(groupVisual, 'Frames Per Second (FPS)', getDropDown(this._settings));
+      this.append_row(groupVisual, 'Visualizer Color', getColorButton(this._settings));
+      this.append_expander_row(groupVisual, 'Override Spect Value', 'Set Spect Value', 'spect-over-ride-bool', getSpinButton(false, 'spect-over-ride', 1, 256, 1, this._settings));
     }
 
     let aboutPage = this.create_page('About'); {
@@ -167,24 +191,48 @@ class PrefsWindow {
   }
 }
 
-function attachItems(grid, label, widget, row) {
-  grid.set_column_spacing(200);
-  grid.set_row_spacing(25);
-  grid.attach(label, 0, row, 1, 1);
-  grid.attach(widget, 1, row, 1, 1);
-}
-
 function getSwitch(key, settings) {
   let button = new Gtk.Switch({ active: key, valign: Gtk.Align.CENTER });
   settings.bind(key, button, 'active', Gio.SettingsBindFlags.DEFAULT);
   return button
 }
 
 function getSpinButton(is_double, key, min, max, step, settings) {
-  let v = 0;
-  (is_double) ? v = settings.get_double(key) : v = settings.get_int(key);
+  let value = is_double ? settings.get_double(key) : settings.get_int(key);
   let spin = Gtk.SpinButton.new_with_range(min, max, step);
-  spin.set_value(v);
+  spin.set_value(value);
   settings.bind(key, spin, 'value', Gio.SettingsBindFlags.DEFAULT);
   return spin;
 }
+
+function getDropDown(settings) {
+  let dropDown = new Gtk.ComboBoxText();
+  FPS_OPTIONS.forEach(fps => dropDown.append_text(fps));
+
+  dropDown.connect('changed', (widget) => {
+    let fps = widget.get_active_text();
+    settings.set_int('fps', parseInt(fps, 10));
+  });
+
+  let currentFps = settings.get_int('fps').toString();
+  let currentIndex = FPS_OPTIONS.indexOf(currentFps);
+  if (currentIndex !== -1) {
+    dropDown.set_active(currentIndex);
+  }
+  return dropDown;
+}
+
+function getColorButton(settings) {
+  let button = new Gtk.ColorButton();
+  let rgbaString = settings.get_string('visualizer-color');
+  let rgbaParts = rgbaString.split(',').map(parseFloat);
+  let gdkRGBA = new Gdk.RGBA({red: rgbaParts[0], green: rgbaParts[1], blue: rgbaParts[2], alpha: rgbaParts[3]});
+  button.set_rgba(gdkRGBA);
+  button.connect('color-set', () => {
+    let gdkRGBA = button.get_rgba();
+    let rgbaString = `${gdkRGBA.red},${gdkRGBA.green},${gdkRGBA.blue},${gdkRGBA.alpha}`;
+    settings.set_string('visualizer-color', rgbaString);
+  });
+
+  return button;
+}

src/schemas/org.gnome.shell.extensions.visualizer.gschema.xml

@@ -8,25 +8,18 @@
 			<description>Location of visualizer</description>
 		</key>
 		<!--Visualizer-->
-		<key name="visualizer-height" type="i">
-			<default>150</default>
-			<summary>Vertical Size of DrawingArea</summary>
-		</key>
-		<key name="visualizer-width" type="i">
-			<default>720</default>
-			<summary>Horizontal Size of DrawingArea</summary>
-		</key>
-		<key name="spects-line-width" type="i">
-			<default>5</default>
-			<summary>All Spect Bands width</summary>
-		</key>
-		<key name="total-spects-band" type="i">
-			<default>64</default>
-			<summary>Count Total Spects Bands</summary>
+		<key name="visualizer-color"  type="s">
+			<default>'1.0,0.0,1.0,1.0'</default>
+			<summary>Visualizer color</summary>
+			<description>The color of the visualizer</description>
 		</key>
 		<key name="flip-visualizer" type="b">
 			<default>false</default>
-			<summary>Flip Visualizer</summary>
+			<summary>Flip Visualizer Vertically</summary>
+		</key>
+		<key name="horizontal-flip" type="b">
+			<default>false</default>
+			<summary>Flip Visualizer Horizontally</summary>
 		</key>
 		<key type="b" name="spect-over-ride-bool">
 			<default>false</default>
@@ -38,5 +31,26 @@
 			<summary>Override Spects Bands</summary>
 			<description>Override Spects Bands</description>
 		</key>
+		<key name="fps" type="i">
+			<default>30</default>
+			<summary>Frames Per Second</summary>
+			<description>The number of frames per second for the visualizer. Possible values are 15, 30, 60, 90, and 120.</description>
+		</key>
+		<key name="spects-line-width" type="i">
+			<default>5</default>
+			<summary>All Spect Bands width</summary>
+		</key>
+		<key name="total-spects-band" type="i">
+			<default>64</default>
+			<summary>Count Total Spects Bands</summary>
+		</key>
+		<key name="visualizer-height" type="i">
+			<default>150</default>
+			<summary>Vertical Size of DrawingArea</summary>
+		</key>
+		<key name="visualizer-width" type="i">
+			<default>720</default>
+			<summary>Horizontal Size of DrawingArea</summary>
+		</key>
 	</schema>
 </schemalist>