Finished!

It’s finished! I now have a complete working patch to run my exhibit. I had to give back the Makey Makey, but the patch will still work by pressing the space bar (although the water bottle does complete the look).

The Final Arrangement

The Max patch runs the exhibit while the Makey Makey acts as the interface. The circuit board is hooked up to the computer and alligator clips connect the circuit board to the foil wrapped board on top of the water bottle. To control the exhibit, the user holds the ground cord and touches the foil wrapped board, which takes the place of the space bar. This is meant to simulate the action of pumping water. The space bar then sends a signal to the patch to light up the designated pump and play the sound clip attached to it. If you look closely in the water, you can see little white bits (croissant bits) that represent the “white flocculent bits” that Dr. John Snow saw in the cholera infected water of the Broad Street Pump. (Summers, Judith. Soho -- A History of London's Most Colourful Neighborhood, Bloomsbury, London, 1989. http://www.ph.ucla.edu/epi/snow/broadstreetpump.html)

My "pump"

To finish the patch for the presentation, I had to combine the various test patches I made while figuring out the sound clips, the light delays and the counter used to turn everything on at the right time. I also had to print the map to the right size to fit my screen. This took a little while, but I had a friend (check out her project; it’s really fun) help me figure the sizing of the map so it would print properly. The map ended up being smaller then my screen, but it still worked. Once I had the map attached to my screen, I had to arrange all the lights so they would show up in the proper positions. To do this each pump had it’s own collection of buttons and wires which included a toggle switch, the delay mechanism, and the lights. Underneath the first light, I connected the play list filled with my sound clips. Each segment was then connected to the counter, which would turn on one group of lights at a time. Out of all the wires, buttons, and messages, only the lights are seen in presentation mode.

Top: Tons of criss-crossing wires, buttons, and messages
Bottom: Nice and clean presentation mode

My presentation went well, even with a few minor issues. The various parts were easy to set up, and it was fun to show my off my work. However, there are a few things I would do differently if I refined this project for an actual museum exhibit. My first problems involved the size of the map and organizing the lights. Positioning the lights underneath the map was difficult because they tended to move around when I locked and unlocked the patch. This meant a lot of tinkering to make sure everything was in the right place. I also couldn’t figure out how to get the right size of paper to fully cover my computer screen. Both problems would be solved if I could use a digital copy of the map and overlaid it on the patch. My second problem involved the counter that controlled when the lights turned on and off. If I continued the project, I would insert a reset switch to restart the patch from the beginning, rather then have it reverse through the light sets. 

I have learned a lot with this project. I had never used any visual coding program before, so was completely new to Max. Our professor gave me a lot of help, while some other things I figured out for myself. On the content side, I learned more about the map and the cholera epidemic that has interested me for a while. Combining the two experiences, I learned a lot about how to present events like these in an engaging way. If this project was an actual museum exhibit, there should be a short interpretive panel on the side or a screen before the user enters the exhibit to contextualize the map and explain the aftermath of the epidemic. All in all, I enjoyed the chance to learn a completely new way of presenting information.

Progress!

When I started on the programming for the lights, our professor told me to describe the actions of my program in plain English and translate that into coding. So here is what I want my program to do:

1. The user walks up to the computer. Each main pump is already lit up on screen.

2. The user presses the physical pump to navigate from pump to pump.

3. At each pump, the cholera cases light up one at a time.

4. Once all the cases have lit up, a sound clip starts playing, or it can play over the lights turning on; I haven’t decided yet.

5. The lights stay on until the user moves to the next pump.

6. The program ends at Broad Street.

It took a little while (and a lot of questions), but I figured out how to make all this work in Max. There are settings to turn the main lights on when the program loads; settings to delay the lights so they turn on one after another; settings to link the physical pump (I haven’t made this yet) to the computer; and settings to link the sound clips to the lights. Over the last two classes, I made a basic patch and connected it to the Makey Makey circuit I mentioned in my last post.

Screenshot of max patch

Now that I have a basic patch, I have to repeat this set up for all five of the pumps on the map, so that the lights shine underneath my copy of the map. I hit a stumbling block with figuring out how to turn off the lights when the user moved to the next pump. However, I realized it would actually look better if all the lights stayed on, because it gives the impression of the disease spreading over time.

  

Now that I have the mechanics of the exhibit, I need to work on the content. I have to do some research to find information for the introduction and conclusion that will frame the exhibit. To find editorials for the sound clips, I will go through a British newspaper database and pull interesting articles. Then, I’ll get some of my friends to read them out for me, and upload it to the program. And I still have to make the physical pump for the interface.

Apart from the mechanics of the project, I also learned more about the map. It's a lot smaller then I originally thought. I thought it covered all of London, but its actually only a small section covering a few blocks around the diseased pump, or at least that’s what published.

Maps and Screens: The New Plan

Plans for this project are coming into focus. We’ve reached the part of the class where we’ve finished learning Max programming and now we’re just going to work on our projects. I came out of our consultations with a much firmer idea of what I want to do for the project. One cool discovery was that the Map and Data Centre at the Weldon library has a copy of Snow’s cholera map that I can use for my project. I’m going to see if I can get a large transparency of the map from the library and attach it to the screen of my computer. Then I could program the screen to light up underneath different parts of the map; highlighting whatever point I want to show. This idea works way better then my original plan. Originally, I was going to connect a physical map with lights punched through it to a computer and program the lights to light up specific pumps. Separate from the map, the computer would show images and play sound clips. Using a transparency against a screen eliminates the need for extra lights, and makes the display simpler. I can use the computer to light up the map, and get the sound to play from the same device, which is closer to the effect I wanted to achieve then with the other version. This effect, voices from behind images and lights, was inspired by something I saw in Scotland at the Culloden Battlefield Visitor’s Centre. Part of their exhibit had screens with silhouettes, and speakers in the ceiling that would tell their stories. 

 

A very cool way to exhibit stories.

I have no where near enough experience or room to do something like that, but I can still use sound clips and images. For my project, I’ll have someone read editorials about the effects of cholera that are linked to different pumps. I’m also going to use different coloured lights for the healthy and diseased pumps. Then, if I figure it out, I could maybe even put images behind the map, although that might be hard to see behind the lines of the map.

Once I have the screen figured out, I’ll make the interface. I’m going to use Makey Makey, a recyclable play set and circuit board, to build a physical pump that will be used to navigate the map. Each time someone pumps the handle; the program will take them to a different pump on the map. I still haven’t decided if I want to put a bottle of murky water underneath the pump to add to the display. The bottle would only be for display, because making an actual pump would be too ambitious, so it might not be useful, but I’ll think about that at a later stage.

Besides the programming aspect of the project, (which I’m going to have to learn how to do) I think the hardest part will be not going overboard on content. The focus of this project is geared toward the interactive activity, not the content. I’ll have to take care not to spend too much time on research, and avoid ignoring the programming part of the project. This might actually be a blessing in disguise. I think a lot of the content I wanted to include might not be available online. For each pump, I wanted to include a neighbourhood profile, the status of the pump, and a sound clip describing the experience of the disease. Now reviewing this idea, it was probably a little ambitious. I still want to include some of this information, but I think I’ll restrict it to certain pumps over others. How I choose which pumps will depend on what information I can find. Using the school’s newspaper database, I’ll be able to find editorials on the disease, but whether I’ll be able to tie it to a neighbourhood is doubtful. It’s more likely that I’ll find editorials for the city in general. I still want to turn the editorials into sound clips, but I’ll have to figure out a way to tie them to the different pumps. On top of this, I’d like to include an introduction to the epidemic, including how it was spread, the effect and the treatments doctors used to combat the disease. This will be basic though, to avoid going too deep into content.

            So now that I have a plan, my first step is to contact the Map and Data Centre and find out if I can get a transparency of the Snow map made.

New Semester, New Course

Switching courses for the new semester, this blog will now discuss my Interactive Exhibit Design course. This course is the companion to the Digital History course last semester. The main goal of this course is to produce an interactive multimedia exhibit using anything we can think of. Our professor encourages us to think big and if it fails we still get the marks for trying something completely new, rather then playing it safe. This course will be going even farther out of my comfort zone then the previous course, but three weeks in it already seems like it will be very interesting.

So far we’ve started learning the programming language for Max 7, a program that was designed for use with midi music programs. The program allows us to develop patches to link to buttons, leds, counters, sliders and more we probably haven’t learned yet. These virtual buttons etc. can be linked to physical partners, or sensors that can be used to create interactive programs, games, or music among other things. Other programs or elements were going to learn about before starting our projects include sensors, desktop fabrication, MakeyMakey and a bunch of other things. The second half of the course is devoted completely to working on our projects ending with a demonstration day.

We had a brief brainstorming session in one of our last classes discussing preliminary ideas for our projects, and getting some feedback from our professor. For the base of my project I want to use a map that was developed by Dr. John Snow, a doctor from the first half of the 19^th century, to track the outbreaks of cholera in London, England (I’ve mentioned this map in one of my earlier posts.) This map helped prove the validity of germ theory by linking the outbreak of cholera to a specific pump in Broad Street. For the first step of my project, I’d like to transfer the map to fabric and insert lights that can track the cases of the disease back to its source with the push of a button. As a second step, our professor suggested a way to make the map more interactive. I could include physical pumps connected to sensors or some program that users could pull on, and the program would tell them if the pump they were using was contaminated or not. I could also include information on how patients would be treated, and the likelihood of survival. This part would give users more of an understanding of how people lived in different parts of the city during epidemics. The exhibit could end with a description of any changes to Public Health policies as a result of the epidemic. I’m not quite sure how I will accomplish this yet, but it will be interesting to figure out how to make it work.

The connection between public health, treatments of diseases and changing medical theories has interested me for a long time, and I think it would be fun to try and translate this interest into an exhibit format.  

Games and Education

Recently in a few of our classes we have been reviewing online exhibits and games for their utility as historical or educational tools. Many games already use history as their base although these are usually solely for entertainment. They are not meant for educational purposes but could have the by-product of introducing players to new subjects, and getting them interested in history. This includes games like Assassin’s Creed, a game that has won awards for its historical details. Another example would be Victoria, a resource management game set in the Victorian age, in which players steer a country through the 19th century. (Full disclosure: I’ve never played either of these games but they sound interesting. I may check them out when I’m not in the middle of school.)

 Given the popularity of these games, more and more people are looking at games as a way of teaching historical skills or events. Making a game for educational purposes is different then making one for entertainment. A guest speaker in our class, Robert MacDougall, discussed how no matter what the background for a game is; it’s the core activity the players learn. So for entertainment games, people may pick up some historical information, but they’ll really be learning the mechanics of the game. So, to make a game educational, the developers have to make the mechanics of the game into what they want the players to learn. MacDougall did this with his pervasive alternate reality game, Tecumseh Lies Here. ARGs are played on and offline and usually take the form of large scavenger hunts. The game was based around the War of 1812, focusing on the controversy around the burial place of Tecumseh, a Shawnee chief who had a large role in the war. The game was designed to mimic historical research in order to teach historical research skills.

The game the last part of this blog will review is more of an app then a game. It is also meant for entertainment rather than education. Slate’s Interactive Game of Death is a spinner that lets you pick a different year from 1647 to 1990 (although mostly in the 19th century) to discover what your cause of death would be in each year. The mortality statistics are drawn from a different source for each year in the timeline. The sources include private casualty records, church records, bills of mortality, and Centre of Disease Control historical data from both the UK and Boston. The player can press the spinner as many times as they like, and it will display a likely cause of death for each spin depending on the statistics found in the sources. The purpose of the game is to describe how the nature of death has changed over time as our knowledge of medicine and health has changed. The spinner clearly shows how longer-term diseases such as cancer and heart disease took over as infectious diseases died out.

As an educational tool, it’s not that useful. There’s a short blurb preceding the spinner that serves to contextualize the tool, but it doesn’t have as much background material as other historical sites. For example, there are no definitions for some of the more obscure diseases, which would be helpful for further info. There are a few links to outside sources that could add information if people were interested, but they would have to leave the site to get it. Also, if the core activity is what the player learns, then really all you’re learning is how to press a button. However, as an entertaining app, which is really what it’s meant for, it’s great. It’s fun to bounce around the timeline and see what causes of death pop up at each year. The player can see all the different names for diseases that may or not exist anymore, as well as the changes in causes of death over time. Overall, the spinner is a fun little app that can waste a few minutes, with the benefit of perhaps interesting viewers enough to research different diseases and begin to understand how diseases have changed over time. Even if it’s not completely educational, that’s a pretty good result.

Review of the Canada Goose

For our last project for our Digital History class, we have to develop websites on a subject of our choice using the various tools we have learned about during the semester. If we wanted, we could build on our previous project, the Digital Doors Open, or work on something completely new. I decided to build my website around the sliders I built for Lansdowne Park in Ottawa. If I can figure out how to embed the sliders into the new website, they will be part of the final product. However, the main feature of the website is will be an interactive timeline describing the history of Lansdowne Park with a focus on the uses of Aberdeen Pavilion. This will expand upon the information I included with the original sliders. I may also include links to further resources on Lansdowne Park and it’s uses, especially the major redevelopment project that is almost finished on the site.

As part of the project, we had to present our progress to the class, and review someone’s website. I was assigned to review Emily’s website. She chose a completely new subject for her website then her last project. Her website is aimed at exhibiting the results of paper she wrote for her Environmental History seminar. The paper discusses the history of Canadian Geese in North America from the early 1900s until now, with a focus on how urbanization has affected the migratory patterns of the geese. She examines the vocabulary used to describe Canadian Geese in three major newspapers to trace changes in migratory patterns, and changes in attitudes towards the geese throughout the 20th century and early 2000s.

The website is powered by the paid version of Wordpress, which allows users to customize their site more then the unpaid version. Wordpress.org has more widgets, and layouts that users can choose from; allowing for a more professional look, than the simple blog format permitted by Wordpress.com. The whole website is nicely organized and easy to navigate. The title bar is complemented by a band of Canadian Geese silhouettes, but these do not detract from the legibility of the text. The main page is headed with a slider to showcase various pictures of geese. The pictures are well chosen to illustrate geese in nature and urban settings. All the pages also have a comment function, and social media buttons which add to the interactivity of the site.

Navigation of the site is easy. The main page has links to the top pages of the site. When a user hovers over the links, a description of the page appears over the picture. This is a useful feature to help users find which page they want to visit first. There is also a tab bar across the top of each page, which also allows for easy page-to-page navigation. Finally, to reach the main page, all users have to do is click the title bar.

The tabs include information on the project; Canadian Geese; the sources used; textual analysis; strategies to deal with geese in urban settings; and a contact page. Not all the pages are filled yet, as the project is not due for another week. The two that are filled are the sources page and the textual analysis page. The sources page is well organized now, but may get a little cluttered when all the sources are added. The textual analysis page uses word bubbles to illustrate changes in vocabulary over time. Word bubbles are an interesting feature that allows researchers to visually display the frequency of words in any given text. They are similar to tag clouds in that the more frequent words are displayed in larger text, while the less used words are shrunk to fill in smaller parts of the display. Each individual bubble can tell a story, while across a whole series, the viewer can see the shift in vocabulary as some words shrink and others grow. The project is not finished yet, so this will probably be included, but it would be useful to include small explanations for each bubble, so the viewer has a little more context to explain their significance. This could also be done as an overall explanation at the end of the series.

Overall, the site is well organized, easy to navigate, and will probably be very informative once finished.

Aberdeen Pavilion and How to Make a Before/After Image Slider

Aberdeen Pavilion has had many uses since its construction. Standing in the center of Lansdowne Park, on the edge of downtown Ottawa, the building has a long history of agricultural fairs, conventions, and military uses. Built in 1898 for the Central Canada Exhibition, it was designed by Moses C. Edey, and named for the incumbent Governor General, Lord Aberdeen.(Hofley, Chris. “Aberdeen Pavilion set to make more history in new revamped Lansdowne.” Ottawa Sun, August 2, 2014; Canada's Historic Places. "Aberdeen Pavilion National Historic Site of Canada." Accessed October 14, 2014) The redevelopment of the park caused a large amount of controversy over the plans for the site. Many were concerned about how the existing heritage buildings would fit in with the plans for large new shops and restaurants. The park went under construction in 2012 and just recently opened to the public, although many of the new shops are finished yet. Deachman, Bruce. "Elephants, Pandas, and Pigs, oh my! An Illustrated History of Lansdowne Park." Ottawa Citizen July 31, 2014) The park and Aberdeen Pavilion have gone through many changes since their establishment, and yet there are constants as well. The pavilion rests in the same location as it always has, with its purpose remaining much the same as ever. Meanwhile, the uses and form of the park around it have changed with time. This state of change and continuity provides the perfect subject for a series of sliding before/after images. These images use code to layer two images on top of each other, and then slide back and forth to show the differences from one time period to the next. (Zurb University. “jQuery TwentyTwenty Plugin.”) This post will explain the method used to create these images, as well as discuss the historical significance of the Aberdeen Pavilion.

I chose images that would best illustrate the variety of uses and changes the site has experienced since its construction. The images used were drawn from Creative Commons, Library and Archives Canada, and photos I took myself. The images depict pavilion’s use as an exhibition hall, while the land around it has changed from fair grounds to a military base, to sports and shopping grounds. Gathering the sources was the easy part; putting them together proved more difficult.

Before starting this project, I had no knowledge of html or coding. I learned early on in my research on tools, that coding would be essential to this project. Many of tools included templates for the images which you supposedly able to simply copy and paste the code into posts to publish them. (Northwestern University Knight Lab. “Juxtapose JS;” Flashxml. “Image Before and After FX.”) I tried various programs with little success at first. This is most likely because there were mistakes in my code, or I was missing steps the instructions assumed were evident. If I had a little knowledge of coding I may have been able to spot these errors and fix them myself. Another issue I had to deal with was website compatibility. I soon learned that the tool had to be specific to the site where the images were published. This meant that the original tool I settled on, TwentyTwenty, would not work on Blogger, as it was designed for Wordpress. This sent me on a search for a site that would work with Blogger. My first attempt was with Juxtapose JS from Knight Lab. The site produced good previews of images, but the code for publishing the images did not work on my blog. (Knight Lab. “Juxtapose JS.”) This was a common issue. My second attempt was with FlashXML, which would allow up to 3 pictures in a slider. However, the tools benefit of not requiring online links to images meant that the publishing site required file hosting, which is not allowed on Blogger. (Flashxml. “Image Before and After FX.”) These are the tools I spent the most time with, but there were a few others that I reviewed but dismissed due to code or site requirements.

I finally settled on a site specifically designed for Blogger called Helplogger. The blog provided instructions for creating sliders. I had tried this earlier but moved on to another site because the instructions called for a plugin, which I had difficulty activating. I also found the codes did not work where the instructions said to enter them. (Helplogger. “Before/After Photo Effect with jQuery.”) These problems were solved once I talked to a friend with coding experience. She told me that the code did not require any plugins. She also changed the instructions to enter the code as part of a post rather then a gadget as the original instructions required. Finally, she explained that the image links had to be public for the code to access them, something the instructions skipped over. Using these instructions I produced my first working slider. To complete the rest of the sliders I followed the same process. First, the images had to be the same sizes, so I modified them in Photoshop, another program I have not used before. I then uploaded the modified photos to the public file on Dropbox to provide the links for the code. Each slider required its own line of code in the template and the post of the blog, which I copied from Helplogger’s instructions. As I copied the codes over to my post, I made sure there were no extra symbols that would make the code malfunction. To finish, I filled in the links and dimensions into the code for each slider.

Aberdeen Pavilion and Lansdowne Park has gone through multiple uses throughout its history. Its use as an exhibition building has been constant throughout its history, with multiple conventions and fairs using the building to present their wares. It was also used as a military base during both the First and Second World Wars, and for basic training after that (Canada. Department of National Defence / Library and Archives Canada). Now with the redevelopment of the park, the site has undergone another major change. Many were concerned with the city’s process and plans for the redevelopment project. Major criticisms revolved around the City’s bidding process, and the plans for a large shopping complex on the grounds. Opponents argued that the plans would harm the heritage buildings on the site, as well as the businesses along Bank Street.(Friends of Lansdowne. “Backgrounder.” September 9, 2010) Legal challenges to the plans were defeated, and site development began last year. (CBC News. “Lansdowne Park legal challenge rejected.” July 28, 2011.) In the place of what was essentially a giant parking lot, there are now multiple shops, a skateboard park, a large field, paths and benches around the pavilion, and a revitalized stadium. Despite the changes, the park is still mostly public grounds that is still used regularly by the city and its residents.  Time will tell what effect the redevelopment has on the neighbourhood. In the meantime, the controversy propelled me to learn more about a site that is a large part of my neighbourhood. And that interest gave me a chance to learn a new tool that could be useful for many other sites in the future.