rep

INTEGRATING AJAX AND WEB SERVICES FOR CO-OPERATIVE IMAGE EDITING
CS 708 Seminar

MARIAM VARGHESE (Roll No. 05085) B. Tech. Computer Science & Engineering

College of Engineering Kottarakkara Kollam 691 531 Ph: +91.474.2453300 http://www.cek.ihrd.ac.in [email protected]

Certificate

This is to certify that this report titled Integrating AJAX and web services for co-operative image editing is a bonafide record of the CS 708 Seminar work done by Miss.Mariam Varghese, Reg No. 10264040, Seventh Semester B. Tech. Computer Science & Engineering student, under our guidance and supervision, in partial fulfillment of the requirements for the award of the degree, B. Tech. Computer Science and Engineering of Cochin University of Science & Technology.

October 8, 2008

Guide

Coordinator & Dept. Head

Miss Geetha Raj R Lecturer Dept. of Computer Science & Engg.

Mr.Ahammed Siraj K K Asst. Professor Dept. of Computer Science & Engg.

Acknowledgment
I express my whole hearted thanks to our respected principal Dr.Jacob Thomas,our seminar coordinator Mr.Ahammed Siraj K K,Head of the Department, for making my seminar successful. I wish to express my sincere thanks to my guide Miss.Geetha Raj R,Lecturer in computer science Department , for providing valuable help and support for my seminar. I thank all faculty members of computer science engineering department in College of Engineering, Kottarakara for their co-operation in completing my seminar. My sincere thanks to all those well wishers and friends who have helped me during the course of the seminar work and have made it a great success. Above all I would like to acknowledge with thanks ”THE LORD ALMIGHTY”,the foundation of all wisdom who have been wonderfully guiding me step by step.

MARIAM VARGHESE

Abstract Ajax is a group of web related technologies used for providing interactive web applications.A key advantage of AJAX application is that they look and more like desktop applications.Proponents argue that AJAX applications perform better than traditional web programs.As an example AJAX application can add or retrieve a new data for a page it is working with and the page will update immediately without reloading. The existing technologies such as SOAP for Web service communication,Web Services Description Language (WSDL) for Web services interface description and UDDI for Web service publishing and searching and so on ,are based on XML-centric approaches,so web services can implement loosely coupled distributed Web applications across different platform. Because technologies that support both AJAX and Web services are XML based the two can leverage each others strengths.Our system integrates the two for Web based co-operative image editing. During co-operative image editing multiple authors can simultaneously work on editing an image file in either Synchronous or asynchronous co-operative modes.In Synchronous cooperative mode,when an author modifies the image,other authors can see the modifications instantly and perform their own edits immediately.In asynchronous co-operative mode author must make modifications sequentially-that is author must finish editing the image file and submit the revised file to the server before another author can obtain the file and edit it.Co-operative image editing system can employ one of 3 types of architecture-centralised,distributed,hybrid of the two.Our integration frame work involves four kinds of actors-management web sevices,image web services,visualization clients and proxy servlets.A visualization client can interact with the proxy servlet to complete the following tasks for image file such as import,export,modify,update and submit. Because this integration framework makes use of AJAX and Web Services to resolve the problem of message exchange delays and browser security limitations,it increases Web based co-operative image editing’s effectiveness.In future this integration frame work can be used to build generic co-operative business processes.

i

Contents
1 INTRODUCTION 1 2 TRADITIONAL WEB APPLICATION COMMUNICATION FLOW 2 3 AJAX STYLE COMMUNICATION FLOW 4 AJAX WORLD IN ACTION 5 COMPONENT TECHNOLOGIES 3 4 6

6 INTEGRATING AJAX AND WEB SERVICES FOR CO-OPERATIVE IMAGE EDITING 11 7 IMAGE EDITOR FEATURES 13 20 21 24 29 29 30 31 32

8 CO-OPERATIVE IMAGE EDITING 9 INTEGRATION FRAMEWORK 10 ACTORS 11 ADVANTAGES OF AJAX 12 DISADVANTAGES OF AJAX 13 FUTURE SCOPE 14 CONCLUSION REFERENCES

ii

1

INTRODUCTION

AJAX(Asynchronous Javascript and XML) is a group of interrelated web development techniques used for creating better, faster and more interactive web applications or rich Internet applications. The name AJAX was given by Jesse James Garrett.With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is retrieved using the XMLHttpRequest object.With this object, JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user friendly. AJAX is a browser technology independent of web server software. AJAX is not a new programming language, but a new way to use existing standards. In the article that coined the term Ajax,Jesse James Garrett explained that it refers specifically to these technologies: XHTML and CSS for presentation the Document Object Model for dynamic display of and interaction with data XML and XSLT for the interchange and manipulation of data, respectively the XMLHttpRequest object for asynchronous communication JavaScript to bring these technologies together It is such an exciting technology that it’s already found use in Googles most popular applications, such as Gmail and Google Maps. All of the major products Google has introduced over the last years Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps are Ajax applications.Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.With conventional JavaScript when you fetch and send information to the server, you need to wait for a response before the user can do anything on the Webpage. Once the browser receives this information, the webpage will blink a few times and refresh.

