A number of photographers taking photos of an event. The photos they take appears immediately as a collage on tablets.
An **intermittent** Internet connection, thus a failed upload or download needs to be retried.
The tablet is an iPad. About 3 tablets viewing the web page simultaneously.
There is about 5 laptops uploading photos simultaneously.
Photos are all JPEG and are large in size, thus needs to be **resized** smaller before upload.
1000 photos uploaded over 1 hour event.
There is only 1 event at a time (for version 1).
# Components to be delivered
**Windows Forms application** on the laptop that uses FileSystemWatcher to listen for new JPEG photos created in a folder. The new photos are cropped into a square, resized, and uploaded onto a website. The application shows the number of photos that is uploaded, uploading and waiting for upload.
**An ASP.NET MVC 5 web application** that serves 3 function: To store the photos that are uploaded, a page that displays as a collage and a configuration page for the web page background image and mask image that indicates the shape of the collage. It uses the **Bootstrap** template.
For the upload component, after a photo is uploaded, the photo is **renamed** with a new GUID. The photos are stored in a **publicly accessible** folder. A database stores the URL to the photo, file name, the time the photo is uploaded and an auto increment Id. The database is MS SQL Server localdb. After the photo is uploaded, a **SignalR** message is sent out to the tablets to request the page to add the new photo to the collage.
For the web page displayed on a tablet, it loads the background image and mask image. These two images have the same aspect ratio of width to height (that is, width/height is the same). The web page displays an **HTML5 canvas** with the background image, **scaled proportionately** so as to maintain the aspect ratio, so that it covers almost 100% of the screen.
The canvas is logically divided into a **grid** with the number of columns=number of pixels horizontally in the mask image, and number of rows=number of pixels vertically in the mask image. White pixels means the grid cell can be used to place a photo. Black otherwise.
When the web page receives the SignalR message, it downloads the new photo, uses **TweenJS** to animate the photo from the side of the screen to a random unused cell. When all cells are used, existing photos gets overwritten.
If the web page is visited after there are photos already stored on the server, it should download all the photos and animate them into the cells. It then continues to wait for the SignalR message.
For the configuration, user uploads a background image (in JPEG) and a black-and-white mask image (in PNG).