MDM HTML5 Themes

[Brahim Salem]

I like the idea of a simple, clean and elegant desktop. French people say " La simplicité fait la beauté ". A green splash screen is what people expect from Mint and not a dark one. Plus these green spots remind us of Ubuntu and Mint is not a Ubuntu right . I hope they'll change that splash screen in the coming release and give Mint a unique identity

[samriggs]

Nice and clean is great especially for splash screens, those dots are just showing its loading, they can be changed to mint leaves if you want them instead, light ones and a bit darker ones. Might look nice. If you go to usr/share/plymouth/themes/mint-logo you'll see what I mean.
I don't know if the size has to changed or not, I didn't check the code right now, but if not, all that would need to be changed would be the two dot pngs, as far as I know anyhow, I never made a plymouth theme, but makes sense to me but I could be wrong.
Sam

[Brahim Salem]

You are right Sam, But people need change. Even Windows and Ubuntu change their boot animations. The looks of an OS are as impotant as its productivity. "bad looks give bad impression" that's a fact Sam

[samriggs]

yuppers, that's why Windows pays millions for a sound that plays when the system loads, bell pays thousands for the word bell I think it's just helvetica not sure (probably took a whole two minutes to create) but it works, just like the golden arches.
It could be a fun project to come up with a whole new concept for the loading animation part, no dots no progress bar, something totally unique and different, I do like what your doing with the lighter colors, not dark, its a nice change. I have to slap my hands constantly for adding to much crap in my stuff, I'm still trying to train myself to make my stuff cleaner and not so busy.

[Brahim Salem]

What you are doing is just great and unique Wish you could try your art on a new plymouth theme. You pay lots of attention to details and that great

[Brahim Salem]

If I could just turn this wallpaper into a splash screen I'd make the water move and with a splash Mint logo comes out of water It would be smashing Man

[samriggs]

Plymouth doesn't animate that much, it has a loading animation from what I seen, a very simple loop, and that's it (at least when I checked it out a couple of weeks ago), not sure what language it's written in either, I'd have to check that out, I'm sure someone in here would know what language it is written in, I really didn't pay enough attention when I scanned through it,, you probably could, just not sure how, but you would have to write from scratch by the looks of it.
I know it could be done as a mdm theme because of the html5 abilities and there is a ripple code out there somewhere you could make work for this somehow, probably have to change it to make the ripples go where you want them to go, or cheat and do a css ripple, scale, fade, skew all in one group, that would make belief it to look like ripples if done right. Plus I would stay away from too much animation in a plymouth screen, it would take longer to load, for some it would be great but others it would frustrate the crap out of them, especially loading it on a dinosaur computer with little ram, for fast computers it would be great though. the logo coming out of the water would just be a fade in as it rises with a one time animation (no looping) maybe add some water drops falling off of it as it rises and once it rises (timed so they fall at the right times with percentages) you could make the leaves wave a bit like there's a gentle breeze also (be a nice touch), maybe a dragonfly buzzing around turning on a pivot.
Sorry going on and on here just got through a tedious code for a trivia game I'm making, 100 names, 400 clues, 300 hundred false names, took me all freaking day and I'm almost ready to pull my hair out my brain died around 7 hours ago about time something woke it up, thanks I like making them, there fun to do, just the tedious boring parts like today I hate, my brain goes numb after an hour, but at least works so far, so I'm happy, still have to come up with 11 level names for the thing, got the wife working on that one, shes the trivia ruler in this house.
For a fake ripple effect in css you could use a couple of pngs, (make them big so they don't pixelate to death when scaled) then scale them from 0 to how ever big you want them to go as they fade out (no skew needed that way, because you already skew it in the artwork). Pretty simple code to get it to work.
If I get time away from this game, I'll do a sample ripple for everyone to use as a template. I just ignored my other stuff for a month so I have to this one done, then I can make a couple more , kind of behind the eight ball now, but I'm 90% done with this one. I'm sure quite a few would like a ripple effect to use, mine won't use canvas, so no issues with it, and hopefully I can make it look real enough in css . The Matrix one is on the back burner for now, I rewrote a code that looked great in browsers (better then the old one) but wouldn't work in the login screen for some reason, so back to the drawing board for that one.
EDIT: now ya got my brain all woke up I came up with a quick ripple css for you if you want to make one.
the idea is make a png image of a ripple, that way you can add all the gradients and alphas you want in it without having to hard code it in css (sometimes making a simple png makes things run smoother then coding the image (especially when it has to be scaled and has opacity changes) and hard coding gradients can makes things run a lot slower if your animating it also, all depends how much is going on) so for a ripple that has as many grads and alpha states you want to add , go with the png see how it works.
all you need is to start it off at a scale of 0 or very small and an opacity of almost 0 so it fades in quick but fades out slowly as it grows and spreads out.
This should work, I never tested it but it should work.

Code: Select all

.riiplethatthing{
    background-image:url('ripple.png');
    background-size: contain;
    background-repeat:no-repeat;
    position: fixed;
	top:50%;
	left:50%;
        margin-top:-25px;
        margin-left:-50px;
	width:100px;
        height:50px;
        z-index: 1;
       animation: rippleeffect 10s infinite;
      animation-timing-function: linear;
     -webkit-animation: rippleeffect 10s infinite;
     -webkit-animation-timing-function: linear; 	
}
@keyframes rippleeffect{
  0% {
   transform:scale(0,0);
    -moz-transform:scale(0,0);
    -webkit-transform:scale(0,0);
    -o-transform:scale(0,0);
    opacity: 0.1;
  }
10% {
   transform:scale(0.5,0.5);
    -moz-transform:scale(0.5,0.5);
    -webkit-transform:scale(0.5,0.5);
    -o-transform:scale(0.5,0.5);
    opacity: 0.7;
  }
30% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity:1;
  }
  100% {
    -moz-transform:scale(3,3);
    -webkit-transform:scale(3,3);
    -o-transform:scale(3,3);
    opacity: 0;
  }
}
@-webkit-keyframes rippleeffect {
 0% {
   transform:scale(0,0);
    -moz-transform:scale(0,0);
    -webkit-transform:scale(0,0);
    -o-transform:scale(0,0);
    opacity: 0.1;
  }
10% {
   transform:scale(0.5,0.5);
    -moz-transform:scale(0.5,0.5);
    -webkit-transform:scale(0.5,0.5);
    -o-transform:scale(0.5,0.5);
    opacity: 0.7;
  }
30% {
   transform:scale(1,1);
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    opacity:1;
  }
  100% {
    -moz-transform:scale(3,3);
    -webkit-transform:scale(3,3);
    -o-transform:scale(3,3);
    opacity: 0;
  }
}

