I gang

Real-time collage

# Scenario

A number of photographers taking photos of an event. The photos they take appears immediately as a collage on tablets.

# Assumptions

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).

Evner: ASP.NET, C# Programmering, Javascript, Windows Skrivebord

Se mere: website laptop template, template website laptop, template web bootstrap, template store bootstrap, template html5 bootstrap, sharp component, programming on a tablet, programming laptop, programming in html5, mvc web programming, mvc 5 bootstrap template, laptop for programming, javascript jpeg, ipad stores, html5 template bootstrap, html5 programming, file upload component, event in c sharp, c sharp event, bootstrap web application template, bootstrap programming, bootstrap grid template, bootstrap components, bootstrap asp.net, asp net bootstrap template

Om arbejdsgiveren:
( 1 bedømmelse ) Singapore, Singapore

Projekt ID: #6025298

Tildelt til:


Hi, I am an individual freelance, having more than 10yrs of exp in developing applications, window & web based, using .Net (C#.Net, Asp.Net (MVC), XML, WPF, WCF (Webservices) kendo ui, MySQL and SQL Server etc). Flere

$500 SGD in 10 dage
(9 bedømmelser)

6 freelancere byder i gennemsnit $726 på dette job


Hi, I (Myself a senior PHP, ASP.NET programmer using C# and VB) have a team having experience of more than 10 years in developing web and mobile applications. I have a team of expert programmers who write robust and bu Flere

$773 SGD in 20 dage
(10 bedømmelser)

Hi, I understand your requirements, I can create application for you. About Me: A freelancer with strong passion towards image processing and graphics programming. I have more than 6 years of experience in c++,C Flere

$1111 SGD in 20 dage
(10 bedømmelser)

About Me: • More than 5+ years of experience in object-oriented analysis, development, testing, and integration of scalable, multi-tier distributed enterprise business applications. • Strong knowledge in working with Flere

$555 SGD in 10 dage
(2 bedømmelser)

Aucune proposition n'a encore été fournie.

$750 SGD in 10 dage
(1 bedømmelse)

A proposal has not yet been provided

$666 SGD in 15 dage
(0 bedømmelser)