Meeting: 30 JAN 2008 (w/ supervisor)

Session 1 Technical Report Review
ALAN checking with supervisor regarding the system flow diagram, use case diagram and content listings.

Below are the feedback from Supervisor :

System flowchart
- Should not have breakdown of function calls
- If there is input into a particular function, indicate it using text and arrow direction, do not use function block to indicate
- Advisable to include a brief explanation for the flow

CAPTCHA flow chart
- Change to sequence diagram
- include sequence number
- Advisable to include a brief explanation for the sequence

Use case diagram
- should have 2 users
*Customer
*Administrator for maintaining the product

OCR readings records acquired from product testing.
Sebastian checking with supervisor regarding which section of the technical report should we include the OCR reading result acquired from product testing.

OCR readings records can be either under
- Test plans
- Conclusions
- Product analysis

Brute force attack calculation.
Team checking with Supervisor regarding the brute force attack information.

Below are the calculation explained by Supervisor:
CAPTCHA text is formed by 8 characters with a choice of 46 characters in each position.

46 pow 8 = 20,047,612,231,936 sample space

To get brute force attack computation time required:

(sample space /2) . time taken

time taken = time needed by our system in order to validate a single end user’s answer.

Time taken is to the time needed by our system in order to validate a single end user’s answer.

Discuss with Supervisor regarding Session 1 presentation.
Supervisor reviewed the contents of team presentation slides and feedback :

- RUP methodology should be explained briefly.
- Highlight the differences between our CAPTCHA and those in the market
- Advisable to show the calculation of the brute force attack on our CAPTCHA.
- Advisable to explain the resources used to generate our CAPTCHA image
- Advisable to demo or show some OCR readings on our CAPTCHA
- Suggested using a wireless modem to provide access point to allow mobile phones to connect to.
- Advisable to provide handouts for final presentation


Progress Report submission by team leader
Sebastian submitted Progress Report for session 1 to Supervisor. Some of the suggestion by Supervisor regarding the report format.

- Advice to show our process base on gantt chart that we proposed in proposal.
- Advice to write a summary of what we have done in phase 1.
- Advice to write what we are going to do in phase 2.

Additional CAPTCHA design features suggestion.
LEXIS suggested include additional CAPTCHA feature which allow customers to edit the CAPTCHA design effects to suite their application. Supervisor has reviewed and will confirm with Adrian Choo to see whether the adding feature will be considers as part of the project scope or is the extra features.- Supervisor advice team to come out with a non-text based CAPTCHA in order to score high points.

New CAPTCHA design suggestion.
LEXIS suggested to design a animated CAPTCHA which require end users interaction. It requires end users to use the mouse pointer to point the path in order for an object X to move from A to B. In the meantime, there will be some objects like rock or tree which might block the object X from moving in a straight path. Hence it need end users to find a way in order to reach B which only human can do.

But this design will not be able to apply to mobile devices usage. Supervisor will confirm with Adrian Choo regarding the new design suggested which it only allows to run in computer platform.

Technical: MIDlet Session Handling

Found some example codes on Session Handling for MIDlet. 

Invoke the servlet...

Prints out the Session ID

This is rather last min and we have yet to fully understand the coding, thus we are not able to demo this portion in the end of Session 1 Presentation. 

Technical: JSP and Servlet Communication

The diagram below shows the best practices of JSP and Servlet communication implementation.

Updates: Captha Design v3.2

Symbols were added in to further increase the sample space. As we know certain symbols like "," and "." may look alike from certain angles/from additional background noises, we decided to choose 10 more obvious symbols to start up with. They are  { '!' , '@' , '#' , '$' , '%' , '^' , '&' , '*' , '=' , '?' }

Technical: Captcha Breakdown Structure

Below is the detailed breaked down of the captcha structure.

Technical: MIDlet JDBC & mySQL

The CLDC framework do not support JDBC APIS. To connect to databases we can call a Servlet from the MIDLets. Connection to database, running the queries and other functionalities have to be be implemented in the Servlet. The MIDlet passes the parameters like username, password in a string throught a DataOutputStream to servlet

Updates: Captcha Design v3.1

To tackle the bad design of the previous version, modifications are done by replacing the usage of random range of angles of values -45 to 45 degrees to randomly select 4 fixed different angles degrees. 

At least now we wouldn't have to worry about characters going upsize down/off sight.

Technical: Prototype using Texture

