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
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:
- Easy background effects: http://hakim.se/experiments/html5/origami
- A dynamic interface: http://www.theamazingspidermangame.com/
- An entire game: http://www.cuttherope.ie/
- Another game: http://canvasrider.com/
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
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:
- Grab and install the latest development package for MDM at http://build.linuxmint.com/automate/www/instances/linuxmint/ubuntu/pool/main/m/mdm/
- Open a terminal and remove the Mint adjustment by typing this (without the quotes): “rm -f /etc/linuxmint/adjustments/15-mdm.overwrite”
- Reboot your computer
- 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
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”
- You can also use the forums. We created a dedicated thread for MDM HTML theme designers at http://forums.linuxmint.com/viewtopic.php?f=25&t=126979