MDM HTML5 Themes

[samriggs]

it's almost done
I added two tubes one on each side one will have a gnu the other will be a penguin of course and I spent two days drawing up a drone that will fly around or back and forth, the login will be at the bottom of the door area, seems to fit best there.
Just a couple more pieces of artwork to add to it then I'll code it (which won't take me long) then I'll throw it up and add the link after I test it live to make sure it works.
Sam

[austin.texas]

I am looking forward to seeing it, Sam. Your themes are awesome!

[samriggs]

Thanks austin.texas
almost done, just have to redo the gnu , I added the whole body in the tube and the size difference to a tiny penguin looks stupid so I am just adding heads with lines and stuff hanging out of them and making them the same size for balance sake.
The some bubbles and lights for the drone and all the artwork will done.
Coding the thing shouldn't take me more then a day or two in my spare time, it's just the freaking artwork that takes all the time.
I'll be using this one for my own system as well, always wanted to make an area 51 theme all the way through.
The cinnamon/metacity/gtk parts will come later and an icon set will come wayyyy later just way to much artwork for icons and most in svg.
Hats off to all the icons creators they have patience.

[samriggs]

AREA51 mdm theme finally finished.



Woohoo I finally got some time to plough through it and got it done finally.
I might make some minor changes later on if folks don't like the placement of the users list but other then that, I got er done.
I tested it on my system and it worked fine.

Here it be for you all to check out if you want.

http://samriggs.deviantart.com/art/Area ... -607619934

If you want to see it in action I made a quick video also which ya can see here:

https://www.youtube.com/watch?v=jcCJkksqFh4

Now I just have to make the complete theme and icon set later

For you mdm theme creators you'll see some extra tweening and stuff made in phaser editor just to show you some extra stuff you can do with it.
I had fun with this one

Sam

[killer de bug]

Good work! Congrats!

[samriggs]

Thanks killer, it was a fun one, I just like the fact of using a gaming framework to make them, makes life a lot easier and more fun and I can do a lot more with it now then I could before with just simple css animations and basic sprite animations.
The trick is is not to add too much to slow things down, it is just a login screen.
I wanted to go really nuts but not sure if it would crawl on some slower systems, so I still keep the kiss going.
I'll make more in between my other stuff.

EDIT:
I added the tar.gz to github along with all the files
you can now download the the install file to make it easier
you can get it here: https://github.com/samsstuff/Area51-MDM

I'll be adding all new mdm themes to this github from now on.

[samriggs]

I just finished a new mdm theme
I decided to go real boring this time around and make a simple and clean bokeh animated theme for those who like bokeh
Not me but I know a lot do so it's for you

You can check it out here: http://samriggs.deviantart.com/art/Brok ... -612911644
Here is a image of it



If you want to see it in action here it is on youtube: https://www.youtube.com/watch?v=S8-Z18elm5g

and ya can gather the tar install files or all the files to check out or to fork at github

https://github.com/samsstuff/Bokeh-MDM-Theme

I am putting all the new themes on github from now because it is just easier for me and you

Enjoy
Sam

ps: I tested it live on my machine just to make sure it works properly

[shideneyu]

Hey

Does anyone knows on whether or not the <video> tag is supported ? I cannot make it work somehow
It works on the emulator, but not when used as a theme

[samriggs]

Hey

Does anyone knows on whether or not the <video> tag is supported ? I cannot make it work somehow
It works on the emulator, but not when used as a theme

I highly doubt it, the emulator is good for testing but it's not exactly the same as what works for going live, I never tested it before but it doesn't seem like something that would work.
Just as canvas had issues on it's own and I now use phaser's html5 framework instead which makes canvas work beautifully with no issues it might be the same for video, (you never know) just another avenue you might want to try.

You can check out some video examples here http://phaser.io/examples/v2/category/video
I also use the phaser editor because it just makes life a whole lot easier which you can check out here http://phasereditor.boniatillo.com/
there is a charge for the editor but you can use it with a nag screen for free also to let you make your stuff or at least test it for mdm.
I also created a short tutorial how to do this here http://samsstuffsoftware.blogspot.ca/20 ... ework.html

Maybe it'll work with video this way maybe it won't but it might be worth checking into, if anything you can at least use the phaser js framework and one of those tutorial under the examples on the first link to see if it will work or not.

Hopefully it'll work for you.

Sam

[shideneyu]

Thanks a lot, I did not expect such a fast answer. Thank you so much !

I'll try. This can works if Phaser embeds a pure video player, and does not rely on HTML5 to load it.


And, guess what, I destroyed my video into a hundred of png chunks, and coded a pure js solution to dynamically loads a frame by frame png video by switching at each frame the background with a new png. It works (ofc) BUUUUUT ITS NOT SMOOTH Some frames get dropped. Sometimes I got a white screen. I preloaded the images to avoid that but eventually, there's no avoiding that.

Soooooo. I guess that I'll have to work a few more hours on trying Phaser. To use such a factory for such a tiny need, eeeeh

By the way, very nice tutorial ! I'll definitely look at it tomorrow.

[samriggs]

To use such a factory for such a tiny need, eeeeh

