ui: improve the box appearance, positioning

Author: jpcima

plugins/string-machine/StringMachineUI.cpp

@@ -198,15 +198,21 @@ void StringMachineUI::onDisplay()
     for (const Label *label : group_labels) {
         Font font;
         font.name = "title";
-        font.size = 12.0;
+        font.size = 13.0;
+        font.color = ColorRGBA8{0xff, 0xff, 0xff, 0xff};
 
-        Rect bounds = label->bounds;
+        RectF frame = label->bounds.to<double>().off_by({0.5, 0.5}).reduced({1, 1});
+        RectF titleFrame = RectF(frame).take_from_top(14);
 
-        bounds.y += 2;
+        cairo_rounded_rectangle_with_corners(cr, titleFrame, 5.0, RectangleNW|RectangleNE);
+        cairo_set_source_rgba8(cr, ColorRGBA8{0x58, 0x58, 0x56, 0xff});
+        cairo_fill_preserve(cr);
+        cairo_set_source_rgba(cr, 0.0, 0.0, 0.0, 1.0);
+        cairo_stroke(cr);
 
-        fe.drawInBox(cr, label->text, font, bounds, label->align);
+        Rect textBounds = label->bounds.off_by({0, 2});
+        fe.drawInBox(cr, label->text, font, textBounds, label->align);
 
-        RectF frame = label->bounds.to<double>().off_by({0.5, 0.5});
         cairo_rounded_rectangle(cr, frame, 5.0);
         cairo_set_source_rgba(cr, 0.0, 0.0, 0.0, 1.0);
         cairo_stroke(cr);
@@ -217,13 +223,10 @@ void StringMachineUI::onDisplay()
         font.name = "title";
         font.size = 12.0;
 
-        Rect bounds = label->bounds;
-
-        bounds.y += 2;
-
-        fe.drawInBox(cr, label->text, font, bounds, label->align);
+        Rect textBounds = label->bounds.off_by({0, 2});
+        fe.drawInBox(cr, label->text, font, textBounds, label->align);
 
-        RectF frame = label->bounds.to<double>().off_by({0.5, 0.5});
+        RectF frame = label->bounds.to<double>().off_by({0.5, 0.5}).reduced({1, 1});
         cairo_rounded_rectangle(cr, frame, 5.0);
         cairo_set_source_rgba(cr, 0.0, 0.0, 0.0, 1.0);
         cairo_stroke(cr);

plugins/string-machine/StringMachineUILayouts.hpp

@@ -74,7 +74,7 @@ namespace MainLayout {
     DECL_IGNORABLE static Rect val_EnvSustain = {725, 193, 40, 12};
     DECL_IGNORABLE static Rect knob_EnvRelease = {775, 160, 30, 30};
     DECL_IGNORABLE static Rect val_EnvRelease = {770, 193, 40, 12};
-    DECL_IGNORABLE static Rect plot_Env = {815, 155, 105, 45};
+    DECL_IGNORABLE static Rect plot_Env = {815, 160, 105, 45};
     DECL_IGNORABLE static Label group_StringOsc_label = {"String Osc", 17, {5, 30, 185, 170}};
     DECL_IGNORABLE static Label subgroup_AutoDetune_label = {"Auto Detune", 17, {10, 50, 85, 145}};
     DECL_IGNORABLE static Label knob_OscDetune_label = {"Detune", 1, {50, 145, 30, 30}};
@@ -111,5 +111,5 @@ namespace MainLayout {
     DECL_IGNORABLE static Label knob_EnvDecay_label = {"D", 1, {685, 160, 30, 30}};
     DECL_IGNORABLE static Label knob_EnvSustain_label = {"S", 1, {730, 160, 30, 30}};
     DECL_IGNORABLE static Label knob_EnvRelease_label = {"R", 1, {775, 160, 30, 30}};
-    DECL_IGNORABLE static Label plot_Env_label = {"ADSR - Env", 1, {815, 155, 105, 45}};
+    DECL_IGNORABLE static Label plot_Env_label = {"ADSR - Env", 1, {815, 160, 105, 45}};
 };

resources/ui/layout.fl

@@ -4,7 +4,7 @@ header_name {.h}
 code_name {.cxx}
 Function {make_window()} {open
 } {
-  Fl_Window window_TopLevel {open selected
+  Fl_Window window_TopLevel {open
     xywh {741 151 935 245} type Double visible
   } {
     Fl_Group group_StringOsc {
@@ -223,8 +223,8 @@ Function {make_window()} {open
         xywh {770 193 40 12} box THIN_UP_BOX labelsize 10
       }
       Fl_Box plot_Env {
-        label {ADSR - Env}
-        xywh {815 155 105 45} box ENGRAVED_BOX labelsize 10 align 1
+        label {ADSR - Env} selected
+        xywh {815 160 105 45} box ENGRAVED_BOX labelsize 10 align 1
       }
     }
   }

sources/ui/Cairo++.h

@@ -33,10 +33,48 @@ void cairo_rounded_rectangle(cairo_t *cr, const RectT<T> &r, double radius)
     double w = r.w;
     double h = r.h;
 
-    cairo_new_sub_path(cr);
+    cairo_new_path(cr);
     cairo_arc(cr, x + w - radius, y + radius, radius, -90 * degrees, 0 * degrees);
     cairo_arc(cr, x + w - radius, y + h - radius, radius, 0 * degrees, 90 * degrees);
     cairo_arc(cr, x + radius, y + h - radius, radius, 90 * degrees, 180 * degrees);
     cairo_arc(cr, x + radius, y + radius, radius, 180 * degrees, 270 * degrees);
     cairo_close_path(cr);
 }
+
+enum RectangleCorner {
+    RectangleNE = 1 << 0,
+    RectangleSE = 1 << 1,
+    RectangleSW = 1 << 2,
+    RectangleNW = 1 << 3,
+    RectangleAllCorners = RectangleNE|RectangleSE|RectangleSW|RectangleNW,
+};
+
+template <class T>
+void cairo_rounded_rectangle_with_corners(cairo_t *cr, const RectT<T> &r, double radius, int corners)
+{
+    double degrees = M_PI / 180.0;
+
+    double x = r.x;
+    double y = r.y;
+    double w = r.w;
+    double h = r.h;
+
+    cairo_new_path(cr);
+    if (corners & RectangleNE)
+        cairo_arc(cr, x + w - radius, y + radius, radius, -90 * degrees, 0 * degrees);
+    else
+        cairo_move_to(cr, x + w, y);
+    if (corners & RectangleSE)
+        cairo_arc(cr, x + w - radius, y + h - radius, radius, 0 * degrees, 90 * degrees);
+    else
+        cairo_line_to(cr, x + w, y + h);
+    if (corners & RectangleSW)
+        cairo_arc(cr, x + radius, y + h - radius, radius, 90 * degrees, 180 * degrees);
+    else
+        cairo_line_to(cr, x, y + h);
+    if (corners & RectangleNW)
+        cairo_arc(cr, x + radius, y + radius, radius, 180 * degrees, 270 * degrees);
+    else
+        cairo_line_to(cr, x, y);
+    cairo_close_path(cr);
+}