Introduction

The site which we have selected is http://www.butlercourt.com. We have chosen this site for a number of reasons. Firstly it is an Irish website about a guesthouse in Kilkenny. The site also meets the criteria for having the necessary variety in web pages. Each of the pages we analyzed had a different aspect of usability and accessibility. After reading Krug’s “Don’t Make Me Think!”, sites should really not make such elementary mistakes.

The accessibility evaluation was carried out according to the guidelines laid down by the W3 WAI guide for conducting a preliminary evaluation of website accessibility. A real preliminary evaluation would usually be carried out over ten to fifteen resources however for the purpose of this assignment it was carried out over three resources. The three resources chosen were the homepage, the location page and the bookings page.

The homepage was chosen because it is the page most people will arrive at and therefore their opinion will be formed on the basis of the quality of this page.

The bookings page was chosen because this page contains the forms needed to request a booking. These forms have a number of their own accessibility issues so it is imperative that they are configured to be accessible for all users.

The location page was lastly chosen because it contained the only map to the hotel. If this map wasn’t accessible to everyone than there is no other way of finding the hotel through the website.

Usability Evaluation

We have found a number of usability defects in the site and the results of the trunk test are listed. Krug’s 3 Laws of Internet Usage were also considered while writing this. Each page was analysed separately. The trunk test posed these questions:

  1. What site is this?
  2. What page am I on?
  3. What are the major sections of this site?
  4. What are my options at this level?
  5. Where am I in the scheme of things?
  6. How can I search?

As this is a guest accommodation site, question 3 and 4 are similar.

The web addresses of some of the pages use incorrect syntax.

The pages use tables for layout, which should be regarded as obsolete. HTML tables should be reserved for use only where there are some meaningful relationships between the information presented along rows or columns of the table. Pure visual layout should be preferably done with CSS, removing the HTML table markup. This creates a lot of free space in some of the pages, particularly Photographs and Bookings.

Omit needles words.

About Us

You cannot book a room directly from this website. You must email a “Butler Court Online Enquiry Form” in the Bookings section. It should be possible to book directly.

A search box may have made this route quicker and solves question 6 of the trunk test.

The Butler court image should be moved lower and centered. This area should contain the guest houses logo and tagline. Welcome to Butler Court Guest Accommodation is too small and should be more visible, solving question 1 of the trunk test.

The tabs should be utilised more effectively. Currently, the links satisfy question 3 and 4. They should highlight the page the user is currently viewing. This would remedy question 2.

The About Us text chunk should be edited as if a user does read this, it would be to find out about this Guesthouse, yet there is hardly a mention of its features.

The absence of breadcrumbs at the top of all pages is distinct and implementing this satisfies question 5.

The absence of a tagline. This would have given more information as the description is vague on the Home page.

A link on the 3rd frame displays read more Guest Reviews here. In the 2nd frame, a large Guest Reviews link is displayed. There is no need for repetition.

When you click on “Guest Reviews”, it brings up a review page. There is no tab for this page. It does not appear at the bottom of the page. The review page is extremely long for a user to remain interested. The two outer frames are very bare with no pictures.

The picture on the 3rd frame of the Home page, also present on Location, Tariff and Bookings, depicts the cover of “Rick Steve’s Ireland Guide 2006” with the caption underneath We are in Rick Steve’s Ireland Guide 2006. This picture should lead the user directly to the article.

Location

On the Location page in frame one, it displays Free – Butler Court Visitor’s Guide in yellow, however when you click the image nothing happens. Krug’s 1st law states Users scan pages. Upon scanning this page you would immediately click this image. Underneath this image displays a message informing the user that they provide guests with a free guide, another version of the small print. On this page, the movie Circle of Friends, Graiguenamanagh (Town of the Monks) and the Dunmore Caves are mentioned. These names should be links to pages with more information on the chosen subject.

Photographs

On the Photographs page, there is a link more photographs – click here. However on the page that pops up, the pictures are quite small and there is a lot of space un-utilised. The same can be said of the previous page as all the pictures are quite small and the use of tables is incorrect here.

Golf Courses

On the Golf courses page, A Day at the Races!, is in frame one. The title of this is misleading as it does not mention racing. Assuming that Butler Court wishes to attract race fanatics, this should be more visible at the very least. Click here for 2006 Gowran Park race fixtures is too small. This page also gives a list of golf courses with contact details. The name of the course does nothing. The name should go straight to the homepage of that course or other relevant information. It displays Click for Irish Golf.net Website, this should be larger.

Heritage

On the Heritage page, in frame 3 there is a list of historic sights. Shee Alms House, The Thosel and Rothe House are unclickable. These should be links to relevant documents. Again, the space on this page in frame 1 is not utilised correctly.

An issue with the links that do function is that they bring up new pages that are not on the map. The user is lost. The list at the bottom should include these and the absence of breadcrumbs contributes to this problem.

The image of Jerpoint in frame 1 on this page should redirect the user to the Jerpoint information page. The same image on the Home page directs the user to this page and if the user choose this route, a distinct possibility considering Krug’s 3rd rule, Users muddle through pages, they would certainly click the image again.

Room Features

The main depicts the courtyard. Our preference would be to have more relevant pictures of the room, maybe even the view that is available from some of the rooms.

Tariff and Bookings

On the Tariff page, it displays Please e-mail for varying off-season rates, these rates should be displayed. Tariff and Bookings should not be separate as this information would be considered the most important on the website.

Usability Test

The script in Chapter 9 was used on our test subjects and is included in Appendix I.

We tested 3 users. While one of us tested, the other recorded notes. This rotated alternatively and for the final test subject we shared the duties. The results of our testing comprises of the following:

  • For Question 1:

All 3 candidates are students, 2 studying Digital Media Engineering and the third, Media Production.

  • For Question 2:

Internet usage ranged from 15 to 90 hours per week.

  • For Question 3:

This time was spent on downloading, random searches, email, fantasy football, sports and news.

  • For Question 4:

Favourite websites included:

  • For Question 5:

For both sexes, the internet was a viable option to spend money online for services and paper based goods. However the males questioned preferred to buy general goods the conventional way as they favoured to see it before they made the purchase. The female found that many items of clothing were not available here and so she had little alternative.

  • For Question 6:

Items purchased online included flights, concert tickets and female clothes and shoes.

  • For Question 7:

All panellists realised that this was a guest accommodation site.1 user tried to click the main picture. They found the picture striking though they felt it did not represent the hotel. The same picture would be better suited to a restaurant. The other 2 users tried to click the Butler Court Image in the right hand corner. They felt that this should be the centre piece.

  • For Question 8:

2 users liked the general layout, links on the left, important information in the centre and other information on the right. All felt that the content was inappropriate. The picture was too large, About Us paragraph should be replaced with the general description on the right and the absence of a title.

  • For Question 9:

All users suggested booking a room and selected Bookings automatically. 2 users were disappointed when they realised that they could not find out immediately the availability of the Guest House. The 3rd commented that if he was in a hurry, this wait would send him to another site. However, all users thought that the online enquiry system worked adequately for its purpose.

  • For Question 10:

All users found the description of the golf courses too short and each course should be linked to its corresponding website. They wished to know which course was closest and where they were located on the map. This section had only one picture while it was felt that each course should be accompanied by a unique image. The favourite course was Mount Juliet, which was chosen by all as it is designed by Jack Nicklaus.

  • For Question 11:

2 users had difficulty finding the Heritage link. Both felt it should be named Historical Sites. However this could be blamed on the phrasing of the question. All found that greater information, particularly images, was required. All chose Kilkenny Castle as the site that interested them most, due to the quality of the image presented.

  • For Question 12:

All liked the pictures of the room but found that there were too many pictures of flowers. Suggestions included categorising all pictures, ability to enlarge all images and a description accompanying each image. Previous comments about images were all mentioned again.

  • For Question 13:

No user was confident of finding the accommodation with the map provided. All found that there was not enough roads displayed, the AA road finder link was too small and all clicked the map.

  • For Question 14:

All users would have liked to go to the races. No user could find the racing section. One completed this task by using the CTRL F function on 4 pages before finding it. All agreed that this should be easier to find, even renaming the Golf Courses section to Sport and Leisure.

  • For Question 15:

2 users were happy with what the site advertised. After reading the About Us section, the third user was disappointed. This section mentions the Watergate Theatre, restaurants, pubs, equestrian facilities and fishing. There is no more information about these activities mentioned on the site.

  • For Question 16:

All noticed the many statements displayed. One user felt that comments from respected critics should be added. Another felt that each caption should be beside a photograph.

  • For Question 17:

Information about local pubs, restaurants, events and festivals, equestrian facilities, room availability and fishing are all missing. Some of the information that is provided is very hard to find.

  • For Question 18:

Users commented in general that the site was easy to use for certain tasks but the search for racing was difficult. Some images mentioned previously should be links to aid navigation. About Us should be renamed to Home. Guest reviews are scattered throughout the site. Some of the information provided is not relevant to its section.

  • For Question 19:

All agreed that the site was not intrusive. One liked the option of choosing to ring instead of emailing when inquiring about a room.

  • For Question 20:

One commented that the Guest Reviews section maybe embellished but this was only speculation. Another mentioned again about the lack of information on the activities mentioned in the About Us section.

  • For Question 21:

All answered yes to this. Reasons included do not know what is clickable: some are links, some are not, irrelevant images, a link to Bookings is on practically every page including the Bookings page, the colour purple used to highlight which pages have been visited in the navigation convention at the bottom is very hard to make out,Rick Steve’s Guide to Ireland 2006 and the Trip Advisor link keep alternating sides on many of the pages.

  • For Question 22:

Users found the site mediocre. They liked the colour, the 3 frame layout and links on the left. Besides the points mentioned previously, they added that the space could be utilised better and more pictures of the actual Guesthouse.

Overall, these results match the conclusions drawn from our Usability Evaluation. It has brought more errors to light which has made this testing more rewarding. These have been included in our Recommendations For Improvement.

Accessibility Evaluation

The website being evaluated for this accessability test is http://www.butlercourt.com. The site is evaluated by a selecting a representative sampling of pages which contained the following criteria:

  • Web pages with tables, forms, or dynamically generated results;
  • Web pages with informative images such as diagrams or graphs;
  • Web pages with scripts or applications that perform functionality.
  • Web pages which people are most likely to enter (Homepage)

The three pages we selected were the homepage, the location page and the bookings page.

All of the tests were carried out on the GUI brouwsers Firefox, Opera and Internet Explorer.

In order to carry out an accessability tests on this site the W3 WAI guide to conducting a preliminary evaluation of site accessability was the template we followed.

The first page to be evaluated was the homepage. According to the W3 WAI guide the first step is to turn off all images to check for an appropriate alt text is in place. The first thing we noticed was there were no alt values for the site navigation bar on the left handside. All of the images are clickable yet there is no information to say so in the alt text. On the right hand side of the page there is another link to the bookings page but this also has no alt tab, instead it has text under the picture indicating that it is clickable. In contrast to this there is an alt value for the trip advisor link under the navigation bar. For the decorative images in the center of the site there is a long winded alt value. This is of no value to the user as the image is purely decorational and has no value to a user who isn’t using the visual display.

The next step was to test the sound by turning it off to see whether audio content is still available through text equivalents. As this site has no audio content this test doesn’t apply to our evaluation.

The next step was to check the site with varing font sizes. As the text size is increased the page reloads very well and there is no overlapping of the text and images. However at one point an image does overlap with the navigation bar at the bottom. This only occurs once at a certain magnification and does not occur again. The one big problem with the page is that the navigation bar at the left hand side stays the same size for increased and decreased font sizes. This renderes it useless as the main location for navigation through the site. After many magnifications a horizontal bar will appear.

The next test to be carried out was to resize the application window to a smaller size to verify that no horizontal navigation bar is required. The page fails instantly on this test. As soon as the horizontal size is decreased from full size the navigation bar appears.

The next test was to observe contrast in the pages colour scheme. This was done by printing out the page on a black and white printer. The results from this were that the contrast between the background and the text was different enough to be ledgeable by a person with colour blindness.

The final test that we carried out was to check if the site was navigable without using the mouse. All of the links were accessable through the method of using the tab key. One small problem with this was that with two of the clickable images, underneath the navigation bar, it was difficult to see at a glance if they were now highlighted.

The next page to be tested was the location page. The results on this page were very similar to the home page. With regards the alt values the side navigation again has no alt values and yet there are some clickable images which have them .There are also descriptive alt values for images which are not necessary.

Increasing and decreaseing the text size gave up the same results as in the previous test. The image of the map, which is central to this page, doesn’t scale up which makes it difficult to read for users with poor vision.

The problems of the horizontal bar appearing with the resizing of the application again makes an appearance and the issue of the tab button is again encountering the same problems.

The last page to be analysed is the bookings page. Alt attributes are again missing form this page but it is not as prevalent as in other pages.

As the size of the text increases the field of the form begin to overlap outside of their frame. This only occurs with Firefox and the same problem doesn’t happen with Internet Explorer or Opera. The tab button has the same problems as in the other pages however it does work well for accessing the form.

The automated evaluation tool used for this test was Acc – An Accessability Evaluator extention for firefox. The results given by this for the homepage were:

Homepage

  • Required alt attribute missing (17 occurances)
  • Link opens a new window (5 occurances)
  • Primary language not identified (1 occurance)
  • Avoid presentational & depracted elements (39 occurances)
  • Deeply nested layout tables (1 occurance)
  • Page isn’t scaleable (1 occurance)

Location

  • Required alt attribute missing (21 occurances)
  • Link opens a new window (7 occurances)
  • Primary language not identified (1 occurance)
  • Avoid presentational & depracted elements (38 occurances)
  • Deeply nested layout tables (3 occurances)
  • Page isn’t scaleable (1 occurance)

Bookings

  • Required alt attribute missing (17 occurances)
  • Link opens a new window (6 occurances)
  • Primary language not identified (1 occurance)
  • Avoid presentational & depracted elements (48 occurances)
  • Form elements aren’t grouped (13 occurances)
  • Form elements without label (10 occurances)
  • Deeply nested layout tables (2 occurances)
  • Page isn’t scaleable (1 occurance)

