Sponsored Links

HTML5 Login Screens with MDM

In brief

MDM now supports HTML5 themes. This allows artists to design beautiful login screens with animations, dynamism and all the technologies which are already available to web designers!

Introduction and background info about MDM

In Linux Mint, MDM is the default display manager. It is the software which is responsible for the login screen, and which coordinates the authentication and the launching of the desktop sessions.

MDM features 3 different login screens, also known as “greeters”.

The “GTK” greeter is a simple login screen made of a GTK dialog. It looks like that:

The GTK greeter, clean and simple

The “GDM” greeter is a login screen which uses a canvas and is compatible with XML themes known as “GDM themes”. It’s probably the one you’re using right now, and it can look very different depending on which theme you’re using. Here’s an example of the GDM greeter running the Arc-Brave-Userlist theme:

The GDM greeter, good looking and themeable

The “HTML” greeter is a new login screen which uses webkit and is compatible with themes written in HTML. Here’s an example of a theme designed by the development team:

The HTML greeter, good looking, interactive and easy to theme

It might not look great like that, but keep in mind that this was designed by the MDM/Mint developers.. not by Web artists. This particular theme was made using HTML, CSS, Javascript, Bootstrap and JQuery.

Even though it’s only a screenshot, you can see the transparency used on the login dialog and see how the user picture rotated when we placed the mouse over it.

Some of the possibilities provided by Web technologies

Using web technologies within Linux Mint means we can not only create beautiful themes but also dynamic ones and use one of the biggest resources available: web content.

Here are a few examples of what can be done using Web technologies today:

Using these technologies, MDM HTML themes can define the way the login screen looks, but also the way the navigation works, how the user interaction works, the conditions to enable log in etc etc…

Your HTML login screen can make the user jump, play a minigame and even finish a level before he can log in…. but please don’t do that…

It goes without saying that including Flash or Java content in the login screen, asking the user to wait for something to load, or to play a minigame to be able to log in would cause some frustrating experience. But these technologies can be used to implement subtle effects appreciated by users and without efforts from the artist, for instance:

  • Giving the theme an animated background by using an animated gif or playing an HTML5 video in the background
  • Making snow flakes fall on top of the login dialog
  • Placing sessions and languages in side-widgets which expand when the user hovers them
  • Using a javascript carousel for user selection… etc etc..

A good example of this is unity-greeter, the LightDM greeter implemented by Ubuntu:

unity-greeter is a good mix or subtle effects and animations and is easy to implement as an HTML theme

Although this greeter is non-configurable and certainly non-themeable, the end result is a good example of how animations and effects can be used to improve the user experience. Using web technologies, a unity-greeter looking theme can be made easily.

A simple concept (credits to http://mysteryweb.deviantart.com)

MDM 1.2 in Linux Mint 15

MDM 1.2 will be available in Linux Mint 15 and will feature this new Webkit greeter and a selection of HTML themes.

MDM 1.1.x available as BETA for theme artists

On github.com, the development branch of MDM (1.1.x) already features a functional Webkit greeter.

We’re calling all interested artists and web designers to participate in this. We’d like to design good looking themes for it. We want to help artists make the most of the greeter we developed, guide them through and listen to their feedback to improve it and provide additional features themes might need.

If you’re interested in designing an HTML login screen:

Then:

  • Launch the MDM setup tool by clicking on Menu->Administration->Login Window (or from a terminal with “sudo mdmsetup”)
  • In the “local” tab, set the “Style” to “HTML”.
  • Make a copy of /usr/share/mdm/html-themes/mdm and modify it to create your own theme
  • Place your theme in /usr/share/mdm/html-themes or drop an tar.gz archive of it on the setup dialog to install it

To test your theme easily, we made an emulator!

  • Open a terminal and type “mdm-theme-emulator”
  • Click “open” and select your index.html file
  • Click “Add dummies” to add random users and sessions to your theme

Use the emulator to test your HTML theme

Note the various javascript functions present in index.html and read their comments. Some of them are called by MDM.

Let us know about your theme or any question you might have. The development team is available on IRC at irc.spotchat.org on #linuxmint-dev

  • From Linux Mint, launch Menu->Internet->Xchat IRC, then type “/join #linuxmint-dev”

Read more at Linux Mint Blog

Comments are closed.