New MDM How to and snippets

Show your artwork
Forum rules
No support questions here please

New MDM How to and snippets

Postby samriggs on Wed Mar 13, 2013 3:09 pm

I got a request to make a how to theme the new mdm coming out.
Find out more here: http://blog.linuxmint.com/?p=2327
I was going to make a bunch of css files for animating stuff but there is so much you can do with it that it would probably make way to many files, so instead I decided to make this thread where everyone can contribute there own how to's and code snippets for html5, css and javascript animations.
I'll make a list of each css part that can be changed and put it in here so you know where to go and what does what (I'm going to this in a file first then paste it in here).
But until I get that done I thought some others might want to contribute some stuff also.
Also instead of using the bootstrap.min.css file (which has all the white spaces gone and hard to read) just use the bootstrap.css file instead (it has white spaces to make it more readable, just change this part in the index html file from this: css/bootstrap.min.css to this: css/bootstrap.css so it will read that file instead. (there the same file one has white spaces and one doesn't.
You can do the same with js/bootstrap.min.js to this js/bootstrap.js to get the white space one to make any changes you want in that one also. There is one at the top and bottom in the index file for the last one.

I start by showing aa quick and simple sprite sheet animation you can use for the mdm.
First of all create a sprite sheet of your animation (make sure all frames are the same size) this code is for a one row sprite sheet so use only one row (it's one I found on the net somehwere but I'm condensing it down here for you, adding parts you might want and taking out parts you won't need at all).
The quickest way I found to make a sprite sheet is I use a sprite sheet script in gimp, I put each frame on a separate layer (leaving no layers empty) and pressing the sprite sheet from layers it can be gotten here: http://registry.gimp.org/node/20943 (which is one of them) it spaces out each frame for you, saving you the headache and creates a one row sprite sheet for you.
Now you got your moving animation done shove it in the file.
In the theme.css this is the code you need to place your sprite in

Code: Select all
#sprite1 {
     width: 300px;
     height: 100px;
     background-image: url(twoblimp.png);
     top:50px;
     left:50px;
     position:fixed;
}

the width here is the width of one frame only (divide the number of frames by the width size of the overall sprite sheet to get it if you don't remember what one frame width is), the height is the height of the sprite sheet. the background-image is the name of the spritesheet (if you have it in a different folder add that), the top:50px; part is how far down you want it from the top to always appear, you can change this to whatever you want and use px or % instead. Same goes with left (or you can use right and bottom also instead of top or left etc etc). This will create a static non-moving sprite. If you want to move it then here's the code for that.
Code: Select all
#sprite1 {
     width: 300px;
     height: 100px;
     background-image: url(twoblimp.png);
     top:50px;
     position:fixed;
     animation:blimp1 60s infinite;
     animation-timing-function:linear;
    -webkit-animation:blimp1 60s infinite;
    -webkit-animation-timing-function:linear;
}
@keyframes blimp1
{
from { left: -200%;}
 to {left:  120%;}
}

@-webkit-keyframes blimp1
{
from { left: -200%;}
 to {left:  120%;}
}


This will move it from left to right, with no easing, these two parts
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
make sure theres no easing, these two parts
animation:blimp1 60s infinite;
-webkit-animation:blimp1 60s infinite;
gives you the speed of how fast it moves across the screen, the lower the number the faster it goes, infinite means infinite loops, leave this out if you only want it to show up once or use animation-iteration-count:3;
-webkit-animation-iteration-count:3;
to make it show up a certain amount of times.
blimp1 is the name to link this one to the keyframes (trying to think of an easy explanation for this, so forgive me purest lol).
To make a new one just change the sprite name (example instead of #sprite1 add a one #sprite2) and change blimp1 to blimp2 or call it whatyever you want.
There is so many ways you can use css to animate a sprite or anything it's just to much to go into here, so here is a link that will show you most of the ways and things you can do: http://www.w3schools.com/css3/css3_animations.asp
Including rotating, easing, start stop move on etc etc etc, it's pretty much endless of possibilites by mixing stuff together.

Ok that's the css stuff, pretty basic stuff. next the javascript part, you can put this in a separate javascript file and refer to it or just shove it in the index html file between the head tags like any normal javascript stuff.
Here's the code:
Code: Select all
   <script type="text/javascript">
      $(document).ready(function(){
         var frameWidth = 100;
         var frameHeight = 50;
         var spriteWidth = 800;
         var spriteHeight = 50;
         var spriteElement = document.getElementById("sprite1");
         var curPx = 0;
         var ti;
         function animateSprite() {
            spriteElement.style.backgroundPosition = curPx + 'px 0px';
            curPx = curPx + frameWidth;
            if (curPx >= spriteWidth) {
               curPx = 0;
            }
            ti = setTimeout(animateSprite, 10);
         }
         animateSprite();
      });
   </script>

These parts
Code: Select all
var frameWidth = 100; the width of one frame of the sprite sheet, the same as the one you used in the css file
var frameHeight = 50; the height of the sprite sheet
var spriteWidth = 800; the total width of the sprite sheet
var spriteHeight = 50; the height of the sprite sheet
var spriteElement = document.getElementById("sprite1");  what you called it in the css file (#sprite1 part)
ti = setTimeout(animateSprite, 10);  is the frame rate speed, the lower the faster it goes through the frames.

Thats it for that one, really simple, and the easiest part is saved for the last lol.
Add this into the html where you want the animation to appear.
Code: Select all
<div id="sprite1"></div>

Again the sprite1 is what you named it in the css.
Voila your done. :D
Nice and simple way to use a one row sprite sheet and move it around the page.
Hope it helps someone out.
Sam
Last edited by samriggs on Wed Mar 13, 2013 3:25 pm, edited 3 times in total.
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Linux Mint is funded by ads and donations.
 

Re: New MDM How to and snippets

Postby xenopeek on Wed Mar 13, 2013 3:16 pm

Thanks Sam! I'm sure this will be of help to others, so stickying it here :)
User avatar
xenopeek
Level 21
Level 21
 
Posts: 14985
Joined: Wed Jul 06, 2011 3:58 am
Location: The Netherlands

Re: New MDM How to and snippets

Postby samriggs on Wed Mar 13, 2013 3:27 pm

xenopeek wrote:Thanks Sam! I'm sure this will be of help to others, so stickying it here :)


No problem just hope some more can contribute also.
I'll add more as I get time away from making these things and my android stuff.
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby samriggs on Sat Mar 16, 2013 5:08 am

Just in case anyone wants to make a spiral galaxy MDM (I'm making one now for my wifes mdm, shes a fan of space and pink lol) ya I know I will make two versions :lol:
Anyhow I been fooling around with css all night 2d and 3d trying to think how to just make a simple spiral galaxy image rotate while on an angle so it is either looking as though it's a perspective angle in space, and after trying all the 3d css ones and getting some really weird and cool arrangements I'll use for something else instead, I found the simpliest 2d method quick and looks good, so if you want this it does work.
Here's a sample of the css part

Code: Select all
.galaxy1{
     width:300px;
     height:300px;
     background-image:url('galaxy.png');
     position:fixed;
     top:50px;
     left: 50;
     animation:galaxy1 10s infinite;
     animation-timing-function:linear;
    -webkit-animation:galaxy1 10s infinite;
    -webkit-animation-timing-function:linear;

}
@keyframes galaxy1
{
 from {
    transform:skew(30deg,20deg) rotate(0deg);
    -moz-transform:skew(30deg,20deg)rotate(0deg); /* Firefox */
    -webkit-transform:skew(30deg,20deg) rotate(0deg); /* Safari and Chrome */
    -o-transform:skew(30deg,20deg) rotate(0deg); /* Opera */
  }
  to {
    transform:skew(30deg,20deg) rotate(360deg);
    -moz-transform:skew(30deg,20deg) rotate(360deg);/* Firefox */
    -webkit-transform:skew(30deg,20deg) rotate(360deg); /* Safari and Chrome */
    -o-transform:skew(30deg,20deg) rotate(360deg); /* Opera */
  }
}

@-webkit-keyframes galaxy1
{
 from {
    transform:skew(30deg,20deg) rotate(0deg);
    -moz-transform:skew(30deg,20deg)rotate(0deg); /* Firefox */
    -webkit-transform:skew(30deg,20deg) rotate(0deg); /* Safari and Chrome */
    -o-transform:skew(30deg,20deg) rotate(0deg); /* Opera */
  }
  to {
    transform:skew(30deg,20deg) rotate(360deg);
    -moz-transform:skew(30deg,20deg) rotate(360deg);/* Firefox */
    -webkit-transform:skew(30deg,20deg) rotate(360deg); /* Safari and Chrome */
    -o-transform:skew(30deg,20deg) rotate(360deg); /* Opera */
  }
}


and just put this in the html
Code: Select all
<div class="galaxy1"></div>


and volia you got a animated spiralling galaxy that is skewed to look like it is in space on an angle with a perspective look without any 3d css at all :D
you can fool around with the two skew degrees until you get it how you want it x 45 degrees will make it look flat in space almost.
You can get the same effect in css 3d but with more headaches, this is quick and simple.
This is what it looks like, this has two galaxy images moving at different speeds on top of each other (very little difference in the speeds) and with some blinking stars in the background.
screen.png

There is even more that could be done to it if you want to go nuts with it but the point is it can be done with simple css 2d images.
Sam
Last edited by samriggs on Mon Mar 18, 2013 5:13 pm, edited 2 times in total.
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby catweazel on Sat Mar 16, 2013 7:18 am

samriggs wrote:I'm making one now for my wifes mdm, shes a fan of space and pink lol) ya I know I will make two versions

You may not need to...
http://www.nasa.gov/images/content/178493main_sig07-009-hires.jpg
Mint Testing Team & Mint Donor #3606
KDE 4.12.0, custom preemptive kernel 3.12.5,
Intel i7 4770K @ 4.7GHz, 16GB 2666MHz XMP,
4 Samsung 840 PRO 512GB SSDs in RAID0,
6TB HW RAID10, dual 24" Acer X243H,
Gigabyte nVidia GTX 680 Super Overclock
User avatar
catweazel
Level 7
Level 7
 
Posts: 1656
Joined: Fri Oct 12, 2012 9:44 pm

Re: New MDM How to and snippets

Postby samriggs on Sat Mar 16, 2013 1:24 pm

Nice image, thanks foI'll have animate stars and planet in this one also to make it look real.
Love the name lol, I get told I'm a grumpy old man at times :lol:
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby catweazel on Sat Mar 16, 2013 5:38 pm

Cheers.
Mint Testing Team & Mint Donor #3606
KDE 4.12.0, custom preemptive kernel 3.12.5,
Intel i7 4770K @ 4.7GHz, 16GB 2666MHz XMP,
4 Samsung 840 PRO 512GB SSDs in RAID0,
6TB HW RAID10, dual 24" Acer X243H,
Gigabyte nVidia GTX 680 Super Overclock
User avatar
catweazel
Level 7
Level 7
 
Posts: 1656
Joined: Fri Oct 12, 2012 9:44 pm

Re: New MDM How to and snippets

Postby samriggs on Tue Mar 26, 2013 2:09 am

Thought I would add this link to those who might want to try some game engines for the mdm and use them to make some cool stuff.
Some are full blown 3d and some are very simple basic engines that animate and detect collsions and stuff, a good way to start if you want to step out of simple css animations and move onto more difficult mdm themes :D
You can check them all out here: http://html5gameengines.com/
For those who don't know what a game engine is, it basically saves you tons of time coding what you want by passing variables over for you to use instead of writting the whole code from scratch and reinventing the wheel, all the hard work is already done for you.
For those who want to get into to more, you can take these and make your own framework out of it to add what you want :wink:
Enjoy
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby steveking on Tue Mar 26, 2013 1:16 pm

Cheers for this sam!

Very useful indeed! As soon as I have my command center unpacked I will be joining you in your quest, but for now all I can do is plan :(

Steve
2nd gen core i5 : 8Gb RAM : AMD Radeon HD 6770 1Gb GDDR5 : 1Tb 7500 SATA

cpanel Login - The Easy Way To Log Into Your cPanel Hosting
User avatar
steveking
Level 3
Level 3
 
Posts: 146
Joined: Thu Jun 07, 2012 8:53 am
Location: Shropshire, UK

Re: New MDM How to and snippets

Postby samriggs on Tue Mar 26, 2013 1:47 pm

steveking wrote:Cheers for this sam!

Very useful indeed! As soon as I have my command center unpacked I will be joining you in your quest, but for now all I can do is plan :(

Steve


It'll be nice to have someone else on board with this, I want to shove lmde on this instead but I have to wait as well, my external verbatim crap HD turned into read only on me, it happens with this one quite a bit for a lot of folks and nothing can be done about it (including use gparted) it's just a crappy external HD, I have to wait to get another one before I can install anything so I can save all my stuff again.
Planning is good :D, I have a pile of papers with ideas sitting on my computer cuboard.

For anyone having issues with resizing the canvas to match the window size I use this code to get it at 100% both ways.
For the canvas tag I just use this
Code: Select all
<canvas id="canvas"></canvas>

Notice no size is specified here where it normal is, then in the code where it calls canvas like so
Code: Select all
 var canvas = document.getElementById('canvas')

I add this part before any canvas width or height are called in the code
Code: Select all
 if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }

This solves the issue of the canvas with and height matching the windows width and height.
Also if you use canvas in the css you can also make the background whatever you want (image, color, tansparency)
Here is an example of a almost transparent back to the canvas (alpha state set at 1)
Code: Select all
#canvas {
  background-color: rgba(80,80,80,0.1);
}

you can also use this for your background image instead if the image is 100% both ways and no need to place your image in the body, or mix and match use opacity for the image etc etc, a few ways to fool around with it, the main fact is the problem with making canvas 100% the window size which this solves.
Sam
Edit: still an issue with canvas going full screen 100% 100% on the login page, it works for everything but the login page, I tried resizing the screen and redraw it, it works but lags big time redrawing the lines in the code I have so if you have any issues until I figure this out or anyone does, I set the canvas size manually instead to 1920x 1080 the max size in the emulator, not sure why it does this only in the login page maybe something to do with mdm and screen size or something, not sure.
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby steveking on Wed Mar 27, 2013 4:53 am

My only query with this is that I hear you mention the <canvas> element alot. Is this needed or is it a personnal preference?

Steve
2nd gen core i5 : 8Gb RAM : AMD Radeon HD 6770 1Gb GDDR5 : 1Tb 7500 SATA

cpanel Login - The Easy Way To Log Into Your cPanel Hosting
User avatar
steveking
Level 3
Level 3
 
Posts: 146
Joined: Thu Jun 07, 2012 8:53 am
Location: Shropshire, UK

Re: New MDM How to and snippets

Postby steveking on Wed Mar 27, 2013 6:25 am

Thought I would paste some code snippets for you too Sam! Here is how I do my full screen canvas:

Code: Select all
<head>
<style type="text/css">
* {margin:0; padding:0;}
html, body {width:100%; height:100%;}
canvas {display:block;}
</style>
<script type="text/javascript" >
(function() {
        var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d');

        // resize the canvas to fill browser window dynamically
        window.addEventListener('resize', resizeCanvas, false);
       
        function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
               
                /**
                 * Your drawings need to be inside this function otherwise they will be reset when
                 * you resize the browser window and the canvas goes will be cleared.
                 */
                drawStuff();
        }
        resizeCanvas();
       
        function drawStuff() {
                // do your drawing stuff here
        }
})();
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>


Hope this helps anyone in need!

Steve
2nd gen core i5 : 8Gb RAM : AMD Radeon HD 6770 1Gb GDDR5 : 1Tb 7500 SATA

cpanel Login - The Easy Way To Log Into Your cPanel Hosting
User avatar
steveking
Level 3
Level 3
 
Posts: 146
Joined: Thu Jun 07, 2012 8:53 am
Location: Shropshire, UK

Re: New MDM How to and snippets

Postby samriggs on Wed Mar 27, 2013 12:24 pm

Thanks for posting that one Steve, I forgot to, that was the second one I tried that, it did work to a point, it worked but when redrawing the canvas it didn't draw everything for the new one I am making, it lagged to much to catch up, but I might of coded it wrong and I forgot the html 100% I only did the body 100% so it's probably my error, I'll give it another whirl and see what happens, hopefully it's just the html at 100% because that code did work, I also might of put the end } in the wrong place, I put it at the very end before the closing };
The orginal one did work it was nice and simple, no resizing extra code needed but it only worked in the emulator and browser not in the login screen at all.
I'll try both with html at 100% and see if I can get both working. I also didn't use use display:block for canvas so I'll give it a try.
If anyone tries canvas(width:100%; height:100%} it won't work it looks like total crap so leave that one out :lol:
I was trying quite a few things to get this thing to play nice with canvas, buit you added a few more to try,
Thanks Steve I'll let you and everyone know how it works in the login screen
The one I'm using it for is it draw dots and connects lines to them as they pass each other, I have it set at 150 dots, seems like a lot but there so small it's not really a lot. There only 3px round the line is only 1px, hopefully I can get it going with 100% screen.
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby steveking on Wed Mar 27, 2013 12:55 pm

What I generally do is this:

Code: Select all
html,body{padding:0;}
body{height:100%;}
canvas{height:100%;width:100%;top:0;left:0;position:absolute;}


This (for anything web related) will guarantee that it is full screen and fluid so it will adapt to any screen size.

Steve
2nd gen core i5 : 8Gb RAM : AMD Radeon HD 6770 1Gb GDDR5 : 1Tb 7500 SATA

cpanel Login - The Easy Way To Log Into Your cPanel Hosting
User avatar
steveking
Level 3
Level 3
 
Posts: 146
Joined: Thu Jun 07, 2012 8:53 am
Location: Shropshire, UK

Re: New MDM How to and snippets

Postby samriggs on Wed Mar 27, 2013 2:39 pm

steveking wrote:
Code: Select all
html,body{padding:0;}
body{height:100%;}
canvas{height:100%;width:100%;top:0;left:0;position:absolute;}


I tried this
Code: Select all
canvas{height:100%;width:100%}
it works good in the emulator and browser just not in the login screen, it looked like crap and just made the images and whatever was in script at 100% although I tried relative not absolute so I'll give this one a whirl with absolute instead and sees what happens to it. Usually for the html it has to be 100% as well, I forgot to add this as well, you'll notice when you start making these that what works in both the emulator and browser doesn't always work in the login screen, I'm trying to find that one code that will work for canvas in all projects with no issues at all, the last one you put up was the closes I got on it so far, I'm going to try some more things on it and see if I can find that perfect code.
The emulator is a browser window by looks of it so it is different from the login screen to a point, just not sure what the difference is and why it's not acting the same, a bit more advance then where I'm at to try and figure it out, but 90% of the stuff works on both, resizing 3d stuff also causes issues some times I found out, but there is still a lot that can be done with it. :)
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby samriggs on Wed Mar 27, 2013 3:39 pm

So I tried them all and nope nope and nope. the absolute and canvas 100% just made things all 100% same as the relative, it's just shoving 100% in canvas does that, the resizing code works to a point as usual but still works to slow to keep up with redrawing stuff, it'll draw the dots but not the lines because they change and scale constantly, it sometimes catches up but it looks like a mess instead. This code will probably work for most stuff but not if there is a lot going on, it works perfect in browsers and the emulator though, just not the login screen.
So you do have the answer with the scaling code in the javascript and just leaving canvas as such
Code: Select all
<canvas id="canvas"></canvas>
but anything that has a lot going on the resizing won't work totally and the canvas will have to be sized in the canvas id instead and not using the rescaling code at all.
The login screen is just different from the rest so we have to work with what we got :)
Hopefully there can be a way around this but so far no go. The only thing I can think of is resizing it before it hits the script that uses it, not in the code itself.
sort of like
Code: Select all
window.onload = function () {
      var canvas = document.getElementById('canvas');
      window.addEventListener('resize', resizeCanvas, false);
      function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
} resizeCanvas();
     

