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.

Figure 4: The iNuke app on Ubuntu.

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.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Electron

    GitHub's Electron project brings the benefits of web programming to the realm of desktop applications.

  • PhotoFilmStrip

    Easy-to-use PhotoFilmStrip produces high-quality videos and offers plenty of useful features.

  • Picasa 3.0

    In the age of the digital camera, users are overwhelmed by a flood of images. Picasa not only helps you manage photos but also will enhance the image quality with just a couple of mouse clicks.

  • Picasa 2.7

    In the age of the digital camera, users are overwhelmed by a flood of images. Picasa not only helps you manage photos but also will enhance the image quality with just a couple of mouse clicks.

  • Straight to the Point

    With the Fyne framework, Go offers an easy-to-use graphical interface for all popular platforms. As a sample application, Mike uses an algorithm to draw arrows onto images.

comments powered by Disqus

Direct Download

Read full article as PDF:

Price $2.95

News