1

2 TRADITIONAL WEB APPLICATION COMMUNICATION FLOW
First a page is loaded. Next the user performs some action such as filling out a form or clicking a link. The user activity is then submitted to a server-side program for processing while the user waits, until finally a result is sent, which reloads the entire page.This model is slow, as it needs to retransmit data that makes up the complete presentation of the Web page over and over in order to repaint the application in its new state.

Figure 1: Traditional Web application communication flow

2

3 AJAX STYLE COMMUNICATION FLOW
Ajax-style applications use a significantly different model where user actions trigger behind the scenes communication to the server fetching just the data needed to update the page in response to the submitted actions. This process generally happens asynchronously, thus allowing the user to perform other actions within the browser while data is returned. Only the relevant portion of the page is repainted.In Ajax-style Web application typically JavaScript invokes communication to the server, often using the XMLHttpRequest (XHR) object. After receiving a request, a server-side program may generate a response in XML, or alternate formats such as plain text, HTML fragments, or JavaScript Object Notation (JSON) being passed back to the browser. Consumption of the received content is typically performed using JavaScript in conjunction with Document Object Model (DOM) methods, though in some rare cases you see native XML facilities in the browser used.

Figure 2: Ajax-style communication flow

3

4

AJAX WORLD IN ACTION

To send off a request to the server ,we use the open( ) method and the send( ) method.The open( ) method takes 3 arguments.The first argument defines which method to use when sending the request(GET or POST). The second argument specifies the URL of the server side script.The third argument specifies that the request should be handled asynchronously.The send( ) method sends the request off the server.We will press a button and trigger an asynchronous communication request using an XMLHttpRequest (XHR) object and the Web server will issue an XML response which will be parsed and displayed in the page. The whole process is overviewed in Figure. To trigger the action, a simple form button is used which, when clicked, calls a custom JavaScript function sendRequest( ) that will start the asynchronous communication <form action=”#”> <input type=”button” value=”Say Hello” onclick=”sendRequest();” /> < /f orm >

Figure 3: Ajax world in action

4

When the sendRequest function is invoked by the user click, it will first try to instantiate an XMLHttpRequest object to perform the communication by invoking another custom function createXHR, which attempts to hide version and cross-browser concerns. The function uses try-catch blocks to attempt to create an XHR object. It first tries to create it natively as supported in Internet Explorer 7.x, Safari, Opera, and Firefox. Then, if that fails, it tries using the ActiveXObject approach supported in the 5.x and 6.x versions of Internet Explorer. After creating the request, a callback function, handleResponse, is defined which will be invoked when data becomes available, as indicated by the onreadystatechange event handler. The callback function employs a closure that captures variable state so that the code has full access to the XHR object held in the variable xhr once handleResponse is finally called. xhr.onreadystatechange = function(){handleResponse(xhr);}; Finally, the request is sent on its way using the send() method of the previously created XHR object. Ajax does not favor or require any particular server-side language or framework. On the server-side, we first emit some HTTP headers to indicate that the result should not be cached. Next, the appropriate Content-Type HTTP header is set to text/xml indicating that XML will be returned. Finally, an XML packet is created containing a greeting for the user that also includes the users IP address and local system time to prove that the request indeed went out over the network. Once the browser receives data from the network, it will signal such a change by modifying the value of the readyState property of the XHR object. Now, the event handler for onreadystatechange should invoke the function handleResponse. In that function, the state of the response is inspected to make sure it is completely available as indicated by a value of 4 in the readyState property. It is also useful to look at the HTTP status code returned by the request. Ensuring that the status code is 200 gives at least a basic indication that the response can be processed. With the XML response received, it is now time to process it using standard DOM methods to pull out the message string. Once the message payload is extracted, it is output to the< div >tag named responseOutput.

5

5

COMPONENT TECHNOLOGIES

Most of Ajax’s component Web technologies were developed and standardized during the past 10 years. These technologies have improved recently, making them more suitable for enterprise use. Dynamic HTML:- Ajax applications take advantage of dynamic HTML,which consists of HTML, cascading stylesheets, and JavaScript glued together with the document object model. The technology describes HTML extensions that designers can use to develop dynamic Web pages that are more animated than those using previous HTML versions. For example, when a cursor passes over a DHTML page, a color might change or text might get bigger. Also, a user could drag and drop images to different places. XML:- Ajax uses XML(Extensible Markup Language) to encode data for transfer between a server and a browser or client application. The W3C (World Wide Web Consortium)started work on XML in 1996 to enable cross-platform data interoperability over the Internet. The consortium approved the standards first version in 1998. XML is a markup metalanguage that can define a set of languages for use with structured data in online documents. Any organization can develop an XML-based language with its own set of markup tags. It allows users to define their own elements. Its primary purpose is to facilitate the sharing of structured data across different information systems, particularly via the Internet and it is used both to encode documents and to serialize data.By adding semantic constraints, application languages can be implemented in XML.Moreover, XML is sometimes used as the specification language for such application languages. There are two levels of correctness of an XML document: 1. Well-formed:- A well-formed document conforms to all of XML’s syntax rules. For example, if a start-tag appears without a corresponding end-tag, it is not well-formed. A document that is not well-formed is not considered to be XML; a conforming parser is not allowed to process it. 2. Valid:- valid document additionally conforms to some semantic rules. These rules are either user-defined, or included as an XML schema.For example, if a document contains an undefined element, then it is not valid; a validating parser is not allowed to process it. Entity references:-An entity in XML is a named body of data,

