New MDM How to and snippets

Submit your artwork to make Linux Mint look better
Forum rules
Topics in this forum are automatically closed 6 months after creation.
samriggs

Re: New MDM How to and snippets

Post by samriggs »

How to make an analog clock for the new mdm
No credit to me for this code, I found it somewhere on the net but forgot where, so my apologies to whoever came up with it.
First I create a javascript file I called it clock.js and put it in the js folder.
Here's the code

Code: Select all

function startClock(prop) {
    var angle = 360/60,
        date = new Date();
        var h = date.getHours();
        if(h > 12) {
            h = h - 12;
        }
    
        hour = h;
        minute = date.getMinutes(),
        second = date.getSeconds(),
        hourAngle = (360/12) * hour + (360/(12*60)) * minute;
    
        $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
        $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
        $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
$(function(){
        
    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('div');
    
    for(var i = 0, l = props.length; i < l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    setInterval(function(){
        startClock(prop)
    },100);
});
next I add this portion into the theme.css

Code: Select all

/*clock*/

.start {
    font-size: 2em;
    font-weight: bold;
    margin: 5em;
    text-align: center;
}
#clock {
    background-image: url("img/clockFace.png");
    top: 20px;
    right: 20px;
    height: 150px;
    position: fixed;
    width: 150px;
}

#clock div {
    position: absolute;
}
#clock img[src*="second"] {
    -webkit-transition: transform 600000s linear 0s;
}
#clock:target img[src*="second"] {
    -webkit-transform: rotate(3600000deg);
}
#clock img[src*="minute"] {
    -webkit-transition: transform 360000s linear 0s;
}
#clock:target img[src*="minute"] {
    -webkit-transform: rotate(36000deg);
}
#clock img[src*="hour"] {
    -webkit-transition: transform 216000s linear 0s;
}
#clock:target img[src*="hour"] {
    -webkit-transform: rotate(360deg);
}
next I just add this part into the html

Code: Select all

<div id="clock">
    <div id="hour" style="transform: rotate(334.5deg);"><img src="img/hourHand.png"></div>
        <div id="minute" style="transform: rotate(54deg);"><img src="img/minuteHand.png"></div>
    <div id="second" style="transform: rotate(108deg);"><img src="img/secondHand.png"></div>
</div>
in the img folder or where ever you want to add the clock face, hour, min, sec hands make sure they are all the same size.
and change the directory to get them.
Also in the sript part in the html where it says this"

Code: Select all

// Called by MDM to update the clock
		function set_clock(message) {			
			document.getElementById("clock").innerHTML = message;
		}
you can just comment out the

Code: Select all

document.getElementById("clock").innerHTML = message;
part so it doesn't confuse the code, as you named the other element clock, and your using it for the analog one instead, I found an error in the terminal if you comment out the whole section as it still looks for set_clock so by commenting or deleting only the

Code: Select all

document.getElementById("clock").innerHTML = message;
seems to do the trick better, if you don't it will show up, so make sure you do comment it out.
Position on screen is in the theme.css part under #clock so is the size of the image.
Happy coding
This is a pretty simple code that can also be forked to make a desklet analog clock if and when it comes down the pipeline.
Sam
hdlopesrocha

Re: New MDM How to and snippets

Post by hdlopesrocha »

Is that possible to set the same background of the Desktop?

thanks ;-)
samriggs

Re: New MDM How to and snippets

Post by samriggs »

set what as the same background as the desktop?
The clock? or an mdm background?
not sure which one you mean here.
If it's the clock just look for clock face image in the mdm folder (which ever one you want or are making) and make the a copy of the desktop background the same size and call it the same name, if it's the background of the mdm just replace the bg.jpg image with whatever you want in mdm theme folder you are using.
The clock face would have to the size you chose or is chosen in theme.css

Code: Select all

background-image: url("img/clockFace.png");
    top: 20px;
    right: 20px;
    height: 150px;
    position: fixed;
    width: 150px;
here it is 150 x 150

not sure what your talking about here but this should answer it is if it's either one of these.
Sam
samriggs

Re: New MDM How to and snippets

Post by samriggs »

I made a tutorial for all those who want to make mdm themes along with a sample download file using phaser to create the animation through the phaser editor, this will allow you to make some amazing login screens by using a game framework.
You check it out here: http://samsstuffsoftware.blogspot.ca/20 ... ework.html

Enjoy
Sam

EDIT: forgot to add and explain the phaser stuff for those creators who want to make better mdm themes.
Alrighty here goes:
I decided to switch all things over to html5 now for my work since it seems to be taking over the planet and universe to some degree.
After a lot of fooling around with html5 frameworks for making games I chose phaser framework since it's probably the best or close to best as you can get and it's free and open source (minus some plugins, books etc so they can make some money to back there efforts) but you can grab it for free and just start coding, the site has a ton of examples and tutorials and is well documented.
They are also coming out with the new version soon "laser" which will be based on es6 (nicer way to code javascript) but it's not out yet.
Alrighty there is the framework I suggest to make mdm themes and now for an added bonus
The mighty phaser editor, I was using xdk and sublime but checked out this puppy and took for it for a test run and it sold me the first use of trying it.
Why? well I'll tell ya why
It uses eclipse as it's base (which I love and adore with all my heart (standalone so you can save it to an external and drag it back when ready to reinstall) nice and simple no installing needed.
I always use standalone eclipse this way for this purpose.
What do they get Johnny?
well you get the following built in:
Asset Pack Editor
JavaScript Editor
Preview window
Atlas generator
Project wizard
Chains and the Phaser Documentation
and he is also added a Scene Builder as your reading this
sort of like overlap2d
a drag and drop scene builder (a heck of a good thing)
It does has a small nag screen which is no big deal or just donate to get rid of it (I did because it is well worth it)
I fell in love with this editor which is why I yak about it so much
Makes my life soooo much easier.

Well thar ya have it folks a great framework and a great editor to start your crazy insane mdm themes with.
I added a tutorial on this page how to do it all with a download package to get ya all started
The link to the editor is here: http://phasereditor.boniatillo.com/
It has the phaser framework built in with start files to help get you started.
If you want to just get the framework without the editor or check out the tons of tutorials and examples here is phasers site
http://phaser.io

Now get going download the toys load up yer gimpers or kritas and start creating, everything you need is in this post.
Enjoy
Sam
Locked

Return to “Your Artwork”