then somehow just call canvas.width and height from this script in a different file instead of calling
Code: Select all
 var canvas = document.getElementById('canvas');
within the script your using. That way it might get scaled before it hits the main one because sizing it up in the canvas element works and it scales it before it hits it, it just the scaling while its reading the other stuff slows it down somehow. ahh back to the drawing board :lol:
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby steveking on Thu Mar 28, 2013 5:09 am

Nothing is every easy! Theoretically using your javascript method should work, because it detects the size of the window it needs to fit and scales the canvas accordingly. This is confusing to say the least!

Is there a reason you use canvas in the first place? It isnt something I use on a regular basis in all honesty I prefer to use other methods - but each to their own after all!

Steve
2nd gen core i5 : 8Gb RAM : AMD Radeon HD 6770 1Gb GDDR5 : 1Tb 7500 SATA

cpanel Login - The Easy Way To Log Into Your cPanel Hosting
User avatar
steveking
Level 3
Level 3
 
Posts: 146
Joined: Thu Jun 07, 2012 8:53 am
Location: Shropshire, UK

Re: New MDM How to and snippets

Postby samriggs on Thu Mar 28, 2013 2:00 pm

I use canvas because it uses a lot of animation and drawing stuff in it. if you downloaded the new one circuit board check out the animatedballs.js file, this is the main one that animates the rest of it and draws all the stuff to canvas, it uses canvas for measureing and drawing stuff to it.
If I can get away without using it I would.
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby samriggs on Fri Mar 29, 2013 7:13 am

