MDM HTML5 Themes

[samriggs]

Hello many q's I tried quite a few things and don't understand why it won't show myself, it might have something to do with with the for loop for the webkit o mo stuff but that doesn't make sense instead of doing it the long way.
Also you don't need half of that stuff you got in it, the bottom part of the javascript you don't need (the extra javascript part) the twitter links you don't need, the canvas is already called in the bootstrap file (just change the css/bootstrap.min.css to css/bootstrap.css in the html file) so you can easily read that css file the canvas one is near the top.
I tried other requestAnimationFrame and they worked and loaded in the login page theres something in the code not sure what though, maybe someone with more knowledge in html5 can help you out in this one, I just started playing around with it when I started doing this mdm stuff, so I'm still learning myself about it.
I also tried window.onload = with no go also.
Good luck trying to get this going.
Sam

PS:All the themes I previuosly made has been updated for the new mdm 1.1.5 now and is available at the same download.

Thanks

[clem]

Hi,

I gave it a go as well. I couldn't find what was wrong but I ran http://mrdoob.github.com/three.js/examp ... _cube.html to make sure... and this loads properly in both MDM and the emulator.

[samriggs]

cool I love that three java script engine, I just checked the main file it uses the same for loop for requestAnimationFrame as well so it's not that either, weird it won't show, I give up I even made different size canvases and nested them and a bunch of other things and nothing worked. No clue on this one.
Heres the next one, actually I am making this one for my wife but I'm making it blue for everyone else first, hers needs to be pink with hearts so unless i get some request for it I'll only be putting the blue one up lol.
Here it is