lol ya it seems like a lot but it really is only file phaser.js it has everything you need in one file, get the 2.7 vs vs 3 is coming out but everything will change in it and it will use a lot of webgl which mdm has issues with or used to in some OS like lmde it never worked before in that one for 3d stuff but it might now who knows.

You can grab the example master from phaser for files if need them on there github

Ya loading one png at a time would work BUT...... as you found out that can cause issues.
Maybe if you timed them it might help a bit, but running on a frame rate can differ from system to system.

Phaser solved my canvas issues so it might work with video also, I wouldn't mind trying a test one day when I get bored for webgl and 3d through phaser once vs 3 comes available, they are also using webgl for 2d rendering which is insanely fast with thousand of sprites running at the same time with no slow down by the use of shaders

Here is a small sample of whats in store in version 3 http://voidptr.io/dev/sprite-renderer/ try this in a mdm and see if it coughs up a lung or not

Also make sure it loads quick, nothing more frustrating for folks then waiting for a login screen to load, they just want to get into the system as quick as possible, that's why in my area 51 one I didn't open the doors when logging in, users would of had to wait until that animation happened before it logged them in, unless your just making it for you then it's all up to you what you want.

I still got a few more coming but time is scarce right now so they will come eventually.

Here is the link to the examples with all the code https://github.com/photonstorm/phaser-examples

Hope it works out for you

Sam

[Brahim Salem]

theme does not work on linux mint 18.1 cinnamon no bokeh just the login window

[racer-x]

theme does not work on linux mint 18.1 cinnamon no bokeh just the login window

Which theme, is it one you made/edited yourself? Perhaps a problem in the image or settings? No problem here with my custom theme in LM 18.1 cinnamon.

[samriggs]

theme does not work on linux mint 18.1 cinnamon no bokeh just the login window

I just tested it on my own system with mint 18.1 cinnamon and it worked perfectly.
All it is, is a colored background with random circles floating around, hence bokeh, if this is what you see it works, are you using the ubuntu version of mint or the debian version (lmde)?

[shideneyu]

Suuuuurpriiiiiiiiiise

https://www.youtube.com/watch?v=665LZE02VFw


I'm publishing it on Gnomelook and create a github page and I come back

[racer-x]

Suuuuurpriiiiiiiiiise

https://www.youtube.com/watch?v=665LZE02VFw


I'm publishing it on Gnomelook and create a github page and I come back

On the video site, you state first MDM theme made with video. Can you elaborate exactly what you did and what format the video is in?

[shideneyu]

Yes sure. I tried many solutions but the one that worked in the end was to:

Take my video, extracted the part which never moved to make a png to set as a normal css background
Then I extracted 66 frames (in PNG) of the moving parts of my video. And in plain javascript I've animated them, and also cached them in order for it to be smooth.
And in CSS I placed them at the good place.

That was boring but I've made it, the theme of my dreams


https://www.gnome-look.org/p/1168444/
https://github.com/shideneyu/Liminality

Also, sorry @Samriggs, despite your very good tutorial I did not have to use this framework because I wanted to try this previous solution that worked in the end. But I will definitely use it for future projects !

[samriggs]

Also, sorry @Samriggs, despite your very good tutorial I did not have to use this framework because I wanted to try this previous solution that worked in the end. But I will definitely use it for future projects !

Hey don't apologize it works smoothly and is nice great job, the only benefit using the framework would be scaling, you can set the scaling so the ratio will remain the same no matter what screen size, other then that it works perfectly..

Glad to see others making mdm themes

just in case your interested in using the framework in the future this part of the code in the sample I made keeps the aspect ratio the same no matter what screen size

Code: Select all

function init() {
		game.input.maxPointers = 1;

		// Setup the scale strategy
		game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		//you can try resize to see which one fits best show_all scales nicely 
		//but might show letterbox
		//this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
		game.scale.pageAlignHorizontally = true;
		game.scale.pageAlignVertically = true;
		}

Keep up the good work

Sam

[shideneyu]

I take good notes, thanks It sure will be useful. And my theme should scale fine, I had to make some calculations to set the correct percentage ratio to my different images and tested them well.

Yeah. I made my first MDM theme 4 years ago. Things are changing fast ^^

But I still do not understand why the theming community is so small. This world is full of potential, we could image the login panel of the 22nd century we our current technology. I mean, full of widgets, interactive games, and everything. Despite this there is only us for MDM, and maybe Lightdm. Erh.

[samriggs]

But I still do not understand why the theming community is so small. This world is full of potential, we could image the login panel of the 22nd century we our current technology. I mean, full of widgets, interactive games, and everything. Despite this there is only us for MDM, and maybe Lightdm. Erh.

Yup there is a lot of potential but not many really know how to do this, even though they might the other parts might scare them off (css, bootstrap etc)
That's why I added that tutorial with a template so all they had to do was create the animation and drop it into the template.
There are others out there but it is small, plus finding time to create them, it is voluntary and not everyone has time, I have around 5 projects on the go right now a full time and a wife time is scarce sometimes to take on other things and I'm sure a lot of other folks have the same stuff going on because if they can create a mdm animated theme they can do a lot of other things as well usually.

That's why I like it when I see others joining in and making some, the more the merrier the bigger the choice and different styles added for the community.

Keep up the good work
Sam