Slidvid 3.0

 

The 'ink'of the four nibs is lettistic animation

I've been working on version 3 of a JavaScript slideshow program I call Slidvid. I initially developed it to show screenshots of dbCinema in action. All the dbCinema slideshows use an earlier version of the Slidvid software. I'd like to show you Slidvid 3.0 in this post. And if you have a site you'd like to show your graphics on in a slideshow, drop me a line and we'll put Slidvid on your site with your graphics.

The graphics in the first Slidvid 3 slideshow are old ones; they're screenshots from a generative, interactive Shockwave piece I wrote called  A Pen.  I've had the screenshots on my site for quite a while, but not in a slideshow. The experience of them in a slideshow is more to my liking. Less work for the viewer. More options for the viewer and the presenter. And just a classier presentation.

The graphics in this slideshow were made with a virtual pen that has four nibs. The 'ink' of each nib is a lettristic animation that leaves trails as the pen moves the nibs/animations around the screen. Think of the nibs as being attached to the pen by long loose springs. When you click and drag the mouse in the Shockwave piece (not the slideshow), the nibs eventually catch up with you. And you can adjust things like the size and opacity of each nib. Hence the sort of graphics you see in this post. The project A Pen consists of both the interactive Shockwave piece and also the slideshow of screenshots taken from the Shockwave piece in action.

A different set of nibs that use animations of the word TIME

There are three sets of stills cuz there are three sets of nibs available in the Shockwave piece. The first set uses the Nio animations; Nio is an interactive audio piece I made. There are sixteen sounds in it and sixteen animations. The animations are of the phonemes sung in the audio/music of Nio. The Pen project has no audio. The graphics are, as it were, song shapes. They are what the language in your head looks like when you hum while doing the dishes.

Anyway, enough about the graphics. I wanted to talk about the slideshow software. I've tried to develop this software so that it's well-suited to the presentation of art. So, for instance, the interface is uncluttered but the controls that are available are quite deluxe. What we see below are the controls in the slideshow. In Slidvid, when you mouse over a control, a short text appears in explanation of what the button does. The only two of these that aren't more or less self-explanatory are the Options button and the Image Comment. The Image Comment comments on the current image. The software supports commenting on any or all of the images.

Slidvid slideshow controls

While viewing the slideshow, if you click "Options", you see the below controls. The default values of the Options controls are configurable by the author of the images. This is done by editing a text file called svConfig.js, which lets the author of the images configure over 40 features of the software.

Slidvid 'Options'

You can click the arrow buttons in the above 'spin controls' to increase or decrease the values, or you can edit them with the keyboard and press Enter to make the edited values take effect. I didn't write the code for the spin controls; I used code by Michael Kuehl and friends from switchonthecode.com. I've been pining for good JavaScript spin controls for years. Now I have them. Thank you Michael.

The first spin control, which is 4000 above, specifies the number of milliseconds (there are 1000 ms in a second) that images are displayed. The second spin control specifies the number of milliseconds it takes for one image to fade into another. This is a nice control for art presentations. In the dbCinema slidvids, I sometimes set the first spin control to zero and the second one to 6 or 8 seconds (6000 or 8000 ms). This makes for continuous subtle animation that is more like video than a slideshow. Which is why I called the program Slidvid. That sort of continuous animation is good when consecutive images are related in growth or decay in the ways the dbCinema screenshots are.

The third spin control is kind of subtle. It specifies the number of milliseconds between redraws during a fade in/out. A value of 35 results in 1000/35=28.6 redraws per second during a fade in/out. That's more or less standard video speed. You can think of this as the fader's framerate control. The lower the value, the higher the framerate during fades. At some point, though, it stops getting faster cuz the puter won't go any faster. I set it to a default value of 35 both because it's close to standard video framerate and because it looked good on my computer.

When the rightmost check box is checked, images are resized to fit in the browser. When unchecked, they're displayed at their natural size. They're always centred, in any case, both horizontally and vertically. One of the things I like best about Slidvid, versus a lot of other slideshow software I've seen, is that you can show big images in it. In a lot of slideshow software, the images perforce get sized down to be smaller than the available screen real estate. But in art you normally want to fill the whole screen with your images. Or I do, anyway. There's little point in stretching bitmap images to be bigger than they normally are, cuz then they look pixelated. So Slidvid doesn't support stretching images. But if your images are big, Slidvid will present them at full size or shrink them down to fit the available screen real estate, if so configured.

A song shape generated with A Pen

The leftmost check box is kinda subtle. When the leftmost check box is checked, images fade in and, later, fade out. When unchecked, images just fade in. If the images are all the same size, it's best to have this default to unchecked. Cuz you get better performance when just one image is being refreshed (the one that's fading in) rather than refreshing two images: one that's fading in and one that's fading out. When you have images of different sizes, it's best to have this checkbox default to checked. Cuz you'll have smaller images fading in over top of bigger images, so you'll want the bigger image to fade out as the smaller image fades in. The performance is a bit slower this way, but the framerate is normally still fast enough not to be jerky. Whether it's jerky or not depends on the speed of the computer and the size of the images. The bigger the images are, the longer the redraws take. But I've had acceptable performance using images that are 1280x1024 on my puter, which is about four years old.

