Students : Hiba Ghannam Hawa OsamaSuperviser: Haya Sammaneh

Outline• Idea• Scenario• Development Tools and Programming Languages• Features• Future work

Idea : Why from Desktop to web Two Basic Ideas :

• Maintenance - web based applications need to be installed only once where as desktop applications are to be installed separately on each computer. Also updating the applications is cumbersome with desktop applications as it needs to be done on every single computer which is not the case with web applications.

• Ease of use - desktop applications are confined to a physical location and hence have usability constraint. Web applications development on the other hand makes it convenient for the users to access the application from any location using the Internet.

Idea cont … But two problems with web applications :• web-based user interfaces base on server-

side HTML generation are typically not as responsive.• Fewer hot keys, require more use of the mouse and are

unreliable when handling large files

Why Smart Client

• “Smart" clients, provides the best of both desktop and web applications . It Utilizes Local Resources and it is Offline Capable .

Sequence diagram

User

Canvas WebsiteHard Disk Camera GPU

Start Browse Image

Copy Image URL

Start Camera

Display

Display

Display

Ask for filter

Apply filter

Development Tools and Programming Languages

• C#• Microsoft Silverlight• Microsoft Expression Blend• XAML• High Level shading Language• DirectX• Shazzam - Shader Editor • Web service

Features

• Full features of smart client applications.• Look and feel of Photoshop Program as a

desktop application.• Image editing .• Image filtering • Drawing .• Multi layer photo editor.• Save your work as an image or a project.

Full features of smart client applications

Full features of smart client applications.Since our photo editor is smart client then it is :• Offline application.• Use local resources .• Dos not require installation.

Look and feel of Photoshop Program as a desktop application

Image Editing

Open Image• Drag and Drop• Local user Computer• Url• Camera

Rotate Image• Rotate Canvas clock wise or counter clock wise• Flip Canvas vertical or horizontal

Cont…

Resize

• resize image to specific width and height• Resize the Canvas

Undo Redo

• We all make mistakes Having the ability to undo and then possibly redo mistakes in any application is extremely convenient because saves us all time from having to start over

Cont..

• Cut• Copy• Paste• common short keys to handle common command for

example, the copy is done when the user press"Ctrl+C"

Image Filtering

Directional Blur• This filter is used to reduce the detail of the image

Pixelate• This filter is used to Alter the number of pixel in an

image

Old PictureLightStreek• This filter is used to control the brightness of an

image

Filtering

SketchPencilStrock• This filter used to convert the Picture as Pencil

Sketch image• Red eye Removal

Drawing

• As any photo editor there is many tools for drawing as examples ellipses , rectangles , free drawing and you have multiple brushes and patterns . But the interesting thing is the performance in this web application.

Multi layer photo editor

One of the most important features and functionality of the application and it has many features :

• Add any shape to a new layer .• Controlling the properties of each shape like size and

filling• Hide any layer • Delete any layer • Move any layer• Image filtering to any image layer or part of layer• Change size of any layer

Saving

• Save Image to local user computer• Save all the work as project to data base

Future work

• Adding another graphics and image processing tools like different selection tools .

• Add another multi-layer functionality • Applying filters to videos and individual frames

in the video• Multi Touch website• Cloud computing to give the user large and

efficiency space to store images• Building our file format