1. Final Year Project Presentation Supervisor : Marker : Prof. Michael R. Lyu Prof. Cai Leizhen LYU 9902 Digital School Student :Wong Kwok Hung 97570894 Wong Ho Yin Starsky 97544174

2. Overview 1) Introduction 2) System level of our project 3) Collaborative Environment (CE) 4) Role Play Collaborative Environment (RPCE) 5) Further Improvement 6) Conclusion

3. 1) Introduction - The aim of this project is to enhance the learning experiences among, learners in team projects and discussions and allow students who are physically apart to perform joint work. - We have implemented the whole system, including the server and the client, for the user - The server is the central control of the whole system. It controls every message to pass through the system and controls the usage of resource inside the system - For the client, participants can invoke one or more activities in it. These include chat room, voting, write board or media sharing.

4. 1) Introduction

5. 2) System level of our project There are four main parts inside the system level of our project: - DirectX library - DirectShow library - WinSock library - The Server

6. 2) System level of our project The Direct X Library - DirectX is a Microsoft Windows® API such that it can provide display of images in 2D/3D and playback audio files on Windows. - APIs provided by Direct X are so confused and complicated, we have constructed our Class of Graphical library to encapsulate the details of the function calls. - We have defined our own class to functions manipulate the graphical data. - Detail has been discussed in the 1st semester

7. 2) System level of our project The DirectShow Library - DirectShow is a Microsoft Windows® API such that it can provide playback multimedia streams. - At the heart of the DirectShow services is a modular system of pluggable components called “filters”, arranged in a configuration called a “filter graph”. - Most filters can be categorized into one of the following three types: 1) Source filter, 2) Transform filter, 3) Rendering filter

8. 2) System level of our project The DirectShow Library Example of the filter graph DirectShow Architecture

9. 2) System level of our project The DirectShow Library - What we had done on DirectShow library ? We had tried to unify all those filters into one function called “PlayMMFile” We can open MultiMedia files on different kind of source, such as from hard disk or from Internet, by one function. We try to unify all different transform filters inside it. That means we can open different kinds of MultiMedia file format, such as MP3 (audio), WAV (audio), DAT (video), MPG (video), AVI (video), … etc, by just one function

10. 2) System level of our project The WinSock Library - WinSock is the network application-programming interface (API) for Microsoft Windows ® - Like the Direct X library, we have also encapsulated the details of the original interface - Detail has been discussed in the lst semester. - This library is mainly used to build the server, and, for communication between the server and the client

11. 2) System level of our project The Server - In order to allow different users to communicate with each other over a network, a server is needed to handle messages (data) passing to and from each client - It is also the central control of resource inside the network - At the 1st semester, we have tried to write a very simple server that can provide broadcast function ONLY. - However, such server is inadequate No security No fault tolerance Cannot send point-to point messages

12. 2) System level of our project The Server - We have made a Improved Server Broadcast message Encryption of each message passing to and from Check each registered client is still alive or not Point-to-point message Feathers Architecture Network protocol - UDP Our own protocol for Server-Client communication.

13. 2) System level of our project The Server - Our own protocol for Server-Client communication Broadcast messages Point-to-point message System messages ‘0’Data\0 1 Byte At most 64kb

14. 3) Collaborative Environment(CE) In the first semester, we have built the libraries and tools for developing multimedia network application. And have built an application called FWLE for teaching English.

15. 3) Collaborative Environment(CE) At the beginning, we want to integrate all the components under FWLE. FWLE ChatroomWriteboardVideo ……. Others ….. This approach is not general enough. Because FWLE is just specified in teaching English. We have modified the structure. FWLE Collaborative Environment (CE)

16. 3) Collaborative Environment(CE) Aim for Collaborative Environment: 2.Allow students who are physically apart to perform joint work. 3.Enhance the learning experiences among learners in team projects. 1.Provide an integrated interface for all the stuff. Feature: 1. All the users can invoke one or more activities( chatroom, voting, writeboard, media room). 2. The instance of each activity runs locally at each users’ site. 3. The response of each user is distributed to all the users.