You can click the image to go forward an image, or use the ">" button. You can also drag images around. That comes in useful if the images are very big and the slideshow is configured to show the images at normal size.

You can configure svConfig.js so that each image has a different background color, if you like. That's done by editing the array named gSlideshowBGColors. As you can see if you look at svConfig.js, quite a few features of the slideshow are specifiable in svConfig.js. It'd be nice if I made a program to make editing svConfig.js less textual. With color pickers and not having to edit arrays and whatnot, but I haven't done that yet. It might happen one of these days, but it'd be a week or so of work.

The Slidvid program has two screens. One displays the slideshow. The other, which we see below, displays thumbnails of the images.

Viewing thumbnails in Slidvid

When you're viewing the slideshow, you can view the thumbnails by clicking the "^" button, which is the View Thumbnails button. When you click a thumbnail, you view the corresponding image in the slideshow. When you mouse over a thumbnail, the comment for that image, if there is one, is displayed.

I got really tired of making gazillions of thumbnails, so I made a utility program (PC only, at the mo) called iconMaker4.exe to make nice ones more easily. Below we see the iconMaker interface.

Interface of IconMaker4.exe

To exit iconMaker, you press the Esc key on the keyboard. But first you specify the folder in which the images are stored by clicking the "image" button. Then you click the "icon" button to specify the folder in which the icons will be stored. That should be a different folder. Then you configure the other boxes you see in the above screen such as whether you want a colored border around the icon. And the size of the icons, yada yada. Then you click the button with the rectangle with the dotted line. Then you drag to create a rectangle. That area will be the part of the image used to make the icon. You can preview the icon image. Then you click "Save" when yer satisfied with the preview. Then iconMaker moves to the next image in the folder which contains the images. iconMaker creates png images. They're named the same as the corresponding images.

Getting back to Slidvid, what you normally see when you first enter Sidvid is the screen that displays the thumbnail images. But a nice little feature of Slidvid is the ability to call it with a parameter that scoots you to the slideshow itself while displaying a particular image that you specify from the slideshow. To illustrate this, compare what happens when you click the below URLs. Note that they both open the same file. But what you see is different.

http://vispo.com/nio/pens/slideshow/index.htm

http://vispo.com/nio/pens/slideshow/index.htm?n=21

The first URL displays the thumbnails. The second URL displays the 21st image in the slideshow. This feature is supported by a JavaScript file I wrote named svURLparameters.js. This is a reusable JavaScript object. It doesn't depend on any of the other files in Slidvid. Feel free to use it if you want. There's plenty of documentation in svURLparameters.js.

My work as a media artist is primarily net-based. I write interactive art. Often with a literary focus. But I also make images, sometimes, from those interactive works. So I wanted some good software to display those images. That's why I wrote Slidvid. But it's getting to the point where it's also fairly usable by other people, so I thought I'd post some documentation about Slidvid and encourage you, if you want a slideshow on your site, to contact me and we'll put Slidvid on your site with your images. To contact me,  leave a comment here or email me by clicking my name on the homepage of my site vispo.com.


4 Responses to “Slidvid 3.0”

  • Poem by Nari: January 29, 2011 at 9:13 am

    the state
    of the art
    of the slide
    advanced

  • cliff syringe: January 29, 2011 at 9:36 am

    Hi Jim. I read your article and checked out the slideshows. I was impressed by the smooth transitions and the clarity of the images. You’ve done a great job. Slidvid certainly performs as advertised.

  • Jim Andrews: January 29, 2011 at 11:21 am

    @Poem by Nari/Ted, thanks. I named it Slidvid when I was working on the dbCinema slideshows ( http://vispo.com/dbcinema ). Those ones are usually less like slideshows than video slid up in size from what we normally see on the web in video, and slid along the conceptual axis to an emphasis on growth and form, a kind of painterly cinema. The name ‘Slidvid’ combines ‘slide’ and ‘video’, but it’s also ‘video on the slide’, slid off the rails of conventional cinema.

  • Jim Andrews: January 29, 2011 at 11:45 am

    @Cliff, thanks for noticing those things. Clarity of image is something that often gets short shrift on the web. When one puts images on Facebook, for instance, if they’re big, Facebook sizes them down to be displayed within the Facebook interface. This gives the images less clarity and forces them to fit in to the Facebook interface. This is usually OK for most photos and even some art, but it doesn’t make for a very compelling display of art. Or photos, really, if the photos are important to you and you want the photos to be presented with clarity and, well, dignity.

    The superabundance or, as it seems sometimes to me, saturation of images on the web makes it difficult to present them in anything resembling a distinguished way. Slidvid is meant to provide complete focus on the images, not on the interface, and it uses all the available screen space. Also, in PC browsers, the F11 key (or the View>Fullscreen menu option) lets you go fullscreen and, in that case, every pixel of the screen is devoted to the presentation of the images.