The Cinemagraph Weather Web App is a site that displays your current city, temperature, and a description of the weather. The best part about this app is that it displays a cinemagraph that describes the feeling of the weather (not necessarily the city). Open the link, full screen it on a monitor, and place the monitor on a window less lab to add a psychological ambiance of the weather outside =).

Cinemagraphs are, put simply, animated photography. They were invented in 2011 by Kevin Burg and Jamie Beck. They differ from gifs in that cinemagraphs usually have an isolated motion while the rest of the image is still. The frames are blended and looped together to create a medium between a photograph and a video.

The first cinemagraph I saw was actually shot by Kevin and Jamie themselves! It is a beautiful cinemagraph of steam coming out of a heated pool in Jackson, Wyoming during the winter of 2013. I saved this image because it reminded me of ski trips to Maine's Sunday River, and how during my Thesis writing, I longed to go back.

During my graduate career, I was lucky enough to be in a lab with no windows. Twice. Too many times I walked out of lab, only to realize there was a snow storm, it was freezing, or the apocolypse had just occurred, all without me knowing because I was doing science inside two foot thick cinder block walls. I grew increasingly annoyed by the lack of vitamin D in my daily life despite the sun shining unobscured by clouds.

I found myself doing lots of my portable work at Rotch Library at MIT, where they have huge windows facing Massachusetts Avenue. Being from California, I don't think my peers understood how much it annoyed me to be inside a bomb shelter of a lab with artificial sunlight. Not only that, but I felt that the lack of knowing the weather outside my cave was having a psychological affect on my work.

The final straw came when I was working on a group project in a student lounge that had windows (I had strongly suggested the location). One member, who had her back to the windows, asked the group if we knew if it had started raining yet. Rather than looking out the window like I did, the other two team members instinctively hit "ctrl T" to open a new tab to ask the all-knowing Google.

And thus the idea for a virtual window arose. I created a web page that would display a cinemagraph describing the current weather outside. The reason I wanted a cinemagraph rather than a monitor that continually displayed the weather was two fold: (1) I felt that displaying the weather was intrusive to the laboratory environments I was in and, (2) my peers seemed to already use the internet to determine the weather, so I wanted a tool in the same medium to limit the barrier to entry.

A huge thanks to @fourtonfish for his help. Who knew that cold emailing a full-stack software engineering would actually lead to a response! The Cinemagraph Weather App is based off of @fourtonfish's Weather Web App mashup tutorial.

This app uses ip-net to obtain the browser's IP address, and thus, their latitute and longitude. It then sends that location to OpenWeatherMap.org and asks for the current weather at that location. The PHP wrapper that does both of the above tasks returns the city name, temperature, weather description, and weather icon. The weather icon is a description that OpenWeatherMap.org uses to describe the weather. Every weather instance can be described in the form of one of these 18 icons.

After obtaining the icon, javascript determines which cinemagraph to display in the background based on the current temperature and weather description (icon). In order to do this, the script does a first pass at temperature. Temperature (in F) is grouped into one of 5 ranges: below 32, between 32 and 50, between 50 and 70, between 70-90, and above 90. Some quick literature review shows that humans can't distinguish ambient temperature changes of less than two degree Fahrenheit. I also hesitated to make the bins smallers since it means I would need 18 more cinemagraphs (one for each icon) for each new bin. Five bins required plenty of browsing to determine what the best cinemagraph should be. Javascript displays the cinemagraph with the same icon value as the current weather conditions, within the current temperature bin.

Some more user friendly interactions include the ability to switch from Fahrenheit to Celcius (click the temperature value). You can also hide the city name and weather description by clicking the toggle button on the bottom left. The screen automatically refreshes every 5 minutes. From some preliminary testing, that seems like plenty of time to not be distracting, but also provide semi accurate current weather information. The source code can be found on my github page.

Once the software was complete, the monitor displaying the gifs didn't quite give the ambiance I wanted. I was still missing an actual window!

So I used to opportunity to bring my lab mate to the makerspace I direct (thanks Phong!), and we build a window, complete with a window sill and frame, for a monitor we had lying around lab. We used left over wooden floor trim and 2x4s from MIT Reuse (a listserve where people email out to give away left over items). A larer wood trim was used for the window sill. Drill press was used to make pilot holes since all the wood was thin; Band saw for decorative portions; Belt sander for aesthetics; Miter saw for most of the cuts (especially the 45 degree angles); Table saw for cutting a 2x4 in half the long way for the stand.

A raspberry pi is used to display the cinemagraphs. Running the website on Chromium, fulled screened (F11), and a python script running a hack to keep the monitor on (tl;dr The monitor we had turned off after 5 minutes. I know, I called tech support, and they couldn't stop it from doing that. Tried multiple pi hacks, but no luck. My hack? I made a simple python script with pymouse that moves the mouse to the bottom right every minute to keep the monitor awake. I know, not super clean, but not worth investigating further.)

So the lab admin does not let me put holes in the wall, no matter how many times I asked. Ugh. The solution is to place the monitor on stands/legs, and just rest it against the wall. My desk keeps it from falling forward. Boom. Take that rules!

A couple things I still want to complete:

• -Hide the monitor cables behind the stands.
• -Add a curtain that can hide the stands better.
• -Add thing pieces of wood to grid the window, and make it look more like a window.
• -Place a pie on the window sill =)