MDM HTML5 Themes

[cdustybk]

Good afternoon everyone.

I've been working on a new theme (when I'm supposed to be doing stuff at work).
I know it's not complete (my first theme I made still isn't anywhere close to being complete!), but it's in progress.

For example, keyboard up/down doesn't select different users (yet).
Actually, the only keyboard support this has right now is Ctrl+L for language selection, Ctrl+S for session selection, and Esc to close out of dialogs (which works in the emulator, but doesn't always work live!)

Just let me know what you guys think! I know there's a ton more work to be done on this.

Screenshot.jpg

user_list.png

Settings.jpg

[samriggs]

Well, the keybinding is easy to do... it calls whatever function you want with a single line of code using mousetrap.

The how you do it in your function, that's up to you.

Somewhere in your javascript you need to keep track of which user is selected. For instance you can assign each user block an id, like userX... so you iterate in mdm_add_user() and call your blocks user1, user2, user3.. etc..

And when you press the down key you call go_down(), and in go_down(), you check which index you're currently pointing at, do a +1 modulo number of users on it and activate the corresponding user box..

.. does that make any sense?

what I mean by all that, is that this needs to be done by your theme in javascript. How you navigate and what you do when the user presses down is really tied to your layout and theme objects.

Thanks Clem, and yes it makes sense, I was trying to use yours the way you have it set up, it doesn't work for the basic template though because of the tables, I'm going to rewrite it to work with the main template instead so it can be a drop in for everyone using it. Plus it'll work that way for all the ones I made already as a drop in so I don't have to recode the thing to get it to work.
What I want is to keep the shut down buttons etc that same but only change the users so they can scroll through them like you have and make it so they don't have to type in the users name at all (it just selects the one chosen automatically through using the arrows keys or the first one on the list (to start with)) pretty much getting rid of the ability to type in users names altogether, since it's redundant anyhow if they click it or use arrow keys, the only thing that bothers about this would be all they will see is password instead of username right away but might not know which user is checked and log in the wrong one, I can see that happening. So I might have to give a more highlighted user or add the name chosen somewhere near the password to let them know which one is chosen (better solution).
This should be abc stuff for me hopefully I can figure it out, sometimes the simplest things boggle my mind.
In theory: do a loop for the users list kept in array get the length of the array, do a +1 or -1 depending on the length, add username to text above password so the user knows which one is chosen, focus set in text entry for password hit enter for login.
Now lets see if I can do it

[overthetop]

Nice theme cdustybk! It looks really nice so far!

[samriggs]

Ok got it worked out for users finally
Dang thing drove me nuts and was wondering why I needed freaking tables, wiped them and used src instead which threw more errors
like my most males on the planet, I didn't read the manual about why I needed tables
uh because it's needed and for rowCount, insertRow etc.
I don't do much javascript coding at all so I only a bit so looks like I got more reading to do.
ANYHOW I got it work by using yours Clem, no issues at all, it selects the user, changes the username to password automatically and presto done.
cdustybk great looking theme, I'll have a template up (actually in about an hour or so, unless I get stuck with someone distracting me) so you can copy paste it into your theme as is and it should work right out of the box.
I didn't do bootbox yet for the language or sessions, I'll get to that, but it'll have the users, so you can drop it in.
Sam
Actually I'll do it now right here in this post (JUST THE USERS PART) so you can get on with yours.

Ok in the script part I changed the mdm add users to this (It's the same as Clem's clouds)

Code: Select all

				// Called by MDM to add a user to the list of users
		function mdm_add_user(username, gecos, status) {
											
			var link1 = document.createElement('a');	
				link1.setAttribute('href', "javascript:alert('USER###"+username+"')");

			var link2 = document.createElement('a');	
				link2.setAttribute('href', "javascript:alert('USER###"+username+"')");
				
			var picture = document.createElement('img');
				picture.setAttribute('class', "user-picture");
				picture.setAttribute('src', "file:///home/"+username+"/.face");
				picture.setAttribute('onerror', "this.src='file:///usr/share/pixmaps/nobody.png';");
				
			var realname_div = document.createElement('div');
				realname_div.setAttribute('class', "usergecos");
				realname_div.innerHTML = gecos;
				
			var username_div = document.createElement('div');
				username_div.setAttribute('class', "username");
				username_div.innerHTML = username;

			if (status != "") {
				var userstatus_div = document.createElement('div');
				userstatus_div.setAttribute('class', "userstatus");
				userstatus_div.innerHTML = status;
			}
																																			
			link1.appendChild(picture);														
			
			if (gecos != "") {
				link2.appendChild(realname_div);	
			}
			else {
				link2.appendChild(username_div);	
			}
						
			if (status != "") {
				link2.appendChild(userstatus_div);	
			}
						
			var table = document.getElementById("users");
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
          	row.username = username;          	
 
            var cell1 = row.insertCell(0);           
            cell1.width = "50px";
            cell1.appendChild(link1);                   			

            var cell2 = row.insertCell(1);           
            cell2.appendChild(link2);                   
		}

Leave the tables
at the beginning of this script on top add

Code: Select all

var selected_row = -1;

so it can read the var
at the bottom or anywhere else in the same script section for all the mdm stuff add this function

Code: Select all

//adding users for arrow keys and put one chosen in text field
			function select_user(index) {					
			var table = document.getElementById("users");
			var rowCount = table.rows.length;
			var row_to_select = index % rowCount;
			if (row_to_select < 0) {
				row_to_select = rowCount - 1;
			}

			for (var i = 0, row; row = table.rows[i]; i++) {				
				row.style.backgroundColor = 'rgba(80,80,80,0.0)';
			}

			var row = table.rows[row_to_select];
			row.style.backgroundColor = 'rgba(80,80,80,0.5)';     

			selected_row = row_to_select;   

			alert('USER###'+row.username);
		}		

Then at the bottom of the html page in the init() section add this

Code: Select all

Mousetrap.bind('up', function() {		
    	select_user(selected_row - 1);
	});

	Mousetrap.bind('down', function() {
    	select_user(selected_row + 1);
	});

Make sure you add the mousetrap .js for it to work. I added it in a zip file here.
Now you need to add a table grrrr but it's all good
In the theme.css just add your table wrapper and scroll

Code: Select all

#table-wrapper {
	position:absolute;	
	background-color:rgba(80,80,80,0.7);
	border-radius:5px;
	border:2px #a5a5a5 solid;
	margin-left: 25px;
	margin-top: 70px;
	padding:7px;
	width: 250px;
	height: 328px;		
}

