Online Digital Talking Book Technology with Web and Mobile Clients

A Project Report Presented to
The Faculty of the College of Engineering San Jose State University
In Partial Fulfillment Of the Requirements for the Degree
Master of Science in Software Engineering

By Tanakom Talawat
December 2007

TOC

Chapter 4. Project Design

In this chapter, we will mostly discuss about the designing of both client and server sides. The below figure shows the screenshot at the main page of the project after the user has selected a Digital Talking Book (DTB) from the book listing. It is composed of three panels in this page including the button panel, the content panel, and the detail panel. The description and benefits of each panel will be described in detail later in this chapter.

Figure 3: The sample screenshot at the first page

The Button Panel

The button panel is the main controller of the system; it was created by using the Extensible Application Markup Language (XAML) in Microsoft Silverlight version 2.0. It is composed of Shapes, types of UIElement that enable you to draw shapes to the screen [2], and TextBlocks, lightweight objects for displaying single-line and multi-line multi-formatted text, which are arranged in three-dimensional view [3]. Each button has its functionality which is mapped to the short-cut key for easily using by the blind. In the below, there are three areas, two of them are for adjusting the volume of voice. The other is progress bar of media downloading. Since, the application can start playing a media file since it does not complete downloading the playing media file. This status bar will indicate that how much file was downloaded and where is the current playing position.

Figure 4: The button panel on the left hand corner

In the next table will show all the functionality in controlling the book reading by using the shortcut-key from keyboard. All of these shortcut-keys have been tested with the Microsoft Internet Explorer 7.0 on Microsoft Windows Vista operating system.

Table 2: The relationship between the shortcut key and function in the button panel

With this shortcut-key system, it has provided the great accessibility to the blind. Since the starting point to the ending point, they can control, search and skip the content all over the book without touching mouse which they cannot use. Moreover, this web-based application always provides the necessary voice responding; for example, when the reading voice approached the ending point, it will announce that “This is the last position of the book. Press 7 or the Home button to go to the first position”. Therefore, the blind can know how to maneuver the system without the screen reader application like JAWS [4].

The process of controlling the book will start after the user has selected a book from the book listing. The program will announce the welcome voice and instruct the user to press Home or Keypad7 button. After pressing, the book will begin the reading from the beginning automatically. According to the shortcut-keys in the Table 2, user can skip phrase-by-phrase by pressing the Digit4 and Digit6 buttons to skip backward and forward respectively. They can also press the Digit2 and Digit8 buttons to skip to the previous chapter and the next chapter respectively. In order to reset the position of the reading voice, this program has provided the two shortcut-keys for helping the user return the home position which is Digit7 or the Home button. In other hand, in case they would like to start at the last chapter, it has provided the Digit1 or the End button for return to the beginning of the last chapter in the current Digital Talking Book.

The next controlling feature is to move page-by-page. In order to make feeling of reading Digital Talking Books like the traditional book format, it also supports the paging tag. The user can move to the previous page and the next page by pressing Page Up/Digit9 or Page Down/Digit3 respectively. However, if the user knows a specific page number, they can skip to that page number by using the “Go to page” function by pressing the “Divided key (/)” follows by the page number and Enter key.

The full-text search is another significant feature. It provides full-text searching by comparing the keyword with the context string directly. If the keyword is found in a context, the context will reference to the position of the chapter and reflex to the position in the audio file. Then, the reading voice will be skipped to the position that the keyword was found. There are two directions that users can choose to search either previous or next; the key for opening the search dialog is the “Multiply key (*)”. When finish entering the keyword, the F8 key is waiting for search next, the F9 key is waiting for search previous.

Figure 5: The mapping between shortcut-key and functionality

The Content Panel

The content panel is the great advance of web development to have the powerful Treeview control inside the TabPanel control in the web-page. This combination has been success by using the ASP.NET AJAX technology to built both TreeView and TabPanel controls. Like the concept of AJAX, in the first time of changing between tabs, it needs to get send a request and get a respond to change the interface without flashing the entire webpage. The content panel has been taken this advantage by applying to display all chapters, all bookmarks and all short-notes in the different layers. This arrangement looks simple and easy to understand for normal-sign people. However, it might be insignificant for the blind because they control all reading though shortcut-key system.

Figure 6: The content panel in the bottom left corner

There are three tabs in this panel including the Content tab, the Bookmarks tab, and Notes tab. As displayed in the figure, the current playing chapter or the selected bookmark will be highlighted by making the title name bold and fill the background with yellow color. In the shortcut-key system, there are four defined shortcut-keys that related to the Bookmark tab and Short-note tab in the content panel. Please note that the shortcut-keys for the Content tab in content panel are already stated in the button panel.

Table 3: The relationship between the shortcut key and function in the content panel

With this bookmark feature, users can mark a book position in the phrase level by pressing the Shift button and one of the digit buttons from one to nine.  Otherwise, they can skip to the marked position by pressing Ctrl button and the selected digit button. Moreover, they can delete the unused marked position by pressing both Shift and Ctrl button with the selected digit button. In case users would like to make a short-note, they can press Insert button to type in the note string. The system will convert the filled string to speech (MP3) for playing back to the user before the next time visiting in this phrase.

The Detail Panel

The last panel that will be discussed in this chapter is the detail panel. This panel will display all the book detail in a single page. The backend of this panel is the XML file type but it was converted to HTML by a CSS (Cascading Style Sheets) file. The main control of this panel is the HTML iFrame. It is connected to the other panel by JavaScript (onlinePlayback.js). The HTML page in this panel is always moved and highlighted follow the current reading position automatically. The screen-short of this panel is shown in the Figure 7. The yellow text-highlight indicates the position of the reading voice. In addition, a number in the rectangle box shows the page number.

Figure 7: The detail panel in the left side

Middle-Tier Design

The Middle-Tier application was designed as a passive handler. The expected task in the middle tier is to resolve the chapter name that users selected to the related media file. Therefore, the similar DTB reader was also implemented in the Middle-Tier. However, it is not redundant because the objectives of running are different. Moreover, the DTB reader that was implemented in the Client (ClientBin) cannot be placed on-line at the server. It must be saved at the client side during the run-time mode. This figure shows the class diagram in the middle tier.

Figure 8: Class diagram in the Middle Tier

The other significant design in this tier is about the handler for Short-note. Since the program should be able to support Short-note feature, the application have designed to get a text note from users by typing-in at RIA. Then, the text note will be converted to a string and passed to the Middle-Tier by JavaScript. Once the server has received the note string, Text-to-Speech engine will convert the note string to the audio in WAV format. Unfortunately, The WAV format is not supported for streaming. Therefore, LAME, an open-source media encoding software, has been integrated to the system for converting WAV to MP3 which is the supported format for streaming back to the client.

Data-Tier Design

The data source of this project is the library of all Digital Talk Books which may be stored at the web-server or any part that user can access by using Hypertext Transfer Protocol (HTTP). Designing in this tier is all about customizing the XML parser to be supported the 6 different file types used in a Digital Talking Book including NCX, XML, OPF, CSS, MP3 and SMIL. All details of each file type can be found in the data-tier technologies (Chapter2). From the figure 9, there are two file types that can have multiple file in a DTB including SMIL and MP3.

The most critical file type is NCX, Navigation Control file for XML applications, because this file type includes the three different section including navLabel, navPoint, pageTarget. The three data classes are required for NCX. The other file types have only one section per file which can be extracted and stored in a single data class.

Figure 9: The file types in Digital Talking Books

TOC