17. 3) Collaborative Environment(CE) Collaborative Environment (CE) Basic communcation tools provide a interface for teacher and students to communicate and interact. Basic communication tools 1.Chat Room 2.Private Message 3.Write Board 4.Voting 5.Media Room Computer Aided Learning Self Learning Application: 1.FWLE Group Learning Application: 1.Games Computer Aided Learning is for students to “self learn” or “group learn”.

18. 3) Collaborative Environment(CE) Interface of Collaborative Environment: Working Space System message Classmate List Room List

19. 3) Collaborative Environment(CE) Roomlist: Advantages: 1. related activities can be grouped together 2. Room creator can set a limit for the number of user in a room. 3. Room creator can monitor the activities in his room.

20. Ann’s Side 3) Collaborative Environment(CE) Communication Tools: (1) Private Message John’s Side

21. 3) Collaborative Environment(CE) Communication Tools: (2) Chatroom

22. 3) Collaborative Environment(CE) Communication Tools: (3) Write board

23. 3) Collaborative Environment(CE) Communication Tools: (4) Media room

24. 3) Collaborative Environment(CE) Communication Tools: (5) Voting

25. 3) Collaborative Environment(CE) Start the FWLE by choosing the menu: (self learning)

26. 3) Collaborative Environment(CE) Play Games with other: (group learning)

27. 4) Role Play Collaborative Environment(RPCE) The Collaboration Environment (CE) we mentioned in the previous chapter is a traditional menu driven application. But menu driven style interface may not be suitable to all kind of students. Young student or old teacher may feel so confused in dealing with so many buttons, windows and dialogs. It is estimated that at least 30% of the student population face problems in adapting to network-based education. They require in-class interaction and discipline. 2.) Simplify the interface of CE Aim of RPCE: 1.) Try to simulate the learning environment of the real world.

28. 4) Role Play Collaborative Environment(RPCE) Role Play Collaborative Environment (RPCE) Basic communication toolsComputer Aided Learning Application 1.Talking 2.Whispering Self Learning Application: 1.FWLE Group Learning Application: 1.Games 3.Paging Nearing same as CE’s structure. The only difference is the basic communication tools.

29. 4) Role Play Collaborative Environment(RPCE) Interface:

30. 4) Role Play Collaborative Environment(RPCE) ClientServer Map Picture Engine Map Event Admin. Map matrix, Compressed Map Pictures, Map indexing table Movement, Respond State of other clients The pictures are compressed using LZW algorithm.

31. 4) Role Play Collaborative Environment(RPCE) Walking:

32. 4) Role Play Collaborative Environment(RPCE) Talking:

33. 4) Role Play Collaborative Environment(RPCE) Paging: Peter’s side Sam’s side

34. 4) Role Play Collaborative Environment(RPCE) Start the game:

35. 4) Role Play Collaborative Environment(RPCE) Start the CAL:

36. 4) Role Play Collaborative Environment(RPCE) RPCE is a new idea, it still has many weakpoints: - Difficult to integrated some more complicated functions like voting, write board, media room into it naturally. - most of the functions require the target within the same screen. Conclusion: RPCE is very user friendly and easy to use. Possible Improvement: Show the whole world into a small map for easier navigation. Allow student to create their own area on the map.

37. 5) Further Improvement

39. Integrate the programs of last semester into CE/RPCE. We have successfully integrated the reversi into our system.

40. 6) Conclusion - We have designed and built a network-base education system. - We have developed our system in both System level: libraries for network programming libraries for handling the multi media stuff a server Application level: Computer Aided Learning system FWLE for learning English Collaborative Environment (CE) Role-Play Collaborative Environment (RPCE)

41. 6) Conclusion - Due to time limitation, some of our idea cannot be implemented - For example, we implement only one Computer Aided Learning(CAL) system for self-learning. Actually, many different kinds of CAL are exists. Some are even for a group of people. - We hope this project demonstrate a kind of learning environment which is different from traditional one - Finally, hope that this learning environment can be more suitable for future world, which becomes more digitized and computerized

42. ~ The End ~