6

usually text. Entities are often used to represent single characters that cannot easily be entered on the keyboard.Special characters can be represented either using entity references, or by means of numeric character references. An entity reference is a placeholder that represents that entity. It consists of the entity’s name preceded by an ampersand (”&”) and followed by a semicolon (”;”). XML has five predeclared entities:

Figure 4: predeclared entities of XML
Additional entities can be declared in the document’s Document Type Definition(DTD).Declared entities can describe single characters or pieces of text, and can reference each other. Numeric character references:-Numeric character references look like entity references, but instead of a name, they contain the ”#” character followed by a number. Unlike entity references, they are neither predeclared nor do they need to be declared in the document’s DTD. They have typically been used to represent characters that are not easily encodable, such as an Arabic character in a document produced on a European computer. XML Schema:-An XML schema is a description of a type of XML document, typically expressed in terms of constraints on the structure and content of documents. A number of standard XML schema languages have emerged for the purpose of formally expressing such schemas, and some of these languages are XML-based, themselves. Well-tested tools exist to validate an XML document,the tool automatically verifies whether the document conforms to constraints expressed in the schema. Some of these validation tools are included in XML parsers.Other usages of schemas exist: XML editors, can use schemas to support the editing process. Cascading stylesheets:- A W3C standard since 1996, CSS(Cascading StyleSheets)gives Web site developers and users more control over how

7

browsers display pages. Developers use CSS to create stylesheets that define how different page elements, such as headers and links,appear. Multiple stylesheets can apply to the same Web page. Document object model:- The DOM, a W3C standard since 1998, is a programming interface that lets developers create and modify HTML and XML documents as sets of program objects, which makes it easier to design Web pages that users can manipulate. The DOM defines the attributes associated with each object, as well as the ways in which users can interact with objects. DHTML works with the DOM to dynamically change the appearance of Web pages. Working with the DOM makes Ajax applications particularly responsive for users. JavaScript:- Released in 1995 by Netscape and Sun, JavaScript interacts with HTML code and makes Web pages and Ajax applications more active.JavaScript is a scripting language most often used for client-side web development. For example, the technology can cause a linked page to appear automatically in a popup window or let a mouse rollover change text or images. Developers can embed JavaScript, which is openly and freely available, in HTML pages. Ajax uses asynchronous JavaScript, which an HTML page can use to make calls asynchronously to the server from which it was loaded to fetch XML documents. This capability lets an application make a server call, retrieve new data, and simultaneously update the Web page without having to reload all the contents, all while the user continues interacting with the program.Enterprise application developers have become more interested in working with JavaScript because users have removed some of the technology’s bugs and developed workarounds for various problems. Because JavaScript is a cross-platform scripting language, Ajax applications require no plug-ins, unlike Macromedia Flash and other proprietary Web application technologies. The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Because JavaScript code can run locally in a user’s browser (rather than on a remote server), it can respond to user actions quickly, making an application feel more responsive. Furthermore, JavaScript code can detect user actions .Applications such as Gmail take advantage of this: much of the user-interface logic is written in JavaScript, and JavaScript dispatches requests for information (such as the content of an e-mail message) to the server. A JavaScript engine (also known

8

as JavaScript interpreter or JavaScript implementation) is an interpreter that interprets JavaScript source code and executes the script accordingly.The most common host environment for JavaScript is a web browser.A JavaScript web server would expose host objects representing an HTTP request and response objects, which a JavaScript program could then manipulate to dynamically generate web pages. XMLHttpRequest:- At the heart of AJAX is the XHR object. Systems can use JavaScript-based XMLHttpRequest objects to make HTTP requests and receive responses quickly and in the background, without the user experiencing any visual interruptions. Thus, Web pages can get new information from servers instantly without having to completely reload.Once the XHR object is created to invoke an XHR request, all browsers use the same syntax: xhr.open(method, url, async [ ,username, password ]) where method is an HTTP method like GET, POST, HEAD. While these values are not case sensitive, they should be in uppercase as per the HTTP specification. The parameter url is the particular URL to call and maybe either relative or absolute. The async parameter is set to true if the request is to be made asynchronously or false if it should be made synchronously. If not specified, the request will be made asynchronously. The optional parameters username and password are used when attempting to access a resource that is protected with HTTP. Google suggest is using XMLHttpRequest object to create a very dynamic web interface. When you start typing in Googles search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.Different browsers use different methods to create the XMLHttpRequestObject. Internet Explorer uses an ActiveXObject, while other browsers uses the built in JavaScript object called XMLHttp Request. First create a variable to hold the XMLHttpRequest object.Then create the object with xhr.onreadystatechange = function() {handleResponse(xhr);}; XMLHttp=new XMLHttpRequest( );This is for Firefox,Opera, and Safari browser. XMLHttp=new ActiveXObject(MSxml2.XMLHTTP) for Internet Explorer 6.0+ XMLHttp=new ActiveXObject(Microsoft.XMLHTTP) for Internet Explorer 5.5+ If none of the three methods work,the user has a very outdated browser and he or she will get an alert stating that the browser doesnt support AJAX.

