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
Direct Download
Read full article as PDF:
Price $2.95
News
-
OpenMandriva Lx ROME Technical Preview Released
OpenMandriva’s rolling release distribution technical preview has been released for testing purposes and adds some of the latest/greatest software into the mix.
-
Linux Mint 21 is Now Available
The latest iteration of Linux Mint, codenamed Vanessa, has been released with a new upgrade tool and other fantastic features.
-
Firefox Adds Long-Anticipated Feature
Firefox 103 has arrived and it now includes a feature users have long awaited…sort of.
-
System76 Refreshes Their Popular Oryx Pro Laptop with a New CPU
The System76 Oryx Pro laptop has been relaunched with a 12th Gen CPU and more powerful graphics options.
-
Elive Has Released a New Beta
The Elive team is proud to announce the latest beta version (3.8.30) of its Enlightenment-centric Linux distribution.
-
Rocky Linux 9 Has Arrived
The latest iteration of Rocky Linux is now available and includes a host of new features and support for new architecture.
-
Slimbook Executive Linux Ultrabook Upgrading Their CPUs
The Spanish-based company, Slimbook, has made available their next generation Slimbook Executive Linux ultrabooks with a 12th Gen Intel Alder Lake CPU.
-
Fedora Linux is Coming to the Raspberry Pi 4
Thanks to significant work in the upstream, the upcoming release of Fedora 37 will introduce support for the Raspberry Pi 4.
-
New Linux Ultrabook from TUXEDO Computers
TUXEDO Computers has released a new 15" Ultrabook running Linux.
-
GNOME 43 To Bring Some Exciting New Features
GNOME 43 is getting close to the first alpha development release and it promises to add one particular feature that should be exciting to several users.