Based on the "blending text into the background" concept, we created several prototypes of the CAPTCHA image. Following the techniques highlighted in lex's post on Java3D Appearance/Texture,  we alter the appearance of the 3DText with the mapping of a texture. Using the same texture for both the TEXT and the BACKGROUND gives us the following results.

To conclude, it is either our mapping technique s**ks or ... considering the poor results and also justification that texture takes up space (may not be feasible for mobile phones) .. we decided to drop the idea for the time being. 

Updates: Captcha Design v3.0

Breaking up the whole string into individual characters. Also individual position with random angles for rotation of X, Y and Z axis ranging from -45 to 45 degrees for each. More randomness of appearance now.

Technical: Texture with Java3D

Following on our meeting with supervisor, we start to look more into Textures with Java3D. 

We have got a nicely done LetterA with 3D modeling software, and were wondering if the same results can be achieve using Java3D. 

Rendered using 3D Modeling Software. 

The 2D-image used for the texture

The Results

Now we have 3 different types of A, with the same image used for mapping but different technique. 

The TexCoordGeneration object is responsible for all parameters required for automatic texture coordinate generation. It is part of the Appearance component object.  

A simple example of code will be like

TexCoordGeneration t = new TexCoordGeneration(generation mode, format);

Texture Generation Mode

- OBJECT_LINEAR (a linear function in object coordinates)

- EYE_LINEAR (a linear function in eye coordinates) 

- SPHERE_MAP (spherical reflection mapping in eye coordinates)

Texture Format 

- TEXTURE_COORDINATE_2 (generates 2D texture coordinate)

- TEXTURE_COORDINATE_3 (generates 3D texture coordinate)

Blur? Nevermind, as the examples shown above. First A (from left) is using SPHERE_MAP; Middle A is using EYE_LINEAR and our Last A is using OBJECT_LINEAR.

Another example

All three A are mapped using the image (4th from left), using different Texture Generation Mode. 

Conclusion:

Texture can be applied. However, results were not as expected. Seem lotsa unfeasible work need to be done such as: 

1) individual letters need their own custom texture. A letter 'A' texture might not work for a letter 'B'

2) If we skew/rotate/transform the work, the texture cords will run as well..

3) texture image size are not small, still looking at whether it affect CPU time/loading time on mobile devices.

4) automatic coordinates mapping using the "Texture Generation Mode" seem not that outstanding, wondering if a manual mapping will do the job... meaning more extra work..  

Design Ideas: Blending Effect

We could use the same texture for both the background and text so that the text can blend in with the background while retaining its visibility. :) By using shades and lights, we can still shape out the character's outline. 

Idea derived from Predator the movie.

Can you see me? With & without my eyes glowing..

It's me, the predator!

Technical: 4 Fixed Angles Of Rotation

Carrying on from Sebastian, now we first try to randomly allocate the angles based on a range of values, however some angles tend to be not very visible to humans. Some resulted in a "overlapping or upsize down or side-viewed or offsighted view".  We then suggest to preset 4 suitable angles in our random sample space. The 4 angles is designed using Adobe Illustrator CS3. After obtaining the values for the respective X, Y, and Z axis. we have the following results. 

Meeting: 17 Jan 2008 (w/ supervisor)

Prototype review.
Demo prototype captcha in registering web page to Supervisor.

Webpage Demo

 

J2ME Demo

Captcha characters length change
Due to computer speed performance is getting faster and faster, captcha characters length will be extended to 8 char (initial was 6) to decrease the dictionary attacks rate.

36 x 36 x 36 x 36 x 36 x 36 x 36 x 36 = 2,821,109,907,456

New technology proposed
ALAN proposed AJAX (Asynchronous JavaScript and XML) to be implemented in our application. The purpose is to reduce the work load and time to reload the whole page. By implementing this new technique, only the captcha challenge will be reload upon requested.

Technical report
Checking with supervisor regarding the technical report details.

The following are the session 1 technical report submission:
1. Introduction
· Background of problems
· Project scope
· Project objective
· Project Authority
· Stake holders

2. Requirement Analysis
· Business Studies
· Use Case Functions
· Use Case Diagram

3. System Design
· Development Methodology
· Proposed Features
· System Requirements
· Architecture Design
· Context Diagram
· Data flow diagram
· Database Design
· Product breakdown structure
· System flow chart
· Security specification