9

Three important properties of XMLHttpRequestObject 1. The onreadystatechange property:- After a request to the server,we need a function that can receive the data that is returned by the server.The onreadystatechange property stores the function that will process the response from a server. xmlHttp.onreadystatechange=function( ) { } 2. The readyState property:- The ready state property holds the status of the server’s response.Each time the ready state changes,the onreadystatechange function will be executed.Here are the possible values of readystate property

Figure 5: possible values of readystate property
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server’s response } } 3. The responseText property:The data sent back from the server can be retrieved with the responseText property.In our code, we will set the value of our ”time” input field equal to responseText: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }

10

6 INTEGRATING AJAX AND WEB SERVICES FOR CO-OPERATIVE IMAGE EDITING
AJAX (Asynchronous JavaScript and XML) is a powerful Web development model for browser-based Web applications.Technologies that form the AJAX model, such as XML, JavaScript, HTTP, and XHTML, are individually widely used and well known. However, AJAX combines these technologies to let Web pages retrieve small amounts of data from the server without having to reload the entire page . This capability makes Web pages more interactive and lets them behave like local applications.Web services essentially are universally accessible software components deployed on the Web and designed to support interoperable machine-to-machine interaction over a network .The existing technologies, such as SOAP for Web services communication, Web Services Description Language (WSDL) for Web services interface description, and UDDI for Web services publishing and searching and so on, are based on XML-centric approaches, so Web services can implement loosely coupled distributed Web applications across different platforms. Because technologies that support both AJAX and Web services are XML-based, the two can leverage each others strengths. More and more companies and organizations are taking advantage of this relationship, working to improve their Web applications through AJAX and Web services.Our system integrates the two for Web-based cooperative image editing. Image editing:-Image editing encompasses the processes of altering images, whether they be digital photographs, traditional analog photographs, or illustrations. Before digital scanners and cameras became mainstream, traditional analog image editing was known as photo retouching, using tools such as an airbrush to modify photographs, or editing illustrations with any traditional art medium.Graphic software programs, which can be broadly grouped into vector graphics editors,raster graphics editors, and 3d modelers, are the primary tools with which a user may manipulate, enhance, and transform images. Raster images are stored in a computer in the form of a grid of picture elements, or pixels. These pixels contain the image’s

11

color and brightness information. Image editors can change the pixels to enhance the image in many ways. The pixels can be changed as a group, or individually, by the sophisticated algorithms within the image editors. The bitmap graphics editors, are often used to alter photographs and other raster graphics. Vector graphics software are used to create and modify vector images, which are stored as descriptions of lines, Bezier splines, and text instead of pixels. It is easier to rasterize a vector image than to vectorize a raster image. People like vector images because they are easy to modify, containing descriptions of the shapes in them for easy rearrangement.Due to the popularity of digital cameras, image editing programs are readily available. Minimal programs, that perform such operations as rotating and cropping are often provided within the digital camera itself. The more powerful programs contain functionality to perform a large variety of advanced image manipulations. Popular raster-based digital image editors include Adobe Photoshop, GIMP, Corel Photo Paint, Paint Shop Pro and Paint.NET. Digital data compression:-Many image file formats use data compression to reduce file size and save storage space. Digital compression of images may take place in the camera, or can be done in the computer with the image editor. When images are stored in JPEG format, compression has already taken place. Both cameras and computer programs allow the user to set the level of compression. Some compression algorithms, such as those used in PNG file format, are lossless, which means no information is lost when the file is saved. The JPEG file format uses a lossy compression algorithm- The greater the compression, the more information is lost, ultimately reducing image quality or detail. JPEG uses knowledge of the way the brain and eyes perceive color to make this loss of detail less noticeable.

12

7

IMAGE EDITOR FEATURES

