added two screenshots to the milk section
← Revision 18 as of 2013-02-07 04:56:58
Linked to images.
|Deletions are marked like this.||Additions are marked like this.|
|Line 106:||Line 106:|
|==== Interaction Screen ====||==== End User Screens ====
===== Interaction Screen =====
|Line 117:||Line 119:|
|==== Creating a New Post Screen ====||===== Creating a New Post Screen =====|
|Line 127:||Line 129:|
|==== Addressing a New Post Screen ====||===== Addressing a New Post Screen =====|
|Line 142:||Line 144:|
|==== Managing Groups Screen ====||===== Managing Groups Screen =====|
|Line 147:||Line 149:|
|==== Managing People Screen ====||===== Managing People Screen =====|
|Line 165:||Line 167:|
|==== About Me Screen ====||===== About Me Screen =====|
|Line 180:||Line 182:|
|==== About Screen ====||===== About Screen =====|
|Line 195:||Line 197:|
|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.
|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
==== 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 =====
[[attachment:ui_1vertical_service_people.svg|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 =====
[[attachment:ui_1vertical_service_features.svg|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 =====
[[attachment:ui_1vertical_service_settings.svg|Detailed Settings]] All settings
that Plinth can parse are available for configuration here.
- Main features
- Other projects
- 3 vertical panels
- More conventional
Top Tabs, Vertical Control Panel
- End User Screens
- Administrator Screens
- Template Screen
- Bootstrap templates
The user interface will play a big role in user's first impressions. It must be simple, lightweight and extensible.
- simple : anyone should be able to use the interface intuitively
- lightweight : embedded devices have limited resources, these should not be tied up on the interface.
- extensible : the interface will be the user's window into their freedombox, and functionality will grow with time.
There might need to have two separate interfaces :
- One will be dedicated to the freedombox administration itself.
The other would be dedicated to people using the FreedomBox. Using this interface, they should be able to manage their different online identities.
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 :
- Freedombox status, which would sum up informations on the running system (number of services, their states, accounts, etc...)
- Services panel, where owner(s) can add/remove/configure services
- Account/member panel, where owner(s) can manage user accounts.
- Backup panel? (or is it part of the services?)
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?
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.
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: 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:
- Preferentially ordered authentication methods.
- Preferentially ordered communication methods.
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: 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.
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: A template to be used in designing additional screens.
Milk is a Plinth template with some Twitter's Bootstrap changes
Julian Andres Klode integrated ikiwi to bootstrap and it looks very nice. It's worth to take a look: