HeaderSIS.jpg

IS480 Team wiki: 2011T1 Technical Complexity (Geographia Team's Project)

From IS480
Jump to navigation Jump to search

High Level Complexity

1. Performance Optimization for Geography of Development

The application loading time is also one of the main focus on our development module. This particular module has to deal with large amount of data compared to other modules. The development modules deal with different development indicators data which each data can run up to 10,000 XML records so far for time series data of 40-year time frame. As the maximum number of indicators are 5, the most XML records we have to deal with could run up to five times mentioned before.

This amount of data might be seemingly insignificant but flash is client side application as well as rich Internet application type and it only deal with typical data of a few mega bytes mostly. Furthermore, until current flash version , it is a single threaded application so background calculation in separate thread cannot be done. Additionally, we aim our application to be independently of server after loading with as few call as possible to PHP service from server.
The difficulty we faced before our new approach:

1. Graphs and Maps cannot catch up time slider autoplay speed
2.Line graph takes very long to load when the country is chosen
3.Frequent hanging in data switching

At first, the xml files were used for the data input and the normal arraycollection ‘for’ looping are done when the data is chosen for specific graph. The amount of data in the arraycollection is too big that the graphs does not have enough time to response to auto play time slider movement in duration of every one second the slider changes. Strangely, the xml file cannot handle large amount of data and loading data from xml file caused frequent hanging of the Eclipse IDE itself on developer computer, let alone application good performance on user computer.
The criteria for new approach development module:

1. Acceptable start-up time
2. Acceptable indicator switching time
3. Few server service invoking as possible -- “User can use the program after even with no Internet connection after application loaded”

The new approach:

For issue 1 & 2 : Prepare data into different dimensions in different Dictionary for faster retrieval
For issue 3 : Eliminate XML files and use SQL Database directly with PHP service as transporter. Use SQL Database for part of data chopping thus eliminating some data looping on client side


Three dictionaries are prepared:

1. key = year , value = data of every country in that year
2. key = countryCode , value of one particular country (countryCode) for timeseries

For thematic map and bar graph, the required data can be easily retrieved with current year value as key from the no.1 dictionary ( yearly Dictionary). When every second changes , the need for looping through the whole collection is eliminated. For line graph, the no.3 dictionary is used. Instead of looping through the whole datacollection to find the every year data for each country, the pre-arranged data can be fetched by simply passing currenty countryCode as key to dictionary. For the application to met the criteria, the following equation must be observed.

ArrayCollection Filling Time + Bin Calculation Time + Map Recolor Time + Vertical Barchart Refresh Time < 1 second

Bin calculation and barchart refresh time are mostly mathematical ones and it takes fractions of the total time. The main concern is the ArrayCollection Filling time ( data preparation ) and Map Recolor Time. We have no control over map recolor time because it is dependent on UI drawing speed on the flash player. Thus we focused on data preparation time and cut down as much as possible to meet the time frame. The new approached cut down data preparation time by ⅔ times and reponsive to time slider second by second movement.

The following observation is done on 40 years time series data:
  • 230 countries / 51 years / 10,000 records (estimated)
  • full data transfer and no going back to server PHP service after application loaded
  • as small data load on the network as possible

GeoComplexity.png


By using dictionary we can avoid looping the whole data set. When Map data is need for particular year '1990', we just need to pass '1990' key to the year dictionary and can get all country value for that year. Thus, it make the dataset to deal at every one time smaller. BarChart only show a subset of '1990' data of Map. For linegraph, any time series data needed for a particular country needs only to pass CountryCode such as 'AUS' for Australia and the required 51 years data will come along so this drastically reduces the need to looping the whole data set. As a result, graph and map responsive to time slider and linegraph drawing rate improved.

Detail Steps :

Code Detail Steps.png

Step 1.png Right arrow.png Step 2.png Right arrow.png Step 3.png
Step 6.PNG Left arrow.png Step 5.png Left arrow.png Step 4.png

2. Credential Security

One of our main concerns is to keep the credentials of the students as well as teachers from schools participating secure in using our application. As different modules of flash run as separate applications, URL variable values have to be passed with a GET method for passing data across loading different modules.

As we pass the variable values, we encrypt the username, classname, schoolname and usertype with the current encryption/decryption key which is autogenerated at the start of our whole appication which is after user successfully logged in through our login page. After the key is generated, the key is stored in the browser’s session until the user has stopped having any interactions with the application. And as the data variables are passed along for different modules, they are decrypted by the respective applications using the session key stored in the browser cookie. With this implementation, the users credentials are kept secure and unauthorized access are prevented from our application.

In a similar manner, the passwords of different users using our application are encrypted in our database using a predefined session key embedded in our application so that even the application owner would not have any access to other users’ accounts though having access to the database.

Our Innovative Solution

Inno sol2.png



Ses key2.png


Please find our detailed codes in our Final Presentation slides.

Low Level Complexity

1. Zoom-slider customization

We use modest map library for our map display in Global Climate map module and modest map library has a fully developed own built-in functionality for map zooming with a zoom slider. However, the zoom levels provided by the default slider are not optimal for classroom teaching context for the secondary school students. As we have conducted our first UAT with the Anglican School students, we realized that the students tend to roam around and zoom in too deep to see the highest level of details provided by different map providers. This does affect the learning capacity of the students as they will spend unnecessary time on exploring the map in details rather on other climate-related learning points as intended by their teachers.

Therefore, we had to go into deep detail to customize the zoom levels provided by the zoom slider up to the extent only to which the students can see the overall continent level views but not deep into city level views. We did this by finding the optimal level for viewing at continent level for the students and work backwards.

The maximum zoom value is kept at 6.20(original slider has 14) and minimum zoom value is kept at 2.0(original 1.0). Therefore, on the slider with 100 grids, one grid represents 0.042 increase in zoom level and increase in 1 zoom level translates into 23.80952 grid on slider. With this, we handle all the zoom events and relative slider value calculation , through mouse-wheel, double click zoom or slider usage, all zoom levels for map are handled for the student at optimal level with the highest map zoom level capped at 6.2 and relatively calculated slider value.

Zslider.png

2. Map Legend

Map legend is what we built up from scratch. Map Legend is separate modularized component which can be reused anywhere. We use basic Sprite object to draw the rectangle color boxes and legend text fields. The legend is dynamic to the changing time slider and background data change. Furthermore, mouse in / mouse out effect are sync with the Map component country color changes. Lots of variables to keep in mind when doing Legend mouse in / mouse out effect : the selected country edge color , the previous country fill color etc.

Geo-mouse-in-out.png


3. Dealing with Asynchronous Services

One other tricky aspect is that dealing with asynchronous PHP call to server. For whole application to function well. We have to take good care on dealing with syncing with application according to webservice response. Furthermore, UI component updates and webservices reponse has to be synced or otherwise whenever visual component is clicked, the null error might occur.

4. Customized Pan Zoom Map Control ( Development Module )

Most of the functionality for thematic map has to be built from scratch and one of them is the zoom slider and panning button ( map controls ). With every map panning clicked, the actual x,y position movement of the Map Sprite object need to be done to create map moving appearance. The zoom slider itself has to be created as the Thematic map library does not consist of any map control or zoom component. The max zoom level is carefully set to be in line with the curriculum needs ( not too detail , not too wide ).

Geo map control.png