(a) Selection:-Selection is a method of selecting part(s) of an image, thus applying a change selectively without affecting the entire picture. Most graphics programs have several means of accomplishing this, such as a marquee tool, lasso, vector-based pen tools as well as more advanced facilities such as edge detection, masking, alpha compositing, and color and channel-based extraction. (b) Layers:-Another feature common to many graphics applications is that of Layers, which are analogous to sheets of transparent acetate (each containing separate elements that make up a combined picture), stacked on top of each other, each capable of being individually positioned, altered and blended with the layers below, without affecting any of the elements on the other layers. (c) Image size alteration:-Image editors can resize images in a process often called image scaling, making them larger, or smaller. High image resolution cameras can produce large images which are often reduced in size for Internet use. Image editor programs use a mathematical process called resampling to calculate new pixel values whose spacing is larger or smaller than the original pixel values. Images for Internet use are kept small, say 640 x 480 pixels which would equal 0.3 ,megapixels. (d) Cropping an image:-Digital editors are used to crop images. Cropping creates a new image by selecting a desired rectangular portion from the image being cropped. The unwanted part of the image is discarded. Image cropping does not reduce the resolution of the area cropped. Best results are obtained when the original image has a high resolution. A primary reason for cropping is to improve the image composition in the new image.

13

Figure 6: a)uncropped image b)cropped image
(e) Histogram:-Image editors have provisions to create an image histogram of the image being edited. The histogram plots the number of pixels in the image (vertical axis) with a particular brightness value (horizontal axis). Algorithms in the digital editor allow the user to visually adjust the brightness value of each pixel and to dynamically display the results as adjustments are made. Improvements in picture brightness and contrast can thus be obtained.

Figure 7: histogram of sunflower image
(f) Noise Removal:-Image editors may feature a number of algorithms which can add or remove noise in an image. JPEG artifacts can be removed; dust and scratches can be removed and an image can be de-speckled. Noise removal merely estimates the state of the scene without the noise and is not a substitute for obtaining a ”cleaner” image. Excessive noise

14

reduction leads to a loss of detail, and its application is hence subject to a trade-off between the undesirability of the noise itself and that of the reduction artifacts.Noise tends to invade images when pictures are taken in low light settings. A new picture can be given an ’antiquated’ effect by adding uniform monochrome noise. (g) Removal of unwanted elements:-Most image editors can be used to remove unwanted branches, etc, using a ”clone” tool. Removing these distracting elements draws focus to the subject, improving overall composition.

Figure 8: Removal of unwanted elements
(h) Selective color change:-Some image editors have color swapping abilities to selectively change the color of specific items in an image, given that the selected items are within a specific color range. (i) Image Orientation:-Image editors are capable of altering an image to be rotated in any direction and to any degree. Mirror images can be created and images can be horizontally flipped or vertically flopped. A small rotation of several degrees is often enough to level the horizon, correct verticality or both. Rotated images usually require cropping afterwards, in order to remove the resulting gaps at the image edges.

15

Figure 9: Image orientation
(j) Perspective correction and distortion:- Some image editors allow the user to distort (or ”transform”) the shape of an image. While this might also be useful for special effects, it is the preferred method of correcting the typical perspective distortion which results from photographs being taken at an oblique angle to a rectilinear subject. Care is needed while performing this task, as the image is reprocessed using interpolation of adjacent pixels, which may reduce overall image definition. The effect mimics the use of a perspective correction lens, which achieves a similar correction in-camera without loss.

Figure 10: Perspective correction

16

(k) Lens correction:-Photo manipulation packages have functions to correct images for various lens distortions including pincushion, fisheye and barrel distortions. The corrections are in most cases subtle, but can improve the appearance of some photographs. (l) Sharpening and softening images:-Graphics programs can be used to both sharpen and blur images in a number of ways, such as unsharp masking or deconvolution Portraits often appear more pleasing when selectively softened (particularly the skin and the background) to better make the subject stand out. This can be achieved with a camera by using a large aperture, or in the image editor by making a selection and then blurring it. Edge enhancement is an extremely common technique used to make images appear sharper, although purists frown on the result as appearing unnatural. (m) Selecting and merging of images:- Many graphics applications are capable of merging one or more individual images into a single file. The orientation and placement of each image can be controlled.When selecting a raster image that is not rectangular, it requires separating the edges from the background, also known as silhouetting. This is the digital version of cutting out the image.Clipping paths may be used to add silhouetted images to vector graphics or page layout files that retain vector data. Alpha compositing, allows for soft translucent edges when selecting images. There are a number of ways to silhouette an image with soft edges including selecting the image or its background by sampling similar colors, selecting the edges by raster tracing, or converting a clipping path to a raster selection. Once the image is selected, it may be copied and pasted into another section of the same file, or into a separate file. The selection may also be saved in what is known as an alpha channel.A popular way to create a composite image like this one is to use transparent layers.Performing a merge in this manner preserves all of the pixel data on both layers to more easily enable future changes (such as adding the second individual) in the new merged image.

17

Figure 11: merged image

