Technologies in the JShowBuilder project

Screenshot of the JShowBuilder application.

On this page I will describe some of the technologies I developed for the JShowBuilder application. The home page for the product is on another site: http://www.jshowbuilder.com.

Basic idea

  • You throw in digital photographs, the program generates a single HTML file (with embedded JavaScript) that runs a slideshow on a browser window. The images for the show are scaled according to settings.
  • Optionally you can comment the images, create a structure for the slideshow, crop the images, link external files to the slideshow, selectively randomize image presentation order, configure presentation time per image or per section, and whatever.

Resulting web page

  • The resulting web page is a single page, not a set of statically linked pages. The show structure and texts are loaded at once, which makes viewing the show more pleasant than loading a separate page for each image.
  • The page preloads the next image of the slideshow in background, so switching images usually happens instantly. This is quite an improvement over having to watch each image load.
  • The page has controls for Play / Pause, Back / Next and Faster / Slower functions to control the presentation.

Show editing

One of the main goals when making this application was to make the UI sophisticated. Here are some of the nicer editing functions:
  • Copy & Paste integration with the OS. For example, you can use the Copy command in Windows Explorer to copy group of image files, then switch to JShowBuilder and Paste them directly where you want them.
  • Drag & Drop integration with the OS. You can Drag image files from the OS and Drop them right where you want them in the program. Even in a precise position between images already added to the show. The application shows graphical feedback about the drop action, so you'll know exactly where they are going.
  • The same Copy&Paste and Drag&Drop actions also work for parts of the slide show. You can e.g. drag&drop a part from one slide show to another. (This is implemented by placing serialized Java objects in the OS Clipboard.)
  • You can interactively and graphically crop your images. This is extremely easy and convenient when preparing a slideshow from real photographs.
  • There is complete multi-level Undo/Redo for all editing actions of the slide show. The commands in the Edit menu even show the name of the action you are about to Undo or Redo.
  • When you write the show, the application uses smart writing to only images that have not been written before or have changed since they were last written, are processed. This is extremely nice when testing a complex slideshow. Having to process (=scale) a large number of photos would take a lot of time. This mechanism is smart enough to consider image width, image height, image cropping, image marking text and the timestamp of the original image separately.

Show structure

  • In addition to linear show structures, you can randomize the presentation order of images in the show. 
  • The Back-functionality of the show works even with randomized presentation.
  • You can divide the show into several Phases. You can customize the texts and presentation times for each phase (and also for individual images, if you like).
  • You can make links to other Phases. This makes it possible to create a menu structure inside the show.
  • You can use links to external objects like video clips. You can make the slideshow pause automatically when the external link is clicked and to open the external links in another window.

Background processing

  • When you add images to your slide show, the application will load thumbnail of the images in background. You can start working immediately, you don't have to wait for all the images to be loaded and scaled.
  • When viewing an image in the application, the image is always scaled to the application window. The application will load and scale one image backwards and two images forwards from the image you are viewing. This facilitates fast switching of the images when moving forward or backward in a series of images.
  • When an original image is loaded and scaled to the application window, the scaling is done in background and in slices. Because it is done in background, the application UI remains responsive all the time, even though CPU is running at 100%. It is done in slices, so you can see the progress. Scaling a large photo original (especially on an oldish computer) can actually take a few seconds.

Memory cache for images

  • All thumbnail images and a few of the scaled originals are kept in a memory cache. This way, switching back and forth between some images is incredibly smooth.

Copyright protection

  • The application is Shareware. Unlocking some features requires a registration. I developed a registration mechanism where registration code is matched to the "Registered to" name. A code works only in conjunction with the matching name. Thus, to distribute a code illegally, you would have to distribute your own name with it. Or, you couldn't register the program to your own name with an illegal code, because the code only matches someone elses name. The code is generated with a private cryptographic key, and the application uses a public key to check the code. 
  • A "marking text" can be imprinted in all the images.
  • On the generated web page, there is a banner text at the bottom. You can use this banner text to display copyright info. The funny part is that in addition to plain text, the banner text  is also embedded in the page's JavaScript in an encoded form. If someone tries to manually change or delete the banner text, it is still shown from the encoded version.
  • The JavaScript code on the page is obfuscated. Every time the page is generated, all identifiers (variable and function names) in the code are randomly re-generated. In addition to this, the code segments on the JavaScript code will appear in different order every time.
  • Tracing the execution of the JavaScript code is made difficult by making at least one function call by using an encoded version of the function name.
  • The distribution package JAR is obfuscated with the free yGUARD obfuscator.

Online registration mechanism

  • It is possible to register the software with two online vendors (Kagi and BMT Micro). Both of them are capable of instantly generating the registration code that is matched to the "registered to" name.