Keywords

1 Introduction

What the future flag of New Zealand will look like has become the topic of significant debate with the country’s current Prime Minister, John Key, scheduling a two-stage binding referendum on the matter over the years 2015–2016. With a background in digital libraries, human computer interaction, and open source software development the authors of this paper decided to develop an online interactive environment that allows members of the public to try out their ideas for a new flag, which we report on here. We enrich the core design activity with feedback over how similar the flag the user is designing is to other existing flags. We also allow the user to visualise the flag flying in a variety of conditions. This is all achieved in real-time within the user’s web browser, with the results of users’ designs stored in a digital library.

2 Worked Example

The aim of our work was to create an on-line environment in which users could develop their own flag designs. In particular we wished the environment to embody the principles of good flag design [2]. Figure 1—which shows a sequence of snapshots taken during a session by one user interacting with the developed web site—demonstrates the solution we devised. After a splash page introducing the site (not shown) the user is presented with a page asking them to select the aspect ratio of their flag (Fig. 1a). The aspect ratios are derived from a digital library collection of the world’s flags we have developed. Boxes visually matched to show the various ratios are presented, with the example flags that have those dimensions shown within the respective boxes. The displayed boxes are frequency sorted left to right, showing most common to least common. Clicking on one of the other boxes changes the selection, and hovering over a flag brings up a tooltip which lets the user see the name of the country.

Fig. 1.
figure 1

The developed iterative flag design process (Color figure online).

Full size image

When the user is ready to proceed to the next step, the instructions displayed directs them to click the right arrow on the page, or else perform a right-to-left swipe action. This brings up Fig. 1b, where an artist’s palette is the key feature. By default the three colours used in the current New Zealand flag are shown. Our snapshot was taken a little while later on, after the user interacted with the page, using the slider at the bottom to increase the number of colours up to 7. From this screen the user can continue (click right arrow, or swipe) to the next stage (flag design), or else use the left arrow (left-to-right swipe) to return to the aspect ratio stage.

Figure 1c shows our user went on to the flag design stage. This is the key stage of the environment, where the user is likely to spend most of their time. Here they are presented with a browser-based “paint-style” program. Down the left-hand side are the different shapes that can be drawn (rectangle, ellipse, star, etc.) as well as a selection tool for manipulating drawn shapes. Along the bottom of the paint program area are controls for selecting the current fill and line colour of the shapes being drawn. Through the file menu (top-left) more substantial edits can be effected, such as importing a symbol from a library of shapes. In the case of our user, for their flag design they have imported a fern leaf from the Open Clip Art web siteFootnote 1 through the file menu, changed its colour to white (it was green initially) and positioned it on the left. They then duplicated the shape, mirrored it in the y-axis, and positioned to the right.

Figure 1c also has some vertical bars to the right (coloured brown, green and blue in the figure), through which the user can access views that provide additional context to the on-going design. Utilising an accordion-type metaphor, clicking on one of these bars squeezes the current view closed to make way for a new view to be displayed. The remaining snapshots in Fig. 1 (d)–(f), are snapshots taken from accessing these bars. In Fig. 1d the user is shown how similar their current design is to other flags in the world. Hovering over a flag brings up a tooltip with the name of the country and a similarity score—in this case, 75 %. The next bar over in the interface does the same thing with the alternative New Zealand flag designs (not shown). Clicking on the right-most bar brings up the view shown in Fig. 1e, which displays the designed flag flying on top of the New Zealand Parliament Building. This is an interactive 3-dimensional simulation. The user can shift and move around the location to view the flag from other angles, as shown in Fig. 1f. This last snapshot also shows the simulation allows for elements of the weather to be adjusted. The scroll-bar at the top of the viewing area controls the strength of the wind, and through the pull-out area to the right, they can experience what the flag looks like when it is raining and snowing, in addition to when it is sunny. When the user is satisfied with their design they click/swipe on to the final stage (not shown) where they are asked to fill out contact details if they would like their flag to be published in the site’s digital library collection of alternative designs.

3 Implementation

In terms of implementation, the core component is a Greenstone 3 digital library [4] consisting of two image collections: one for the world’s flags, and the other comprised of alternative designs for the New Zealand flag. We utilise the baseline functionality of Greenstone 3, which includes incremental ingest and metadata assignment, to incorporate the new designs. To meet the additional functionality needed by our site, advances in web browser-based standards meant we were able to achieve this without resorting to customized digital library services. While the Greenstone DL architecture allows for extensible services, performing this functionality in the web browser means there is a considerable saving in computational cost in providing the site.

The 3D rendering is accomplished using WebGL.Footnote 2 A particle system utilising springs is used to provide a cloth-like simulation [1]. The image similarity calculation is based on an HSV colour quantized histogram calculation [3]. Within the web browser the individual pixels to an image are accessible when rendered to an HTML canvas element. We use an off-screen canvas to render the flags at full size for the calculation.

When a user first visits the flag design site, an AJAX call is used to see if computed colour histograms for the flags in the DL already exist. If they do not, then the browser computes these, and sends back the computed values to be stored in the DL as metadata, run-length encoded to save space. If a web browser supports local storage, this information is also stored in the browser to avoid even the need of pulling the computed data over the network on subsequent visits to the site. A comparable technique is used for computing and storing the aspect ratios of the flags. A checksum scheme is used to notice when data on the server has changed, and consequently local information should be discarded.

4 Conclusion

To conclude, in this article we have presented the design and implementation of an interactive web environment, backed by a digital library, that supports the development of new flag designs. Motivation for the work has come from a planned flag referendum to be held in our country. Beyond the core activity of developing a new flag design with a “paint-style” application, our solution provides additional context to support the user in this process: showing the user how similar their design is to other flags; and allowing them to visualise, in 3D, the flag flying in a variety of conditions. The site is accessible via the URL: www.greenstone.org/nz-flag-design.