Recommendations for Improvement

Our primary aim is to make this a “think free” website. Appendix II shows our new Homepage.

Our recommendations to achieve this include the following:

Change the syntax of the addresses of About Us, Heritage and Bookings.

Enable an online booking system as we feel a percentage of users navigating to this page would be trying to reserve a room. In our experience, we have found it easier to book online than other methods. Returning users could create accounts with their credit card information retained by the Guesthouse in order to shorten the time process it takes to complete a reservation. This login box would be placed on the Home page. Becoming a member would be entirely optional and the minimum information required from the user would only be extracted in order to keep this process short. The Guesthouse may consider creating a newsletter informing members of special discounts. This alternative would also be kept optional.

Add a tagline. This is easy advertisement. We have chosen “!!!Enjoy a little bit of luxury!!!” to emphasise that this is luxurious accommodation.

Add a search box to aid users more comfortable with this mechanism.

The About Us section shall be moved lower on the page. A more specific description of the Guesthouse should be inserted here.

The picture on the 3rd frame of the Home page, also present on Location, Tariff and Bookings, depicts the cover of “Rick Steve’s Ireland Guide 2006” with the caption underneath “We are in Rick Steve’s Ireland Guide 2006”. This picture should redirect the user to the article.

All needless words shall be omitted. Listed are a few examples:

  • We are listed on Trip Advisor should be changed to Listed on Trip Advisor
  • The About us section could be shortened or edited to be more specific.
  • We are proud to be featured in Rick Steve’s Ireland 2006 guidebook should be changed to Featured in Rick Steve’s Ireland 2006 guidebook
  • See some pictures below of great places to visit in the area: should be changed to Great places to visit in the area:

The small text navigational convention used at the bottom of the page could be utilised better ie: if viewing home, home should be highlighted.

Add breadcrumbs to each page. This could be done in the form of tabs. These should be colour coded. The small text convention used at the bottom of the page would be edited to highlight the page that is currently being viewed.

The visual layout should be done with CSS, removing the HTML table mark-up. This creates a lot of free space in some of the pages.

The Tariff and Bookings section should contain Special Offers that are currently available.

The “Guest Reviews” would be added to the tabs field.

When you click on “Guest Reviews”, it brings up a review page. It does not appear at the bottom of the page. It would be added to this list. The review page is extremely long. The two outer frames are very bare with no pictures. We would prefer a better visual hierarchy with this page. Instead of dividing the page into three tables, we would use one frame and insert pictures beside each comment. This would greatly reduce scrolling down the page.

On the index page, removing the reference of Guest Reviews in the 2nd frame to the 3rd as it does not need to appear twice.

On the Location page in frame one, it displays Free – Butler Court Visitor’s Guide in yellow, however when you click the image nothing happens. Upon scanning this page you would immediately click this image. A free downloadable version would be easy to offer and should be made available. Also, on this page, the movie Circle of Friends, Graiguenamanagh (Town of the Monks) and the Dunmore Caves are mentioned. These names should redirect the user to pages with more information on the chosen subject.

On the Photographs page, one page would suffice with the ability to enlarge the photos. Any extra photos should be added to the spaces of the other pages. All space would be utilised.

On the Golfing page, races should be promoted to a single page and added to the tabs.

Each of the golf courses listed should redirect the user to the homepage of the selected golf course when clicked. After researching, Gowran Park, Mount Juliet, Borris, Callan, Mount Wolsley and Castlecomer Golf Clubs all have their own unique websites. Kilkenny and Waterford City Golf Clubs do not have personal websites but the user could be redirected to irishgolf.net or a similar suitable link. On the Heritage page, Shee Alms House, The Thosel and Rothe House are unclickable. These would be changed to redirect to relevant documents. More information should be given on the other historic sites mentioned.

Tariff and Bookings would be placed together with a new section of Special Offers which Butler Court should update whenever changes arise. This would eliminate the free space on this page. This page would be divided into clearly defined areas. This shall be linked to the Home page.

As many elements as possible should be clickable. Many of the present clickable objects should be made more visible to the user.

The following additions are results from our testing:

The map should be changed to a clickable image leading to the AA route finder. The current format Motoring in Ireland? – Browse the AA route planner here is too small. The font should be increased and changed to “AA Route Planner For Motorists”.

A new section, Entertainment shall be added to the tabs menu. This shall contain more information on the Watergate Theatre, pubs and restaurants.

Fishing shall be added to the Golf section. The page shall be split into 2 sections.

Adding comments from respected critics.

Renaming About Us to Home.

Removing the Bookings link from most of the pages.

Configuring the links to Rick Steve’s Guide to Ireland 2006 and Trip Advisor to remain static.

Categorising the pictures in the Photographs section and rearranging the pictures throughout the site. More pictures of the actual Guesthouse must be posted.

Changing the colour purple to green for pages that have been visited at the bottom of each page. The colour used is hard to distinguish.

The tabs on the left shall be increased and modified to these sections:

  1. Home
  2. Location
  3. Photographs
  4. Golf and Fishing
  5. Entertainment
  6. Guest Reviews
  7. Equestrian and Racing
  8. Historical Sites
  9. Room Features
  10. Tariff and Bookings

Chapter 10 of Krug’s book, mentions increasing the goodwill of your user. By implementing these steps, we will achieve that. Our redesigned site, make the choices available more obvious and easy. We have included more sections to tell the user what they want to know. By including more links, we are saving the user more steps in their search for information.

The first recommendation we would make with regards to accessibility would be to provide alt attributes for the side navigation. For instance ‘About Us’ alt = ‘click for homepage’, ‘Location’ alt = ‘click for map’. This would have to be implemented as the lack of alternative text on these links would leave a huge gap in the information displayed on for instance a Braille output.

The images displayed on all pages should be scaleable when the application window is reduced in size. This would remove the horizontal navigation bar that appears when the window size is reduced.

On the location page the image of the map should scale up along with the text. As this image is the central theme of the page it has to be access accessible to all users. As the image doesn’t scale up users with poor vision would be unable to make use of the map and this would render this page completely irrelevant to them.

Considering the results of the previous test, the colour scheme on this page wouldn’t have to be changed as it already offers enough contrast.

The navigation through the website without using the mouse is generally very good. The one recommendation we would make would be to put a black border around the clickable images. This would offer some contrast when the cursor is over the image to make it instantly recognisable with regards to the current location of the cursor.

Another recommendation we would make would be to have an audio description for the map image on the location page. The audio would only need to be a simple description of the major roads, local landmarks and their relation to the hotel. Such a device would be helpful to any user who is unable to read the map.

Conclusion

This module has given us the skills and confidence to practise as Usability and Accessibility Experts. This has opened a career path that neither of us had previously considered. We no longer are able to view a page without singling out all of the mistakes.

Although the module only offered a brief insight to the construction of a web sight it has sparked interest into further investigation into the subject. The websites we constructed at the begining of the module gave an excellent starting point for advancement into creating more advanced pages.

Considering the other modules during this semester have had a heavy mathematical base it was enjoyable to have module with an emphasis on visual design. As one of the few modules that personal taste and opinion are a big part of the course, it offers some light relief from an otherwise heavily theoretical curriculum.

We are planning on sending our results to Butler Court as we would really like to see our recommendations implemented.

With regard to improving the learning experience for future students, we would suggest the addition of XML. To learn another technology would be difficult as the course is extremely challenging but it could be possible to dedicate a single week to this. While we would not master this language in such a short time period, we would have benifitted learning the basics from our experienced lecturer.

Bibliography

Dont Make Me Think! Steve Krug, New Riders Publishing, 2006.

Homepage Usability. 50 Websites Deconstructed. Jakob Nielsen & Marie Tahir, New Riders Publishing, 2002.

References

http://www.w3.org/WAI/eval/preliminary.html

http://www.sitepoint.com/article/dont-need-usability-lab

http://www.w3schools.com/

http://www.w3.org/TR/WAI-WEBCONTENT/

http://www.w3.org/WAI/eval/preliminary.html

http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/

http://www.w3.org/WAI/

Appendix I

This is the script used for testing:

Hi, XXXXXXXXX. My name is Sameer Kumar / Stefan Carr, and I’m going to be walking you through this session. You probably already know, but let me explain why we’ve asked you to come here today: We’re testing a web site that we’re working on to see what it’s like for actual people to use it. I want to make it clear right away that we’re testing the site, not you. You can’t do anything wrong here. In fact, this is probably the one place today where you don’t have to worry about making mistakes. We want to hear exactly what you think, so please don’t worry that you’re going to hurt our feelings. We want to improve it, so we need to know honestly what you think. As we go along, I’m going to ask you to think out loud, to tell me what’s going through your mind. This will help us. If you have questions, just ask. I may not be able to answer them right away, since we’re interested in how people do when they don’t have someone sitting next to them, but I will try to answer any questions you still have when we’re done. We have a lot to do, and I’m going to try to keep us moving, but we’ll try to make sure that it’s fun, too. Do you have any questions before we begin?

“Don’t worry about hurting my feelings. I didn’t create the pages you’re going to look at.”

  1. Before we look at the site, I’d like to ask you just a few quick questions. First, what’s your occupation?
  2. Good. Now, roughly how many hours a week would you say you spend using the Internet, including email?
  3. How do you spend that time? In a typical day, for instance, tell me what you do, at work and at home.
  4. Do you have any favorite Web sites?
  5. Now, finally, have you bought anything on the Internet? How do you feel about buying things on the Internet?
  6. And what have you bought?
  • OK, great. We’re done with the questions, and we can start looking at things.

7.First, I’m just going to ask you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first.

  • And again, as much as possible, it will help us if you can try to think out loud so we know what you’re thinking about.

8.Before you click on it, I have one more question. Do you like the layout of this page?

  • OK, now we’re going to try something else.

9.Can you think of something you would use this website for? Would you like to try and book a room? How would you do that?

10.Do you like to play golf? (Regardless), what course would you like to visit the most? Please think out loud.

11.Which historical site would you like to visit the most?

12.What do you think of the photographs available overall? What do you think of the Photograph section?

13.Do you think you could find this guesthouse with the directions provided?

14.Would racing be something you would like to do in Kilkenny ?

15.Does the website offer everything it advertises?

16.Do you like the Guest Reviews section?

17.Does the website provide all the information that you want?

18.Is it easy to use? Does it overcomplicate certain tasks in any way?

19.Is the website intrusive in any way, asks for information they don’t really need?

20.Do you notice any false sincerity on this site? Is the site trying to con you in any way?

21.Does the site slow you down as you scan through it?

22.What are your general impressions of this site? Is it professional?

VN:F [1.8.8_1072]
Rating: 5.0/10 (1 vote cast)
VN:F [1.8.8_1072]
Rating: 0 (from 0 votes)

Abstract

Macromedia’s Flash 8 Pro package is a multimedia authoring environment used to create dynamic applications that can be viewed using the Flash Player virtual machine. Flash provides support for vector and raster graphics, embedded scripting and streaming of audio and video content.
This project puts forward Flash as an alternative to other methodologies by creating an interactive remote access medical imaging application. Utilising client / server technology, the entire project encompasses  ActionScript 2.0, HTML, XML, PHP and JavaScript. Covering these areas unveil a straightforward application integrated into a website which can allow connection to an array of clients. Aimed at those in the medical profession, it allows for the creation of homework / examination / revision material, making this system unique. The application is not restricted to the medical profession as it is available to all with a PC, internet connection and Flash Player.
This is just one approach to Remote Access Medical Imaging.

Glossary of Acronyms

Flash : Macromedia’s Flash
FLASHMED : Flash Medical Imaging Application
GUI : Graphical User Interface
DCU : Dublin City University
WWW : World Wide Web
AVI : Audio Video Interleave
COM : Component Object Model
DCM : Dicom
HTML : Hyper Text Modeling Language
APACHE : Apache Web Server
PHP : Hyper text Pre Processor language
AS : Flash Actionscript 2.0
XML : eXtensible Markup Language
C : C programming language
C++ : C++ programming language
Java : Java programming language
JS : JavaScript programming language
HTTP : Hyper Text Transfer Protocol
CF : Macromedia’s ColdFusion
PlugIns : extensions that can be added on giving greater functionality
API : Application Program Interface
MAC : Apple’s Macintosh Operating System
OS : Operating System
Photoshop CS3 : Adobe Photoshop CS3 Extended
SQL : Structured Query Language
PX : Pixels
IHE : Integrating the Healthcare Enterprise
CT : Computed Tomography
MRI : Magnetic Resonance Imaging
MS : Microsoft
IE : Internet Explorer
RGB : Red Green Blue Colour Values

Chapter 1 – Introduction

This interactive Macromedia Flash animation which will be referred to as FLASHMED, can display large volumes of medical images, like those from CT or MRI scans worldwide. Modalities from Nuclear Medicine can also be presented but are not currently available. Users from different backgrounds including students of radiology or anatomy and doctors can experience the complexities of the human body sitting at their own computer. Teachers can give exams online rather than paper based ones which is akin to printing an email just to read it. The current crops of machines performing this task are expensive and are only available at all major hospitals and medical institutions.
Many tools are available to the user to allow them to manipulate the image in various ways. Zoom in or out, highlight and pan around to follow infected areas, flip through images, all at their leisure. Each image set contains a unique set of infected points which should be identified. These distinct areas can be clicked on. The results are compared to the correct results to see how many are identified correctly. Dynamic Thresholding and different
segments can be highlighted throughout each image. The threshold for Bone, Head, HeadCT, Lung and Tissue are set to their optimum levels.
The benefits of this system are countless. It can be viewed by many users simultaneously. As all viewing is performed online or locally, the physical film cannot be lost or stolen. Having been created in Flash, they are inherently easy to distribute, either over the web or by any other medium. File sizes are small and the compatibility is nearly universal. The application installs Flash immediately if it is not present on the client machine.

1.1 Project Brief :

