Web Interface for Retroshare – Update 2

I Realized that the visual appearance of the application felt very bland and uninteresting, so I decided to shift some of my focus to the design and visual aspect of the UI. I did plenty of reading about UI/UX design principles and modern best practices during this time. And looks like it turned out pretty well, and is definitely a good improvement from the previous appearance. Also, since this is my first attempt at doing professional-level UX design, there is probably room for improvement, so feedback and suggestions are always welcome.

The general theme has been redone from scratch. I chose this soft blue color palette by taking inspiration from the main app’s look:

The home tab, along with displaying the user certificate, now also allows to add friends by using their certificates. It is possible to add friends by copying the certificate contents, dragging and dropping the file, or simply selecting it from the file manager.

Implemented modal messages within the browser that can be used as a popup dialogue box to display any kind of information (here showing information extracted from a Retroshare certificate):

As you can see, the navbar has also been revamped. And the best thing about it? Icons! I along with my mentors agreed on using the Font Awesome icon library, which is open source (licensed with a combination of MIT, CC 4.0 & OFL 1.1 licenses). I can now utilize icons across the whole app.

The downloads tab has also been redesigned. Now showing all downloads in a slightly different way. This layout was chosen with extensibility in mind, it can easily be extended to contain a additional file-related settings and chunk views by having an expandable options box for each file.

The config tab can now be used to change a lot of the setting options similar to the main app. Network, node, services, files and people sections from the app have been implemented. I will shortly finish the remaining sections too.

Also notice the tooltip icon. Which when hovered on, gives a brief description about the option. Just like in Retroshare:

Next steps

Now that the design is steadily making way for a more detailed and specialized variety of widgets and components, I am working on creating tabs for Network, People, Chats, Mail, Channels & Forums so that the Web Interface can finally become a fully usable alternative to the main client app.

You can try out the Web Interface by cloning it from the repository: https://github.com/RetroShare/RSNewWebUI, and my fork: https://github.com/rottencandy/RSNewWebUI. Again, I am always happy to receive feedback and suggestions for improving the Web Interface.

Web Interface for Retroshare – Update 1

Since the first post, there has been quite a lot of progress on development of the new Web Interface for Retroshare.

As the build process is not using any JavaScript-specific tools, I spent a lot of time making sure that the development process was made as streamlined as possible. All the components are logically isolated and functionality moved to their relevant places. Using mithril also helped a lot, which has this concept of components, a mechanism to encapsulate different parts of views. Which massively helps in project organization and code reuse.

One more important feature which was completed is automatic data refresh and redrawing of views. I decided to use a combination of mithril’s lifecycle methods and JavaScript’s browser setTimeout method that can be used to create background tasks which when attached to their respective components, will periodically fetch and refresh data. The background task gets activated whenever a component’s view is rendered and gets killed when a component goes off of display. Mithril also has it’s own auto-redraw system which refreshes views when a component’s event handlers are called. But it does not refresh when component attributes are updated, or when raw promises are resolved.

Here are a few screenshots displaying the new UI style:

Next Steps

Along with the goals displayed in the first post, these will be given a higher priority for completion during the coming phase leading up to the next evaluation:

  • Node panel in config tab for handling most(if not all) network settings like node information, Net mode, NAT, Download limits, ports, etc.
  • Shares panel showing shared files, allowing to edit them, set view permissions, among other options.
  • Peers tab to display connected peers and set their reputations.
  • Modify the main Retroshare client to enable/disable the WebUI.

A new Web Interface for Retroshare

The Retroshare communication platform already has a preliminary web interface. But it is severely limited, supports only the basic of interactions with the client, and does not have the nice design and beautiful visual interface that the modern web platform makes possible. This GSoC project will be about creating an entirely new web interface for Retroshare using it’s JSON API to handle all communication between the WebUI and the client.

About Me

My name is Saud, I’m a third-year undergraduate student in Computer Science at Alliance University, Bangalore, India. This is my first time participating as a student in GSoC as well as my first time being involved in the Freifunk community.

Project briefing

The Web Interface is planned to be made in such a way that all communication with the client happens through the JSON API. As such, It will be made using JavaScript.

The Mithril web framework has been chosen chosen for designing the front-end as well as handling the API calls. Mithril is a very lightweight and fast client-side framework and is especially used for building single-page applications. It also provides neatly integrated and customizable XHR capabilities out of the box.

The old Web UI communicates with the client app entirely through the deprecated libresapi. The new UI will instead be using the JSON API for communication. The JSON API has already been implemented using Rapidjson. This makes it relatively easier to add new API headers to extend the interface and support more functionality.

Apart from this, one more important thing to keep in mind is that the WebUI is planned to replace the old interface and hopefully be shipped along with the main Retroshare app. And so it would make sense to keep dependencies to a minimum. This app will have a development process different from typical modern web dev practices. This app will not have dependencies(such as Nodejs), making it lightweight and able to easily integrate into the parent app’s build process.

A minimal working example has been implemented and can be seen in the source page.
Project source: github.com/RetroShare/RSNewWebUI
My fork: github.com/rottencandy/RSNewWebUI

Overview

A brief overview of the main goals to be expected from the project:

  • A “tab” system to display different sections of the Retroshare interface.
  • Detailed and asynchronously updating tabs about file transfers, downloads, adding peers, internal statistics, etc.
  • Options in the client app to enable and launch the WebUI.
  • A config panel with detailed frames for viewing and changing as many configuration options as possible.
  • Styled UI using CSS for a more sleek and beautiful look that adds to the visual appeal.
  • Replace the old WebUI and disable libresapi on merge.

The web interface would be extremely beneficial to the community, allowing Retroshare to leverage the flexibility and approachability of the web. It could be used by people who desire an alternate interface to Retroshare, for example, when using the nogui version, or due to the traditional GUI client being too demanding on low spec hardware, or due to the OS having problems with Qt, etc.

Looking forward to an exciting summer working on this project. I will post more updates soon.