Dr Dave

Now that I've added a gallery feature to my blog engine, I've created a gallery for this project and included a couple of screenshots I had lying around to get started.

There is a link to all galleries in the main menu, and this specific gallery can be found at http://drdave.co.uk/blog/gallery/virtual-universe.

While reminiscing about watching Take Hart, I decided that I needed a gallery. This would serve as an area to store images such as screenshots of the projects I am working on.

I opted for the following URL structure:

1. http://{domain}/blog/gallery for all galleries
2. http://{domain}/blog/gallery/{name} for all images in a given gallery
3. http://{domain}/blog/gallery/{name}/{index} for a particular image in a given gallery

I added a new gallery controller to the blog engine, and added an index view for the galleries, as shown below in Figure 1. Each gallery has a thumbnail image, a title and a description. Image counts are shown for each gallery.

Figure 1. Example galleries.

The gallery index view links to an index action of an image controller, and the view for a particular gallery is shown below in Figure 2. Each image is shown as a thumbnail (created manually), along with a title. I opted for a square thumbnail to avoid issues with different aspect ratios, and paging is enabled.

Figure 2. An example gallery.

The image index view links to the detail action, and the view for a particular image is shown below in Figure 3. The image is shown along with a description. 'Previous' and 'Next' links are included.

Figure 3. An example image in a gallery.

In order to add images, I transfer them to them to the web server (e.g. using ftp), then "add" images to a particualr gallery by specifying the location of the thumbnail and image itself, along with the title and description in an edit view. This metadata is stored using a similar repository to the posts (currently XML) though this could be easily changed.

In Part 1 and Part 2 I showed some screenshots of a radial dial for controlling settings. I've made the following changes:

1. Enabled the control for multi-touch. All buttons now support multi-touch input (per item and per category), and the dial can be "rotated" using multiple contacts.
2. Changed the dial to rotate the scale and keep the pointer fixed, rather than vice-versa to provide better feedback with multi-touch rotation.
3. Added inerita for rotation.
4. Moved the category title back to the centre.
5. Changed the button action to execute on click (manipulator-up) rather than on a manipulator-down event, with highlighting to provide better visual feedback when touching a button.
6. Added support for enumrations, in addition to boolean and numeric buttons.

Figure 1. Radial control for numeric settings

Figure 2. Radial control for boolean settings

Using a single hue for each of the regular, disabled, and highlighted button states gives the impression of a "heads-up-display" (HUD) rather than a mechanical dial. "LED"-style colors and a Gaussian blur add to the effect, as shown below in Figure 3.

Figure 3. LED coloring for HUD