Some update ...

Project integration

Currently, I have tested out the flow of data from client to server script to the backend program. Over the weekend, while waiting for the backend program to be up, I have written a temporary datapoint program to test out the script requested for datapoint. The communication between the client and server is successfully done and manage to generate data point from the 2 image submitted by user. I have yet to test out the actual program written by Alvin yet, still some bug that we need to figure out. We will be doing it later in the morning, hopefully can get it done before the presentation.

The temporary datapoint program can capture the upper body of the person. The program simply scan only the left half of the body. It scan the image line by line horizontally and vertically storing the datapoints in 2 arrays respectively. After which, the two arrays are combined. The arrays combine when both reach a common meeting point (the green point see below figure). The result looks weird especially at the body portion (too striaght), and the hand looks like alien. But well, this is just for testing purposes. Hope the final one will look better.

Illustration if line scanning:
Result of datapoint plotted out from a noise-free image after differencing:

Other update:

-Drawn logo to fill up the empty space on the left side of the interface. The logo area can slide up when user navigate into the dress-up area.
-Added profile update functionality.
-Presentation for tomorrow (edited from alvin's version)

Weekly update 10

Done :

See Integration of Server Programme
See Client & Server-side scripting update

Todo:

Complete prototype 2

Integration of Server Programme

I was able to integrate all that is required in the server side application together in one big programme. It detects all the necessary part and objects and is able to retreive the relevant pictures from the different folders and save them into different folders too. The basic input of the programme is purely the username of the user, and all will be done by my programme.

I am still trying to get a better plot for our data point plotting as it is not generic enough (hope I could get it done asap).

Another problem was that we were unable to execute the programme through the PHP command exec(). Hope someone can help!

Client & Server-side scripting update

Some update about the current state of our system. The client side is quite fully functional, on top of what has been built last week, the login and register and uploading and photo taking functions, this version allows the user to send the image of herself in the new outfit to her friend via email.

The integration of backend image processing and communication is still in progress. Just recieved the datapoint program (which detects 5 critical datapoints) written by Alvin last night and I'm now still trying to figure out the exec() function in PHP, it is still unable to run correctly. We will also have to change the plotting method use to generate the model.

_________________________________________________

Below are the more detailed description of the updated version:


1) Converting the the image of the dress-up model into picture for email


In order to convert the image in swf to jpeg, we need to convert the the movieclip into bitmapdata. Because the image created after the user has dress up herself is actually made up of many movieclips (the model, the head, the shirt and pants mask), we cannot simply convert/combine them into a single movieclip. A single movieclip is required so that we can use it to generate a bitmapData which can then be converted into jpeg using BitmapExporter (similiar to the one use for webcam pic function).

To resolve this problem, all the movieclips on the model were converted into bitmapdata. I have also written an pixel by pixel analysis in actionscript to read in the bitmapdata of each movieclip using bitmapdata's getPixel method. An invisible 1x1 pixel movieclip is created, which will scan through the whole area where the model is standing and help to detect which movieclip is on 'top', thus helps to return the correct RGB values. The RGB values are written into an 2d arrray which is then use to draw a new single bitmapData.


2) Email functionality

User can now send the image of herself and request some comment from her friends. I have tested out it localhost using ArgoSoft Mail server, below is the screen shot how it looks:

3) User can download of pattern card for printing. Below is the new patterncard with guided dotted lines:

4) Written scripts to handle the images uploaded, images taken via webcam and images created by user after dressing up in iApparel. The script is to convert the images with arbitrary name into correct naming convention.

5) New look for iApparel. Designed to fit into the Window Vista environment.

Weekly update 9

Completed:

- Client and server-side scripting. System is now able to register new user, login account, upload of user photo and taking picture via webcam. [K]
- Converted the BitmapData from flash to jpeg format with PHP. [K]
- Attached face cut-out on model. [K]
- Improvement made to the image differencing. [A]