some of it will have to be adjusted and fooled with till you get the desired effect but it should be ok as a base to start from, so it should fade in quick fade in then slow fade out as it grows.
I just made this up as I'm typing this so you'll have to fool around with it, but just add

Code: Select all

<div class="riiplethatthing"></div>

In the html where you want it to show and add a ripple image named ripple.png in the main directory that is 100px by 50px (if you want it bigger make the size changes in the css part), that css part goes into the theme.css, this will create on ripple that will loop over and over again, if you want more just use the same image or another one, use the percentages to start and stop the scaling so it comes right behind the other one or before it and do it over to add as many as you want, it should give an effect similar to the button effect I made in the underwater city theme. You can test it out with the main mdm template and see how it looks.
Sam

[Brahim Salem]

I'll have to give it a shot But what if you make it an MDM theme BTW look what I did to "Microslop Windblows" http://community.linuxmint.com/tutorial/view/1173 I have fixed that plyouth theme too http://kde-look.org/content/show.php/Ev ... ent=158359
I have attached it in a higher resolution

[samriggs]

Sure soon as I get some time to make it. that Windows idea is cool how you can change things so much, although personally I was so happy to get away from Windows I wouldn't want anything that even resembles Windows on my system but that's just my personal hatred for Windows, I'm sure there's plenty out there that would like it if not for Windows then for ways to convert their desktop into pretty much anything they want, nice tutorial
Is that image just a solid image or do you have it broken down into layers and separated? the leaves are they separated from the background itself in the main file?
I'll need the original file to make it into a mdm theme all separated, or I'll have to recreate it myself.
add which logo you want rising up out of the water also and I'll put it together, if you don't mind and got it all handy, that way it'll only be a matter of adding the animations to it and some water drops and it'll look like the one you got there, and the plymouth one to make it a set.
If not I'll try and recreate from scratch.
Sam

[Brahim Salem]