#table-scroll {
  height:325px;
  overflow:auto;    
}

Change it to your liking (this is taken out of Clem's clouds) nothing changed yet so make it your own.
For the users to show up add the users in the table wrapper in the html

Code: Select all

<div id="table-wrapper">
  			<div id="table-scroll">
    			<table class="table-condensed" id="users">       
    			</table>
  			</div>
		</div>

and it's done and it works. I tested it.
I'm working on the basic template for all the mousetrap stuff so all you have to do is code from that temple and all the mousetrap stuff will already be done from now for everyone, and since this part is done now so you can do your users list I'll take longer and add the bootbox stuff also before uploading the template for everyone.
I really should read more on javascript I guess, it's a bit different from what I normally use.
Anyhow the users stuff works
Sam
EDIT: sorry I forgot I also added this in the theme.css for the users

Code: Select all

#users {
	color: white;
	text-align: left;
	width:100%;    	
}

#users tr td {
	align: left;	
}

#users tr {
	
}

Again taken from Clem's clouds, make it your own.

[samriggs]

weird bootbox worked and loaded images before and now it stopped since I updated it.
not sure what's going on there but it kind of stopped me dead in my tracks for making the template with bootbox included now.
anyhow the users list will work with the code above, I'll get to updating all my themes with it.
I'll post here once there all done and uploaded, might take me a bit because I'm also doing something else at the same which I didn't do all day because of this, so hopefully it won't take me long.
The languages and session sections I'll leave alone until I can get bootbox working in lmde.
It pops up it just doesn't load the info. The cloud theme doesn't load either in bootbox now, very strange indeed, it did in the last version of mdm. and now the bootbox doesn't even pop up in clouds because of the render issue I guess keeping it to busy, just strange it worked before and not now. It actually wacked out my mdm for a few seconds when I tried to load it live to test it in there. I'll just work with what works in lmde that way I know it'll be safe to use all the way around.
Sam