The project brief as provided at the beginning of this project, October 2006:

RSa-1: An evaluation of Adobe (Macromedia) Flash 8.0 for remote access medical imaging Adobe Flash is a multimedia authoring environment used to create dynamic web content that can be viewed using the Flash Player virtual machine. Flash provides support for vector and raster graphics, embedded scripting and streaming of audio and video. The purpose of this project is to evaluate the use of Flash, as an alternative to Java Applets, for creating interactive, remote access medical imaging applications.

1.2 Scope of document :

The purpose of this document is to specify exactly what can be achieved by completing this project and the processes involved in order to achieve this. This document details all ideas and the schedule followed in order to implement those ideas successfully. It also provides a comprehensive description of all the intentions of this system and the system capabilities after being tested thoroughly.

After researching all implementation options, a final layout was finalised, which would allow the successful delivery of this project to a high standard. It is envisaged that this document could be used by a Flash novice to build an example application using this as a template.

1.3 Project Goals and Future Achievements :

It was certain that by completing this project, it would give a greater knowledge of the Flash environment and the Actionscript 2.0 language, aspects that are not covered in D.C.U. By undertaking this project, involvement with the more powerful aspects of the web, such as server-side scripting and web-based applications would increase. This would in turn give a greater understanding into the workings of web-applications and also their creation.

Taking on this project would give a deeper knowledge of and a greater respect for medical imaging. It would also give experience in the creation of Medical Imaging Applications. This would follow on from a course, “Image Processing and Analysis”, which involves the analysis of all forms of computer imaging. A major focus regarding the initial selection of this project was the opportunity to make a difference to the medical and educational system in Ireland. An easy to use interface would make this application accessible to all users of the internet. This application could also be the starting point of better media management. Currently DICOM images are large, while Flash applications are the opposite. This makes it easy to send to data back and forth while consuming a fraction of the bandwidth.
The following milestones were set to be completed by the end of this project:

  • Design an easy to use interface
  • Provide as much functionality as current Java applications
  • Design a server side application which would be ready to go live

There were many other higher level checkpoints which needed to be passed in order to create the appropriate application. Figure 1.1 shows an overview of the Network Topology of the system.

Figure 1.1 - Network Topology1.4 Project Planning and Organization :

Figure 1.2 shows the time scale of each milestone being developed and when they were completed.

FIGURE 1.2 – TIME SPENT ON DELIVERABLES1.5 Summary:

Global demand for image- processing software is on a daily increase, driven by advancements in image analysis techniques in universities and companies worldwide. Existing software is often limited by cost, lack of flexibility, and/or specific hardware requirements.

The result of this project, upon completion would ideally be an application which is cheap, flexible and is easily transferable. The time allocated to this project would be split up into two sections. The first half of this
project would be mainly research and the second half would be design and implementation.

Chapter 2 – Background

Macromedia Flash 8 Professional, created by Adobe, San Jose, California, is a multimedia authoring software that is used to create dynamic presentations for the World Wide Web. Flash allows you to mix sounds, animations, and graphics in a single file. When using Flash, *.fla files are created. These can be exported as animated GIF, QuickTime, AVI, in bitmapped format, and more. Flash does not support DICOM.

ActiveX is a Microsoft technology consisting of “controls” that sit on top of a Windows system called COM. These controls are used to extend the abilities of Windows and Internet Explorer, adding features such as video playback, audio, and Flash playback. Other browsers use specialised technology for Flash which works in the same manner. The advantage of Active X controls is that, although they are generally downloaded and used in Internet Explorer, once they are on your system, any Windows application that understands COM can use the controls to extend its applications. [ 65 ] If the client does not have Flash installed, a general standard of all Flash coders is to configure their application to automatically download the latest Flash Player immediately. The images that shall be displayed are to be contained in a dataset. The application will have three different datasets containing up to three hundred images each. This could be in a Flash  compatible format or a converted format. The images are stacked one by one on top of each other and so while scrolling through, it appears as though you are travelling through the organ displayed in 3D.

The client and server application was created in Macromedia’s Flash 8 Professional. The client was exported to a HTML webpage which was then edited to create the page hosted on the server. Apache hosts the entire application on the server. A PHP script handles the interaction for the correct results. XML enables the dynamic functionality of the application. JavaScript gives the time.

2.1 Design Methodology :

At the beginning, the project guidelines had to be clearly examined. The project was split into two distinct areas of work. The first area of work on this project was to be solely research and the second half of this project was to be the development and coding of what would be the end product. Time would initially be spent on research to broaden knowledge of Flash and medical imaging while also researching into current applications. When a significant understanding of both areas was obtained, the planning to start examining what it would entail to develop an application would begin. A coding objective would then be developed. Initially, the GUI for the client would be created so that there was a basis for the rest of the project. The client needed to be capable of manipulating images and sending requests to the server and displaying them in a way that was convenient for the user. The server needed to be capable of completing all of the requests of the client.

Rough sketches of the client were drafted to determine the general aesthetic view of the application. A way of how the application would function and how the client, server and other scripts would interact with each other respectively was sought. Upon completion, it would then be tested, and a level of user-friendliness ensured. The following subsections outline how this was achieved.

2.2 Languages Used :

A range of methodologies would be covered to create this application.

2.2.1 Flash Actionscript 2.0 :

As the client and server was to be developed in Flash, Actionscript 2.0 was covered from scratch. AS is most comparable to the C language. The power and flexibility of AS ensured that it would be possible to create such an application. However, DICOM import is still an issue. Tutorials imbedded in the Flash package, from the Flash books, [ A – H ] and on the internet, [ 3 ], [ 4 ], [ 7 ], [ 8 ], [ 14 ] and [ 15 ] were completed. Covering these tutorials gave an excellent understanding of creating interactive applications and of the coding environment.

FIGURE 2.1 – FLASH AUTHORING ENVIRONMENT

The Flash authoring environment is shown in Figure 2.1. The main areas of interest are noted.
[ F ]
A. Menu :
Most of the commands that are used are contained in the menu. There are shortcuts for the most frequent and unique shortcuts can be created.
B. Stage :
This is the area where all the content is placed. All contents can be edited with the tools available.
C. Tools Panel :
These features are used to create and edit graphics.
D. Layers Panel :
All the content on the stage can be separated into different layers. Different layers can have different sections of code.
E. Properties Panel :
This panel is used frequently. All elements of the application have properties which can be edited here.
F. Scripting Area :
All code is inputted in this area.
G. Library :
All elements are automatically added to the library after creation.

2.2.2 HTML :

The pages that reside on the server which the client will connect to will be created using HTML ( Hyper Text Modeling Language). This is the native language of all web-pages on the www today. HTML resembles old-fashioned typesetting code, where a block of text is surrounded by codes that indicate how it should appear. HTML allows text to be “linked” to another file on the Internet. [ 28 ] Other technologies are embedded in a webpage to make
them more interactive.

2.2.3 CSS :

Cascading Style Sheets is a language used to describe how a webpage is formatted. It can be either embedded in a webpage, like this application, or included as a separate document. It was easier to embed as each page uses different styles making a generic file inappropriate.

2.2.4 XML :

XML (eXtensible Markup Language) is a W3C initiative that allows information and services to be encoded with meaningful structure and semantics that computers and humans can understand. XML is great for information exchange, and can easily be extended to include user-specified and industry-specified tags. [ 20 ] Its main function in this project is to help maintain and control the information of each dataset and the limits of each window.

2.2.5 PHP :

PHP (Hyper text Pre Processor language) allows developers to create dynamic applications. It is a server side script used for making an application web based. [ 21 ] The syntax is similar to HTML and C. In this application, it is responsible for calculating and displaying the correct results.

2.2.6 JavaScript :

JavaScript is a scripting language developed by Netscape to enable web authors to design interactive sites. Although it shares many of the features and structures of the full Java language, it was developed independently. JavaScript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content. JavaScript is endorsed by a number of software companies and is an open source language. [ 21 ] JavaScript plays a minor part in this application adding a dynamic clock to the site.

2.2.7 Webpage Coding Structure :

All FlashMed webpages follow the structure:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>FlashMed</title>
<style type="text/css">
</style>
<script language="JavaScript">
</script>
</head>
<body>
<object : calls FlashMed>
</body>
</html>

Information is put inside of these fields.

2.3. HTTP Protocol :

The HTTP protocol [ 23 ] is a stateless protocol, meaning that it does not maintain a connection between the client and the server between transactions. A typical transaction would consist of a HTTP client, usually an internet browser, communicating with a HTTP server (eg: Apache). The application was developed in this environment. A diagram of this interaction is shown below.

FIGURE 2.2 – HTTP ENVIROMENT [ 23 ]

The HTTP client makes a connection to the HTTP server and sends a request, in our case, choice of dataset. The server then processes this data and returns the relevant information, be it a file or content from a database. When the results from the selected areas are processed, the client sends a request with which checkpoints.php deals with.

2.4 Current Medical Image Viewers :

There are many open source viewers available that are based on C, C++, Java, Lisp, Pascal, Perl, PHP, Ruby, .NET and TCL programming languages. Only one could be found in Actionscript, Student Pacs. [ 1 ] Many non-medical viewers were tested to gain a better understanding of this type of application. The functionality varies from product to product. Most common features include conversion programs, image display and analysis, surface and volume rendering. Included are the following viewers that were researched.

2.4.1 ImageJ :

ImageJ is one of the most feature rich open source applications in the market today. It consists of 74,000 lines of code contained in 238 files. Some interesting features include : [ 25 ]
· Conversion to many formats. ie: DICOM to GIF, JPEG, TIFF etc. Plugins are available to convert or view to any format.
· World’s fastest pure Java image processing program.
· Over 200 macros are available to create custom tools and functions.
· Images can be zoomed or scrolled though.
· Draw, edit and select portions of an image.
· Image Enhancement : smoothing, sharpening, edge detection, median filtering and thresholding on both 8-bit grayscale and RGB color images.
· Interactively adjust brightness and contrast of 8, 16 and 32-bit images. It can perform many geometric operations ie: crop, scale, resize, flip etc.
· Histograms and profile plots can be generated.

· Generic editing functions like cut, copy, paste are available.

· Ability to split or merge a 32-bit color image into RGB or HSV components.

· Other datasets can be viewed simultaneously.

Macromedia’s ColdFusion can be configured to run ImageJ natively. An option would be to run this on the server and send images to the client. This program has many features that could be incorporated into the final application. There are too many elements to have included all in FlashMed due to time constraints.

FIGURE 2.3 – IMAGEJ ENVIRONMENT2.4.2 Student Pacs :

The only medical image viewer available utilising Flash, SPACS, available to download at [ 1 ], was created between a team of medical students and a computer engineer. Their application can zoom, flip through images and pan around to follow structures. Questions are posed and this is timed. It was not possible to test this aspect as the site currently does not work. An excellent feature is the ability to download the application, and while irksome is a plausible way to create applications. The configuration process is troublesome with a script constantly being called which causes Flash to run at slow speeds. In the manual, it details that
this script must run and so cannot be cancelled. This is a drawback due to the repetitive nature of the script. The creators have created an extension panel which allows the user to create their own modules. This application can only render generic formats and not .dcm. This module has many aspects that can be incorporated into FlashMed. Allowing any user to create their own modules is an interactive element not offered by many applications. Running the application from the website is convenient. The slow nature of the program is a trade-off and can prove frustrating. The application contains nearly 2000 lines of code and 20 layers allowing a knowledgeable user to edit the application. The size of the extension is only 474kb which is an impressive compression rate. Considering the size of FlashMed, 1.5MB, this application’s original size would have been approximately 3.5MB. Creating extensions is a feature available in Flash and is a possible path for further research. Figure 2.4 gives a screenshot of the StudentPacs interface.

FIGURE 2.4 – STUDENTPACS ENVIRONMENT2.4.3 InfranView :

IrfanView was the first Windows graphic viewer with animated GIF support. It is another feature rich open source application for home use. For commercial purposes, it only costs €12. Some of its features include: [ 26 ]

· Compatibility with many file formats including .dcm· Multi language support
· Email features
· Thumbnail/preview option
· Print image
· Slideshow
· Compatible with Adobe Photoshop
· Geometric operations: cut, crop, flip, rotate
· Extract icons from EXE/DLL/ICLs
· Easily navigate through directories with the fast view
· Many PlugIns
· Batch conversion
· Search for files
· Manipulate color depth
· IPTC editing – technical standard developed by the Newspaper Association of America for
the transmission of text and image [ 62 ]
· Image Effects
· Lossless JPG manipulation
· Command line features
This application offers many features which can be included in the final application. The command line options and plug ins offer an infinite amount of future possibilities.

FIGURE 2.5 – IRFANVIEW ENVIRONMENT2.4.4 ImageMagick :
ImageMagick, another open source product, is a robust and varied collection of tools and libraries to read, write, and manipulate an image in many formats. This robustness is due to it having an API in C, C++, Java, Lisp, Pascal, Perl, PHP, Ruby, and TCL. It runs on many platforms, is well supported and documented, and suitable for automated processing. It is more suited to graphics/photo processing, but can render DICOM images. [ 19 ] Features include the following: [ 27 ]
· Conversion to many formats,
· Geometric Operations: resize, rotate, crop, flip or trim an image,
· Ability to make sections of an image invisible,
· Edit: add shapes or text,
· Special effects: blur, sharpen, threshold, tint an image, decoration,
· Manipulate the image with mathematical expressions,
· Ability to insert text and comments,
· Ability to identify the format and attributes of an image,
· Create animations,
· Overlap images over each other,
· Create collages with image thumbnails,
· Support for large images – giga-pixel.

This is another impressive application containing many useful possibilities. The ability to manipulate from the command line in any of the associated API’s is a unique feature.

2.4.5 LeadTools Medical Imaging Suite :

