From MWCSWiki

Contents 1 Team members 2 Web File Browser 2.1 Final stuff 2.2 Progress 2.2.1 Survey Response 2.3 API 2.4 Description 2.5 Architecture 2.5.1 Client 2.5.2 Server 2.6 Deadlines

Team members

• Eric Holscher
• Elliott Sperlazza
• Sam Jones

Web File Browser

Final stuff

Things to turn in at final

Progress

• Icons will be used from the free icons project.
• The prototype will be hosted here
• Prototype description
• Ajax File Browser Design (With Final Deadlines)
• To see the code, login to rosemary and look in /shared/370FileBrowser/
• Implemented part of tooltip functionality
  • Hovering over a file or directory produces a tooltip preview
  • Used tooltip.js, which can be found here

Survey Response

• Removed:
  • It sees there are too many options on the left side. Can a tool bar be used instead?
    • This might be a good future expansion, but will not be included due to lack of time
  • The upload option on the menu... why have that if you have it at the bottom, too?
    • This has been removed

• Added:
  • Adding the tree as suggested on the site would be an interesting addition.
    • Traveling through the tree really will be just as fast as clicking the icons, so though it may work for a future expansion, this will not be included in the initial release
  • maybe a console for rosemary or paprika
    • this was our initial project that was scrapped because it was too complicated (dealing with vim, scrolling, etc) and will not be included
  • Make the service allow proper login/logout and shows the corresponding files for each user.
    • this is a must have for our project to be at all useful, this will be included
  • maybe organizing the different files
    • This will give the app a more windowish feel, but the desktops aren’t preserved so this idea will not be included
  • drag and drop!
    • Originally included until sortables broke the dropping, but this will be reinstated for the initial release
  • options for detailed view in addition to icon and list view
    • This is really easy to code and really helpful. This will be included.
  • option to create new files within window (a la winscp)
    • I’m not sure what this is asking, but creating blank files without a way to edit them is easy, but not very useful without a way to edit them. This will not be included
  • option to configure to user preferences (color scheme)
    • Creating profiles could be great for future releases, but will not be included in the initial release due to lack of time as it is simply aesthetic

API

Perl docs

Description

The project will consist of a widget that can be displayed on its own or within a larger web page. The widget will prompt the user for his or her username and password. Upon login, the widget will display the contents of that user's home folder on Paprika. The user can double click on a file, which will download that file to the local computer. When the user clicks on a directory, the widget will display the contents of that directory. The files and directories can be shown in icon or list form. All of this will happen asynchronously using Ajax. The user can also choose to upload files to the directory of his or her choosing through dragging and dropping off the users own computer.

The user can hover his or her mouse over the icons in the widget to display information about the files and directories. For example, clicking on an image file will bring up an area, similar to map locations on mapquest, which will display the picture at a defined size. In addition there will be a special DIV set up as preview space allowing the user to see a preview of the file or the contents of the folder. This will be done asynchronously as the browser starts up. The widget will also display other information such as the size of directories, files, and the user's remaining space allowed.

Another feature will be the ability to drag-and-drop files and directories within the browser window to give the application a true desktop feel. The current folder and quota will be updated on a timeout to keep the operation near realtime and accurate if somebody is working on the space at a remote location. This project will be worked on through the shared space on rosemary allowing all three team members access to read and write the code.

Architecture

Client

• JavaScript handles interface events and communication with server
• HTML and CSS creates the user interface

Server

• Perl authenticates the user, connects to host, maintains the session, and executes commands on the host

Deadlines

• Interface prototype (includes page and stylesheet): 3/12/07
• Write scripts to connect to Paprika: 3/19/07 (Eric)
• Write client code: 4/9/07 (Elliot and Sam)
• Test project: 4/23/07