GRRRRRRRR ok bootbox does work and load stuff
I got the quit dialog to work nice now, just one more freaking thing, the session and language parts that still refuse to load images into them I keep getting a
[code TypeError: 'undefined' is not an object (evaluating 'table.rows.length')
[/code]
error
I even tried using the cloud mdm code straight into it and no go
I will not give up dang nab it

[hb1547]

Hi hb1547,

This is really cool! A bit of feedback from me:

- Keyboard navigation is crucial! not so much the shortcuts for languages/sessions.etc... but mostly the up and down keys to select different users. The one annoying thing here is that you need the mouse to click the user you want to login as before moving to the keyboard to type the password.
- The lack of username input isn't that much of a problem I think. In fact I don't think it's required at all. If people need that, they can select a different theme.
- I'm not sure it's a good idea to make people wait when things come up... the animation for the users to appear is cool, but it takes a bit of time especially if there's loads of users... I'd say it would be better if it was a shorter animation and if all users came at once in their respective positions (you can do this by making them appear in init() as opposed to mdm_add_user()).
- One of the reasons people like lightdm so much is because the unity-greeter lets you just enter your password... most people have only one user... it's pre-selected, they just type their password. There's no feature in MDM yet to tell you which user to preselect (the last one who logged in ideally) but you can still go ahead and select the first one you added in mdm_add_user()... that way the user sees the first one preselected, he/she just types her password, the enter key.. and w00t, they're in

Other than that, general impressions are great. I love the look of your theme and I'm delighted to see new ideas with the javascript and layout of the users. Brilliant work.

Thanks for the input! I added some simple keyboard navigation (just up/down to select users), and dropped the pop-in animation. I also selected the first user, but added a simple function for a default user -- just open 'index.html' and set 'defaultUserName' to something. Not sure if this could be a security risk, though.

[samriggs]

Alrighty I got as far as the quit, shutdown and those buttons using bootbox working and the users list with arrow keys for mousetrap stuff, I still could not get the languages and sessions to load into bootbox for some reason, probably something stupid I'm forgetting but here is the basic template so far, all works except mousetrap with the languages and sessions.
all you have to so is change the rest to make it your own, if anyone else can get the languages and sessions to load into bootbox please redo the template for the added parts and re-upload it for everyone else to use.
I'll start adding all this to my themes.
another issue I am having is making the users go into one row only with this new users select mousetrap, it makes rows not columns, I need one row and each user to be a cell in that one row instead, about half of my themes use one row for the users as it go horizontal instead of vertical, anyone know how to solve this one?
Any help would be appreciated.
I added the same code as was in the eOS theme for the language and sessions for this one now so it works with mousetrap, into the template now.
Thank you kindly cdustybk it doesn't load in bootbox for me but works with the one you added in your theme, I will once more redo all those themes again and reupload them once again with this added to them some time today.
Sam
I zipped up the template so everyone can use it.

EDIT: ok the following themes have been updated and are at[url=http://samriggs.deviantart.com/gallery/]my deviantart site[/url]
BlackNBlue, Blimp City, Circuit Board, Galaxy, MetalMint, and Space Race
The other ones will have to wait until I figure out or someone figures it out, how to get users to go into one row with the table code used it now.
and if I figure out how to get sessions and languages to load into bootbox, I'll go through it all again for one last time then I'll start some new ones once I get these all caught up, no use making new ones if the old ones are where there supposed to be, or unless I want all users list to go vertical

[killer de bug]

I've been working on a new theme (when I'm supposed to be doing stuff at work).
I know it's not complete (my first theme I made still isn't anywhere close to being complete!), but it's in progress.