This application retails at €6000. It is the one of the most comprehensive and feature rich applications available globally. It offers an exhaustive list of options in both image acquisition and image processing techniques. The programming interfaces include a low level API, C++ Class Library and .NET components. Some of the features and characteristics include: [ 29 ]
LeadTools offers support for 8-16 bit grayscale and 48-64 bit color.
· Image Processing,
· Color Conversion,
· Special Effects containing more than 200 possibilities,
· Compression,
· Image Format for import and export
· Printing,
· Internet Imaging aimed at web forms,
· Database Imaging,
· Create any DICOM Layer Actor in the IHE Framework – A standard for Integrating the Healthcare Enterprise ; [ 63 ]
· Support for any DICOM service;
· Geometric Operations: Display 1-64 bit images including automatic zoom, pan and scroll functionally; process 1-64 bit image data;
· Feed images or video data to a DICOM dataset over a network; load, save and convert DICOM to any of over 100 image formats;
· Add text to images including functionality to create montages; and convert DICOM datasets to AVI files;
· Another powerful feature in the toolkit is the Medical Image Viewer Control. This allows easy construction of medical display applications and high-end diagnostic workstations;
· Full Support for all Service Classes – Possible to implement all DICOM Service Classes for a client and/or server.

2.4.6 Rubo Medical Imaging :

This application costs €560 and has many useful features. Discounts are available for educational and volume licenses. It was created in conjunction with the Eramus University of Rotterdam This does not have greater functionality than ImageJ, Infranview or ImageMagick making this price seem excessive. There is an abundance of expensive viewers available on the www. Features include the following: [ 30 ]
· Renders all formats of DICOM images
· JPEG Lossless, JPEG lossy, RLE compression for single images or datasets,
· User-friendly interface,
· Biplane display,
· Multi-monitor compatibility,
· Conversion to AVI,
· CD and Network coverage,
· Import / Export images,
· Printing.

2.4.7 OsiriX :

Originally created for the MAC, this is a powerful open-source product. It is present on the
many expensive PACS workstations in major hospitals. The current features include: [ 31 ]
DICOM File Support :
· Read and display all DICOM Files
· Read and display the new MRI / CT multi frame format
· JPEG Lossy, JPEG Lossless, JPEG 2000, RLE
· Export DICOM Files to TIFF, JPEG, Quicktime, RAW, DICOM, PACS
It includes DICOM Network Support.
Format Support For :
· LSM files from Zeiss, BioRadPIC files (8, 16, 32 bits)
· TIFF, ANALYZE (8, 12, 16, 32 bits)
· PNG, JPEG, PDF, Quicktime, AVI, MPEG, MPEG4
2D Viewer :
· Customizable Toolbars
· Volume rendering
· Create different shapes: Polygons, Circles, Pencil, Rectangles, Point etc
· Keyboard shortcuts
· Custom Filters

· 4D Viewer for Cardiac-CT
· Image Fusion
· Image subtraction pixel by pixel
· Plugins
3D Processing :
· Volume / Surface Rendering
· Red/Blue tints
· Export all 3D images to Quicktime, Quicktime VR, TIFF, JPEG
Optimization :
· Compatible universally
· Multi-threaded for multi-processors and dual-core processors support
· Utilises OpenGL technology for 2D and 3D Viewers
· Graphic board accelerated, with 3D texture mapping support
Expansion & Scientific Research :
· Dynamic plugins structure
· Manipulate pixels directly in 32-bits float for B&W images or ARGB values for color
images
· Create and manage windows
· Create and manage OpenGL views
It is based on many Open-Source components.
This application is extremely feature rich giving an excellent indication to the features available to doctors in hospitals.

2.4.8 Adobe Photoshop CS3 Extended

While more suited to multimedia or photo processing, this powerful application is being released on April 20th 2007 and will retail for €750. This is the first version of Photoshop or any standalone Macromedia product capable of rendering DICOM images. As Adobe are addressing this shortcoming, it is possible that this may be incorporated into Flash 9 Professional and Actionscript 3.0. Including MatLab support makes this an even more robust application. The main features include: [ 32 ]
· 3D creation and texture editing,
· Integration with Adobe products,
· Video and animation design,
· Movie Paint,
· Supports a Broad range of video formats,
· 2D and 3D measurement tools,
· Geometric operations: count, scale
· Image Stacks,
· Easy to use interface,
· Raw-image processing,
· Printing,
· Renders a wide range of image formats,
· Zoomify support,
· Intelligent Filters,
· Correction enhancements,
· Black-and-white conversion,
· Improved Colour Channel Mixer,
· Enhanced 32-bit high dynamic range,
· Powerful cloning and editing tools,
Adobe applications are feature rich and extremely powerful. The new features of this program address failings from previous versions. This is more suited to the general user.

2.5 File Formats :

There are over 100 different used in medical imaging. The most common are listed below.
[18] Currently, Flash only supports GIF, JPEG, PNG and TIFF.

Name Summary

AFNI – AFNI Native Format
Analyze – Image file format from Mayo Foundation
BMP – Windows BMP File Format
Bruker – Bruker Paravision
DICOM3 – DICOM 3
ECAT 6 – CTI CT Format
ECAT 7 – CTI CT Format
GE ADVANCE – GE ADVANCE PET
GE MRI Genesis 5
GE MRI LX
GE MRI Signa 3, 4
GE Scanditronix – GE 4096 PET Format
Gif – Graphic Interchange Format
Interfile 3.3 – Nuclear medicine file format
JPEG – Joint Photographic Experts Group
Matlab – Mathworks .m file
Minc – Multimodality format from MNI
NEMA – ACR-NEMA 2.0
Papyrus – DICOM compatible file format
PGM
PNG – Portable Network Graphics
PPM – Portable Pixmap File Format
QuickTime – QuickTime
Raw
Siemens Somaton
SPM SPM (Analyze 7.5 variant)
TIFF Tagged Image File Format
XIF

2.6 Ethics and Responsibility :

The main benefactors from this project in its current state would be those in the medical profession, medical institutions and students. A major focus regarding the initial selection of this project was the opportunity to make a difference to the medical and educational system in Ireland. The easy to use interface makes this application accessible to all users of the internet. Anyone with a PC and an internet connection can utilise the application and experience diagnosis firsthand.

The images are of a personal nature and maybe considered intrusive by some. Only necessary information is collected, just the images, and the cases are fictional nullifying this issue. This ensures maximum confidentiality and privacy. The representation of the organs is extremely accurate reducing the risk of mistakes in diagnosis.

Many tutorials and books were referred to for each component in this application. These have been referenced accordingly. Regarding employment, the application would lessen the workload of those in the medical
industry. With the addition of more features, this application could become a market contender against other medical image viewers, thus creating employment. The number of employees would depend on the success of FlashMed.

FlashMed is reliable up to 1000 images and keeping well within this limit decreases the risk of the program crashing, ensuring that the application is not viewed as a liability. All results have been published and are in Chapter 6.
FlashMed does not discriminate against anyone based on their gender, race religion or age.

Flashmed.com is copyrighted. It belongs to an advertising site, a ‘link farm’. There are several other companies called Flashmed. This was only realized on the 12/04/2007.

Chapter 3 – Design

The client would be designed first and would form the basis for the server page. An issue that was not resolved was that of DICOM import. As Flash does not support this, a script would have to render the dataset. After much researching, a solution to this problem could not be derived. The following components were decided upon to be included in the final application. Once implemented, the remaining time would be spent on .dcm import.

· Left / Right Buttons to scroll through the images
· Slider bar to scroll through the images
· Zoom In / Out
· Timer
· Panning Functionality
· Marking capabilities
· Reset button
· Data-field to display information about the case study
· Feedback capabilities to enable the user to learn
· Threshold functions

The aesthetic view of most of the open source small scale viewers are bland and colour free. The appearance of FlashMed would appear colorful in comparison.

In designing the program, it was broken up into specific tasks. The following figures illustrate all the functions and methods used in FlashMed.

FIGURE 3.1 – LOADING PHASEFIGURE 3.2 – CHANGING IMAGE PROCESS

FIGURE 3.3 - WINDOWING - FIGURE 3.4 – DRAG AND MARK FUNCTIONALITY

FIGURE 3.5 – SERVER RESPONSE

FIGURE 3.6 – DYNAMIC THRESHOLD - FIGURE 3.7 – RESET AND ZOOM FUNCTIONALITY

Chapter 4 – Implementation of the Client

4.1 Client Application :

In developing the application, it was split up into different sections. Many tutorials and books were referred to for each component.

The following layers were created in order to separate the different components on the stage :

actions : All the actionscript is located here.
serverResponse : Contains the movie clip serverRepsonse. This is displayed when the answers come from the server.
background : Contains backgroundBG movie Clip
loading : Contains the loading movie clip that displays the load progress.
logo : FlashMed logo
timer : Holds the text objects for time and mark position: x, y & z position of the mark
textbox : Holds the dynamic textbox for the case information
slider : Holds the slider which changes the images

ImageControls : This layer holds the ImageControl movie clip that displays TextInput when thresholding is selected.

buttons : Holds all the buttonsmask : This is mask that covers the loaded photos. It is needed so that the images will only be visible on that portion of the screen.
photo : Image holder

4.2 Client GUI :

The GUI was created on the stage.
The text area for the case information was created in the following way:

  • The text tool was selected from the tools panel,
  • In the properties panel, dynamic text was selected.
  • The textbox was drawn by clicking and dragging a rectangular shape,
  • A layer was created, textbox.

Textboxes in Flash have embedded scrollbars.

All buttons were sourced from the internet. The logo, the buttons for threshold and windowing were created in Flash using the available fonts. The underlying blue panel was created by dragging a rectangle and filling it with colour. By experimenting with the colours, the resulting effect was achieved. The final design of the application is shown in Figure 4.1.

FIGURE 4.1 – FLASHMED

4.3 Loading the Application :

The required libraries were imported.

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.geom.Rectangle;
import flash.geom.Point;

All variables were declared and initialized.
The images are loaded using this object. They are loaded into the bmpImages array.

var imLoader:MovieClipLoader = new MovieClipLoader();

This is the index of the currently displayed image.

var sIndex=1;

The Event Handler that tracks load progress.

var imLoadMeter:Object = new Object();

All the images will be loaded into this BitmapData array.

var bmpImages= new Array();

The Bitmap representation of the image currently being displayed.

var bmpCurrent:BitmapData = new BitmapData();

This object will load and parse configuration file, config.xml.

var xml1:XML = new XML();

This sets which dataset Flash will be using. The value dataset is set from the Flash Parameter “FlashVars” in the html document, covered in section 5.2.

var datasetRoot = dataset+"/";

The extension for the image files currently being used. It is set to default. This is only needed if the <extension> tag cannot be read from the config.xml file. This was changed during testing to allow for other formats.

var extension=".jpg";

The description that is displayed at the right panel. This is read from the configuration file, config.xml.

var description;

The first image number is stored in startIndex and the last image number is stored in endIndex.

var startIndex;
var endIndex;

This is the slider displacement per image. It is used by the “slider” movie clip.

var picPer;

Which windowing function has been selected. It is a mixed variable. It will contain the strings “bone”, “head”, “headFP”, “tissue”, or “threshold”. When windowing is not used the value is either 0 or null.

var windowRegion=0;

This is an array. It stores the center and width of each window region. The values come from the configuration file. Many arrays are created in this application. [ B ] and [ M ] were referred to.

var windowing= new Array();

This is a parallel array for recording cancer spots. These are the marks selected by the user per each image. A parallel array indicates that the information is related.

var points = new Array();

This array contains the images that have marks recorded.

var imagePoints = new Array();

Flash can only load images from a movieclip. -1000 is the depth of the movie. This movieclip is removed once all the images are loaded. This value was changed during testing to allow for larger datasets.

this.createEmptyMovieClip("data_image",-1000);

Next the reading of the configuration file, config.xml, is initialized. Flash has a built-in XML parser meaning that it can send and receive XML data. Many tutorials and books were consulted to configure the XML – Flash interaction including [ B ], [ C ], [ D ], [ N ], [ 49 ], [ 50 ] and [ 48 ]. The XML document needs one “container” tag in which all other subordinate tags will be nested. Each opener and closer tag set is called a node.

