picture-frames@KopfdesDaemons: Version 1.1.0 (#1789)

* refactor

* organize settings in tabs and sections

* translation

* fix GIF animation after reboot

Author: KopfdesDaemons

picture-frames@KopfdesDaemons/files/picture-frames@KopfdesDaemons/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## [1.1.0] 06.04.2026
+
+- New Features
+  - GIF support
+- Refactoring
+  - Removed hard-coded local dir path
+  - Changed desklet entry point to `on_desklet_added_to_desktop`
+  - Added UUID to error logs
+  - Added settings cleanup in `on_desklet_removed` function
+  - Added default settings to constructor
+  - Organized settings in tabs and sections
+
+## [1.0.0] 09.12.2025
+
+- Initial release

picture-frames@KopfdesDaemons/files/picture-frames@KopfdesDaemons/desklet.js

@@ -11,7 +11,7 @@ const Cogl = imports.gi.Cogl;
 const Gio = imports.gi.Gio;
 
 const UUID = "picture-frames@KopfdesDaemons";
-Gettext.bindtextdomain(UUID, GLib.get_home_dir() + "/.local/share/locale");
+Gettext.bindtextdomain(UUID, GLib.get_user_data_dir() + "/locale");
 
 function _(str) {
   return Gettext.dgettext(UUID, str);
@@ -20,34 +20,75 @@ function _(str) {
 class MyDesklet extends Desklet.Desklet {
   constructor(metadata, deskletId) {
     super(metadata, deskletId);
-    this.defaultImagePath = this.metadata.path + "/images/default.jpg";
+    this.setHeader(_("Picture Frame"));
+
+    this._defaultImagePath = this.metadata.path + "/images/default.jpg";
+    this._animationTimeoutId = null;
+    this._isReloading = false;
+
+    // Default settings
+    this.imagePath = "";
+    this.shape = "wave";
+    this.size = 250;
+    this.showBorder = true;
+    this.borderColor = "rgba(33, 170, 70, 0.5)";
+    this.borderWidth = 15;
+    this.wavesNumber = 10;
+    this.waveDepth = 5;
+    this.spikesNumber = 10;
+    this.spikesDepth = 10;
+    this.alignY = 50;
+    this.alignX = 50;
 
     // Setup settings and bind them to properties
-    const settings = new Settings.DeskletSettings(this, metadata["uuid"], deskletId);
-    settings.bindProperty(Settings.BindingDirection.IN, "image-path", "imagePath", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "shape", "shape", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "size", "size", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "show-border", "showBorder", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "border-color", "borderColor", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "border-width", "borderWidth", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "waves-number", "wavesNumber", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "spikes-number", "spikesNumber", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "wave-depth", "waveDepth", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "spikes-depth", "spikesDepth", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "align-x", "alignX", this._initUI.bind(this));
-    settings.bindProperty(Settings.BindingDirection.IN, "align-y", "alignY", this._initUI.bind(this));
+    this.settings = new Settings.DeskletSettings(this, metadata["uuid"], deskletId);
+    this.settings.bindProperty(Settings.BindingDirection.IN, "image-path", "imagePath", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "shape", "shape", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "size", "size", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "show-border", "showBorder", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "border-color", "borderColor", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "border-width", "borderWidth", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "waves-number", "wavesNumber", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "spikes-number", "spikesNumber", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "wave-depth", "waveDepth", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "spikes-depth", "spikesDepth", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "align-x", "alignX", this._initUI.bind(this));
+    this.settings.bindProperty(Settings.BindingDirection.IN, "align-y", "alignY", this._initUI.bind(this));
+  }
 
-    this.setHeader(_("Picture Frame"));
+  on_desklet_added_to_desktop() {
     this._initUI();
   }
 
+  on_desklet_removed() {
+    if (this._animationTimeoutId) {
+      GLib.source_remove(this._animationTimeoutId);
+      this._animationTimeoutId = null;
+    }
+    if (this.settings && !this._isReloading) {
+      this.settings.finalize();
+    }
+  }
+
+  on_desklet_reloaded() {
+    this._isReloading = true;
+  }
+
   _initUI() {
+    this._loadId = (this._loadId || 0) + 1;
+    const currentLoadId = this._loadId;
+
+    if (this._animationTimeoutId) {
+      GLib.source_remove(this._animationTimeoutId);
+      this._animationTimeoutId = null;
+    }
+
     const mainContainer = new St.BoxLayout({ vertical: true });
-    if (!this.imagePath) this.imagePath = this.defaultImagePath;
+    if (!this.imagePath) this.imagePath = this._defaultImagePath;
 
     const size = this.size;
     const finalImagePath = decodeURIComponent(this.imagePath.replace("file://", ""));
-    const imageActor = this._createShapedImageActor(finalImagePath, size);
+    const imageActor = this._createShapedImageActor(finalImagePath, size, currentLoadId);
 
     mainContainer.add_child(imageActor);
     this.setContent(mainContainer);
@@ -129,12 +170,12 @@ class MyDesklet extends Desklet.Desklet {
     cr.closePath();
   }
 
-  _createShapedImageActor(imagePath, size) {
+  _createShapedImageActor(imagePath, size, loadId) {
     const canvas = new Clutter.Canvas();
     canvas.set_size(size, size);
     const actor = new Clutter.Actor({ width: size, height: size, content: canvas });
     const file = Gio.file_new_for_path(imagePath);
-    let pixbuf = null;
+    let iter = null;
 
     canvas.connect("draw", (canvas, cr, width, height) => {
       // Clear the canvas
@@ -144,7 +185,7 @@ class MyDesklet extends Desklet.Desklet {
       cr.restore();
       cr.setOperator(Cairo.Operator.OVER);
 
-      if (pixbuf === null) {
+      if (iter === null) {
         // Draw loading text
         cr.setSourceRGBA(1.0, 1.0, 1.0, 0.7); // Semi-transparent white
         cr.selectFontFace("sans-serif", Cairo.FontSlant.NORMAL, Cairo.FontWeight.NORMAL);
@@ -155,25 +196,51 @@ class MyDesklet extends Desklet.Desklet {
         cr.showText(text);
       } else {
         // Draw the shaped image once pixbuf is loaded
-        this._drawFinalImage(cr, pixbuf, width, height);
+        const currentPixbuf = iter.get_pixbuf();
+        this._drawFinalImage(cr, currentPixbuf, width, height);
       }
       return true;
     });
     canvas.invalidate(); // Initial draw with "Loading..."
 
     file.read_async(GLib.PRIORITY_DEFAULT, null, (source, res) => {
+      // Check if this load operation is still relevant
+      if (this._loadId !== loadId) return;
       try {
         const stream = source.read_finish(res);
-        GdkPixbuf.Pixbuf.new_from_stream_async(stream, null, (source, res) => {
+        GdkPixbuf.PixbufAnimation.new_from_stream_async(stream, null, (source, res) => {
+          if (this._loadId !== loadId) return;
           try {
-            pixbuf = GdkPixbuf.Pixbuf.new_from_stream_finish(res);
-            canvas.invalidate(); // Force a redraw now that the pixbuf is loaded
+            const anim = GdkPixbuf.PixbufAnimation.new_from_stream_finish(res);
+            iter = anim.get_iter(null);
+
+            const updateAnimation = () => {
+              if (this._loadId !== loadId) return;
+              if (this._animationTimeoutId) {
+                GLib.source_remove(this._animationTimeoutId);
+                this._animationTimeoutId = null;
+              }
+              const delay = iter.get_delay_time();
+              if (delay >= 0) {
+                // -1 means static image, no animation
+                this._animationTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay > 0 ? delay : 100, () => {
+                  if (this._loadId !== loadId) return GLib.SOURCE_REMOVE;
+                  iter.advance(null);
+                  canvas.invalidate();
+                  updateAnimation();
+                  return GLib.SOURCE_REMOVE;
+                });
+              }
+            };
+
+            canvas.invalidate();
+            updateAnimation();
           } catch (e) {
-            global.logError(`Error creating pixbuf from stream: ${e}`);
+            global.logError(`${UUID}: Error creating pixbuf animation from stream: ${e}`);
           }
         });
       } catch (e) {
-        global.logError(`Error reading file async: ${e}`);
+        global.logError(`${UUID}: Error reading file async: ${e}`);
       }
     });
     return actor;
@@ -197,16 +264,17 @@ class MyDesklet extends Desklet.Desklet {
         newHeight = width / aspect;
       }
 
-      const scaledPixbuf = pixbuf.scale_simple(newWidth, newHeight, GdkPixbuf.InterpType.BILINEAR);
-      const pixbufWithAlpha = scaledPixbuf.add_alpha(false, 0, 0, 0);
-
       cr.save();
       this._drawShapePath(cr, this.shape, width / 2, height / 2, width / 2);
       cr.clip();
 
       const drawX = (width - newWidth) * (this.alignX / 100);
       const drawY = (height - newHeight) * (this.alignY / 100);
-      Gdk.cairo_set_source_pixbuf(cr, pixbufWithAlpha, drawX, drawY);
+
+      cr.translate(drawX, drawY);
+      cr.scale(newWidth / originalWidth, newHeight / originalHeight);
+
+      Gdk.cairo_set_source_pixbuf(cr, pixbuf, 0, 0);
       cr.paint();
       cr.restore();
 
@@ -225,7 +293,7 @@ class MyDesklet extends Desklet.Desklet {
         cr.stroke();
       }
     } catch (e) {
-      global.logError(`Error drawing shaped image: ${e}`);
+      global.logError(`${UUID}: Error drawing shaped image: ${e}`);
     }
   }
 
@@ -247,7 +315,7 @@ class MyDesklet extends Desklet.Desklet {
       const pixBuf = GdkPixbuf.Pixbuf.new_from_file_at_size(imageFileName, requestedWidth, requestedHeight);
       return this._createActorFromPixbuf(pixBuf);
     } catch (e) {
-      global.logError(`Error loading image ${imageFileName}: ${e}`);
+      global.logError(`${UUID}: Error loading image ${imageFileName}: ${e}`);
       return new St.Label({ text: "Error" + e.message, style_class: "picture-frame-error-label" });
     }
   }

picture-frames@KopfdesDaemons/files/picture-frames@KopfdesDaemons/metadata.json

@@ -2,7 +2,7 @@
   "uuid": "picture-frames@KopfdesDaemons",
   "name": "Picture frames",
   "description": "Displays photos in different picture frames.",
-  "version": "1.0",
+  "version": "1.1.0",
   "prevent-decorations": true,
   "max-instances": "50"
 }

picture-frames@KopfdesDaemons/files/picture-frames@KopfdesDaemons/po/de.po

@@ -8,7 +8,7 @@ msgstr ""
 "Project-Id-Version: picture-frames@KopfdesDaemons 1.0\n"
 "Report-Msgid-Bugs-To: https://github.com/linuxmint/cinnamon-spices-desklets/"
 "issues\n"
-"POT-Creation-Date: 2025-10-19 11:16+0200\n"
+"POT-Creation-Date: 2026-04-05 23:38+0200\n"
 "PO-Revision-Date: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -18,11 +18,11 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "X-Generator: Poedit 3.4.2\n"
 
-#. desklet.js:40
+#. desklet.js:23
 msgid "Picture Frame"
 msgstr "Bilderrahmen"
 
-#. desklet.js:152
+#. desklet.js:190
 msgid "Loading..."
 msgstr "Lade..."
 
@@ -34,9 +34,30 @@ msgstr "Bilderrahmen"
 msgid "Displays photos in different picture frames."
 msgstr "Zeigt Bilder in verschiedenen Bilderrahmen an."
 
-#. settings-schema.json->head1->description
-msgid "Image Settings"
-msgstr "Bildeinstellungen"
+#. settings-schema.json->image-page->title
+msgid "Image"
+msgstr "Bild"
+
+#. settings-schema.json->frame-page->title
+msgid "Frame"
+msgstr "Rahmen"
+
+#. settings-schema.json->image-general-section->title
+msgid "General"
+msgstr "Allgemein"
+
+#. settings-schema.json->image-alignment-section->title
+msgid "Alignment"
+msgstr "Ausrichtung"
+
+#. settings-schema.json->frame-shape-section->title
+#. settings-schema.json->shape->description
+msgid "Shape"
+msgstr "Form"
+
+#. settings-schema.json->frame-border-section->title
+msgid "Border"
+msgstr "Rand"
 
 #. settings-schema.json->image-path->description
 msgid "Image path"
@@ -58,14 +79,6 @@ msgstr "Horizontale Ausrichtung"
 msgid "Vertical alignment"
 msgstr "Vertikale Ausrichtung"
 
-#. settings-schema.json->head2->description
-msgid "Frame Settings"
-msgstr "Rahmeneinstellungen"
-
-#. settings-schema.json->shape->description
-msgid "Shape"
-msgstr "Form"
-
 #. settings-schema.json->shape->options
 msgid "Circle"
 msgstr "Kreis"

picture-frames@KopfdesDaemons/files/picture-frames@KopfdesDaemons/po/es.po

@@ -8,7 +8,7 @@ msgstr ""
 "Project-Id-Version: picture-frames@KopfdesDaemons 1.0\n"
 "Report-Msgid-Bugs-To: https://github.com/linuxmint/cinnamon-spices-desklets/"
 "issues\n"
-"POT-Creation-Date: 2025-10-19 11:16+0200\n"
+"POT-Creation-Date: 2026-04-05 23:38+0200\n"
 "PO-Revision-Date: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -18,11 +18,11 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "X-Generator: Poedit 3.8\n"
 
-#. desklet.js:40
+#. desklet.js:23
 msgid "Picture Frame"
 msgstr "Marco de fotos"
 
-#. desklet.js:152
+#. desklet.js:190
 msgid "Loading..."
 msgstr "Cargando..."
 
@@ -34,9 +34,32 @@ msgstr "Marco de fotos"
 msgid "Displays photos in different picture frames."
 msgstr "Muestra fotos en diferentes marcos de fotos."
 
-#. settings-schema.json->head1->description
-msgid "Image Settings"
-msgstr "Ajustes de imagen"
+#. settings-schema.json->image-page->title
+#, fuzzy
+msgid "Image"
+msgstr "Ruta de la imagen"
+
+#. settings-schema.json->frame-page->title
+msgid "Frame"
+msgstr ""
+
+#. settings-schema.json->image-general-section->title
+msgid "General"
+msgstr ""
+
+#. settings-schema.json->image-alignment-section->title
+msgid "Alignment"
+msgstr ""
+
+#. settings-schema.json->frame-shape-section->title
+#. settings-schema.json->shape->description
+msgid "Shape"
+msgstr "Forma"
+
+#. settings-schema.json->frame-border-section->title
+#, fuzzy
+msgid "Border"
+msgstr "Color del borde"
 
 #. settings-schema.json->image-path->description
 msgid "Image path"
@@ -58,14 +81,6 @@ msgstr "Alineación horizontal"
 msgid "Vertical alignment"
 msgstr "Alineación vertical"
 
-#. settings-schema.json->head2->description
-msgid "Frame Settings"
-msgstr "Configuración del marco"
-
-#. settings-schema.json->shape->description
-msgid "Shape"
-msgstr "Forma"
-
 #. settings-schema.json->shape->options
 msgid "Circle"
 msgstr "Círculo"