Attendance :
- TAN HAN CHIANG
- SEAH CHOON YEE, SEBASTIAN
- CHEE SUEN SIANG, ALAN
- CHIA U-MENG, ADRIAN
- OW WAI LEONG, LEXIS

Updates: Captcha Design v2.1

Following up our Supervisor's comment, we increase the length of the the captcha text from 6 characters to 8 characters. This increases the sample space which also be better against brute force attacks.

Technical: Degrees Of Rotation Of Characters

We decided to add more complexity to the CAPTCHA string by having each character to it's own angle of rotation. 

The Maximum and minimum values of the angle of rotation are calculated and tested by Sebastian using Adobe Illustrator CS 3 (Macintosh Version).

The values of the 3 X-axis, Y-axis and Z-axis are as follows:

X-axis = -45 to 45

Y-axis = -45 to 45

Z-axis = -45 to 45

Alan will carry on from here to test the values on the Java3D program.

Technical: Servlet

Technical: MIDlet Image

We don't know why the image does not display when i replaced the image src to point to the invoking servlet.. Anyway, we tried another method, which is by using a contentConnection to download the image into bytes array, then create the image at the MIDlet's side. 

Temporary this is used as the solution to grab and display the captcha image. More optimization will be performed later... check us back for more explaination of the code.

Testing: Viewing Registration.jsp Form In Different Web Browsers

The CAPTCHA design is tested viewable in 5 most popular web browsers:
- Internet Explorer ver 7
- Mozilla FireFox ver 2
- Safari ver 3
- Netscape Navigator ver 9
- Opera ver 9

Below shows a screenshot of Registration.jsp in Safari ver 3.

Technical: MIDlet ImageItem

Display Image in MIDlet

We call the ImageItem constructor. It takes an Image object, a layout parameter and an alternate text string which is displayed if the device somehow unable to display the image. We did a test with png/gif/jpg.. guess what? despite it says only png is supported, our gif/jpg displays on the emulator device. 

Sample codes:

ImageItem img = new ImageItem( Image.createImage("../mac.png"), ImageItem.LAYOUT_CENTRE, "My Mac")

API here.  Also good explaination about it here.

Once alan is done with the captcha design picture generation, I will test it out. 

Technical: Servlet Output

After able to output the Java3D design as an image file, further research, tryouts and testing, we were able to output the design via Java Servlet.

The image tag results in a GET call to our servlet, which does the work necessary to generate the captcha image.

Now we gotta apply the same technique to replace this colour cube with our captcha text. Hopefully we can rush it by this coming thursday to show to our Supervisor. 

Technical: MIDlet Forms & Items

Forms and Items

Under Screen, we have the subclass called Form. It can hold lotsa items like StringItems, TextFields, and ChoiceGroups. Now we are more interested in StringItems and TextFields, as they are the ones who fits into our "Registration Form".

There are example codes on UI (User Interfaces) that comes with the Mobile Toolkit. 

Ok we already have the example, now we do our "Copy and Modify", and of cos ... redesign the appearance of the form. Unlike the example with variant textfield length, we make it look something like this.

Looks better? 1 line for 1 Textfield.

Now we are done with UI portion. Next we gotta add in Commands for user interaction. ok now back to research on that. 

Technical: Output Java3D as Image

We initially thought that Java3D can only be displayed on a browser thru a Java Applet. This worries us as mobile browsers DON'T support it. After a long long long period of research, we finally found a way to output the Java3D result as an image file. 

We can save a BufferImage object using write method of the ImageIO class. Firstly, we import the necessary class,

import javax.imageio.ImageIO;

The write method is like this:

public static boolean write(RenderedImage im, 

String formatName,

File output)

  throws IOException

As you can see, im is the RenderedImage to be written, formatName is the String which tells us the format (i.e png or jpg) and output is the file object to be written to. An example usage of the method for PNG file format shown below:

ImageIO.write(captchaImage, "png", file);

The image below shows the resultant jpg image. Now will pass this portion of code to Alan, for him to try on his Captcha 3D text and also try to produce this image by invoking a Java Servlet. 

Meeting: 12 Jan 2008 (Group)

Agenda: System Design and Implementation

The following were discussed:

• System Implementation
  - Discuss on the system process flow.
  Below diagram show how the users are validated through our captcha system