Just let me know what you guys think! I know there's a ton more work to be done on this.

I love this theme. I'm using it and I want to change 2/3 small things to adapt it for my computer. I already found how to make the date conform for french.

I want to change the user list to suppress the "Other". But I can't find where I should change the code.
I want only my name for exemple : "Joe Smith" and not : "Joe Smith joe"
Any help with the name of the function I should change would be great. Thanks !

[anandrkris]

Hey guys! I took a shot at making a login window:

screen_full.jpg

You can download it here : [url]http://xatal.com/synergy.tar.gz[/url] (v1.0)
Let me know what you think, what problems you have, all that!

I'm really loving the HTML logins, there are really all kinds of cool possibilities now.

Hi - Theme looks nice but am not getting user names displayed after installing the theme. hence unable to login. ( I am not complaining, i read your caveat emptor clause. Plus, probably I should have tried it out in emulator )
So i logged into text terminal and changed login manager to kdm.

Code: Select all

sudo dpkg-reconfigure mdm

Now i changed this again to MDM after login so that I can revert to my old theme. But unfortunately MDM is not shown in menu.
I tried to start it from terminal but getting an error saying

Code: Select all

sudo mdmsetup

You might be using a different display manager, such as KDM (KDE Display Manager), CDE login (dtlogin), or xdm. If you wish to use this feature, then your system will need to be configured to use MDM instead.

Any idea on how can i change the default theme from terminal?

[era506]

I've been working on a new theme (when I'm supposed to be doing stuff at work).
I know it's not complete (my first theme I made still isn't anywhere close to being complete!), but it's in progress.

Just let me know what you guys think! I know there's a ton more work to be done on this.

I love this theme. I'm using it and I want to change 2/3 small things to adapt it for my computer. I already found how to make the date conform for french.

I want to change the user list to suppress the "Other". But I can't find where I should change the code.
I want only my name for exemple : "Joe Smith" and not : "Joe Smith joe"
Any help with the name of the function I should change would be great. Thanks !

Did you get a list when using the login for real? I can only add users in the emulator but when actually using the theme I get only "Login"

About removing "Other", inside js/mdm.js go to line 260 from the function mdm_add_user, and change it to something like:

Code: Select all

	if (childCount == 1) {
        var login = document.getElementById("default_login");
        login.parentNode.removeChild(login);
//		document.getElementById("default_login").innerHTML = "Other";
//		src.insertBefore(create_separator(), src.children[0]);
	}

I'd like to know about displaying the user name only too.

EDIT: For the username you could change (in the mdm_add_user function too)

Code: Select all

	var username_div = document.createElement('div');
		username_div.setAttribute('class', "username");
		username_div.innerHTML = username;

To something like

Code: Select all

	var username_div = document.createElement('div');
		username_div.setAttribute('class', "username");
		username_div.innerHTML = "";

But I'm not sure if this affects something when logging in.

EDIT2: Or just comment out line 251 to avoid adding the username div

// link.appendChild(username_div);

[killer de bug]

Woooo Nice ! would not have found this solution alone. I really need to start learning how to code again. I haven't been doing this for too long.

I changed this too : (line 154)

Code: Select all

function show_hidden_users() { 
	$('.login_box').removeClass('login_box');
	if (numUsersShown != 0) $('#default_login').html('Other'); 
	$('.user-info').fadeIn(314);
	$('.user-info-hr').show();
	currentlyShownUser = "";
}

by

Code: Select all

function show_hidden_users() { //on est sur la boite de dialogue on repart en arrière
	$('.login_box').removeClass('login_box');
	//if (numUsersShown != 0) $('#default_login').html('Other'); 
	$('.user-info').fadeIn(314);
	$('.user-info-hr').show();
	currentlyShownUser = "";
}

It's when an user was selected but you cancel this selection. It prevents "Others" to come back.


Thanks a lot for your help !

