Using the Electron framework to weed out images
There Is No Going Back
Listing 2 defines the currently displayed photo's image tag in line 11 with the id
attribute of image
. This makes it easy for the renderer process to find it later and replace it with a new photo, if the user commands this via keyboard input.
Figure 4 shows the finished application. In it, you can delete an image by pressing D, move to the next one with L, or go back to the previous one with H if you change your mind. However, there is no undelete – that would not make sense in Unix philosophy.
The application is shut down either by the user closing the window or – as usual under Gnome – by pressing Ctrl+W. These events are intercepted by the event handlers will-quit
or window-all-closed
. They release the key bindings and call the application's quit()
method, which releases all occupied resources.
The renderer process in Listing 3 uses the blueimp
image library. This presupposes that the user previously installs it using
npm install blueimp-load-image --save
from the npmjs.com
Node.js repository. The npm
package manager notices the new addition in the local package.json
file's dependency list, ensuring that curious adopters only have to clone the project and call npm install
to retrieve and install all the modules on which the project depends.
The photo files, which were read using readdir()
from the images
directory (line 40) when the program started, are stored by the program in the global images
array variable. The images_idx
variable (line 6) remembers the index of the currently displayed image within the array.
Fielding Signals
The scroll()
function from line 19 expects the direction (1
for forward, -1
for back) in which the user wants to shift through the collection as a parameter. It then sets the global variables to the new photo to be displayed and ensures that no one moves outside the boundaries of the array in the body of the function.
Lines 51 and 52 in the renderer process receive the signals triggered by the main process from Listing 1. The handlers trigger when the user presses the corresponding key. Line 53 reacts to the keypress D in the main process and jumps to the deleteImage()
function from line 29 when activated. The Node.js unlink()
method from the fs
class mercilessly removes the file from the disk and displays the next photo.
Loading Photos
Loading a photo from disk and displaying it in the browser window is the task of the displayImage()
function from line 8. It uses the loadImage()
function exported by the blueimp
library from the NpmJS repository to load the photo. The scale()
method then scales it to a maximum width of 600 pixels. The renderer then searches the browser's HTML for an image tag with the id
attribute image
and replaces the image found there with the new image (line 15). Before this, Listing 3 also sets the new image's id
attribute to image
so that the refresh process will find the tag next time.
« Previous 1 2 3 4 Next »
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.
-
New Pentesting Distribution to Compete with Kali Linux
SnoopGod is now available for your testing needs
-
Juno Computers Launches Another Linux Laptop
If you're looking for a powerhouse laptop that runs Ubuntu, the Juno Computers Neptune 17 v6 should be on your radar.
-
ZorinOS 17.1 Released, Includes Improved Windows App Support
If you need or desire to run Windows applications on Linux, there's one distribution intent on making that easier for you and its new release further improves that feature.
-
Linux Market Share Surpasses 4% for the First Time
Look out Windows and macOS, Linux is on the rise and has even topped ChromeOS to become the fourth most widely used OS around the globe.
-
KDE’s Plasma 6 Officially Available
KDE’s Plasma 6.0 "Megarelease" has happened, and it's brimming with new features, polish, and performance.
-
Latest Version of Tails Unleashed
Tails 6.0 is based on Debian 12 and includes GNOME 43.
-
KDE Announces New Slimbook V with Plenty of Power and KDE’s Plasma 6
If you're a fan of KDE Plasma, you'll be thrilled to hear they've announced a new Slimbook with an AMD CPU and the latest version of KDE Plasma desktop.
-
Monthly Sponsorship Includes Early Access to elementary OS 8
If you want to get a glimpse of what's in the pipeline for elementary OS 8, just set up a monthly sponsorship to help fund its continued existence.