• Captcha Design
  - Showing some sample of simple Captcha text designed in JAVA3D by Lexis and Alan.
  
  
  - Discuss on the communication between Catptcha and clients HTML form.
  Captcha system required to be designed with application independence features. Customers application such as registration form, login form, email and etc will just needed to call the Captcha function in order to retrieve a Captcha challenge in image form.
  
  - Java image encoder prototype is developed by Lexis and Alan.
  The Captcha designed in Java3D will be able to output as JPEG format image. Hence we can display the captcha image in both computer web browsers and MIDLET application. We can eliminate the use of M3D technology and only 1 piece of code needed to be maintainted.

Attendence:
- SEAH CHOON YEE, SEBASTIAN
- CHEE SUEN SIANG, ALAN
- CHIA U-MENG, ADRIAN
- OW WAI LEONG, LEXIS

Updates: Versioning Control

Version Control software is installed and configure in the server. This is used for tracking our codes and documents.

Updates: New Website design

Welcome to the re-designed website of Epic4Security Inc.

Following the MSN meeting on 05 Jan 2008, Lexis and I set to work on getting the new website up.


We have chosen black, dark blue, gold, yellow, white to be the colour scheme, emphasizing more towards the marketing/business, like to be seen as innovators of the market/reflects on our brand identity and make the sale.

The website can be found at https://www.epic4security.no-ip.com/

Technical: 3D Transformation

Today I will talk about 3D Transformation and how to create in Java3D.

A 3D transformation is basically moving a 3D point from one location to another. Examples of transformation are Rotations, Scales, Translations, and Reflections. Before we begin, we need to import the following:

import javax.media.j3d.Transform3D;

import javax.media.j3d.TransformGroup;

The scene graph group node that contains a Transform3D object is an instance of the TransformGroup.

The transformation performed in the example below simply rotates the cube a specified number of degrees about the x and y axis. 

public void createTransformation() 

{

/** Create a 3D transformation that will 

       *   rotate the cube a specified number of degrees on the x & y axis

   */ 

Transform3D transform3D = new Transform3D();

transform3D.rotX(xRotationAngle);

transform3D.rotY(yRotationAngle);

    

/** Create the transform group node and add the transformation

 *   to the node. Add the transformation group to the scene graph.

 */

    TransformGroup transformGroup = new TransformGroup(transform3D);

    sceneGraph.addChild(transformGroup);  

/** Add a colored cube to the transform group node. */

    transformGroup.addChild(new ColorCube(cubeScale));

}

The first three lines of code create a Java3D transformation that will be used to rotate a 3D object about the x-axis and the y-axis. The method used to perform the rotation, rotX() / rotY() accepts a single double precision floating point number that specifies the angle in radians. Adding on, a rotZ() will handle the z-axis.

The next two lines creates a transform group node with the specified 3D transformation. Once this group node has been properly initialized, it is added to the scene graph.

The last line of code simply adds the colored cube to the transform group node. The transform group node now has two children: the 3D transformation object and a colored cube.

And we have our HelloJava3Db. The diagram below shows the resultant output.

Updates: New Epic4Security Logo

To position our product and brand name more successfully, a new Epic4Security banner with slogan "the best protection for your business" was created.

Our LOGO

It's a symbol of a Lock, dictating security. Within the lock, there is the letter "E". It means data is Encrypted. The golden colour give people the feeling of a "impenetrable" system.

 

Our Banner (Navy Blue version)

White version (used for minutes/letter head)

All created using Adobe Photoshop CS3.

Updates: Captcha Design v2.0

Modifying and Improvement to our Captcha Design. And Yes, the striking red background is removed. Now we are almost close to achieve the effect as described in the proposal. 

Updates: Captcha Design v1.0

Following up the design stated in our proposal, we try out first by creating a 3D String representation. Our first Captcha Design is up. We applied the basics of the examples found;

1) Text3D + Font3D

2) Appearance + Shape

3) Transformation + Transformation Group

Now we have our Java3D Text String.

Technical: Applied Colouring to Text

Colourings can be applied to the text to change the appearing colour, thus making it more creative and lively.

Using the Appearance object. We must first import the class

- import javax.media.j3d.Appearance

/**   Begin of sample codes   */

Appearance textAppear = new Appearance();
ColoringAttributes textColor = new ColoringAttributes();
textColor.setColor(1.0f, 0.0f, 0.0f);
textAppear.setColoringAttributes(textColor);
textAppear.setMaterial(new Material());

/**   End of sample codes   */

As you can see above, the setColor method interprets the 3 floats together as an RGB colour.

The appearance object actually defines all rendering state, like material, textures as well.. more study will be done.

Appearance API here.