[era506]

Ah nice! Didn't see that one, thanks!

By the way, are you getting the user list when actually using the theme in mdm? I can't seem add the list, I always get just the "Login" option. I can add dummies in the theme emulator but for some reason can't when using the theme for real (I just found out about mdm html themes this morning so complete newbie here)

[hb1547]

So I updated the Synergy theme for bug fixes. It's at [url]http://xatal.com/synergy.tar.gz[/url] still. Is there a particular website I should use to host these login screens or somewhere to submit them to? Should I put them on DeviantArt?

I have a few notes that may be helpful for others:

1) I was trying to select a default user in a way that would work. Selecting them in init() didn't work, since that's called before any users are added. I also tried watching for the default user when calling mdm_add_user() and selecting them when the user is added, but that didn't work either. What I found was that mdm_enable() is called after all users are added. So I found that that's when you should select the default user: the first time mdm_enable() is called.

2) I have a function for selecting a user, and a function for submitting the password. I tried calling both alert("USER###"...) and alert("LOGIN###"....) in the function for submitting the password, but MDM would inform me my username/password combo was wrong (though it wasn't). I ended up having to separate the two calls, such that the USER call is in the select-user function, and the LOGIN call is in the password one. This was the problem with selecting a user in mdm_add_user() -- although the alert() functions were seemingly called properly, MDM would inform me my user/pass combo was wrong.

Hi - Theme looks nice but am not getting user names displayed after installing the theme. hence unable to login. ( I am not complaining, i read your caveat emptor clause. Plus, probably I should have tried it out in emulator )

I'm sorry for your trouble. This is definitely my fault, the errors in here should've been easy for me to find before uploading =p. I don't know how to change themes from the terminal, but I may be able to help you repair the theme enough to get it to log you in at least. There are two fixes to make, or you can (in theory) replace it with the updated version above. Here are the fixes:

1. In "index.html" for the theme (which should be in /usr/share/mdm/html-themes/synergy/), find this line near the top:

Code: Select all

<script src="js/jquery-1.9.1.min.js" type='text/javascript'></script>

Remove the "js/" out front to make it:

Code: Select all

<script src="jquery-1.9.1.min.js" type='text/javascript'></script>

2. Find and remove these lines, about halfway down:

Code: Select all

			if (typeof username == 'string' && username == defaultUserName) {
				selectUser(userIndex);
			} else if (userIndex == 0) {
				selectUser(0);
			}

[killer de bug]

Ah nice! Didn't see that one, thanks!

By the way, are you getting the user list when actually using the theme in mdm? I can't seem add the list, I always get just the "Login" option. I can add dummies in the theme emulator but for some reason can't when using the theme for real (I just found out about mdm html themes this morning so complete newbie here)

Ok, I just tried a minute ago and the theme is working great in the real life. I got my name written as I wanted. I don't know what is the problem in your case.
I made a fix for the French date but I doubt you need it
That's nice. I will use this theme tomorrow morning and read carefully the code to learn again coding.

That could be nice if tapping with the touchpad was enabled before logging...

[samriggs]

Any idea on how can i change the default theme from terminal?

Yup

Code: Select all

sudo gedit /etc/mdm/mdm.conf

In the line:HTMLTheme=UnderwaterCityUnderwaterCity "I use my underwater one for know.
just change it to

HTMLTheme=mdm

or whatever one you want from the /usr/share/mdm/html-themes folder
mdm is the name of the default html-theme but double check the folders to see what you got to make sure, I had to do it this way a couple of times before I fixed some bugs and it wouldn't let me log in through it myself and had to go through startx instead.
Hope it helps ya out,
Sam

[anandrkris]

So I updated the Synergy theme for bug fixes. It's at [url]http://xatal.com/synergy.tar.gz[/url] still. Is there a particular website I should use to host these login screens or somewhere to submit them to? Should I put them on DeviantArt?

I have a few notes that may be helpful for others:

1) I was trying to select a default user in a way that would work. Selecting them in init() didn't work, since that's called before any users are added. I also tried watching for the default user when calling mdm_add_user() and selecting them when the user is added, but that didn't work either. What I found was that mdm_enable() is called after all users are added. So I found that that's when you should select the default user: the first time mdm_enable() is called.