Figure 12: original image
(n) Slicing of images:-A more recent tool in digital image editing software is the image slicer. Parts of images for graphical user interfaces or web pages are easily sliced, labeled and saved separately from whole images so the parts can be handled individually by the display medium. This is useful to allow dynamic swapping via interactivity or animating parts of an image in the final presentation. (o) Special effects:-Image editors usually have a list of special effects that can create unusual results. Images may be skewed and distorted in various ways. Scores of special effects can be applied to an image which include various forms of distortion, artistic effects, geometric and texture effects, and combinations thereof. (p) Change color depth-It is possible, using software, to change the color depth of images. Common color depths are 2, 4, 16, 256, 65.5 thousand and 16.7 million colors. The JPEG and PNG image formats are capable of storing 16.7 million

18

colors (equal to 256 luminance values per color channel). In addition, grayscale images of 8 bits or less can be created, usually via conversion and down-sampling from a full color image. (q) Contrast change and brightening:-Image editors have provisions to change the contrast of images and brighten or darken the image. Underexposed images can be often be improved by using this feature. Recent advances have allowed more intelligent exposure correction whereby only pixels below a particular luminosity threshold are brightened, thereby brightening underexposed shadows without affecting the rest of the image. (r) Color adjustments:-The color of images can be altered in a variety of ways. Colors can be faded in and out, and tones can be changed using curves or other tools. The color balance can be improved, which is important if the picture was shot indoors with daylight film, or shot on a camera that with an incorrectly adjusted white balance. Special effects, like sepia and grayscale can be added to an image. In addition, more complicated procedures such as the mixing of color channels are possible using more advanced graphics editors.The red-eye effect, which occurs when flash photos are taken when the pupil is too widely open (thus reflecting back the color of the blood-rich retina), can also be eliminated at this stage.

Figure 13: An example of color adjustment using Photoshop
(s) Printing:-Controlling the print size and quality of digital images requires an understanding of the pixels-per-inch (ppi) variable that is stored in the image file and sometimes used to control the size of the printed image.

19

8 CO-OPERATIVE IMAGE EDITING
During cooperative image editing, multiple authors can simultaneously work on editing an image file in either synchronous or asynchronous cooperative modes. In synchronous cooperative mode, when an author modifies the image, other authors can see the modifications instantly and perform their own edits immediately.All authors share the same information about the image during the editing. In asynchronous cooperative mode,authors must make modifications sequentially that is, an author must finish editing the image file and submit the revised file to the server before another author can obtain the file and edit it. For example, take the scenario of two people working cooperatively on designing an automobile. If they’re designing a common part, such as head-lamps, they should work in synchronous cooperative mode to exchange ideas quickly. If they are each responsible for designing different parts one designs the headlamps and the other designs the doors they could work in asynchronous cooperative mode.Synchronous cooperative mode is clearly the more ideal option for cooperative image editing, but, as previous work has shown, it comes with challenges such as excessive bandwidth use and message exchange delays.We have chosen this mode for our cooperative image-editing system and, through our AJAX Web services integration framework, solved the challenges it poses.

20

9

INTEGRATION FRAMEWORK

