feat(ui): add transparency feature

* feat(ui): add transparency feature

It is sometimes better if the drawing is not fully covering the picture
but is semi-transparent. This patch adds a simple button to enable
transparency. When this button is enabled, everything will be drawn with
50% alpha channel.

* feat(ui): make transparency configurable

This commit adds UI elements and config option for configuring the
transparency value. The default value is 50% but it can be changed in
the 5% - 95% range in 10% steps.

* docs(readme): update README with transparency feature

The previous commit added this info to the man page but README was not
updated. Lets fix this.

Author: kadamski

README.md

@@ -53,6 +53,8 @@ early_exit=false
 fill_shape=false
 auto_save=false
 custom_color=rgba(193,125,17,1)
+transparent=false
+transparency=50
 ```
 
 - `save_dir` is where swappshots will be saved, can contain env variables, when it does not exist, swappy attempts to create it first, but does not abort if directory creation fails
@@ -66,6 +68,8 @@ custom_color=rgba(193,125,17,1)
 - `fill_shape` is used to toggle shape filling (for the rectangle and ellipsis tools) on or off upon startup
 - `auto_save` is used to toggle auto saving of final buffer to `save_dir` upon exit
 - `custom_color` is used to set a default value for the custom color
+- `transparency` is used to set transparency of everything that is drawn during startup
+- `transparent` is used to toggle transparency during startup
 
 
 ## Keyboard Shortcuts
@@ -91,6 +95,7 @@ custom_color=rgba(193,125,17,1)
 - `Plus`: Increase Stroke Size
 - `Equal`: Reset Stroke Size
 - `f`: Toggle Shape Filling
+- `T`: Toggle Transparency
 - `k`: Clear Paints (cannot be undone)
 
 <hr>

include/application.h

@@ -57,3 +57,9 @@ void stroke_size_increase_handler(GtkWidget *widget,
 void text_size_decrease_handler(GtkWidget *widget, struct swappy_state *state);
 void text_size_reset_handler(GtkWidget *widget, struct swappy_state *state);
 void text_size_increase_handler(GtkWidget *widget, struct swappy_state *state);
+
+void transparency_decrease_handler(GtkWidget *widget,
+                                   struct swappy_state *state);
+void transparency_reset_handler(GtkWidget *widget, struct swappy_state *state);
+void transparency_increase_handler(GtkWidget *widget,
+                                   struct swappy_state *state);

include/config.h

@@ -3,13 +3,15 @@
 #define CONFIG_LINE_SIZE_DEFAULT 5
 #define CONFIG_TEXT_FONT_DEFAULT "sans-serif"
 #define CONFIG_TEXT_SIZE_DEFAULT 20
+#define CONFIG_TRANSPARENCY_DEFAULT 50
 #define CONFIG_SHOW_PANEL_DEFAULT false
 #define CONFIG_SAVE_FILENAME_FORMAT_DEFAULT "swappy-%Y%m%d_%H%M%S.png"
 #define CONFIG_PAINT_MODE_DEFAULT SWAPPY_PAINT_MODE_BRUSH
 #define CONFIG_EARLY_EXIT_DEFAULT false
 #define CONFIG_FILL_SHAPE_DEFAULT false
 #define CONFIG_AUTO_SAVE_DEFAULT false
 #define CONFIG_CUSTOM_COLOR_DEFAULT "rgba(193,125,17,1)"
+#define CONFIG_TRANSPARENT_DEFAULT false
 
 void config_load(struct swappy_state *state);
 void config_free(struct swappy_state *state);

include/swappy.h

@@ -14,6 +14,9 @@
 #define SWAPPY_TEXT_SIZE_MIN 10
 #define SWAPPY_TEXT_SIZE_MAX 50
 
+#define SWAPPY_TRANSPARENCY_MIN 5
+#define SWAPPY_TRANSPARENCY_MAX 95
+
 enum swappy_paint_type {
   SWAPPY_PAINT_MODE_BRUSH = 0, /* Brush mode to draw arbitrary shapes */
   SWAPPY_PAINT_MODE_TEXT,      /* Mode to draw texts */
@@ -106,6 +109,7 @@ struct swappy_state_settings {
   double a;
   double w;
   double t;
+  int32_t tr;
 };
 
 struct swappy_state_ui {
@@ -137,8 +141,12 @@ struct swappy_state_ui {
 
   GtkButton *line_size;
   GtkButton *text_size;
+  GtkButton *transparency;
+  GtkButton *transparency_plus;
+  GtkButton *transparency_minus;
 
   GtkToggleButton *fill_shape;
+  GtkToggleButton *transparent;
 };
 
 struct swappy_config {
@@ -147,9 +155,11 @@ struct swappy_config {
   char *save_filename_format;
   gint8 paint_mode;
   gboolean fill_shape;
+  gboolean transparent;
   gboolean show_panel;
   guint32 line_size;
   guint32 text_size;
+  guint32 transparency;
   char *text_font;
   gboolean early_exit;
   gboolean auto_save;

res/swappy.glade

@@ -57,6 +57,11 @@
     <property name="can_focus">False</property>
     <property name="icon_name">zoom-out-symbolic</property>
   </object>
+  <object class="GtkImage" id="zoom-out2">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="icon_name">zoom-out-symbolic</property>
+  </object>
   <object class="GtkApplicationWindow" id="paint-window">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
@@ -582,6 +587,76 @@
                     <property name="position">4</property>
                   </packing>
                 </child>
+                <child>
+                  <object class="GtkBox">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="margin-bottom">10</property>
+                    <property name="spacing">2</property>
+                    <property name="homogeneous">True</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="label" translatable="yes">Transparency</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="transparency-minus-button">
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="receives-default">True</property>
+                        <property name="image">zoom-out2</property>
+                        <property name="always-show-image">True</property>
+                        <signal name="clicked" handler="transparency_decrease_handler" swapped="no"/>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">False</property>
+                        <property name="position">1</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="transparency-button">
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="receives-default">True</property>
+                        <property name="always-show-image">True</property>
+                        <signal name="clicked" handler="transparency_reset_handler" swapped="no"/>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="transparency-plus-button">
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="receives-default">True</property>
+                        <property name="image">zoom-in2</property>
+                        <property name="always-show-image">True</property>
+                        <signal name="clicked" handler="transparency_increase_handler" swapped="no"/>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">False</property>
+                        <property name="position">3</property>
+                      </packing>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">5</property>
+                  </packing>
+                </child>
                 <child>
                   <object class="GtkBox">
                     <property name="visible">True</property>
@@ -604,11 +679,28 @@
                         <property name="position">1</property>
                       </packing>
                     </child>
+                    <child>
+                      <object class="GtkToggleButton" id="transparent-toggle-button">
+                        <property name="label" translatable="yes">Transparent</property>
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="focus-on-click">False</property>
+                        <property name="receives-default">True</property>
+                        <property name="tooltip-text" translatable="yes">Toggle transparency</property>
+                        <property name="always-show-image">True</property>
+                        <signal name="toggled" handler="transparent_toggled_handler" swapped="no"/>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
+                    </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
-                    <property name="position">5</property>
+                    <property name="position">6</property>
                   </packing>
                 </child>
               </object>

src/application.c

@@ -2,6 +2,7 @@
 #include <glib-2.0/glib.h>
 #include <glib/gstdio.h>
 #include <gtk/gtk.h>
+#include <inttypes.h>
 #include <stdio.h>
 #include <time.h>
 
@@ -36,6 +37,13 @@ static void update_ui_text_size_widget(struct swappy_state *state) {
   gtk_button_set_label(button, label);
 }
 
+static void update_ui_transparency_widget(struct swappy_state *state) {
+  GtkButton *button = GTK_BUTTON(state->ui->transparency);
+  char label[255];
+  g_snprintf(label, 255, "%" PRId32, state->settings.tr);
+  gtk_button_set_label(button, label);
+}
+
 static void update_ui_panel_toggle_button(struct swappy_state *state) {
   GtkWidget *painting_box = GTK_WIDGET(state->ui->painting_box);
   GtkToggleButton *button = GTK_TOGGLE_BUTTON(state->ui->panel_toggle_button);
@@ -52,6 +60,16 @@ static void update_ui_fill_shape_toggle_button(struct swappy_state *state) {
   gtk_toggle_button_set_active(button, toggled);
 }
 
+static void update_ui_transparent_toggle_button(struct swappy_state *state) {
+  GtkToggleButton *button = GTK_TOGGLE_BUTTON(state->ui->transparent);
+  gboolean toggled = state->config->transparent;
+
+  gtk_toggle_button_set_active(button, toggled);
+  gtk_widget_set_sensitive(GTK_WIDGET(state->ui->transparency), toggled);
+  gtk_widget_set_sensitive(GTK_WIDGET(state->ui->transparency_minus), toggled);
+  gtk_widget_set_sensitive(GTK_WIDGET(state->ui->transparency_plus), toggled);
+}
+
 void application_finish(struct swappy_state *state) {
   g_debug("application finishing, cleaning up");
   paint_free_all(state);
@@ -215,6 +233,38 @@ static void action_text_size_increase(struct swappy_state *state) {
   update_ui_text_size_widget(state);
 }
 
+static void action_transparency_decrease(struct swappy_state *state) {
+  state->settings.tr -= 10;
+
+  if (state->settings.tr < SWAPPY_TRANSPARENCY_MIN) {
+    state->settings.tr = SWAPPY_TRANSPARENCY_MIN;
+  } else {
+    // ceil to 10
+    state->settings.tr += 5;
+    state->settings.tr /= 10;
+    state->settings.tr *= 10;
+  }
+
+  update_ui_transparency_widget(state);
+}
+static void action_transparency_reset(struct swappy_state *state) {
+  state->settings.tr = state->config->transparency;
+  update_ui_transparency_widget(state);
+}
+static void action_transparency_increase(struct swappy_state *state) {
+  state->settings.tr += 10;
+
+  if (state->settings.tr > SWAPPY_TRANSPARENCY_MAX) {
+    state->settings.tr = SWAPPY_TRANSPARENCY_MAX;
+  } else {
+    // floor to 10
+    state->settings.tr /= 10;
+    state->settings.tr *= 10;
+  }
+
+  update_ui_transparency_widget(state);
+}
+
 static void action_fill_shape_toggle(struct swappy_state *state,
                                      gboolean *toggled) {
   // Don't allow changing the state via a shortcut if the button can't be
@@ -227,6 +277,14 @@ static void action_fill_shape_toggle(struct swappy_state *state,
   update_ui_fill_shape_toggle_button(state);
 }
 
+static void action_transparent_toggle(struct swappy_state *state,
+                                      gboolean *toggled) {
+  gboolean toggle = (toggled == NULL) ? !state->config->transparent : *toggled;
+  state->config->transparent = toggle;
+
+  update_ui_transparent_toggle_button(state);
+}
+
 static void save_state_to_file_or_folder(struct swappy_state *state,
                                          char *file) {
   GdkPixbuf *pixbuf = pixbuf_get_from_state(state);
@@ -437,6 +495,9 @@ void window_keypress_handler(GtkWidget *widget, GdkEventKey *event,
       case GDK_KEY_f:
         action_fill_shape_toggle(state, NULL);
         break;
+      case GDK_KEY_T:
+        action_transparent_toggle(state, NULL);
+        break;
       default:
         break;
     }
@@ -641,12 +702,31 @@ void text_size_increase_handler(GtkWidget *widget, struct swappy_state *state) {
   action_text_size_increase(state);
 }
 
+void transparency_decrease_handler(GtkWidget *widget,
+                                   struct swappy_state *state) {
+  action_transparency_decrease(state);
+}
+void transparency_reset_handler(GtkWidget *widget, struct swappy_state *state) {
+  action_transparency_reset(state);
+}
+void transparency_increase_handler(GtkWidget *widget,
+                                   struct swappy_state *state) {
+  action_transparency_increase(state);
+}
+
 void fill_shape_toggled_handler(GtkWidget *widget, struct swappy_state *state) {
   GtkToggleButton *button = GTK_TOGGLE_BUTTON(widget);
   gboolean toggled = gtk_toggle_button_get_active(button);
   action_fill_shape_toggle(state, &toggled);
 }
 
+void transparent_toggled_handler(GtkWidget *widget,
+                                 struct swappy_state *state) {
+  GtkToggleButton *button = GTK_TOGGLE_BUTTON(widget);
+  gboolean toggled = gtk_toggle_button_get_active(button);
+  action_transparent_toggle(state, &toggled);
+}
+
 static void compute_window_size_and_scaling_factor(struct swappy_state *state) {
   GdkRectangle workarea = {0};
   GdkDisplay *display = gdk_display_get_default();
@@ -783,12 +863,20 @@ static bool load_layout(struct swappy_state *state) {
       GTK_BUTTON(gtk_builder_get_object(builder, "stroke-size-button"));
   state->ui->text_size =
       GTK_BUTTON(gtk_builder_get_object(builder, "text-size-button"));
+  state->ui->transparency =
+      GTK_BUTTON(gtk_builder_get_object(builder, "transparency-button"));
+  state->ui->transparency_plus =
+      GTK_BUTTON(gtk_builder_get_object(builder, "transparency-plus-button"));
+  state->ui->transparency_minus =
+      GTK_BUTTON(gtk_builder_get_object(builder, "transparency-minus-button"));
 
   state->ui->fill_shape = GTK_TOGGLE_BUTTON(
       gtk_builder_get_object(builder, "fill-shape-toggle-button"));
 
   gdk_rgba_parse(&color, state->config->custom_color);
   gtk_color_chooser_set_rgba(GTK_COLOR_CHOOSER(state->ui->color), &color);
+  state->ui->transparent = GTK_TOGGLE_BUTTON(
+      gtk_builder_get_object(builder, "transparent-toggle-button"));
 
   state->ui->brush = brush;
   state->ui->text = text;
@@ -859,9 +947,11 @@ static bool init_gtk_window(struct swappy_state *state) {
 
   update_ui_stroke_size_widget(state);
   update_ui_text_size_widget(state);
+  update_ui_transparency_widget(state);
   update_ui_undo_redo(state);
   update_ui_panel_toggle_button(state);
   update_ui_fill_shape_toggle_button(state);
+  update_ui_transparent_toggle_button(state);
 
   return true;
 }
@@ -881,6 +971,7 @@ static void init_settings(struct swappy_state *state) {
   state->settings.a = 1;
   state->settings.w = state->config->line_size;
   state->settings.t = state->config->text_size;
+  state->settings.tr = state->config->transparency;
   state->mode = state->config->paint_mode;
 }