2) I have a function for selecting a user, and a function for submitting the password. I tried calling both alert("USER###"...) and alert("LOGIN###"....) in the function for submitting the password, but MDM would inform me my username/password combo was wrong (though it wasn't). I ended up having to separate the two calls, such that the USER call is in the select-user function, and the LOGIN call is in the password one. This was the problem with selecting a user in mdm_add_user() -- although the alert() functions were seemingly called properly, MDM would inform me my user/pass combo was wrong.

Hi - Theme looks nice but am not getting user names displayed after installing the theme. hence unable to login. ( I am not complaining, i read your caveat emptor clause. Plus, probably I should have tried it out in emulator )

I'm sorry for your trouble. This is definitely my fault, the errors in here should've been easy for me to find before uploading =p. I don't know how to change themes from the terminal, but I may be able to help you repair the theme enough to get it to log you in at least. There are two fixes to make, or you can (in theory) replace it with the updated version above. Here are the fixes:

1. In "index.html" for the theme (which should be in /usr/share/mdm/html-themes/synergy/), find this line near the top:

Code: Select all

<script src="js/jquery-1.9.1.min.js" type='text/javascript'></script>

Remove the "js/" out front to make it:

Code: Select all

<script src="jquery-1.9.1.min.js" type='text/javascript'></script>

2. Find and remove these lines, about halfway down:

Code: Select all

			if (typeof username == 'string' && username == defaultUserName) {
				selectUser(userIndex);
			} else if (userIndex == 0) {
				selectUser(0);
			}

Thanks. It worked So I dont have to upgrade the theme right?

[hb1547]

Thanks. It worked So I dont have to upgrade the theme right?

Probably not, but if you have any other problems that might solve them.

[anandrkris]

Any idea on how can i change the default theme from terminal?

Yup

Code: Select all

sudo gedit /etc/mdm/mdm.conf

In the line:HTMLTheme=UnderwaterCityUnderwaterCity "I use my underwater one for know.
just change it to

HTMLTheme=mdm

or whatever one you want from the /usr/share/mdm/html-themes folder
mdm is the name of the default html-theme but double check the folders to see what you got to make sure, I had to do it this way a couple of times before I fixed some bugs and it wouldn't let me log in through it myself and had to go through startx instead.
Hope it helps ya out,
Sam

Got it solved by updating file as recommended by theme creator. Thanks for the tip, Sam. Will use it when am stuck next time. (hopefully does not happen again)

[hb1547]

Has anybody been able to successfully use a jQuery/Javascript function to get the page width?

I've tried using:

Code: Select all

	$(window).width();
	$(document).width();
	document.body.clientWidth;
	window.innerWidth;

...but none of them work on the actual log-in screen. They do work in the emulator, but on the log-in screen each returns 0 or 1, even though the document's actual body is the full window.

[samriggs]

Has anybody been able to successfully use a jQuery/Javascript function to get the page width?

I've tried using:

Code: Select all

	$(window).width();
	$(document).width();
	document.body.clientWidth;
	window.innerWidth;

...but none of them work on the actual log-in screen. They do work in the emulator, but on the log-in screen each returns 0 or 1, even though the document's actual body is the full window.

Ya a few things work in the emulator that won't work in the log-in screen for some reason.
If you use canvas the code we use for it works 90% of the time depending on what your putting on the canvas, and again some will not work with the log in screen but will work in browsers and the emulator.
You can find the code snippets [url=http://forums.linuxmint.com/viewtopic.php?f=25&t=128396]here[/url]
Me and Steve were fooling around with it and I got some to work for some things, you might be able to use it for what your doing.
I tested the updated version for your theme, (I couldn't get the names to appear before) but it all works now, I really like the set up you got going on with it and that wallpaper is fantastic .
Sam