it's a solid image and not mine I like the idea of dragonflies and waving leaves. If done, this theme would deliver a death blow to every other OS Concerning the logo I suggest you decide which one after finishing the theme to see which one fits best

[samriggs]

Ok, I saved the image, I'll get to it soon as I get some free time here, I redo it to make it original (mostly the same but if I'm redoing it from scratch I'll do some other stuff to it), maybe the leaves not sure if they are mint leaves or not, if not I'll use mint leaves instead and come up with some other stuff for it.
The artwork usually takes me 20 to 30 times longer then coding it, if not more depending on details, so it'll be a bit but the coding is simple except for the dragon fly rotating on a pivot, I will have to do that with my ole favorite nightmare canvas and hope it works, if not just a simple sprite will have to do.

[Brahim Salem]

[Brahim Salem]

have you finished that theme?

[samriggs]

Nope haven't started it yet, I finished the game I was behind on and making another one since all the code is already done now, the hard part is done that took me so long to do. Just glad I got that one done, to many late nights figuring out ways to code the thing.
I'll try and get it done and some more done in between the gaming stuff. I was waiting to get back to making apps, cause my external hd died so I had to wait for a new one before I started making more, now its catch up time.
If you want to try and make that one it would be a nice project to start on if you never made one before since it's not too difficult to make, just some css animations (minus the dragonfly) unless you just make it a horizontal moving sprite (I added the code for that in the code snippet thread), and the other code I added here for the ripples, the only other one is the logo (vertical animation) fade in (use percentage not px for opacity changes) a few water drops and leaves moving slow (same code no opacity changes except horizontal maybe with a small rotate) and your done.
The ones I already made have 99% of the codes already done for it.
If not I'll get to it eventually
Sam

[Brahim Salem]

Check this out man. A hot Matrix theme for your Matrix MDM http://gnome-look.org/content/show.php/ ... ent=158396

[samriggs]

That's cool looking, I'm still trying to figure a way to get it to work in the login screen, the one I have that works in everything but the login screen (it even works in the emulator) is a nice one if I can get it working in the login screen. For some reason the login screen doesn't allow some things that everything else does, it has the letters falling really nice and looks really good which I was going to use as a background to a matrix tux dude blocking bullets sent by windows, but I'm stuck until I figure it out.
Good ole canvas halts me again, just have to find a work around for it.

[Brahim Salem]

fair enough

[samriggs]

Now for the truly insane and for those who really want to to get into more html5 webgl or other crazy stuff here be a another link for you to check out: http://www.canvasdemos.com/
The one that caught my eye is the GLGE one it's a take off of webgl you cna check out the insane 3d demos here: http://www.glge.org/
glge from what I read so far is webgl for the lazy people like me .
This is their explanation:

What is GLGE?

GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.
The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.

Sounds pretty cool, not sure what it all entails or that download if it has to be on the server (in the system in our case) or not, I haven't checked it out that far yet, but judging by the demos, some incredible stuff can be made with this new toy.

For those who want a pretty good tutorial in html5 gaming go here: http://www.iguanademos.com/Jare/docs/html5/Lessons/
All files supplied and a good tutorial, to ease you into the gaming part of it, I checked out the framework this person created for it, and it's actually pretty good stuff. That and I am a huge fan of frameworks. This one you can expand on quite a bit and is a great base to start from.
Hopefully one day I can figure out the perfect canvas code to work on all things in the login screen (both in lmde and the main mint edition). Still experimenting with that one, some things work with one canvas set up but other things won't work with it, but all work in browsers and most in the emulator. Most work in the main edition but some doesn't in lmde so I'm still working on work arounds to try find that happy medium for everything. So far what I have up works on all things as far as they been tested in both.
The particle script I added in the mdm code snippets works but if you add a rotate in the css it won't, it freezes up, so be warned, unless you can find a way to get around it. On it's own it works though. Stuff like that I'm still working on, hopefully others with more knowledge will add their two cents also.

[Brahim Salem]

Hi. I don't want to hijack this thread or any thing but I have a big problem with Linux Mint 13 GRUB. It is a total mess showing up entries of kernels that are not there. I don't know if you can help us here. Actually I'm thinking of upgrading grub follow mle here http://forums.linuxmint.com/viewtopic.php?f=46&t=132437

[samriggs]

Wrong place to ask this one, this is about html5 mdm