Web UI Hotkey(shortcut key) Support

In the pursuit of a feature rich Web UI, we looked to the interfaces of popular websites.  As web applications have become more mature, they have acquired many desktop experience-like properties that we find desirable in our application.    One feature in particular that has gained popularity in recent years is the ability to use shortcut keys on a webpage.  This is different from being able to use shortcut keys in the browser, as this is adding the ability to use shortcuts to interact with page elements.

Using its modern web technology stack, Olympus now supports basic Hotkeys.  Currently plugin windows are able to be opened using Shift+plugin_number where plugin_number is a number key, and they are able to be closed using Ctrl+Shift+plugin_number.  Hotkey support is being expanded for more functions within the app, so check back soon for updates.

Advertisements

Using jQuery, CSS3, HTML5 to create a usable frontend

Over the past two weeks much progress has taken place to the Frontend implementation to Olympus.  It was decided that the Web UI should be built with the future in mind.  Therefore, the project makes heavy use of modern web technologies – namely CSS3, HTML5 and the jQuery Javascript library.  CSS3 has been used generously in the details and styling of the Web UI.  HTML5 has not had as much emphasis, however the decision to use it has opened doors to increase the functionality of the project.  The open source jQuery library will be playing a major role in the project.  Aside from simplifying common tasks (ajax calls), the library allows for rapid development of functional UI.  It is the driving force behind the plugin ‘windows’ that appear within the interface as well as other details.  Thanks to the use of a modern web technology stack some possible future features for the Olympus Web UI include drag-and-drop functionality, hotkey/shortcut integration, offline-storage and the inclusion of geolocation into plugins.  Check back soon for progress.

Frontend Implementation

It was decided that the Web UI to Olympus should take the form of browser-accessed web pages.  At its core, each page uses ajax to serve the user content.  A user accesses a basic page from the root server and then live data is fed to the page through a series of ajax calls.  This cuts down on the need for a full-blown web server while at the same time providing the capability to serve real-time data.  A dashboard page loads a list of maintained remote servers.  The user can then click on a maintained server to see all of its plugins running in real-time, and if desired focus in on a particular plugin.

Interfacing between the Web UI and the root server

After much research into different methods of updating the UI as if it were live, we came up with three different methods of communication. The first method we found was WebSockets, which allows you to send data over a single socket. This would allow us to send all the data we needed to the user’s web browser without much trouble. The only problem is that WebSockets is not fully compatible with every web browser. Firefox 4 and Opera 11 have disabled this feature in fear of an exploit. Chrome 4 and Safari 5 continue to use the feature but appear to be planing to disable the feature if actual exploit code is developed. Until this protocol is revised it does not seem like a smart idea to write our program relying on a feature that will most likely not be enabled. From there the next idea was to build a plug in for all the major web browsers which would basically create a socket and pretended the web browser had WebSockets. The problem with this approach is that we would need to design plug ins for each web browser. While building web browser plug ins is an acceptable option, the simplistic option is to use rapid AJAX requests. This idea came from the APE (Ajax Push Engine), however instead of using APE we will be incorporating the feature into our program, allowing the user an easier time configuring their program.

How plug-ins work

There are three parts to a plug-in. The first part is the code that will run on the remote machine. This code can access any part of the machine it is running on and send data back to the root server through standardized library functions. The second part is the root server code. This will be a custom language used simply to parse what is sent to it by the remote machines and send it to the user(s). It runs on top of pre-developed code that handles all the connections using black box functions. Finally there is the Web GUI. This will consist group of HTML objects for the user to use that each display information parsed by the root server code. For now we are going to create a group of object templates. These templates include a pie chart, text box, progress bar, and a line graph. Later there will be other templates that can be used to communicate back to the server; the first will be a text box that will allow you to send messages back.

What is Olympus?

The Olympus server management system will be a program that is able to monitor remote servers, similar to any other server management program. However unlike other server management programs it will be completely based around plug-ins. These plug-ins can modify how a remote server is monitored an how the user or admin can access or control the server. All of the functionality of the program will be in the form of plug-ins, including the basic server information like processor usage. The only monitored aspects of the computer that will not be a plug-in is the current power state of the computer (On or off / disconnected) and the IP address of the machine.