Todo:

- Complete prototype 2 for next week product demo. For details, please refer to the prototype 2 report which will be uploaded soon.

Improvements to Image Differencing

Several improvements were made to the Image Differencing Programme. It checks for individual channel of a pixel instead of a pixel as a whole. It is more accurate than the previous function.

Client & Server-side scripting update

In this version, the functions avaliable in the client side application are login menu, registration form, photo uploading and photo taking via webcam. The front end is mainly flash, while the backend uses PHP and the database server used is MySQL. Currently, the application runs on localhost using an open source cross platform web server called XAMPP. Below are some screenshots of the current version.

Photo taking via webcam update

As discussed last week, the snapshot captured captured in flash is in BitmapData. In order to convert this data to jpeg, I have made use of the BitmapExporter class obtained from quasimondo to compress the image data, which is then send to the server-side for processing and saving it as jpeg image. The server-side scripting language used is PHP as it has a GD library that is capable of creating image dynamically.

Weekly update 8

Done:

• Masking the shirt and pants area [K]
  
• Image texture loaded dynamically [K]


• Captured webcam image into bitmap data [K]


• Researched about image mesh warping [K]


• Image differencing - capture actual pixel color of the human [A]


• Get the actual dimension of the pattern card [A]

Todo (For week 9 & 10)

• Masks generated with critical points [K]
  
• Attach face into the generated model [K]
  
• Build client side [K]
  
  • Gather more clothes textures
  
  
  • Send sms data function
  
  
• CGI scripting [K]


• Build server side [A]
  
  • Sms & email function
  
  
  • Send data points to cgi script
  
  
• Integrating the system [A]

*See calendar for detailed description

Photo taking via webcam

A simple photo taking function was done with the help of this tutorial. The code were modified to add the countdown timer functionality. Currently, the image captured is in bitmapData format. The next version will need to convert the bitmapData into jpeg format for upload into server. Also, we will need to look into improving the quality of the image captured.

Clothes area masking

In this version, the masking of the shirt and pants area has been done. Some cloth textures obtained from mediostream and mayang were loaded dynamically into the flash. Currently, the masks were drawn out manually, the next version will draw the mask according to some critical points, so as to support different type of apparel such as blouse.

Pattern Card Detection and Analysis

After a face detection, we will also need to do the pattern card detection as well as analysis. The pattern card detection, is somewhat similar to a face detection. It requires numerous trainings where many samples are being fed into the training programme. This will result in an XML document, which is the main document for the recognition part. This vigorous training has been done by Kester.

This detection programme, uses similar algorithm like the face detection programme, in which a different XML document was used.

Next was the analysis portion. After the detection is completed, a smaller image will be generated by the programme will be used for the analysis. The smaller image is converted to a gray scale image, in another words, only black and white pixels present. This make the coding somewhat easier, since I only have to deal with 2 kinds of pixels.

The analysis went quite well and I had easily find the size of the pattern in pixels. This information is useful in calculating all real measurements such as the height and the shoulder-width of the user.

This is done using the line scanning technique discussed before.

Image Differencing Completed

I am now able to get a relative good difference in the two pictures. Supposed we had the 2 images below:

Picture 1:

Picture 2:

Using the OpenCV built-in function, which is a direct subtraction of array values. It is not of any value to us as it causes very funny colour to the picture. (see photo below)I rewrite the whole function which subtracts the array values, but maintain the picture's original colour. That will be a picture useful to us then. Below is the photo that uses my function. It will look better if a higher resolution photo would be used. The background could be any colour the user chooses and even another background by changing some numbers for the BGR of the pixel.

Weekly Update 7

Completed:

1) A test out of Model Generation using data points in Flash Interface. [K]

2) Extraction of face from picture/camera using Face Detection. [A]

3) Survey on Project Design. [A]

TODO:

1) To speed up the prototype 2 for presentation in Science Centre.

2) See Calendar for latest update.