In developing our integration framework, we considered the architecture and the actors. Architecture A cooperative image-editing system can employ one of three types of architectures: centralized, distributed, or a hybrid of the two. i. Centralized architecture:-A server manages the image files and the authors editing the image files.The image files are saved on the server, and the authors, as the clients,obtain the image file from the server and send modifications to the server in real time.The server handles all modifications (resolving any write conflicts that might occur and broadcasts the conciliated, or agreed upon, modifications to the authors. Note that when the server is down, the system doesn’t work. Each author can join or leave the image-editing at any time. Some traditional computer-supported cooperative work systems, such as whiteboards, provide cooperative imageediting functionality.Most whiteboards adopt synchronous cooperative mode that is, an author can edit the image file and see other authors’ edits simultaneously.All modifications of the image are broadcasted to the cooperative authors in real time. As we know, broadcasting all modifications of the image pixel by pixel is costly.Particularly in wide area networks, continuous broadcasting uses an unreasonable amount of bandwidth.In addition to these costs, an experiment has shown that message exchange delays between two machines in local area networks are from 5 to 100 milliseconds Moreover, as the amount of data transmitted over the network grows, so do the delays. Compared to message exchange delays in local area networks, such delays in wide area networks are much longer.Web-based cooperative image editing must reduce both the amount of data transmitted over the network and the frequency of broadcasting the modifications.Fortunately, AJAX holds great promise for enabling these objectives. Major Google products such as Gmail, Google Maps, and

21

Google Suggest use the AJAX model and prove that Web applications implemented by AJAX can reduce the amount of data transmitted over the network so that clients can interact with the server fluently. Moreover, asynchronous communication uses a more reasonable amount of bandwidth. To cut costs and save time, organizations and companies increasingly are using Web applications to work cooperatively. Generally speaking, these organizations or companies can be located in different areas and provide their services through different technologies. For example, an automaker in Germany and an automaker in Japan must cooperatively design a new type of automobile. However, their software components that remote clients invoke for designing the automobile might be implemented with different technologies, such as Java 2 Enterprise Edition (J2EE), .Net, or other distributed object technologies. Accessing such different components with a unified method is difficult for a remote client. Therefore, its necessary to find an approach for reusing these components.Web services should be the first option, because they can implement loosely coupled Web applications across platforms and program languages. Moreover, developers can use some tools to transform most existing components into Web services,the system doesn’t work. Each author can join or leave the image-editing at any time. ii. Distributed architecture.:- Each author joining the image file editing is both a server and a client that is, each author manages a copy of the image and broadcasts image modifications to other authors in real time. To guarantee the consistency of these image copies, the authors use the same rules to handle all modifications that they produce individually and that they receive from other authors. Even if some authors leave, the system can still work. Managing the authors is costly, however. New authors who wish to edit the image must notify other authors and process the image copies they’ve obtained from them.

22

Figure 14: Integration framework
iii. Hybrid architecture:-This architecture combines the centralized and distributed architectures.A server manages both the image files and the authors joining the imagefile editing. Each author manages a copy of the image and broadcasts modifications to other authors and the server. All of the authors handle the modifications by the same rules. New authors can obtain the image file directly from the server. The server notifies the existing authors when new authors join. We based our integration framework on the hybrid architecture.

23

10

ACTORS

Our integration framework involves four kinds of actors: management Web services, image Web services, visualization clients, and proxy servlets. i. Management Web services:-Management Web services manage image-file versions and the information of authors joining the image-file editing. If a new author takes part in the editing of an image file, the author can directly obtain from this service the latest version of the image file and the information of other cooperative authors editing the same image. Furthermore, this service notifies other authors of this new author. ii. Image Web services:- Because authors joining the editing of the image file might belong to various organizations located in different areas moreover, there are message exchange delays,image Web services are created and deployed on the organizations Web server. Each image Web service manages the copies of image files so authors can obtain the image file as soon as possible. The image Web service not only broadcasts the conciliated modifications of the image to other image Web services and the management Web service, but also returns those modifications to the authors. iii. Visualization clients and proxy servlets:- A Java Server Page implements a visualization client, and an applet embedded in the JSP provides the canvas on which the author edits the image file.With the AJAX model, we can invoke image Web services in JavaScript code. However, such an activity that connects a browser to a remote host (either the Web server from which the JSP was loaded or another Web server) reduces Web browser security. Moreover, applets are designed with certain security limitations, one of which is the inability to access a Web server other than the one from which the applet was originally downloaded. To resolve the problem of obtaining image files and their modifications from image Web services, our framework employs servlets as proxies to access image Web services.The proxy servlet resides on the Web server from which the JSP was loaded. The

24

proxy servlet takes the parameters from the JSP, passes them to the image Web service, and then passes the resulting XML document back to the JSP.

Figure 15: Integration framework data flow
Visualization clients edit the image file simultaneously through the following process: 1. The applets send the image modifications of the image,represented by the image operation names and the correlative parameters rather than new image files, to the proxy servlet. 2. This servlet transmits the modifications to the image Web service. 3. The image Web service conciliates the modifications according to the rules for resolving any write conflicts that might occur. 4. The image Web service broadcasts the conciliated modifications to the management Web service and other image Web services to guarantee the consistency of the image copies they manage. Meanwhile, the function implemented with JavaScript in the JSP asynchronously processes the results (the continuously updated modifications of the image) returned from the

25

Figure 16: editing on the visualization client
servlet to make the applets repaint themselves according to the data this JavaScript function provided.Implementation details are available elsewhere.Figure 2 depicts such a scenario.In this integration framework, the image modifications are represented by the image operation names and the correlative parameters rather than by new image files. In addition, asynchronous communication enables the visualization clients to interact with the proxy servlets efficiently.Both features effectively decrease network traffic.Since the image Web services deployed on the organizations Web servers manage the image copies, each author belonging to a certain organization can obtain the image file as soon as possible. Furthermore, the image Web service broadcasts the conciliated modifications of the image to other cooperative image Web services and the latest version of image copies can be obtained from the management Web service directly. All of the processes we’ve discussed in this section aim to reduce the response time of cooperative editing, making for an integration framework that holds the promise of implementing real-time cooperation. A visualization client can interact with the proxy servlet to complete the following tasks for image files: Import:- When cooperative image editing starts, the servlet obtains the image file from the management service and

26

transmits the image file to the image Web service and the client. Export:-A new author takes part in the cooperative editing of the image file.As the image Web service manages the image copy, the author obtains the latest version of the image file from the image Web service. Modify:-One client transmits image modifications to the image Web services with asynchronous communication. Update:-The image copy on the client is updated according to the conciliated modifications obtained by AJAX. Submit:-If a client accomplishes the image editing, it notifies the image Web services and the management Web service for version management of the image file. For importing or exporting an image file, the servlet transmits the whole image file over the network.However, for updating, modifying, or submitting an image file, only the modifications are delivered, which reduces the amount of data transmitted over the network. The canvas laid in applets has two layers, as Figure 3 illustrates. The ground layer always represents the latest version of the image file, and the editing layer is where the author edits images.The ground layer can be repainted by importing, exporting, and updating the image file. In terms of importing, exporting, or updating the image file, the proxy servlet returns the data for repainting. For modifying the image file, the image modifications shown on the editing layer are transmitted to the proxy servlet.Authors can view the editing effects immediately by adding the two layers together.For submitting the image file,the original image file that the management Web service saved is updated according to the latest version of the image copy that the management Web service managed.At the same time,the image Web services delete the copies of the image file that they manage. Write conflicts might occur among visualization clients. For example: A client C1 finishes the modification M1 of the image at time T1.Another client C2 completes the modification M2 of the image at time T2 later than T1.However, the image file might be updated with the temporal sequence of M2 and M1, due to message exchange delays. Thus, C1 might encounter a write conflict, if M1 and M2 include a shared re-

27

gion. Both the management Web service and the image Web services can automatically conciliate write conflicts. These services use the same rules to handle write conflicts. The modification Mi is labeled with the time stamp Ti. Each service maintains a table of image modifications. When a service tries to update the image file with the latest modification Mk, it first searches the table to check whether there is a modification Mj completed later than Mk by comparing their time stamps. If a modification Mj exists, and Mk and Mj include a shared region, the service will provide all possible temporal sequences of the modifications to the author who completed Mk. The author decides how to deal with the write conflict.Finally, this Web service broadcasts the conciliated modification to other cooperative Web services.Our integration framework is used to implement a system for Web-based cooperative image editing. Because this framework makes use of AJAX and Web services to resolve the problems of message exchange delays and browser security limitations, it increases Web based cooperative image editings effectiveness. In the future, this integration framework can be used to build generic cooperative business processes.

28

11

ADVANTAGES OF AJAX

In many cases, the pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage Because only sections of pages need to be reloaded, Ajax allows for much more responsive web applications, giving users the feeling that changes are happening instantaneously. The use of Ajax can reduce connections to the server, since scripts and style sheets only have to be requested once.

12

DISADVANTAGES OF AJAX

Dynamically created pages do not register themselves with the browser’s history engine, so clicking the browser’s ”back” button would not return the user to an earlier state of the Ajax-enabled page, but would instead return them to the last page visited before it. Dynamic Web page updates also make it difficult for a user to bookmark a particular state of the application. Because most web crawlers do not execute JavaScript code, web applications should provide an alternative means of accessing the content that would normally be retrieved with Ajax, to allow search engines to index it. Any user whose browser does not support Ajax or JavaScript, or simply has JavaScript disabled, will not be able to use its functionality. Similarly, devices such as mobile phones, PDAs, and screen readers may not have support for JavaScript or the XMLHttpRequest object. Also, screen readers that are able to use Ajax may not properly read the dynamically generated content. The same origin policy prevents Ajax from being used across domains, although the W3C has a draft that would enable this functionality. The number and frequency of HTTP requests to a web server can increase considerably, causing an increase in server load.

29

13

FUTURE SCOPE

Some sources say the recent attention to Ajax has also brought attention to rich Web applications, which will help vendors using other development approaches, Better browsers, tools, and network performance will improve Ajaxs capabilities in the future. Ajax could find various uses. For example, vendors could use it to build Web-based versions of desktop applications. This way, companies could make software widely available to employees via a network and thus avoid spending the time and money required to install applications on every computer. Ajax also could be useful for the growing number of Web applications for mobile devices.Ajax may prove interesting to developers now, they may turn to versions of Flash and other technologies in the future because, for example, Flash supports audio, video, advanced vector graphics, and other capabilities that Ajax can’t offer.

30

14

CONCLUSION

Ajax applications can add or retrieve new data for a page it is working with and the page will update immediately without reloading.AJAX enables the site to let users add and view photo annotations. Meanwhile, Ajax still faces several technical challenges, such as usage complexity and security. The applications offer functionality generally available in desktop software but not on the Web, which was designed for communications simplicity, not to enable the development of programs with enhanced capabilities.Ajax makes it possible to develop rich Web application interfaces, but the work is demanding.Ajax helps implement best practices, such as isolating the client and server functions.But it’s the developer’s responsibility to ensure the functions are well defined and implemented, so that future tool changes don’t require totally recoding the application.Finally, you must test the implementation to verify its performance. Ajax often involves high network traffic and execution time on the browser, so it can significantly slow down an application.In the discussed topic our integration framework is used to implement a system for Web-based cooperative image editing.Because this framework makes use of AJAX and Web services to resolve the problems of message exchange delays and browser security limitations, it increases Web based cooperative image editing’s effectiveness. In the future, this integration framework can be used to build generic cooperative business processes .

31

References
[1] Lihui Lei and Zhenhua Duan. Integrating ajax and web services for co-operative image editing. IT Professional, 9(3):25–29, May-June 2007. [2] Thomas A. Powell. AJAX:The Complete Reference. The McGraw-Hill Companies, 2008.

32