function readConfiguration(){
xml1.load(datasetRoot+"config.xml");
xml1.onLoad = parse;

Once the xml is loaded by Flash, it invokes the parse method. Here the program navigates through the xml tree of config.xml and retrieves all the required information. This xml tree is illustrated in section 5.3.

function parse(s:Boolean){
if(s){
var child:XMLNode = xml1.firstChild; // Dataset
for(var i=0;i<child.childNodes.length;i++){
var node:XMLNode = child.childNodes[i];

The description section contains the description to be set at the right text box. It is stored in description variable initially.

//case description
if(node.nodeName=="description"){
_root.description = node.firstChild.nodeValue;
} //image parameters
else if(node.nodeName=="imageFile"){
for(var j=0;j<node.childNodes.length;j++){
var node1:XMLNode =
node.childNodes[j];

Then the baseName is the root name of the image. Thus, if the images’ name is “slice 1”, basename would be ‘slice’.

//basename of images
if(node1.nodeName=="baseName"){
_root.baseName=node1.firstChild.nodeValue;
}

The startIndex and endIndex variables store the first and last image numbers in the dataset.

//first image number
else if(node1.nodeName=="start"){
_root.startIndex =
node1.firstChild.nodeValue;
}
//last image number
else if(node1.nodeName=="end"){
_root.endIndex = node1.firstChild.nodeValue;
}

extension is the file format of the images. The application can only render one type of

format at a particular instance.

//file format of the images
else
if(node1.nodeName=="extension"){
_root.extension =
"."+node1.firstChild.nodeValue;
}

windowing is an array that stores center and width values for each window region.

//if any of the window functions are chosen
else if(node.nodeName=="window"){
for(var j=0;j<node.childNodes.length;j++){
var node1:XMLNode = node.childNodes[j];
for(var k=0;k<node1.childNodes.length;k++){
var node2:XMLNode = node1.childNodes[k];
if(node2.nodeName=="center")
center = node2.firstChild.nodeValue;
else if(node2.nodeName == "width"){

w_width =
node2.firstChild.nodeValue;
}
}
_root.windowing[node1.nodeName] =
new Array(center,w_width);
}
}
}
_root.sIndex=_root.startIndex;
loadImage();
}
}

This section attaches and defines various image loading events. As the images are loaded, it is put in the bmpImages array. The loading screen is also updated.

imLoader.addListener(imLoadMeter);
imLoadMeter.onLoadProgress = function(im:MovieClip,l,t){
if(t>0)
redrawLoading(l/t);
}

imLoadMeter is invoked when loading of one image is completed. The image loaded in the movieclip is transferred to bitmap object using the draw method. If the index of loaded image is less that endIndex, read from config.xml file, another loadImage() is initiated and sIndex is incremented by 1. Else loadComplete() is called. This is the first method called when all of the loading of configuration and images into memory is complete.

imLoadMeter.onLoadInit= function(im:MovieClip){
var bmp:BitmapData = new
BitmapData(im._width,im._height);
bmp.draw(im,new Matrix());
bmpImages[sIndex]=bmp.clone();
_root.sIndex++;
if(sIndex<=_root.endIndex){
loadImage();
}
else{
loadComplete();
}
}
imLoadMeter.onLoadComplete = function(im:MovieClip){
redrawLoading(1);
}

Senocular.com [ 36 ] provide an excellent tutorial on a creating a loading bar which was used as a reference. Student.pacs [ 1 ], Spoono.com [ 42 ] and Flashdevils [ 47 ] were also covered. Here the loading progress bar is updated. The movieClip “loading” is responsible for displaying the loading process. As each image is loaded, some percentage of the loading progress completes. It is the ratio of bytes loaded of the current image. The total is calculated as (number of images loaded * per image percentage) + load ratio* per image percentage. The final loading screen is shown in Figure 4.2.

function redrawLoading(loadRatio:Number){
//width set to 500px
maxWidth=500;
numImages = this.endIndex - this.startIndex;
perImagePercent = 100.0/numImages;
_root.loading.percentText=Math.round((_root.sIndex-
_root.startIndex+loadRatio)*perImagePercent) + " %";
root.loading.percentBar._width = (_root.sIndex-
_root.startIndex+loadRatio)*perImagePercent*maxWidth/100.0;
}

FIGURE 4.2 – FLASHMED LOADING SCREEN4.4 Loading the Image Files :

Once the parse is complete, it calls the loadImage() method.

function loadImage(){
imLoader.loadClip(datasetRoot+this.baseName+sIndex+extension,d
ata_image);
}

This method asks the MovieClipLoader object imLoader to load an image to a movie clip data_image. imLoader has a listener imLoadMeter that tracks the loading of each image. On each onLoadProgress and onLoadInit event of imLoadMeter, the loading MovieClip’s percentText and percentBar are updated.

loading.percentText=Math.round((sIndex -
startIndex+loadRatio)*perImagePercent) + " %";
loading.percentBar._width = (_root.sIndex -
startIndex+loadRatio)*perImagePercent*maxWidth/100.0;

The onLoadInit event occurs when the image is loaded and initialized. At this moment, the BitmapData from the data_image movieclip is retrieved and stored in bmpImages array.

imLoadMeter keeps track of the number of images loaded in the sIndex variable, which is incremented each time. Once all the images are loaded, sIndex is equal to endIndex, then the loadComplete method is invoked, from where the application starts running. loadComplete initializes various variables and hides the inactive movieclips loading, backgroundBG, and serverResponse which are not needed.
This is the next method that is called after all the loading is complete. The purpose of this method is clean up objects used during the loading process and to initialize the main flash content that shall be viewed. MovieClips like data_image (used to load images), loading (the movie clip containing loading progressbar) are removed from the stage. It also initializes various variables and the properties used.

function loadComplete(){
this.data_image.unloadMovie();
_root.loading.unloadMovie();
_root.photoX=_root.photo._x;
_root.photoY=_root.photo._y;
//not needed
_root.sendAnswer._visible=false;
_root.ImageControls._visible=false;
_root.serverResponse._visible=false;
_root.blockingBG._visible=false;
_root.textInstance.htmlText = _root.description;
_root.picPer = 100/(_root.bmpImages.length-2);
_root.sIndex=_root.startIndex;
pT.text=_root.endIndex;
pNR.text=1
_root.bmpCurrent = bmpImages[_root.sIndex].clone();
var p:MovieClip = _root.photo.createEmptyMovieClip("holder", 11);
p.attachBitmap(_root.bmpCurrent,p.getNextHighestDepth());
setTimerInt=setInterval(setTime,1000);
}

A utility function to convert 0-255 to its hex representation was created. The threshold function requires a number to be in the form 0xAARRGGBB form. Hexadecimal gives greater flexibility in color value representation. [ H ] [ 66 ]

function decToHex(n:Number){
var hex =
["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
//least significant digit, right most
lsd = hex[n%16];
//most significant digit, left most
msd = hex[Math.floor(n/16)];
var r:String = msd.toString()+lsd.toString();
return r;
}

4.5 Windowing and Thresholding :

Highlighting a region of interest is done through the various Bitmap API’s provided by Flash 8. Many tutorials and books were consulted during design including [ Flash 8 Help ], [ B ], [ C ], [ H ], [ M ], [ 51 ], [ 52 ], [ 61 ].

function highlightRegion(w_center,w_width){

In the case of windowing, ImageControls will be visible. The text inputs will contain left and right thresholds rather than center and width. After the calculations are performed, they are set to their respective fields.

if(windowRegion=="threshold"){
//calculate left window
_root.ImageControls.w_left.text = (int(w_center)-
int(w_width)/2).toString();
//calculate right window
_root.ImageControls.w_right.text =
(int(w_center)+int(w_width)/2).toString();
}

Convert the width and center values passed to us in the range of (-1024 to 2000) to (0 to 255).
The formula for center is :
V255 = (abs(min1024) + v1024)*255/(abs(min1024) + max1024).
V255 : value in 0-255 range,

v1024 : value in -1024-2000 range,
min1024 : min value in -1024-2000 range
max1024 : max value in -1024 to 2000 range
The formula for width is :
W255= W1024 *255/ (abs(min1024) + max1024)
w1024 : width in -1024-2000 range and
w255 : width in 0-255 range

c = (1024+int(w_center))*255/3024;
w = int(w_width)*255/3024;

Once the center and width is converted to the range of 0-255, the left is calculated as left = center-width/2 and right as right = center+width/2.

l = Math.round(c-w/2);
r = Math.round(c+w/2);
if(l<0)l=0;
var hex_l:String=decToHex(l);
var hex_r:String=decToHex(r);
var threshold_left = int("0xFF"+hex_l+hex_l+hex_l);
var threshold_right = int("0xFF"+hex_r+hex_r+hex_r);
var bmpTemp:BitmapData = _root.bmpCurrent.clone();
var bmpThreshold:BitmapData = new
BitmapData(bmpTemp.width,bmpTemp.height);

For example, for center of 400 and width of 1600, the ‘left’ value will become
Left = 400 – 1600/2

= 400 – 800
= – 400

Similarly,
Right = 400 + 1600/2
= 400 + 800
= 1200.

The windowing array contains the center and width of each highlight region. The threshold() method is used to remove all pixels outside the region of interest. The operations used for threshold are “<” (less than) and “>” (greater than). This method replaces all the pixels matching the operation by other pixels. First, the threshold_left and threshold_right value is computed from the center and width value. The input range of -1024 to 2000 is converted to 0-255. Then, it is determined what will be the replaced pixel value after thresholding, color1 or color2.

After performing the operation, the modified bitmap is attached to hightlight movieclip. There are various buttons to highlight the particular regions. These are all handle.onPress events. They set the windowRegion variable according to button and call the highlightRegion() method.

var color1:Number;
var color2:Number;
color2 = int("0xffffffff");
color1 = int("0xff000000");
/*apply threshold, first for left and then for right*/
var num:Number = bmpThreshold.threshold(bmpTemp,new
Rectangle(0,0,bmpTemp.width,bmpTemp.height),new
Point(0,0),"<",threshold_left,color1,0x00ff0000,true);
num=bmpThreshold.threshold(bmpThreshold,new
Rectangle(0,0,bmpThreshold.width,bmpThreshold.height),new
Point(0,0),">",threshold_right,color2,0x00ff0000,true);
_root.photo.highlightImage.attachBitmap(bmpThreshold,11);
_root.photo.highlightImage._visible=true;
bmpTemp.dispose();
}

When Threshold button is selected, ImageControls movie clip becomes visible. It contains two TextInput controls w_left and w_right in which the values for left and right, black and white, are entered. These values  determine the threshold value. The controls w_left and w_right have a listener attached that listens to when the user hits enter, upon which, the new highlighted area is displayed. The new value is converted into center and
width and stored in the windowing array.

var uiListener:Object = new Object();
uiListener.enter = function(oEvent:Object):Void{
if(_root.windowRegion==null || _root.windowRegion==0)return;
var tLeft:Number;
var tRight:Number;
if(oEvent.target._name=="w_left"||oEvent.target._name=="w_righ
t"){
tLeft = int(_root.ImageControls.w_left.text);
tRight = int(_root.ImageControls.w_right.text);
}
//center
windowing[_root.windowRegion][0]=int(tLeft+tRight)/2;
//width
windowing[_root.windowRegion][1]=int(tRight-tLeft);

For example, when the user enters black and white values, -400 and 1200 respectively,

w = int (tRight-tLeft) = 1600
c = int (tLeft+tRight)/2 = 400

_root.photo.loadPhoto();
oEvent.target.editable = false;
oEvent.target.editable = true;
}
_root.ImageControls.w_left.addEventListener("enter",uiListener);
_root.ImageControls.w_right.addEventListener("enter",uiListener);

These are all the buttons mentioned previously for the windowing. This sets the windowRegion variable to indicate that windowing of a particular portion is being done. It calls highlightRegion() with their corresponding center and width value. These values are read from config.xml file and stored in ‘windowing’ array.

//head
head.onRelease=function(){
resetAllRegions();
if(_root.windowRegion==null||_root.windowRegion==0||_root.wind
owRegion!="head"){
this.gotoAndStop(2);
_root.windowRegion="head";
highlightRegion(windowing["head"][0],windowing["head"][1]);
}
else {
_root.windowRegion=null;
}
}
//lung
lung.onRelease=function(){
resetAllRegions();
if(_root.windowRegion==null||_root.windowRegion==0||_root.wind
owRegion!="lung"){
this.gotoAndStop(2);
_root.windowRegion="lung";
highlightRegion(windowing["lung"][0],windowing["lung"][1]);
}
else {
_root.windowRegion=null;
}
}
//headFP
headFP.onRelease=function(){
resetAllRegions();
if(_root.windowRegion==null||_root.windowRegion==0||_root.wind
owRegion!="headFP"){
this.gotoAndStop(2);
_root.windowRegion="headFP";
highlightRegion(windowing["headFP"][0],windowing["headFP"][1])
;
}
else {
_root.windowRegion=null;
}
}
//bone
bone.onRelease=function(){
resetAllRegions();
if(_root.windowRegion==null||_root.windowRegion==0||_root.wind
owRegion!="bone"){
this.gotoAndStop(2);
_root.windowRegion="bone";
highlightRegion(windowing["bone"][0],windowing["bone"][1]);
}
else {
_root.windowRegion=null;
}
}
//tissue
tissue.onRelease=function(){
resetAllRegions();
if(_root.windowRegion==null||_root.windowRegion==0||_root.wind
owRegion!="tissue"){
this.gotoAndStop(2);
_root.windowRegion="tissue";
highlightRegion(windowing["tissue"][0],windowing["tissue"][1])
;
}
else {
_root.windowRegion=null;
}
}
//threshold
threshold.onRelease=function(){
resetAllRegions();
if(_root.windowRegion==null||_root.windowRegion==0||_root.wind
owRegion!="threshold"){
this.gotoAndStop(2);
_root.windowRegion="threshold";
ImageControls._visible=true;
highlightRegion(windowing["threshold"][0],windowing["threshold
"][1]);
}
else {
_root.windowRegion=null;
}
}

FIGURE 4.3 – ORIGINAL IMAGEWINDOW FOR HEAD / HEADFP





FIGURE 4.7. – WINDOW FOR TISSUE

FIGURE 4.6. – WINDOW FOR BONE

FIGURE 4.5. – WINDOW FOR LUNG

FIGURE 4.8. – THRESHOLDING

4.6 Navigate through the Images :

There are three ways user can navigate through images :
a. Next / Back Button : When it is clicked the movieClip’s changePhoto() method is invoked with either 1 or -1 as parameter

b. Slider : The offset of slider handle from the beginning of the rail determines whether to show the next or previous image. It also invokes the changePhoto() method of MovieClip

c. Keyboard : The user can press left or right arrow keys to changePhoto().

MovieClip.prototype.changePhoto = function(d:Number) {
_root.photo['bubble1'].removeMovieClip();
_root.sIndex = int(_root.sIndex)+d;
if (_root.sIndex<_root.startIndex) {
_root.sIndex = _root.endIndex;
}
if (_root.sIndex>_root.endIndex) {
_root.sIndex = _root.startIndex;
}
this.loadPhoto();
pNR.text=int(_root.sIndex);
if(_root.slider.sliderState==0)
_root.slider.handle._x=_root.slider.rail._width/100*_root.picPer*(_r
oot.sIndex-_root.startIndex);
};

changePhoto() does the following : It first removes the bubble1 movie clip, if it exists, from the photo MovieClip. It then increments and adjusts the sIndex. sIndex points to the index of bmpImages array that contains the next image to be displayed. It then calls loadPhoto() and updates slider handle and texts.

MovieClip.prototype.loadPhoto = function(){
/*Find if spot was marked for the current image. If so,
display it and update appropriate properties*/
for(i=0;i<imagePoints.length;i++){
if(imagePoints[i]==sIndex){
_root.photo.attachMovie("bubble","bubble1",999);
var p = points[i].split("a");
_root.photo['bubble1']._x = Math.round(p[0]);
_root.photo['bubble1']._y = Math.round(p[1]);
_root.markX.text=Math.round(p[0]);
_root.markY.text=Math.round(p[1]);
_root.markZ.text=sIndex;
break;
}
}
/* update the bmpCurrent BitmapData. Set the new image to
"holder" movie clip*/
_root.bmpCurrent = _root.bmpImages[_root.sIndex];
var p:MovieClip =
_root.photo.createEmptyMovieClip("holder",11);
p.attachBitmap(_root.bmpCurrent,p.getNextHighestDepth());
/*Apply hightlighting if windowing is used.*/
if(_root.windowRegion!=null&&_root.windowRegion!=0)
highlightRegion(_root.windowing[_root.windowRegion][0],_root.windowi
ng[_root.windowRegion][1]);
else
resetAllRegions();
/*Update slider positions and text*/
}
/*left arrow, right arrow interaction. Used to change images*/
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}

};

loadPhoto() method updates the bmpCurrent variable that holds the BitmapData representation of image to be displayed. This BitmapData is attached to holder movieclip of photo. It checks if there is any marks set by user for this image and if found, attaches the bubble1 movieclip to the photo at the x,y position stored in points array. Also, if windowing is in use, it adds highlight movieclip to photo through highlightRegion() method.

4.7 Marking Points :

When the Mark button is selected and the user clicks on the image, marks are set at that location, bubble1 acting as the display for mark. If one mark is already present for this image, it is moved to a new location. The selected point is set in the points array. The image number is saved in the imagePoints array. These two arrays work in parallel. The values of all the related fields are updated. The user can remove the point marked from the
image by holding SHIFT and clicking on the image. The selected point is saved as a string with ‘a’ acting as the separator for x and y values. This is done for making the call to check answers easier. The number of points  marked is displayed with “ points recorded.”

photo.onPress=function(){
if(_root.blockingBG._visible==true)return;
if(_root.doDrag)this.startDrag();
else if(_root.doMark){
//When Shift is pressed and mouse clicked, the spot
on the image is deleted
if(Key.isDown(Key.SHIFT)){
for(i=0;i<points.length;i++)
if(imagePoints[i]==sIndex){
points.splice(i,1);
imagePoints.splice(i,1);
break;
}
_root.photo.bubble1.removeMovieClip();
if(points.length<10){
statusText.htmlText = points.length + "
point(s) recorded.";
sendAnswer._visible=false;
}
return;
}
//mark x coordinate
_root.markX.text=int(this._xmouse);
//mark y coordinate
_root.markY.text=int(this._ymouse);
//mark picture number
_root.markZ.text=_root.pNR.text;
var i:Number;
if(_root.photo['bubble1']==undefined){
_root.photo.attachMovie("bubble","bubble1",999);
i = points.length;
points[i] =
this._xmouse.toString()+"a"+this._ymouse.toString();
imagePoints[i]=sIndex;
}
else {
for(j=0;j<points.length;j++){
if(imagePoints[j]==sIndex){
points[j] =
this._xmouse.toString()+"a"+this._ymouse.toString();
break;
}
}
}
_root.photo['bubble1']._x=this._xmouse;
_root.photo['bubble1']._y=this._ymouse;
if(points.length>=10){
sendAnswer._visible=true;
statusText.htmlText="";
}
else {
sendAnswer._visible=false;
statusText.htmlText = points.length + "
point(s) recorded.";
}
}
photo.onRelease=function(){
this.stopDrag();
}
photo.onReleaseOutside=function(){
this.stopDrag();
}
}

This sets the _root.doMark to true or false depending on the button.

mark.onRelease=function(){
if(_root.doMark){
this.gotoAndStop(1);
_root.doMark=false;
}
else {
this.gotoAndStop(2);
_root.doMark=true;
_root.doDrag=false;

FIGURE 4.9 – BUBBLE USED TO MARK IMAGESFIGURE 4.10 – DISPLAY OF THE COUNT OF NO. OF POINTS RECORDED

4.8 Sending Points to the Server :

FIGURE 4.11 – SEND BUTTONWhen the user selects 10 answers, they can send them to the server to be checked. Again, there is the usage of an XML object, ansXML, to get the response from the server. There is no other way in flash to get any text from the server internally. [ 53 ] This caused many errors during design. The getURL( ) method in Flash was tried but this only opens up a new browser window. Many tutorials at Kirupa.com were studied including [ 54 ] and [ 55 ].

Similar to the loading configuration, load checkpoints.php. The parameters to this page are passed through the query strings, sting after ‘?’, as name=value pair. The parameters are dataset name, points selected by user, width of bubble1 and height of bubble1. When the data from the server comes, onData method of XML object is called by Flash. serverResponse movieclip is made visible and the result is displayed in a dynamic text-field serverText . It is handled by the displayAnswer method. The movieclip has a close button, which when clicked removes serverResponse.

var ansXML:XML = new XML();

When the send button is clicked the blockingBG, black tint, is made visible. The points are converted to query string variables, the “a” is added.

_root.sendAnswer.onRelease = function(){
_root.blockingBG._visible=true;
var p=new Array();
for(i=0;i<points.length;i++){
p[i]=imagePoints[i]+"a"+points[i];
}

var strPoints:String = p.join(",");
ansXML.load("checkPoints.php?dataset="+dataset+"&width="+_root
.photo.bubble1._width+"&height="+_root.photo.bubble1._height+"&point
s="+strPoints+"&c="+new Date().getTime());
ansXML.onData = displayAnswer;
}
function displayAnswer(str:String){
_root.serverResponse._visible=true;
_root.serverResponse.responseText.htmlText =str;
}
_root.serverResponse.btnClose.onRelease = function(){
_root.blockingBG._visible=false;
_root.serverResponse._visible=false;
}


FIGURE 4.12 – RESULTS FROM SERVERRESPONSE

4.9 Other Functions :

4.9.1 Slider :

The tutorial at the agavegroup.com [ 39 ] site was used as a reference to create this. The slider is made up of two components, handle and rail. First, the variable perc (percentage) is assigned and set to zero. Next the function to run when the slider is pressed is created, onPress. Within this function the handle is defined as draggable.

this.perc=0 ;
sliderState=0;
picPer=(100/_root.bmpImages.length);
handle.onPress=function(){

The next line has five parameters:

true: lock the movie clip to the center of the mouse.

0,0,rail._width,0: left, top, right, and bottom boundaries for the movement. It cannot move left of the start point (0). It can only go right the width of the rail element, and cannot go up or down.

this.startDrag(true,0,0,rail._width,0);
sliderState=1;
stopthat=0;
}

When the handle is released, stop the slider.

handle.onRelease=function(){
this.stopDrag();
stopthat=1;
sliderState=0;
}
handle.onReleaseOutside=function(){
this.stopDrag();
stopthat=1;
sliderState=0;
}
this.onEnterFrame=function(){
if(stopthat==0){

This calculates what percentage of the length of the rail the slider has moved. So if the slider is all the way at the left it is zero. If it is all the way to the right, the result is the ceiling (100%). The ceil function was added here as the number of total images varies.

perc=Math.ceil(this.handle._x*100/rail._width) ;
//next image
if(perc>=(_root.sIndex)*_root.picPer){
_root.changePhoto(1);
}
//previous image
else if(perc<(_root.sIndex-1)*_root.picPer){
_root.changePhoto(-1);
}
}
}

FIGURE 4.13 – SLIDER4.9.2 Back Button / Forward Button :

The scripts for the
Back Button :

on (release) {
_root.changePhoto(-1);
}

Forward Button :

on (release) {
_root.changePhoto(1);
}

4.9.3 Zoom :
Sitepoint.com [ 40 ] and Student Pacs [ 1 ] were referred to in the design of this. The image
zooms 20% when clicked.

zoom_btn.onRelease=function(){
_root['emptyFrame'].onEnterFrame=null;
var xx=_root.photo._width*20/100
var yy=_root.photo._height*20/100
_root.photo._width=_root.photo._width+xx
_root.photo._height=_root.photo._height+yy
_root.photo._x=_root.photo._x-xx/2
_root.photo._y=_root.photo._y-yy/2
}


FIGURE 4.14 – ORIGINAL IMAGE

FIGURE 4.15 – IMAGE ZOOMED 100%

4.9.4 Zoom Out:

Once the zoom function was created successfully, this was simpler. Using the if statement, this executes if the width is greater than 512px, the size of the original image.

zoomout_btn.onRelease=function(){
_root['emptyFrame'].onEnterFrame=null;
if(_root.photo._width>512){
var xx=_root.photo._width*20/100
var yy=_root.photo._height*20/100
_root.photo._width=_root.photo._width-xx
_root.photo._height=_root.photo._height-yy
_root.photo._x=_root.photo._x+xx/2
_root.photo._y=_root.photo._y+yy/2
}
else reset();
}

4.9.5 Timer :

In creating this, Student Pacs [ 1 ] and Spoono.com [ 41 ] were referred to. A new layer, timer, and a dynamic textbox were created to display the timer. When the application begins, seconds, minutes, hours are set to 0. Once 60 seconds have passed, 1 minute is added to the clock. Once 60 minutes have passed, 1 hour is added to the clock. If seconds, minutes, hours are single figure digits, add 0 in front.

setTime=function(){
if(sec==undefined){
sec=0;
min=0;
hours=0;
}
sec++;
if(sec==60){min++;sec=0;}
if(min==60){hours++;min=0;}
//add 0 to single digit numbers
if(sec>9)secTxt=sec
else secTxt="0"+sec
//add 0 to single digit numbers
if(min>9)minTxt=min
else minTxt="0"+min
//add 0 to single digit numbers
if(hours>9)hoursTxt=hours
else hoursTxt="0"+hours
//output
timer_txt.text=hoursTxt+":"+minTxt+":"+secTxt;
}


FIGURE 4.16 – DIGITAL TIMER

4.9.6 Drag :

Spoono.com [ 42 ], Actionscript.org [ 44 ] and Toxiclab.org [ 45 ] were all used as references to create the drag function. This is always set to false if mark is selected and vice vearsa.

drag.onRelease=function(){
if(_root.doDrag){
this.gotoAndStop(1);
_root.doDrag=false;
}
else {
this.gotoAndStop(2);
_root.doDrag=true;
_root.mark.gotoAndStop(1);
_root.doMark=false;
}
}

4.9.7 Displaying x, y coordinates :

A dynamic textbox was created to hold the coordinates. The timer layer holds this. Flashvault.net [ 46 ] was referred to while constructing the coordinate display.

_root.photo.onMouseMove = function(){
xx = Math.round(_root.photo._xmouse);
yy =Math.round(_root.photo._ymouse);
CursorStatus.text= "x: "+xx.toString() + " y: "+yy.toString();
}


FIGURE 4.17 – X Y COORDINATES

4.9.8 Reset:

If the height or the width is greater than 512px, this function resets the image to its original size and position when pressed. Flashdevils.com [ 47 ] was referred to.

reset=function(){
photo._x=photoX
photo._y=photoY
if(photo._width>512){
pr=photo._width/512;
photo._width=512;
photo._height=photo._height/pr;
}
if(photo._height>512){
pr=photo._height/512;
photo._height=512;
photo._width=photo._width/pr;
}
}
reset_btn.onRelease=function(){
_root.reset()
}

Chapter 5 – Implementation of the Server

Xampp, an application available from Apache Friends [ 34 ], is running on the server. It simultaneously installs

· Apache 2.2.4

· MySQL 5.0.33

· PHP 5.2.1 & PHP 4.4.5

· phpMyAdmin 2.9.2

· FileZilla FTP Server 0.9.22

· OpenSSL 0.9.8d

Only Apache, MySQL and PHP are needed. If a database were introduced to the application, it would utilise MySQL. Apache requires MySQL to run. The script to check the users marks is written in PHP, checkpoints.php. During the development phase, the scripts were placed in the root directory of the web server. The directory structure of the application cannot be altered in order for it to function correctly.

The directory structure of the application is shown below.

~ ||=======flashmed
            ||----------- flashmed.html
            ||----------- medcase1.html
            ||----------- medcase2.html
            ||----------- medcase3.html
            ||----------- download.html
            ||----------- support.html
            ||----------- flashmed.zip
            ||----------- skull.jpg ( logo )
            ||=======dataset1
                     || ||----------- config.xml
                     || ||----------- points.txt
                     || ||----------- images ( 1 - ... )
            ||=======dataset2
                     || ||----------- config.xml
                     || ||----------- points.txt
                     || ||----------- images ( 1 - ... )
            ||=======dataset3
                     || ||----------- config.xml
                     || ||----------- points.txt
                     || ||----------- images ( 1 - ... )

5.1 FlashMed Web-Site :

All the pages are scripted in HTML, CSS and JavaScript. The three case studies include FlashMed.

The homepage has been validated by the W3C Markup Validation Service. This checks Web documents in formats like HTML and XHTML for conformance to W3C Recommendations and other standards. [ 35 ]

FIGURE 5.1 – FLASHMED LOGO5.1.1 Sample HTML Code :

Sample HTML code from the homepage. The first line is identical on all pages. It declares that the document is HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>FlashMed - Case Study 1</title>
<a href="flashmed.html">>>>>Home>> </a>
<h1><img src="skull.jpg" alt="FlashMed Logo">FLASHMED</h1>
<ol> </ol>

5.1.2 Google Search Box :

Present on the homepage, this is created in HTML. [ G ]

function tweakValue()
{
if (document.searchbox.scope[0].checked)
document.searchbox.q.value += " +site:flashmed.com";
}
<h3>Google Search</h3>
<p>
<form action="http://www.google.com/search" name="searchbox"
method="get">
<input type="hidden" name="hl" value="en">
<input type="hidden" name="ie" value="ISO-8859-1">
<input maxlength="256" size="55" name="q" value="">
<br><input type="radio" name="scope" value="me" checked> my
site only, or
<input type="radio" name="scope" value="all"> all
the web</br>
<input type="submit" value="SEARCH!" name="btnG"
style="font-size:75%;" onclick="tweakValue();">
</form></p>

The tweakValue function is placed between the <head> </head> tags, tests the value of the radio button and appends the special Google search constraint +site:domain to limit the search results to pages from the site specified.

FIGURE 5.2 – GOOGLE SEARCH BOX

5.1.3 Contact Us Form :

Present on the Support and Contact Us page, this is created in HTML. [ G ]

<form action="mailto:sameer.kumar3@mail.dcu.ie" "method="get">
<b>Your name:</b>
<input type="text" name="yourname"><br />
<b>Your e-mail address:</b>
<input type="text" name="e-mail"><br />
<b>Your Institution:<br />
<input type="text" name="institution"><br />
<b>Your Occupation:</b>
<input type="text" name="occupation"><br />
<b>Your comments:</b><br>
<textarea name="feedback" rows="8" cols="70"></textarea><br />
<input type="submit" value="SEND!">
</form>
<style type="text/css">

FIGURE 5.3 – CONTACT US FORM

5.1.4 Sample CSS Code :

This segment of code has been taken from the homepage. It is similar to the CSS on the other pages.

h1
{
font-family: "showcard gothic";
font-size: 800%;
color: rgb(0,0,255);
font-weight: bold;
}
h2
{
font-family: "showcard gothic";
font-size: 200%;
color: rgb(0,0,255);
font-weight: bold;
}
h3
{
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
font-size: 200%;
text-align: center;
}
p
{
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
font-size: 14pt;
}
p.link
{
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
font-size: 200%;
}
p.center
{
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
text-align: center;
}
p.breadcrumb
{
font-family: "showcard gothic";
text-align: center;
font-size: 14pt;
color: rgb(0,0,255);
}
BODY
{
background-color: black;
}
p.strict
{
text-align: center;
}
</style>

5.1.5 Dynamic Clock :

Present on all the pages, this was created in JavaScript. Creating Cool Websites in HTML, XHTML and CSS was used as a reference for this. [ G ]

<script type="text/javascript" language="JavaScript">
function clock() {
var now = new Date();
var hours = now.getHours();
var amPm = (hours > 11) ? "pm" : "am";
hours = (hours > 12) ? hours - 12 : hours;
var minutes = now.getMinutes();
minutes = (minutes < 10) ? "0" + minutes : minutes;
var seconds = now.getSeconds();
seconds = (seconds < 10) ? "0" + seconds : seconds;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amPm;
if (document.getElementById) {
document.getElementById("clockspace").innerHTML = dispTime;
}
setTimeout("clock()",1000);
}
</script>
<body onload="clock()">
<p>The actual time right now is: <span
id="clockspace"></span></p>

FIGURE 5.4 – DYNAMIC CLOCK

5.2 Loading Selected Case Study :

After the application was created, it was exported to a webpage. The HTML that is generated by Flash includes a link to the .swf file. This is present on the Case Study pages.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0" width="750" height="750" id="attempt
flashmed modified" align="center">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flashmed.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="dataset=dataset1">
<embed src="flashmed.swf" quality="high" bgcolor="#000000"
width="750" height="750" name="attempt flashmed modified"
align="center"FlashVars="dataset=dataset1"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Based on the dataset it is to work on, it fetches config.xml file from the server within the dataset folder. The dataset it will work on is set through the parameter FlashVars in the <object> or <embed> tag. [ 56 ] [ 57 ]
In the above, the FlashVars variable is assigned. Thus, in the FlashMovie, the variable dataset will have the value “dataset1” already defined. FlashMed will then load the xml file from “dataset1/config.xml” location.

5.3 config.xml :

[ B ], [ C ] and [ D ] were referred to. The file begins with this first line to indicate it is an XML document.

<?xml version="1.0" encoding="UTF-8"?>

The data contained between <dataset> </dataset> tags is all the information needed for the application. Contained in the <description> </description> tags is the case information of the application.

<dataset>
<description><![CDATA[<b>Case Information:</b>
]> </description>

The information required for each dataset, in this case the basename of all the images is slice and the first image is 1. There are a total of 249 images. All the images are of the .jpg format.

<imageFile>
<baseName>slice </baseName>
<start>1</start>
<end>249</end>
<extension>jpg</extension>
</imageFile>

These are the values for the windowing buttons. They are called when the application is started and stored in the windowing array.

<window>
<head>
<center>400</center>
<width>1600</width>
</head>
<headFP>
<center>400</center>
<width>1600</width>
</headFP>
<bone>
<center>400</center>
<width>1600</width>
</bone>
<lung>
<center>-600</center>
<width>1500</width>
</lung>
<tissue>
<center>40</center>
<width>400</width>
</tissue>
<threshold>
<center>400</center>
<width>1600</width>
</threshold>
</window>
</dataset>

The xml tree of this document is shown in Figure 5.5.

FIGURE 5.5 – XML TREE FOR CONFIG.XML

5.4 points.txt :

This is the file that contains the correct points. This is read by checkpoints.php and compared against the user’s points.

For example, where 11a216a132,
11 = image number
216 = x coordinate
132 = y coordinate

The values are separated by “a” to make it easily distinguishable between numbers. There are 10 points.

11a216a132,12a238a91,33a265a105,54a400a332,75a150a500, 86a170a550, 97a280a529, 118a309a490, 159a496a847, 200a202a283

The following line can contain any message.

Any Other Answers are Incorrect. Please make a note of the correct points in order to review.

5.5 checkPoints.php :

Many tutorials were consulted in writing this script. [ 38 ], [ 58 ], [ 59 ], [ I ], [ J ], [ K ] and kirupa.com. When the file checkPoints.php is called, the first thing this page does is retrieve the parameters to this page. The  parameters to this page come in the form of name=value pairs in query string. This is retrieved using the super global variable of PHP script, $_REQUEST . This is an array of all the parameters in the query string. All variables in PHP start with $. The values from the $_REQUEST array are retrieved as

$datasetBase = $_REQUEST['dataset'];
$width=$_REQUEST['width'];
$height=$_REQUEST['height'];

The correct answers are set in the first line of points.txt file of each dataset. The dataset to use is known and so the file points.txt can be read from the same folder.

$fp=fopen($datasetBase."/points.txt","r");
$strPoints=fgets($fp,5000);

The file is opened using the fopen() method for reading. Then the first line of the file is read using the fgets() method and stored in the $strPoints variable. Next this string is converted to an array using the explode() method. The explode() method can convert a string to an array using a separator, in our case ‘,’.

$points1=explode(",",$strPoints);

Again each individual value of the $points1 array is exploded using the separator ‘a’. This  gives a two dimensional array. Similarly, the points value of $_REQUEST can be converted to an array using the explode() method as above.

$points2 = explode(",",$_REQUEST['points']);

For each element in $points2, it is checked whether it is in the array of correct answers  $points1 using the method contains() in a for loop. If the element is found, it is appended to the array $marks. The string $yourAnswers is created which displays the points in $points2 in a more readable format i.e Image <num>: (<x>,<y>). If the current element is a correct value, $yourAnswers is italicized. Otherwise it is appended to $yourAnswers normally.

for($i=0;$i<count($points2);$i++){
$res = contains($points2[$i],$width,$height);
$p = explode("a",$points2[$i]);
if($res==true){
$marks[]=$p[0];
$yourAnswers = $yourAnswers."<i>Image:".$p[0]."
(".$p[1].",".$p[2].")</i>&nbsp;&nbsp;&nbsp;";
}
else{
$yourAnswers = $yourAnswers."Image:".$p[0]."
(".$p[1].",".$p[2].")&nbsp;&nbsp;&nbsp;";
}
}

$allAnswers is another string which contains all the correct answers read from the points.txt file. As in the case of $yourAnswers, the correct answers from the user are italicized. The $marks array is checked to see whether it is one of the correct answers. Finally, the various messages are displayed using the PHP method echo. The outputs are

<$marks> out of 10 correct.
Your Answers: <$yourAnswers>
Correct Answers:<$allAnswers>

The number of correct answers can be found by finding the size of $marks array using the count() method. $yourAnswers and $allAnswers are compared.

Next points.txt’s second line is read that contains the text to be displayed to the user and display it.

echo count($marks)." out of 10 correct answers.<br>";
echo "<font size='12'><b>Your Answers:</b>
".$yourAnswers."</font><br>";
echo "<font size='12'><b>Correct Answers:</b>
".$allAnswers."</font><br>";
$mes = fgets($fp,4000); /*Read any custom message from
points.txt file.*/
echo "\n";
echo $mes;
contains($p1,$w,$h)

This function first converts the string $p1, which is in the form of 5a44a400, to an array using the explode() method. Next it reads the $points1 array to find the image number represented by $p, i.e. $p[0]. Once found, it compares the x, y positions in $p with the x,y in $points1 with the limit of width and height of bubble1 movieclip. If it satisfies the condition, true is returned. If no matching points are found, false is returned.

function contains($p1,$w,$h){
global $points1;
$p=explode("a",$p1);
for($i=0;$i<count($points1);$i++){
if($p[0]==$points1[$i][0])
if($p[1]>=($points1[$i][1]-$w/2) &&
$p[2]>=($points1[$i][2]-$h/2) && $p[1]<=($points1[$i][1]+$w/2)
&& $p[2]<=($points1[$i][2]+$h/2)){
return true;
}
}
return false;
}

FIGURE 5.6 – FLASHMED HOMEPAGE

FIGURE 5.7 – FLASHMED APPLICATION WEBPAGE

FIGURE 5.8 – DOWNLOAD THE FLASHMED APPLICATION WEBPAGE

FIGURE 5.9 – SUPPORT AND CONTACT FLASHMED WEBPAGE

Chapter 6 – Testing

3 datasets were used in the design and testing process :
· Dataset1 contains 249 images with a total disk space usage of 3.79MB.
· Dataset2 contains 293 images with a total disk space usage of 5.04MB.
· Dataset3 contains 220 images with a total disk space usage of 3.95MB.

6.1 Loading Times :

All datasets were loaded 5 times and the average time is recorded. The cache and history files were deleted after each reload.

6.1.1 Local Machine :

On the development machine the following times were recorded for the datasets. This would have the fastest loading times.
Dataset1 : 23.16 secs
Dataset2 : 27.44 secs
Dataset3 : 20.53 secs

6.1.2 Across Internal Network :

Dataset1 : 28.31 secs
Dataset2 : 37.22 secs
Dataset3 : 23.55 secs

6.2 Internet Browsers :

All pages displayed correctly in each browser.

6.2.1 MS Internet Explorer 7 :

All the relevant pages displayed and functioned correctly in IE7.

6.2.2 Safari :

All the relevant pages displayed and functioned correctly.

6.2.3 Firefox 2.0.0.3 :

All the relevant pages displayed and functioned correctly.

6.3 Operating Systems :

FlashMed successfully ran on all of the operating systems. From these results, it would be safe to assume that FlashMed would execute on any system that could run Flash Player 8.

6.3.1 MS Windows Vista :

The application executed successfully on this platform.

6.3.2 MS Windows XP :

The application executed successfully on this platform.

6.3.3 Apple Macintosh :

The application executed successfully on this platform.

6.3.4 Suse Linux :

The application executed successfully on this platform. It would be safe to assume that FlashMed would execute on all updated versions of Linux.

6.4 Image Formats :

Coolutils.com [ 67 ] offer a free internet conversion service. This was chosen due to the convenience of not needing to install any products. All formats rendered successfully. Only 10 were converted in order to test the marking functionality. The format that was going to be displayed had to be added to config.xml and flashmed.fla.

6.4.1 .jpg :

This is the format of the current images that are displayed.

6.4.2 .gif :

This format displayed correctly.

6.4.3 .png :

This format displayed correctly.

6.5 Dataset Sizes :

An important consideration is the maximum number of images that this application can render. The depth of the movie was changed to 10000. The images were renamed using the application, NameWiz [ 68 ], which offers a free 30 day trial.

6.5.1 Local Machine :

After 9999, testing was discontinued. The loading times were extremely slow as the file size increased, as expected. Once the datasets were greater than 1000 images, all other running applications and browsers caused the loading to slow down even more.

Images Time MB
999 01 : 37 : 23 15.7
1582 02 : 34 : 41 25.1
1999 03 : 04 : 42 31.5
2999 04 : 19 : 27 47.2
3999 06 : 31 : 46 63
4999 08 : 55 : 74 78.8
5999 10 : 05 : 52 94.5
7999 14 : 40 : 65 126
9999 16 : 11 : 37 157

6.5.2 Across Internal Network :

2000 images were tried but failed loading after 75% and 83%. 1582 images was chosen at random for the third attempt.

Images Time MB
999 03 : 40 : 10 15.7

1582 06 : 43 : 77 25.1

6.6 Flash Players :

The application was developed in Flash Professional 8 and so the default player is Flash Player 8. As Flash Player 9 has been released, this is the current version on the internet today.  The application will run on any version from 8 onwards. In the event that the user does not have an updated version of flash player, the application will automatically update to the newer version if an internet connection is present.

Chapter 7 – Conclusions and Further Research

7.1 Conclusions :

With the exception of LeadTools Medical Imaging Suite and Photoshop CS3, the available open-source applications are much more viable options than the expensive viewers littered on the www.

Plans are in place to make FlashMed open-source by making the source file available for download. The many available tutorial sites on the www would be an ideal place to publish the explanatory parts of this document. Adding the ability to download the FlashMed .fla allows any coder to make alterations to its current state.

By completing all the targets set at the beginning of this project, Flash no longer seems daunting. This application also covers server side scripting and website development. By completing such in depth research, this project became clearer and much more manageable.  This application is capable of assisting teachers in the preparation of exams and homework material, therefore easing the teacher’s workload and helping to improve the educational system in Ireland.

7.2 Further Research and Improvements :

7.2.1 DICOM Support :

Flash currently does not support DICOM and so a script would have to be constructed which would render this format.

7.2.2 Addition of more features :

Many other features offered by other viewers could be incorporated into Flash. This list could
include :
· Convert images to other formats,
· Draw, edit and select different parts of an image,
· Interactively adjust the brightness and contrast,
· Generate Histograms,
· Add generic editing functions like cut, copy, paste.
· View other datasets simultaneously,
· Image Effects,
· Multi language support,
· Email features,
· Print options,
· Slideshow,
· IPTC editing, [ 62 ]
· Compression / Decompression,
· Create animations and videos,
· Overlap images over each other,
· Create collages with image thumbnails,
· Support for large images – giga-pixel.
· Multi-monitor compatibility,
· 3D Processing,
· Network Support,
· Complete DICOM Support,
· Ability to split an image into RGB / HSV components,
· Color conversions.

7.2.3 Loading directly from clients hard-disk :

From testing it can be seen that once the datasets were larger than 1000 images, the application’s loading time increased substantially. FlashMed could be changed to download directly to the clients’ hard-disk to decrease the loading times.

7.2.4 ImageJ and ColdFusion :

ColdFusion can be configured to work with ImageJ. It allows the user to manipulate images natively with CF. [ 24 ] This could run on the server and be configured to send .jpg images after reading .dcm, to FlashMed.
CF could also have been used to host the application instead of Apache. However, CF is not open source and it retails at €970 for the standard edition. [ 37 ] As Apache is just hosting the site, it is more than suitable for this purpose. CF has a much broader range of features which would not be utilized if it was hosting.

7.2.5 Creating a .mxp extension for Flash :

Flash allows the creation of extensions, .mxp files, allowing the user to create their own applications in a control panel which contains the essential functions in Flash without directly interfering with the scripts.
The size of the current FlashMed .fla file is approximately 1.5MB. Creating an extension panel for FlashMed would compress this substantially.

7.2.6 Addition of Sandboxes :

Sandboxes are folders that contain data. This would incorporate databases which are easy to manipulate in Flash. Each hospital or school could run one server hosting the FlashMed application and the relevant information and datasets.

For hospitals, each dataset would belong to individual patients, containing their images and their relevant information. Doctors would only need to connect to the server and search for the file to view all the relevant data.
For schools, these sandboxes could contain exams, answers and results for each student recording their progress. For example, in each classroom, the instructor could run FlashMed on his machine which would act as a server, and the students could connect as clients in the classroom simultaneously. Once the students have finished their exams / homework ( by connecting from home ), the results could be sent to a database, thus performing all the corrections for the instructor. These databases would utilize SQL technology.

7.2.7 Stream Datasets in Real-Time :

To reduce the loading time to approximately 15 seconds, images could be streamed over the network in real-time thus eliminating most of the loading process. ColdFusion or Flash Media Server would have to be installed on the server, instead of Apache. Apache does not have the capabilities to stream media.

7.2.8 Include Flash Player 9 :

The application requires Flash Player 8 to run. Flash Player 9 is the current version. Presently, the application automatically updates Flash Player to a newer version if the client is running an older version. In the event of the application being unable to download a newer version, including Flash Player 9 with this package would ensure that this does not hinder a user.

Bibliography

A. Learning Actionscript 2.0 for Macromedia Flash 8, Jen deHaan, Peter deHann, Macromedia, ISBN: 0-321-39415-1, October 13, 2005.
B. Macromedia Flash 8 Bible, Robert Reinhardt, Snow Dowd, John Wiley & Sons, ISBN:0-471-74676-2, 2006.
C. Macromedia® Flash® Professional 8 UNLEASHED, David Vogeleer, Eddie Wilson, Lou Barber, Sams, ISBN: 0-672-32761-9, October 12, 2005.
D. Flash 8: Projects for Learning Animation and Interactivity, Robert Hoekman, Jr., Rich Shupe, O’Reilly, ISBN: 0-596-10223-2, March 2006.
E. Sams Teach Yourself Macromedia Flash 8 in 24 Hours, Phillip Kerman, Sams, ISBN: 0-672-32754-6, October 10, 2005.
F. Macromedia® Studio 8 All-in-One Desk Reference For Dummies, Damon Dean, Andy Cowitt, Wiley Publishing, Inc., ISBN-13: 978-0-7645-9690-2, 2006.
G. Flash 8 Essentials, Paul Barnes-Hoggett et al., Friends of Ed, ISBN: 1-590-59532-7, 2006.
H. Macromedia® Flash® 8: A Tutorial Guide, Jay Armstrong, Jen Dehaan, Macromedia, ISBN: 0-321-39414-3, October 06, 2005.
I. Professional PHP Programming, Jesus Castagnetto, Harish Rawat, Sascha Schumann, Chris Scollo, Deepak Veliath, WROX Press Ltd, ISBN 1-861002-96-3, 1999.
J. PHP5 and MySQL® Bible, Tim Converse, Joyce Park, Clark Morgan, Wiley Publishing Inc., ISBN: 0-7645-5746-7, 2000.
K. PHP & MySQL® For Dummies 3rd Edition, Janet Valade, ISBN-13: 978-0-470-09600-0, 2007
L. Creating Cool Websites with HTML, XHTML and CSS, Dave Taylor, Wiley Publishing Inc, ISBN: 0-7645-5738-6, 2004.
M. Flash 8 ActionScript Bible, Robert Reinhardt, Joey Lott, Wiley Publishing Inc., ISBN-13: 978-0-471-77197-5, 2006.
N. Essential Actionscript 2.0, Colin Moock, O’Reilly Publishing, ISBN: 0-596-00652-7, 2004
O. Dont Make Me Think! A common sense approach to Web Usability, Steve Krug, New Riders Publishing, ISBN 0-321-34475-8, 2006.

References

[ 1 ] StudentPacs.com, www.studentpacs.com, 20/03/2007.
[ 2 ] OSFlash.org, http://osflash.org/jgenerator, 21/03/2007
[ 3 ] FlashComGuru Tutorial, http://www.flashcomguru.com/index.cfm/2005/11/2/Streaming-flv-video-via-PHPtake-two, 21/03/2007
[ 4 ] Kirupa Tutorial, http://www.kirupa.com/developer/mx/photogallery.htm, 21/03/2007
[ 5 ] DreamInCode Forum, http://www.dreamincode.net/home/, 21/03/2007
[ 6 ] Brajeshwar.com, http://brajeshwar.com/reference/as2/flash/display/BitmapData.html, 21/03/2007
[ 7 ] Flash-DB.com Tutorial, http://www.flash-db.com/Tutorials/snapshot/, 21/03/2007
[ 8 ] Flash-DB.com Tutorial, http://www.flashdb.com/Tutorials/transitions/transition.php?page=1, 21/03/2007
[ 9 ] Flash-DB.com Forum, http://www.flash-db.com/, 21/03/2007
[ 10 ] FlashKit Forum, http://board.flashkit.com/index.shtml, 21/03/2007
[ 11 ] Adobe.com Forum, http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=15, 21/03/2007
[ 12 ] TutorialOutpost.com Forum, http://tutorialoutpost.com/, 21/03/2007
[ 13 ] Hotscripts.com, http://www.hotscripts.com/Detailed/64819.html, 21/03/2007
[ 14 ] SmartWebby.com Tutorial, http://www.smartwebby.com/Flash/digital_clock.asp, 21/03/2007
[ 15 ] TutorialOutpost.com Tutorial, http://tutorialoutpost.com/count/7177, 21/03/2007
[ 16 ] Flashscript.biz, http://www.flash8.flashscript.biz/store_image/store_image3.html, 21/03/2007
[ 17 ] DZone, http://snippets.dzone.com/posts/show/1663, 21/03/2007
[ 18 ] Idoimaging.com, http://www.idoimaging.com/index.shtml, 21/03/2007
[ 19 ] http://www.idoimaging.com/cgi-bin/imaging/program.pl?ident=132, 01/04/2007
[ 20 ] Google Search, http://www.google.ie/search?hl=en&client=firefoxa&rls=org.mozilla%3Aen-US%3Aofficial&hs=6Lv&q=define+xml&btnG=Search&meta=, 01/04/2007
[ 21 ] Google Search, http://www.google.ie/search?hl=en&client=firefoxa&rls=org.mozilla:enUS:official&defl=en&q=define:PHP&sa=X&oi=glossary_definition&ct=title, 01/04/2007
[ 22 ] Google Search, http://www.google.ie/search?hl=en&client=firefoxa&rls=org.mozilla%3AenUS%3Aofficial&q=define%3Ajavascript&btnG=Search&meta=, 01/04/2007
[ 23 ] WWW Programming using Computational Logic Systems, Daniel Cabeza, Manuel Hermenegildo, Sacha Varmaa, http://clip.dia.fi.upm.es/lpnet/lpinternet/pillow/lpnet3.html, 01/04/2007
[ 24 ] http://www.benorama.com/coldfusion/components/imaging.htm, 01/04/2007
[ 25 ] ImageJ, http://rsb.info.nih.gov/ij/features.html, 01/04/2007
[ 26 ] Irfanview, http://www.irfanview.com/, 01/04/2007
[ 27 ] ImageMagick, http://www.imagemagick.org/script/index.php, 01/04/2007
[ 28 ] Google Search, http://www.google.ie/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=xKv&q=define+html&btnG=Search&meta=, 01/04/2007
[ 29 ] LeadTools, http://www.leadtools.com/SDK/Medical/Medical-Imaging-Suite.htm, 01/04/2007
[ 30 ] Rubo Medical, http://www.rubomedical.com/, 01/04/2007
[ 31 ] http://homepage.mac.com/rossetantoine/osirix/Index2.html, 01/04/2007
[ 32 ] Adobe Photoshop CS3 Extended, http://www.adobe.com/products/photoshop/photoshopextended/features/allfeatures/, 01/04/2007
[ 33 ] http://www.permadi.com/tutorial/flashVars/, 03/04/2007
[ 34 ] Xampp, http://www.apachefriends.org/en/xampp.html, 03/04/2007
[ 35 ] W3C, http://validator.w3.org/, 03/04/2007
[ 36 ] http://www.senocular.com/flash/tutorials/preloading/, 03/04/2007
[ 37 ] http://www.adobe.com/products/coldfusion/buy/, 03/04/2007
[ 38 ] http://www.freewebmasterhelp.com/tutorials/php, 03/04/2007
[ 39 ] http://www.agavegroup.com/?p=28, 03/04/2007
[ 40 ] http://www.sitepoint.com/article/actionscript-animation-flash, 03/04/2007
[ 41 ] http://www.spoono.com/flash/tutorials/tutorial.php?id=22, 03/04/2007
[ 42 ] http://www.spoono.com/flash/tutorials/tutorial.php?id=17, 03/04/2007
[ 43 ] http://www.spoono.com/flash/tutorials/tutorial.php?id=8, 03/04/2007
[ 44 ] http://www.actionscript.org/forums/showthread.php3?t=72499, 03/04/2007
[ 45 ] http://www.toxiclab.org/tutorial.asp?ID=70, 03/04/2007
[ 46 ] http://www.flashvault.net/tutorial.asp?ID=47, 03/04/2007
[ 47 ] http://flashforum.flashdevils.com/showthread.php?s=&threadid=193171/Formating%20imported%20images.html, 03/04/2007
[ 48 ] http://www.actionscript.org/resources/articles/9/3/XML-101/Page3.html, 03/04/2007
[ 49 ] http://www.tupps.com/flash/faq/xml.html#5-B, 06/04/2007
[ 50 ] http://www.tutorialized.com/tutorial/Flash-and-XML/7660, 06/04/2007
[ 51 ] http://www.sephiroth.it/tutorials/flashPHP/thresold/, 06/04/2007
[ 52 ] http://www.kirupa.com/motiongraphics/twotone.htm, 06/04/2007
[ 53 ] http://www.webmasterworld.com/forum104/397.htm, 06/04/2007
[ 54 ] http://www.kirupa.com/forum/showthread.php?t=71584, 06/04/2007
[ 55 ] http://www.actionscript.org/forums/showthread.php3?t=40745, 06/04/2007
[ 56 ] http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_4150, 06/04/2007
[ 57 ] http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701, 06/04/2007
[ 58 ] http://www.awprofessional.com/articles/article.asp?p=402221&seqNum=15&rl=1, 06/04/2007
[ 59 ] http://ie.php.net/, 06/04/2007
[ 60 ] http://www.sph.sc.edu/comd/rorden/dicom.html, 06/04/2007
[ 61 ] http://radiology.rsnajnls.org/cgi/content/full/236/2/677
[ 62 ] http://www.google.ie/search?hl=en&client=firefox-a&rls=org.mozilla:enUS:official&hs=Hpi&defl=en&q=define:IPTC&sa=X&oi=glossary_definition&ct=title
[ 63 ] IHE, http://www.ihe.net/Technical_Framework/upload/IHE_RADTF_Supp_NMI_TI_2006-05-19.pdf
[ 64 ] http://www.thesitewizard.com/
[ 65 ] http://www.google.ie/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=zXW&q=define%3Aactivex&btnG=Search&meta=
[ 66 ] http://www.actionscript.org/actionscripts_library/Math_Object/more4.shtml
[ 67 ] http://www.coolutils.com/Online-Image-Converter.php
[ 68 ] NameWiz, http://softbytelabs.com/us/downloads.html

Appendix

The following files are included in the accompanying cd :
flashmed.fla : Source flash file
flashmed.swf : FlashMed movie
checkpoints.php : Server script to check correct points.
flashmed.html : FlashMed homepage
medcase1.html : Case Study 1 webpage
medcase2.html : Case Study 2 webpage
medcase3.html : Case Study 3 webpage
download.html : Download FlashMed webpage
support.html : Support and Contact Us webpage
dataset1 : Images for Case Study 1
dataset2 : Images for Case Study 2
dataset3 : Images for Case Study 3
dataset : Contains 9999 images used for testing
points.txt (3) : One file in each dataset containing the correct cancer points
config.xml (3) : One file in each dataset containing the information about the dataset

The .pdf version of this report can be found below.

Macromedias Flash For Remote Access Medical Imaging

VN:F [1.8.8_1072]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.8_1072]
Rating: 0 (from 0 votes)