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”

50 comments

  1. Awesome, but why you didn’t use QML instead?!
    Qt offers many awesome features.

    Edit by Clem: We can always make a QML greeter later on, but we saw potential with HTML5, WebGL, Javascript, CSS etc.. if this works out and it’s a success with MDM in Mint 15, we’ll consider using it in cinnamon-screensaver and nemo in Mint 16.

  2. Hi Clem,

    Amazing! Mint is making great strides in creating a visually appealing desktop and login screen is the first interface of desktop with the user. I am hearing a lot about HTML5 being the next-gen technology and have seen some cool stuff being done.

    Not sure if this is relevant, i hope the new MDM does not depend on video driver? Because I had a critical issue when i tried Lightdm and reverted to KDM. Am using LM 13 KDE.

    http://forums.linuxmint.com/viewtopic.php?f=46&t=119946

    Edit by Clem: That shouldn’t be a problem. Themes should work without online connectivity and without compositing / acceleration.

  3. Clem – Thanks for the response. I think one of the main reason of Mint’s success is the interactions with users. Online connectivity is a good point.
    Just curious, Can an Analog clock be added to login theme instead of time being display as text? I suppose this should be achievable in html5?
    Since you mentioned about cinnamon-screensvaer – In the recent KDE edition, even for screenlocker the user can configure widgets akin to a regular plasma desktop. I am sure Mint team will explore such options.

    Edit by Clem: Yes, that should be easy to do. If anything is missing from MDM and required by a theme artist we’ll be happy to add it. I’m not sure whether it makes more sense for the theme to compute its own clock or for MDM to tell it what time it is, but either way, we can get that done.

  4. This looks great! One of my least favorite parts of the current version of Mint was the Login screen. Almost like a step backwards when comparing visually with LightDM. But this looks pretty amazing. Even the examples you posted look very beautiful! I will be looking forward to Mint 15!

    Thank you for all your hard work!

    Edit by Clem: Well.. we heard the feedback. We wouldn’t have backed MDM if it wasn’t brilliant. But I agree with you, it lacked eye candy and interactivity.

  5. Awesome! This is good because my best skills are in web programming, so writing up a fun login screen will keep me entertained and help to make my computer more my own.

  6. Truly Awesome!

    I dope we can look forward to this being available in LMDE in much the same time frame as the cinnamon themes were made available by default???

    Do I say that well enough?

    Edit by Clem: Yes, as soon as it’s stable you’ll see it in LMDE as well.

  7. I’d love to see someone bring this to KDM. It looks great, Clem et al! Keep up the great work, even if it’s not for the DE I use!

    Edit by Clem: It should work with all DEs. If there are integrations problems between MDM and KDE please let us know and we’ll get them fixed.

  8. It seems like a lovely new feature for those who need more eye candy, however, it does *nothing* for me.
    I have never been a huge fan of eye candy, I just want the machine to do what I want.

  9. been wondering whether I should install LM 14 or wait.
    my decision is now made. to wait. thanks mint team. keep up the excellent work.

  10. Incredible, infinite possibilities, could you browse the web with this?
    I love the idea of finishing a game to enter! OR we could make gesture recognition like with Windows 8 or android!!!!!!!

  11. Awesome!

    Will this version of MDM be able to support automated setups? Previously I’ve had to replace MDM with LightDM in order for this to work.

    Edit by Clem: Hi. I’m not sure what you mean. If you mean “automatic login”, then yes, MDM supports it. It supports both auto and timed login.

  12. I thin this can be used for something like “interactive password” in win 8 – for example mini-puzzle-game for login button to reveal.

  13. Nice! Looks like it adds both looks and features. Stuff like this is why Mint’s my new favorite brand of Linux.

  14. hi Clem,

    can we add this also to LinuxMint 14?? I would like to learn how to theme that…Pleas write us a tutorial so that we can learn by doeing…This new planned greeter is similar to the login-screen in Gnome-Shell. There the login-screen is also themeable via the Gnome-Shelltheme. It seems, you guys ported this over from Gnome-Shell.

    And I am also interested to find such new html5-Themes in gnome-look.org or even on the linuxMint-page with spices.

    Greetings
    Mintkatze

  15. Hi,

    this really looks great. I think Mint is coming back to “from fredome came elegance”: Eyecandy once was associated with Linux Mint just like improved usabilty (thinking of Mint Menu or multimedia codecs etc.). Those things had to wait for a few releases now as there was the Gnome Shell thing and Mint had to find it’s way to future which leaded into Cinnamon.
    Now it seems there’s time for eyecandy again. That’s great news!

    Just one question: As the current LTS version will be alive for more than another 4 years from now is there a chance that such features will be backported to Linux Mint 13 as well?

    Edit by Clem: Yes, as much as possible we plan to backport features to Mint 13.

  16. Speaking of webkit, why not change the default browser to chromium. It works a lot better than firefox (IMHO).

    Make a vote and see what the users think about such a move 😀

  17. How is the security with these kinds of web technologies? Could a theme hide a flash keylogger or other type of web malware?

    Edit by Clem: It’s like everything. Themes selected by Linux Mint and installed by default will obviously be reviewed and fully open-source, but if you find a theme somewhere else you’ll need to trust the person who distributes it or check the content yourself. On the MDM side itself we’re planning to prevent themes from accessing online resources (not just because of security but because we want to guarantee all themes work offline as well as online).

  18. @Clem and @Monsta: Sorry I should elaborate. I like deploying Linux Mint to various system by having a custom ISO which I then put onto USB stick with unetbootin. I then edit syslinux.cfg as created by unetbootin so that I can use a custom preseed so that keyboard, timezone etc etc can all be automatically configured.

    This use to work fine until MDM was introduced so I guess it’s a feature not yet implemented. In order for preseeding to work I have to switch from MDM to LightDM in my custom ISO in order for the preseeding to work.

    I first mentioned this problem in this posting…

    http://forums.linuxmint.com/viewtopic.php?f=46&t=104511&sid=546562d43e614381a3cf13c827195856

  19. “Ubuntu 13.04 Raring Ringtail might become Rolling Release…. users could choose between LTS releases, rolling release updated daily or rolling release updated monthly……this needs to be discussed in the Ubuntu community.”

    what are the plans of linux mint team in such a case? if ubuntu start to discuss about this is time for us to do the same.

  20. I think Linux Mint 15 will need a better and more sophisticated splash screen and grub background to match these new improvements and make them proportionate!

  21. I agree Linux Mint should go RR, having to wait 6 months for new versions of software be available on the next OS release is simple _idiot_, nowhere else you are tied this way.

  22. If the default theme has the option to preselect the last logged in user so that you only have to type in the password – then this will make my day 😉

  23. I can’t believe how beautiful and utterly crisp, clean and professional those screenshots look! I swear folks… Linux Mint just keeps getting better and the look and feel just gets classier with every version released.

    Off topic:

    One thing that really ### this morning was when I looked at Google’s News Feeds and read up about the new Windows Blue O/S M$ are releasing this year. I found this article titled, “Windows Blue with New Kernel, Internet Explorer 11, Bing Integration, Updated Apps”

    http://www.infoq.com/news/2013/03/windows-blue

    … and at the end of it was written:

    “Windows Blue will follow the Office 365 subscription model. When your subscription is up, you are locked out from all internet access except to pay by credit card or Paypal at a Microsoft web site,” said Ben Myers.

    Really, REALLY feel like switching to Linux, but can’t because of all my games… 🙁

    Edit by Clem: Minor edits (languages).

  24. arrgghhh ya got me tempted with this one Clem lol, just switched to cinnamon from xfce and loving it and now I saw this, I been tempted to try some html5 animations just for the heck of it but didn’t have an excuse to, now I do.
    I’ll have to come up with a complete theme for this one, including the cinnamon shell etc, but yup I’m on board for this one, got tired of seeing a boring login screen anyhow 🙂
    Think I’ll sway away from steampunk for this one and try a black metal one with hints of minty green.
    Sam

  25. forgot to add this
    @Coranth
    “Really, REALLY feel like switching to Linux, but can’t because of all my games”
    Have a look at steam or virtualbox or wine, they might give you the out your looking for and give you the same game play you had with windoze.
    Just a suggestion that might work for you.

  26. Although I understand the security aspects of not allowing online resources, in the long term it might be nice to offer this option. The user would have to explicitly enable online support, and perhaps the theme would only have access via a proxy method which limits what can be requested (e.g. it only passes JSON data through, blocking anything else).

    This would allow for some of the “lock screen” capabilities that people are used to on their phones these days. Power on the machine and immediately see your Twitter stream, the number of unread emails, and your upcoming calendar events, all before you’ve even logged in.

  27. If you make gaming enjoyable and easy to accomplish under Linux Mint, then I can tell you that this system is the best. I personally would like to see more support in emulation for MMORPG games that use dx11 and all the recent graphic acceleration features. A lot of people would switch easily, if they would have no performance loss while gaming. Good luck with everything, you are doing a good job anyway 🙂

  28. Ubuntu is working on Mir (https://wiki.ubuntu.com/MirSpec), which will be another (Ubuntu-only) display server (after X’s and Wayland). It’s almost sure, that this change will hit in ubuntu-based distros. Does Linux Mint Crew have plan B for case like this? What will You do? Stay with Ubuntu and Mir for all cost, stay with X-org, switch to Wayland?

    What if Ubuntu will become closed system, like OSX, where license don’t allow to create forks and distros based on mother-system? Does LM will switch to Debian, and LMDE will become new flag-ship of Linux Mint brand?

    I’m aware, that You have at least one, maybe two (or who knows, maybe even five years) until this will finally happen, so You still have lots of time to make decision, but thinking about future is really good practice. Also I’m kinda curious 😉

    Linux Mint was my ‘almost’ first, but for sure main distro for almost two years (if using LMDE counts). Now I’m using Arch Linux (but still got Mint KDE as secondary ‘safe’ system), but lots of people I know use Linux Mint. Some of them switched from Ubuntu, few of them was using Windows, and Linux Mint was their first contact with Linux ever. First touch was positive enough, so they stay with us for good. And thats all thanks to You, Mint Crew!

    Best Wishes & Regars

    Edit by Clem: Why speculate on this? All upstream components, including the Ubuntu base, are reviewed and compared to their respective alternatives. Mint is likely to continue to use Ubuntu and Xorg because at the moment these are respectively the best package base and the only suitable display server available. The only thing which matters to us is the end result: Making the next Mint release better than the previous one, incrementally and with the least possible number of structural changes. If tomorrow we replace a component with another one or if we stop using something because we made our own, it will always be with that in mind. Whatever happens we’ll pull the necessary resources towards making sure Mint remains Mint whatever components get changed. We do have R&D projects of our own but we don’t make announcements about the future of Mint. You won’t see us talk about Wayland, MIR or our own package base until we’re actually sure we’ll be using them, and by then we’ll probably have made sure everything is fully functional and we’re ready to release.

  29. PS:
    One of the Kubuntu developer asked:

    “Does that mean that after next April, the X stack and Wayland will no longer be maintained by Canonical, so that flavors that are using a standard display stack are on their own?”

    The answer:

    “So yes for flavors staying on X.org bases may need to be more involved in tending to their foundation, but you’ll likely always have the Debian base to build from which I expect should be solid for
    as long as X11 remains relevant.”

    and appendix by Jono Bacon, Ubuntu’s PR guy:

    “It just seems to me Ubuntu and Kubuntu is more closely aligned than ever – sure there are differences, but there is a lot of commonality on the foundation, and the convergence story in Ubuntu will result in useful foundational work that will benefit KDE across these different devices too (e.g. Plasma Active).”

    But I strongly believe, that this thread is already known to You.

    Edit by Clem: ATI/nVidia support Xorg, and Xorg is stable and functional. This is what matters to us. A lot of devs are working on Wayland and not on Xorg these days and some Ubuntu devs will probably focus on MIR more than on Xorg going forward. So it’s likely things won’t remain that way indefinitely. With that said we’re not in the business of picking winners. Good luck to both Wayland and MIR in trying to become the next big thing, we’ll look at all that when the time is right.

  30. Sorry to post it here, this ist OT, Clem:

    A very interesting idea to make the Cinnemon (and other) dropdown menus much more accessible:
    http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

    The code for the “jQuery plugin to fire events when user’s cursor aims at particular dropdown menu items” is on github:
    https://github.com/kamens/jQuery-menu-aim

    I hope you find this information helpful. Greetings, Mintulix

    Edit by Clem: I do. I read this blog post this morning and found it extremely interesting. The code isn’t useful to us but the idea to track the direction of the mouse gesture is brilliant. This problem was partially addressed in mintMenu by using delay and hover mechanisms and it wasn’t addressed in Cinnamon menu. We’re currently discussing this and planning to use this concept in both menus going forward.

  31. Just some crazy idea I had after seeing the Mario screen: Make the user’s picture as a big block (with the name above it) and you hit it with the head to log in.

  32. I am sorry I couldn’t a more appropriate place to ask this, but since at least one general Cinnamon question got Clem’s attention, please indulge me:

    How can I get the attention of a developer who is responsible for Cinnamon’s Panel Launchers applet? I’d love to see the applet be enhanced to include a certain feature, namely to show which launchers are active and to minimize the appropriate windows when the launcher is clicked and the window had focus – kind of like the quick start menu in Win7.

  33. aelfinn@42

    this is just my opinion, but i find the win7 panel launches rather clumsy. perhaps you have become accustomed to it. besides, doesn’t the Cinnamon window list work for you? after all, it provides buttons to switch to open applications almost immediately.

    again, just my opinion, different strokes for different folks.

  34. I tend to run whenever I hear about Javascript, Java, etc. being added to something for no reason other than “we can,” but I’ll trust your motives on this are good – since I’ve already trusted you to create my OS.

    I’m not sure how all this works. I saw a request for an analog clock on the login screen, which might be nice. But aren’t there such apps already (possibly even in the Mint repos)? If so, could you not simply make your login app run such an app without having to put more scripts on my computer? I run NoScript in my web browser and am very cautious about what scripts I allow websites to run on my computer, btw. Or is this… somehow not the same?

    I did, however, think of a possible good use for putting more eye-pollution on a login screen: Display current temperature, humidity, barometric pressure, wind speed, et cetera along with an animated radar map of the user’s region. Although this would depend on the user letting the interweb know exactly where he/she is located. So IDK if many people would choose such a thing. But the Facebook crowd would probably love it; they have already lined up to deny their privacy and give up as much information about themselves as humanly possible, so the Internet already knows where they live and who they are.

    Still not sure that anyone would suffer a login screen that required they spend more time to log in. But I am of an age that I feel a computer should provide a setting for the user to perform the tasks he/she is actually using the computer for, and to stay the **** out of said user’s way, otherwise. I’d configure it to skip the login screen entirely if not for the fact that my computer might one day be stolen.

    Regardless, thanks for all the work you do even if I might not have a use for each and every specific part of it, lol. I know that there is someone – often many someones – who love things that I do not, and vice versa. In short, thank you for Mint!

  35. @PB: This could easily be a feature that you can enable or disable with the click of a button. The Win7-style launchers save space on the panel by not putting a tab for your favourite programs in the panel and prevent you from inadvertantly opening more than one instance of a program—which I find to be of great value for lots of my none-too-computer-savvy relatives and customers. Both things would be great additions to the UX of the Cinnamon desktop. And not having them…well, kind of sucks, since the default behaviour of Panel Launchers doesn’t serve the needs of the majority of user, I think. (And again, turning the new behaviour off could be easily implemented as an option.)

  36. This is one of the better features of Mint. It has been a while since I was able to mess around with the log on page so I am now happy that I have been able to make the system mine.

    I only needed to make a few simple changes to the available files and now I have a “Union Aerospace Corporation” start page (from ID’s Doom games)

    Most of the time was taken hunting around the drives to find the old graphic files I had and changing them to fit the new screen resolution. About two hours work in total. Now I log out just to get the UAC screen up 🙂

    The computer did hang a couple of times when I was working on this but that may have been down to other factors so I’m going to keep this change on the one computer for now and put it on the laptop later, once I’m sure this machine is stable.

    If anyone is a Doom fan and would like a copy of this let me know and I will pop a zip in the post.

    Thanks for this bit of fun.

    All the best.

    Iain

    Edit by Clem: We identified a problem introduced in mdm 1.1.2 which causes occasional freezes of the session. A fix was implemented today and will hopefully be tested and confirmed tomorrow. It will be included in the upcoming mdm 1.1.4. If you’re up for it, you can already grab the latest mdm from github.com/linuxmint/mdm and build it from source.. the fix is already in there. Also, don’t hesitate to post your theme on the forums: http://forums.linuxmint.com/viewtopic.php?f=25&t=126979

  37. after a couple of years on ubuntu i’m now back on mint. first time with cinnamon. i found out the desktop is a lot more responsive compared to ubuntu. so i’ve quickly switched all my systems to mint…..great work!

    little bit later found out, that quitting unity, i gave up on HUD. great function. i didn’t use it so often anyway, but be nice to find such a thing on mint one day.

    i use superkey to start apps all the time, here mints doing a great job. be nice to have folders and files also included in superkey search…………

  38. I have installed Linux Mint and LMDE on a couple of Acer 11.6″ netbooks, but it seems the performance is not up to what I get from old Ubuntu 9.10 (the 2009 October Karmic Koala) on a couple of older Acer 10.1″ netbooks. (I have 5 Acer netbooks. Love ’em.)

    I suspect that some of the slow performance is due to some Mint components such as MDM.

    I hope that performance issues (and bugs) with MDM and other Mint components such as the Software Center can be resolved in the near future because …

    The new Asus X201E 11.6″ notebook (netbook) with Ubuntu installed is getting good reviews here at bhphotovideo.com —

    http://www.bhphotovideo.com/bnh/controller/home?O=NavBar&A=getItemDetail&Q=&sku=891223&is=REG&si=rev#costumerReview

    I hope Linux Mint can work a deal with Acer to put Linux Mint MATE —
    or Linux Mint MATE and Cinnamon — or LMDE — on a new Acer netbook.

    As someone as said in a blog I saw recently …

    The netbook is dead, long live the netbook [in its new forms].

  39. In regard to the analog clock mentioned earlier, that was an aspect I liked about kdm. That being said, having time anywhere in the login, including in the menubar bar, like the default mdm gtk greater, is already very useful.

    In my own “wish list” one thing I always wanted was a local greeter which offered a user list (or icons) and along with a xdm host chooser (or host icons), all showing on one login screen. That way, easy to login locally, and easy to pick another X host machine…and this also is why it can be useful to separate local and network dm greeting themes…you would not want chooser appearing on the network one.

Leave a Reply

Your email address will not be published. Required fields are marked *