Here is a particle code for you all to play with.
I changed it around a bit and added some different features where you can add random colors in different ways or just use one color, I comment on each area and comment out the ones I am not using but you can, just comment out the one you dont want and uncomment the ones you want, I also added extra comments explaining areas of importance so you know what does what, you can aslo add a random code for colors where it will change colors to any color, thats up to you, I didn't add that one, I wanted to control the colors for my need so I put them in an array instead.
EDIT: I made some changes as the ole canvas and login screen gave me headache again but steve your fix worked for this one :D
Here be the code
Code: Select all
(function() {

  var Particle = function(x, y, vx, vy) {
    this.x = x || 0;
    this.y = y || 0;
    this.vx = vx || 0;
    this.vy = vy || 0;
   
    this.update = function (vx, vy) {
      vx = vx || 0,
      vy = vy || 0;

      this.x += this.vx + vx;
      this.y += this.vy + vy;
    };
  };

  var ParticleSystem = function(container, center, count) {
    var i = 0,
        c = container.getContext('2d');

    count = count || 0;

    this.particles = [];

    this.center = {
      x: center.x || 0,
      y: center.y || 0
    };

    // Initialization
    for ( ; i < count ; ++i ) {
      var x = this.center.x,
          y = this.center.y,
          vx = Math.random() * 12 - 6,
          vy = Math.random() * 6 - 3;

      this.particles.push(new Particle(x, y, vx, vy));
    }

    this.update = function() {
     
          //random colors
          var myArray = ['#1B92E9', '#1B34E9', '#6FCFF0', '#58EDED', '#0A0CB0'];
      for ( i = 0 ; i < count ; ++i ) {

        // We don't want to process particles that
        // we can't see anymore
        //change this where you want them to disapear
        if (this.particles[i].x > 0 &&
          this.particles[i].x < container.width &&
          this.particles[i].y > 0 &&
          this.particles[i].y < container.height) {
          this.particles[i].update();
         /*change size of particles here*/
          c.fillRect(this.particles[i].x, this.particles[i].y, 1, 1);
         /*solid color*/
         // c.fillStyle = '#1B92E9';
         /*random color*/
        c.fillStyle =myArray[Math.floor(Math.random() * myArray.length)];
        } else {
          this.particles[i].x = this.center.x;
          this.particles[i].y = this.center.y;
        }
      }
    };
  };


  // shim layer with setTimeout fallback by Paul Irish
  // Used as an efficient and browser-friendly
  // replacement for setTimeout or setInterval
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame   ||
    window.mozRequestAnimationFrame      ||
    window.oRequestAnimationFrame        ||
    window.msRequestAnimationFrame       ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

  // Call the init() function on load
 init();

  function init() {
    // Get a reference to the canvas object in the HTML
    var canvassize = document.getElementsByTagName('canvas')[0],
        c = canvassize.getContext('2d'),
        p = null;
     
      // Make the canvas have the same size as
      // the browser window
      window.addEventListener('resize', resizeCanvas, false);
      function resizeCanvas() {
            canvassize.width = window.innerWidth;
            canvassize.height = window.innerHeight;

   
    /*moved this up to particle to change colors separately/*
    //use this one if all you want is one color
    /*c.fillStyle = /*'#1B92E9';*/
    //1000 is the number of particles you want to show up at one time
    //the more the  slower it moves
    p = new ParticleSystem(canvassize, { x: canvassize.width/2, y: canvassize.height/2 }, 1000);

    // Call the paint method
    paint();

    function paint() {
      c.clearRect(0, 0, canvassize.width, canvassize.height);
     
     /*random color here on updates to flicker colors works slower but looks better*/
     /*all color change at same time here*/
     //var myArray = ['#1B92E9', '#1B34E9', '#6FCFF0'];
     //c.fillStyle =  myArray[Math.floor(Math.random() * myArray.length)];

      p.update();
     
      // Call paint() again, recursively
      requestAnimFrame(paint);
    }
   } resizeCanvas();
  }
})();

