New MDM How to and snippets

Show your artwork
Forum rules
No support questions here please

Re: New MDM How to and snippets

Postby samriggs on Mon Apr 15, 2013 8:26 pm

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
"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 hdlopesrocha on Sun May 26, 2013 10:48 am

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

thanks ;-)
hdlopesrocha
Level 1
Level 1
 
Posts: 1
Joined: Sun May 26, 2013 10:43 am

Re: New MDM How to and snippets

Postby samriggs on Sun May 26, 2013 1:04 pm

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
"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

Previous

Return to Other artwork

Who is online

Users browsing this forum: No registered users and 4 guests