💄 Add hue preview circle to Aura Glow preferences

Author: lstrsrt

resources/ui/adw/aura-glow.ui

@@ -67,7 +67,16 @@ SPDX-License-Identifier: GPL-3.0-or-later
     <child>
       <object class="AdwActionRow" id="aura-glow-action-row">
         <property name="title" translatable="yes">Start Hue</property>
-
+        <child>
+          <object class="GtkDrawingArea" id="aura-glow-hue-preview">
+            <property name="valign">3</property>
+            <property name="halign">2</property>
+            <property name="hexpand">true</property>
+            <property name="vexpand">true</property>
+            <property name="height-request">16</property>
+            <property name="width-request">16</property>
+          </object>
+        </child>
         <child>
           <object class="GtkScale" id="aura-glow-start-hue-slider">
             <property name="valign">center</property>
@@ -135,7 +144,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
       <object class="AdwActionRow">
         <property name="title" translatable="yes">Saturation</property>
         <child>
-          <object class="GtkScale">
+          <object class="GtkScale" id="aura-glow-saturation-slider">
             <property name="valign">center</property>
             <property name="draw-value">1</property>
             <property name="digits">2</property>

src/effects/AuraGlow.js

@@ -103,6 +103,31 @@ export default class Effect {
     dialog.bindAdjustment('aura-glow-edge-hardness');
     dialog.bindAdjustment('aura-glow-blur');
 
+    dialog.getBuilder()
+      .get_object('aura-glow-hue-preview')
+      .set_draw_func((area, cairo) => {
+        const hueScale = dialog.getBuilder().get_object('aura-glow-start-hue-slider');
+        const satScale = dialog.getBuilder().get_object('aura-glow-saturation-slider');
+        const color    = utils.hsvToRgb(hueScale.get_value(), satScale.get_value(), 1);
+        const height   = area.get_allocated_height();
+        const width    = area.get_allocated_width();
+        cairo.setSourceRGB(color.r, color.g, color.b);
+        cairo.arc(width / 2, height / 2, width / 2, 0.0, 2 * Math.PI);
+        cairo.fill();
+    });
+
+    function redrawHuePreview() {
+      dialog.getBuilder().get_object('aura-glow-hue-preview').queue_draw();
+    }
+
+    dialog.getBuilder()
+      .get_object('aura-glow-start-hue-slider')
+      .connect('value-changed', redrawHuePreview);
+
+    dialog.getBuilder()
+      .get_object('aura-glow-saturation-slider')
+      .connect('value-changed', redrawHuePreview);
+
     // enable and disable the one slider
     function enableDisablePref(dialog, state) {
       dialog.getBuilder().get_object('aura-glow-start-hue-slider').set_sensitive(!state);

src/utils.js

@@ -195,3 +195,42 @@ export function parseColor(string) {
 
   return [color.red / 255, color.green / 255, color.blue / 255, color.alpha / 255];
 }
+
+// Converts a color in hsv space into rgb.
+// https://stackoverflow.com/a/17243070
+export function hsvToRgb(h, s, v) {
+  var r, g, b, i, f, p, q, t;
+  if (arguments.length === 1) {
+    (s = h.s), (v = h.v), (h = h.h);
+  }
+  i = Math.floor(h * 6);
+  f = h * 6 - i;
+  p = v * (1 - s);
+  q = v * (1 - f * s);
+  t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0:
+      (r = v), (g = t), (b = p);
+      break;
+    case 1:
+      (r = q), (g = v), (b = p);
+      break;
+    case 2:
+      (r = p), (g = v), (b = t);
+      break;
+    case 3:
+      (r = p), (g = q), (b = v);
+      break;
+    case 4:
+      (r = t), (g = p), (b = v);
+      break;
+    case 5:
+      (r = v), (g = p), (b = q);
+      break;
+  }
+  return {
+    r,
+    g,
+    b,
+  };
+}