User Interface

Main features

The user interface will play a big role in user's first impressions. It must be simple, lightweight and extensible.

There might need to have two separate interfaces :

Administrative interface

This interface should be the one used to administrate the FreedomBox. It should help people in easily add, remove and configure services on this box, as well as user accounts. It might be divided in different panels :

User interface

This interface will be dedicated for users (being owner of the box or just users) to manage their online identities. They should be presented with a list of their current identities, and a way to configure them. A button should let them create new identities.

With this interface, users should be able to select which services this identity will use, being one on the same FreedomBox they created the identity, or elsewhere.

There might be some overlapping with the administrative interface at some point, for example if users want to register a subdomain in a DDNS system. Should this be a request to the FreedomBox owner(s), or should users be able to manage this on their own, maybe depending of the owners did give them the right to do so?

Other projects

Some projects already exists to configure a system using a web browser.


LuCI is a free, clean, extensible and easily maintainable web user interface for embedded devices.

While most similar configuration interfaces make heavy use of the Shell-scripting language LuCI uses the Lua programming language and splits up the interface into logical parts like models and views, uses object-oriented libraries and templating. That ensures a higher performance, smaller installation size, faster runtimes and what is even more important: better maintainability.


It is an application framework released under GPLv3.

FB related features :


?OpenPanel is a free open source control panel. It has lots of functionality, an attractive interface and is very user friendly. ?OpenPanel is a platform for developers. Because it is extremely open and modular it can be utilised to control any process on a Linux server.


3 vertical panels

3 vertical panels, read from left to right then from top to bottom.

More conventional

Widgets and searchbar, horizontalb tabs, vertical panel

Top Tabs, Vertical Control Panel

(in retrospect, this might just be Friendica + Zot)

Categories of activities across the top, with individual activities across the left. I'm imagining this as a web-app accessible by logging into the FreedomBox from some as-of-yet-unimagined login page.

In this mockup, a few conventions are used: "X" means "remove this", while a small blank box is a text-field or text-box (depending on size).

This mockup combines push and pull style notifications. This implies a private, authenticated storage system (for pull notifications): your FBX will store notifications for your recipient until they poll your server for updates.

End User Screens

Interaction Screen

Interaction: View and reply to others' posts. Sort them by time, popularity, and frequency of interaction with poster. This is a combination of both pull notifications (reading a blog's RSS feed for updates) and push notifications (email, XMPP).

When viewing, you can show or hide any combination of groups and people within groups.

When replying, you can select groups that can see the post.

Creating a New Post Screen

Composing a New Post: Creating a new post.

A rich-edit box allows users to add the combination of all supported posting methods. For example, if you have a service that supports pictures in the body of the post, you'd have the option to embed a photo. If you only had plain-text support, you wouldn't have HTML formatting available.

Addressing a New Post Screen

A New Post's Recipients: You select recipients on the "With" tab. You can select any number of groups and any combination of people within groups, or even just make it public.

If some recipients can't receive all the features you've put in your post (can't receive images via tweet, for example), you receive a warning. The user can then either remove the images or add other communication methods to the person.

When you're done, post it with the "Post" button. If you've decided to make the post "public", you'll be able to select the distribution methods here. It could include your Blog, etc.

Managing Groups Screen

Groups: Add and remove people from groups. If no group is selected, create a new group.

Managing People Screen

People: Perhaps the most important image of all, how the system sees a person. Very reminiscent of Emacs' BBDB, you can pull self-published contact data from the user, which contains their publically available authentication and communication contact information, sorted in preference of use.

The list beneath the name contains:

When posting to a person, your FBX will use the recipient's preferred order to post the data to that person. If your FBX has both email and micro-blogging support and the recipient prefers micro-blogging to email, and your post is 140 characters or less, then the post would be delivered via private tweet.

About Me Screen

See the About screen for more details.

About Me: This is where a user customizes his/her authentication methods and communication preferences. The list of communication preferences is sortable and editable: the order can be changed and available communication methods can be added, removed, or hidden from the public at any time.

"Hidden from the public" should set off a few alarm bells: anybody knowing your key ID can look you up and subscribe to your public posting methods. They won't be able to see anything you post to those methods unless you make the post public, but they'll know the point of communication is there anyway.

About Screen

About: The About page where the FBX project is described and options are hidden.

Users can select from multiple configured personae, though only one's ever active at a time. They can also end their session by logging out.

The hardware option describes the hardware the system's currently running on, and lists other hardware successfully tested with the FBX that the user might be interested in using, as well as giving relative benchmarks.

The software option describes the currently used software on the system and options / instructions for hacking that software.

The "Important System Messages" should appear at the bottom of every page. They should be used when the system is running out of disk space, loses its Internet connection, etc.

Administrator Screens

These screens aren't seen by end-users, but are how a box's administrator might manage the system through Plinth.

Service Authorization Screen

User Authorization Users who are allowed access to a service (or a set of permissions relevant to the service) are configured here.

Service Configuration Screen

Feature Access Broad-stroke service setting configuration is detailed here. Settings that users infrequently need are demoted. Settings users shouldn't touch aren't listed.

Detailed Service Configuration Screen

Detailed Settings All settings that Plinth can parse are available for configuration here.

Template Screen

Template: A template to be used in designing additional screens.

Bootstrap templates


Milk is a Plinth template with some Twitter's Bootstrap changes

Ikiwiki integration

Julian Andres Klode integrated ikiwi to bootstrap and it looks very nice. It's worth to take a look:









Live Help

Where To Start







To Do









FreedomBox for Communities

FreedomBox Developer Manual

HELP & DISCUSSIONS: Discussion Forum - Mailing List - #freedombox | CONTACT Foundation | JOIN Project

Next call: Saturday, February 11 at 14:00 UTC

This page is copyright its contributors and is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.