add anything you want to this or make it better and share please
Here is the css parts you'll need
Code: Select all
body {
    width: 100%;
    height: 100%;
}
canvas {
    display:block;
    }

display:block gets rid of the scrollbars
the html part to add in
Code: Select all
   <canvas></canvas>
        <script src="js/particle.js"></script>

no box with this is needed
This works in the browser, emulator and login screen
Thanks again Steve for the resize fix, it didn't work for the last one but it did for this one :D
Enjoy
Sam
EDIT:
I wasn't too happy with the way the particles disapearred, (removed from the screen) if you have it going the full width and height of the screen it is fine the way it is, but the one I am making now I am having the particles remove from the screen a certain distance from the center artwork (they'll be coming from behind it and getting removed a short distance from the artworks edge that is in the center of the page) so i shrunk the removal part down, it looked like a square when they got removed (which it is) so I added a random code that would remove the x and y distance at different intervals instead, making it look a lot better.
So in case anyone wants this same effect change this part
Code: Select all
 for ( i = 0 ; i < count ; ++i ) {
        // We don't want to process particles that
        // we can't see anymore
        //change this where you want them to disapear
        if (this.particles[i].x > 0 &&
          this.particles[i].x < container.width &&
          this.particles[i].y > 0 &&
          this.particles[i].y < container.height)

which is the distance where they are removed from the screen (this setting has them getting removed soon as they reach the edge of the window)
to this.
Code: Select all
 
          var myDotXArray = [240, 280, 320, 360, 400];
          var myDotYArray = [200, 220, 240, 280, 320];
      for ( i = 0 ; i < count ; ++i ) {
        // We don't want to process particles that
        // we can't see anymore
        //change this where you want them to disapear
        if (this.particles[i].x > ((container.width / 2) - myDotXArray[Math.floor(Math.random() * myArray.length)]) &&
          this.particles[i].x < ((container.width / 2) + myDotXArray[Math.floor(Math.random() * myArray.length)]) &&
          this.particles[i].y > ((container.height / 2) - myDotYArray[Math.floor(Math.random() * myArray.length)]) &&
          this.particles[i].y < ((container.height / 2) + myDotYArray[Math.floor(Math.random() * myArray.length)]))

call the dotxarray and dotyarray what ever you want it is a bit messy because I just did it. You can add any distance you want in the list of arrays, or if the x and y distance is the same for you will only need one array instead, I want mine to go wider then higher here. It's still a square but now they all disapear at different times so it doesn't look like a square and looks a lot better.
You can change this code to do a whole wack of things, (sparks, 3d look star field (increase size with distance using the -= or += operator), add a roatate to it and some sin and cos trigonemtery to get swirly effects, follow the mouse, instead of a sqaure color use circles with gradients or change it do images, add css transitions or transforms, etc etc), this is a basic particle code that you can fork to do a lot of stuff with.
Have fun
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Re: New MDM How to and snippets

Postby samriggs on Tue Apr 02, 2013 7:31 pm

Make a nice side loading dropdown menu instead of the top one so it looks something like this:

sidemenu.png
sidemenu.png (35.89 KiB) Viewed 5583 times


This is just black but I'm changing it with metal looking menu's for the next theme.
I tried this in a separate file besides boostrap but found it gave me too much of a headache so I shoved it in bootstrap instead and it works great, I knocked out display block because I added some transition to the menu li part and this cannot happen with display blocks (for some reason display block don't animate well if at all, I heard both sides, some says they can some says they can't, I know it's not in the transition list from what I seen.
So for those who want to play with dropdowns and make them less boring in the bootstrap add this
Code: Select all
/*hover stuff*/
.first-hover{
position: absolute;
visibility:hidden;
top:0;
left: 51px;
width: 0;
height: 30px;
margin: 0;
padding: 0;
background-color: #393939;
border-left: 1px solid #242424;
border-right: 1px solid #242424;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.first-hover a{
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.open > .first-hover{
min-width: 200px;
visibility:visible;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
-ms-transition-delay:0s;
}
/*end of hover stuff*/
/*try new menu*/
.menu{
visibility: hidden;
position: absolute;
top: 30px;
min-width: 200px;
height: 100%;
width: 100%;
left: 51px;
margin: 0;
padding : 0;
text-align: left;
background-color: #393939;
/*border-top: 1px solid #fff;*/
border-left: 0px solid #242424;
border-right: 0px solid #242424;
  -webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition:    all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -ms-transition:     all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition:      all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition:         all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.menu li{
list-style: none;
height: 100%;
width: 100%;
background-color: #393939;
border-bottom:none;
text-align: left;
white-space: nowrap;
border-left: 1px solid #242424;
border-right: 1px solid #242424;
/*border-top: 1px solid #fff;*/
  -webkit-transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition:    border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -ms-transition:     border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition:      border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition:         border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.menu li:hover{
background-color: #737373;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
 /*background-color: rgba(255,255,255,.07);*/
}
.open > .menu{
visibility: visible;
height: 100%;
width: 100%;
left: 51px;
-webkit-transition-delay:0.1s;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-ms-transition-delay:0.1s;
}
/*end of new menu testing*/

you can add more stuff to it if you want, this basically takes care of hovering and filling in the areas with color.
You'll notice the an element named first hover, this is for the top bar above the menu, it eases out then the dropdown appears below it.
You can add a end piece to it etc etc, it's like the pole that holds the dropdown items (which I entend to turn it into)
.open is what open the menu, if you want to use hover then use hover instead and make it appear with hover, I use the same button as was before so in the html the language and sessions dropdown now look like this.
Code: Select all
<div class="dropdownbox1">
                <button class="btn btn-small dropdown-toggle" data-toggle="dropdown" title="$selectsession"> <img src="img/sessions/default.svg" title="$defaultsession" width=16 height=16 id="current_session_picture"/> <span class="caret"></span></button>
                <a class="first-hover" href="#"><span><span></a>
                <ul class="menu" id="sessions">                                                       
                </ul>
            </div>
          <div class="dropdownbox2"> 
                <button class="btn btn-small dropdown-toggle" data-toggle="dropdown" title="$selectlanguage"> <img src="img/languages/generic.png" id="current_language_flag"/> <span class="caret"></span></button>
                <a class="first-hover" href="#"><span><span></a>
                <ul class="menu" id="languages">                                                       
                </ul>
            </div>   

notice the button class stays the same so it uses the same first button, if you want to make your own have fun, I might have to in this but for now I'll keep the old one, class first-hover is the ease out pole and menu is the new coded menu without display blocks.
In the htme.css I added the two dropdownbox elements as such
Code: Select all
.dropdownbox1{
    position: fixed;
   text-align: left;
   margin-top: 60px;
   margin-left: 0px;
   left:0;   
}
.dropdownbox2{
    position: fixed;
   text-align: left;
   margin-top: 20px;
   margin-left: 0px;
   left:0;   
}

This will allow you to move them anywhere you want to individually, I also added space for language and session images on the dropdown so they don't appear at the very end like such in the theme.css
Code: Select all
.session-picture {
   border-radius: 5px;
   border:2px rgba(80,80,80,0.5) solid;
   width: 20px;
   height: 20px;   
   margin-right: 5px;
   margin-left: 5px;   
}
.language-picture {
   width: 16px;
   height: 16px;
   margin-right: 5px;
   margin-left: 5px;
}

It's the margin-left that will move it on over.
Now the only thing is with display block it resizes the width, I had to this in the menu by hand, so you will notice in then menu element in the boostrap css the menu has a min-width of 200px, if you find this is not enough adjust it, I haven't test this live yet to see a full menu list.
and thar ya go.
Have fun making some cool dropdowns.
and just so you know or if you want more ideas I got this idea form here: http://www.antsmagazine.com/web-develop ... -and-css3/
I dare you to try the rotating circle one :lol: if you do let me know how ya got it working please.
Have fun
Sam
"Windows: the worst system for the most money, Linux: the best system for free"
Registered Linux User #545430
SolydK
User avatar
samriggs
Level 5
Level 5
 
Posts: 843
Joined: Sun Apr 24, 2011 6:09 pm
Location: Canada

Linux Mint is funded by ads and donations.
 
Next

Return to Other artwork

Who is online

Users browsing this forum: No registered users and 1 guest