The galaxy rotates (two layers) a few stars spakle, the astronaut floats back and forth (I'll add the gimp file in case you want to add your face in the mask part, it's all ready to just drop a cropped face image in it's own layer and just alpha the mask out to your liking) so you can float around in space, got the idea cause my wifes dream is to do that. the analog clock is from one of the sets I made for android and it works.
you can get this one now its done: http://samriggs.deviantart.com/art/Gala ... -360302989

The next one will be called TheMachine, I think it's time to go a bit nuts with one and also see if I can add some 3d stuff without killing it with all I want to do with it.
It'll take me a bit for the next one.

Sam

[clem]

That's really nice! Well done

[samriggs]

Thanks Clem, I'm gona try and mix some of that threejs stuff in the next one, some 2d and 3d stuff hopefully it'll turn out ok

[samriggs]

Hey Clem you would happen to have a copy of that cube you did ?
The one that worked in the mdm and emulator?
I got the code but I've been trying that earth orb one "canvas_geogmetry_earth" becuse I did have some ideas for it but it keeps disapearing in the emulator after half a rotation, really weird unless the canvas grows or something happens after half a spin, it's fine in the browser but not in the emulator, just wondering if it's something I missed or am doing to cause this, I figured maybe looking at what you did in the cube one might give me the answer, I did changed the inti() to initi1() because it's already used as a function somwhere else and threw an error, I also took out the bottom grad part (square blob at the bottom) and all the stats, just a weird thing that it works in the browser and not in emulator.
Thanks if you can I been up for hours trying to figure this one out lol,
EDIT: its ok, I decided to do something else instead since I couldn't get it running right now, I'll look into using treejs more later on, some work good some causes issues and not sure why, but it does, I'll figure it out later down the road.
Sam

[anandrkris]

The galaxy rotates (two layers) a few stars spakle, the astronaut floats back and forth (I'll add the gimp file in case you want to add your face in the mask part, it's all ready to just drop a cropped face image in it's own layer and just alpha the mask out to your liking) so you can float around in space, got the idea cause my wifes dream is to do that. the analog clock is from one of the sets I made for android and it works.
you can get this one now its done: http://samriggs.deviantart.com/art/Gala ... -360302989
The next one will be called TheMachine, I think it's time to go a bit nuts with one and also see if I can add some 3d stuff without killing it with all I want to do with it. It'll take me a bit for the next one.
Sam

Just Amazing! Suppose, If there are 3 user accounts as shown in your illustration, then will the astronaut's face refresh based on User account selected for login?

[samriggs]

Just Amazing! Suppose, If there are 3 user accounts as shown in your illustration, then will the astronaut's face refresh based on User account selected for login?

Hey anandrkris glad you like it, great idea but how to implement it is another thing, If you look in the gimp file I added with the download, there has to be a black back behind the face in case any spaces are in the face, you would have to make one spaceman/spacewoman (in case of my wife lol) for every login available then have to find out which one is which and do an if/else statement to make the right one appear in a javascript instead of css or just replace the css part with another one (ahhh ok a few ways to do that part lol) but the big question is how would you know which one is which?
I'd have to see how Clem and the team has that coded, not the name (because that would be impossible unless everyone changes the code themselves) but it would have to be a user1 user2 user3 thing instead to make it standard for everyone and just call the spamen/spacewomen user1.png user2.png etc or something like that.
As far as just shoving an image behind the mask it would have to be cropped and rotated (I think it was -15 degrees or 15 degrees) in case anyone is making their own the then that one image would become 4 images to put one together, so that way is not practicale, (spell check please lol) but the user1,user2,user3 might work if I can figure it out. I like the idea and now you got me thinking of other ideas I might be able to do with this idea or something similar (the next one is going to be sort of a machine metal type), maybe I can do something with the users in this one that will be different, I'm thinking of doing something with the buttons this time around hopefully I'm getting bored of the top layout already lol time to do something different. I'll check into how Clem and the team has that part coded and if we can use the variables to something like this.
It does has potential to expand this to other areas
Thanks
Sam

[anandrkris]

It was just one wild thought. Hmm....I understand there could be challenges in implementing in theme. One trivial doubt in MDM - Will the left panel show user account / profile pictures because I think it works that way in LightDM. (I am on Mint KDE so default manager is KDM)

http://aseigo.blogspot.in/2013/03/logging-into-plasma-workspaces-2.html - Not sure, if you've seen this link I've shared earlier, but Mint team should perhaps showcase their work to larger group. Anyways, i believe it will eventually happen when MDM takes proper shape. Perhaps Mint believes in the marketing adage that Selling is superfluous, a product sells itself.

[samriggs]

Ya I seen that post about kdm, that's what I was thinking about doing with the user names this time around or something similar with scaling and lining them up horizontal instead of vertical, right now there on the left side but you can pretty much put them anywhere you want to or even do a carasol or whatever you want to just like any normal css html page, thats the beauty of this new system, pretty much anything you can do on the web you can do with this, I only found a couple of things with animations that are not working but I'm sure there's a way to get those going as well. Not to sure what the Mint team does or thinks lol, just hope they keep up the great work
Sam

[steveking]

Is there any templates that we can work on? I have been waiting for something like this to arrive

I am unsure on how to get the proper functionality included so that log in etc are all done correctly. I am assuming this is javascript? Will this support AJAX calls at all??

I am rather excited to see what I can create now! I may be a little bit behind on this news but I was busy building web-wonderful stuff

[samriggs]

Is there any templates that we can work on? I have been waiting for something like this to arrive

I am unsure on how to get the proper functionality included so that log in etc are all done correctly. I am assuming this is javascript? Will this support AJAX calls at all??

I am rather excited to see what I can create now! I may be a little bit behind on this news but I was busy building web-wonderful stuff

Hi Steveking
When you install the mdm according to the blog http://blog.linuxmint.com/?p=2327 just copy paste the folder mdm into a directory where you want to work on your own, rename it what ya want to call your own theme, change the inside the theme.info file and all the other files are there for you start on as template. It has all the base stuff you need to start.
It uses pretty much anything html5 has to use, ajax I don't know, and some issues with some things in html5 but not many and that might be my lack of knowledgr in html5.
You can pretty use use anything in css ,I haven't come acrosss anything that can't be done in css yet, just in some javascript 3d stuff and that it but 90% has worked for me.
Once you do the install just go to usr/share/mdm/html-themes/ and copy paste the mdm folder there it has the template to use.
Just follow the blog for all the rest it has everything you need to get you started. Or download some of mine and fork them for your own.
Sam

[steveking]

Hi samriggs,

I have a few ideas I would like to try out! The ajax one is kinda the one I would enjoy the most - but then again on the Login Screen it could potentially create a security risk??

I will have a play with it sometime within the next week and see what I can come up with! Where can I download your as a refence??

I know quite abit about html5 and javascript etc etc so i am hoping I can come up with something nice! I have seen some amazing examples of what people have done so far, looking forward to bring my own style to the party!

Steve

[samriggs]

you have to install the new mdm how to do it and where to get it is here: http://blog.linuxmint.com/?p=2327
I have made 4 so far just go to samriggs.deviantart.com there the ones with the mdm in the title.
Just not sure if ajax is allowed or not, maybe Clem can answer that one, looking forward to seeing your work, I've been waiting for more to get involved in this to give folks variety and see more styles
Sam

[samriggs]

Hi Clem, quick question.
Can I put this MDM in the new LMDE now? I kind of miss my LMDE days and wants to keep one system on this laptop with no more reinstalls, but I want this MDM now that I'm having fun with it, also will the screensaver idea also be added to the LMDE in the fututre if you go ahead with it?
Just thought I'd check before I make my final change for this laptop, so I can keep on making these things.
Thanks in advance.
Sam
Edit: Ok TheMachine is finished and ready for download for anyone who wants to check it out or use it for their own stuff.
Here's an image:

I wound up keeping this one simple, I did have a lot of crazy stuff in it that look great but the cpu went nuts because there was way to much in it, (one image was over 4 mb ) so I brought it back to simplicity for the sake of keeping the cpu happy happy happy.
You can get it here: http://samriggs.deviantart.com/art/TheM ... -361418404
Some might want this for their own because I moved the buttons to the corners and moved the users the center instead.
I was going to add some moving pistons at the bottom corners and still might but for now this is done.
Sam

Anyone know how to add a mask in html5? What I want to do is take the mint logo (word included) and add a mask to it so I can add a animated grad through it but only show up in the logo itself, I know I can do it by add a block png behind it with the logo cut out and moving a grad behind that but this means the box would have to match the background to blend in or just a box would show, not what I had in mind, plus I want to add a star rotating and moving logo with light beaming out and in etc, what I got in mind would look cool just this masking thing I never done before in html5 and quite not sure masking can be done.
Anyone with any knowledge in this would be appreciated, maybe even add it to the snippet section for others to grab and use.
Can't wait to see other themes made by others

[steveking]

This link may help you alittle:

http://www.bitstorm.org/jquery/color-animation/

All you would need to do is make it an on page load and tell it to cycle through any colours.

Alternatively you could get an image to animate over it? If it was a .png and was transparent it would show then gradient behind it?

I haven't tried animations in html5 or css3 properly yet. I tend to lean towards jquery where I can.

Hope this helps??

Clem - As you seem to be the brains of the operation, is it possible to use ajax calls within mdm? I am trying to get my head around it all atm but not knowing how the MDM gets all its info is confusing me I am assuming all the user info is stored in a system database and can be pulled out in someway, but for what I wanted to do I am guessing I would need php installed by default so that I can work some magic.

[samriggs]

Thanks Steve
I can do the same thing pretty much with css only, it's close but the only thing is the png shape of the logo, I can put a block around it and make the logo transparent or semi transparent the block back would hide the rest but I was hoping on leaving the stuff around the logo clear instead and the background there.
There is a way on changing hues of images but I'm not sure if it would make a box of the png image or just create a hue box for the image size.
I'll keep on looking and testing.
The user information gets passed via the jquery part under the users array on the main page, this section

Code: Select all

function mdm_add_user(username, gecos, status)

alert talks to mdm to gets the info as far as I know thats about it, if you go into the bootstrap.js or jquery-1.9.1.min.js you might find out more.
I'm curious about this myself to see if they can be controlled more and used for other things like the spaceman idea that spoken before in this thread.
I might look into using svg instead for my idea for the logo and see if we can use svg's in code. then see if I can animate colors in the svg instead if I can't do with pngs.
Oh well back to the drawing board lol.
Sam

[steveking]

Your welcome, sorry it wasn't as useful as I hoped it would be though!

I am looking forward to unboxing my desktop again (currently packed ready for moving) and getting a few things thrown together! I tend to stay clear of bootstrap if I can help it, but I may be tempted to have a slight dabble into it

I am currently having a debate with myself on making a mass useable mdm theme or test out a few just for me first. I don't want to be selfish of course! But I do like to fully test anything before releasing!

Expect some "interesting" things soon!

[samriggs]

It wasn't totally useless lol it can still be used, css uses the same stuff alot with webkit transisitions and works with rgb as well with alpha channels plus transforms in 2d and 3d as well.
The bootstrap.css (just change the bootstrap.min.css in the html to bootstrap.css so you can use the readable one instead, has all the layouts font colors and shadows etc for the layouts, if you want you can write your own for this one buit it's already done no real need to rewrite it just use that one to make the changes.
I test mine out before uploading it just to make sure it works, hopefully I get all the bugs out before hand
I'm looking forward to seeing yours, so far people seem interested but more in seeing what others do instead of making some themselves, I guess it's a bit more difficult then making normal themes but it would be nice to see more made by others, give everyone some variety and share different ways of doing things.
Also I started code snippet thread if you have any you want to share with evveryone for animiting transitions jquery stuff etc etc.
You can add your own snippets here: viewtopic.php?f=25&t=128396
I thought about writting an animation or transistion/tranform framework but the things you can do with it varies so much not sure it would be wise, but I'll write one anyone in my spare time and see if I can make it easy for folks to make these things.
Sam

[steveking]

If I am honest I was looking more into funky styled ones more than throwning in too many animations

Got a few ideas which would look pretty cool! I wanted to take my web experience and use it for something more useful!

I was thinking of doing a cool looking one using css transform and setting things at different angles (for the artsy types)