Re: New MDM How to and snippets
Posted: 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
next I add this portion into the theme.css
next I just add this part into the html
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"
you can just comment out the 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 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
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);
});
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);
}
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>
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;
}
Code: Select all
document.getElementById("clock").innerHTML = message;
Code: Select all
document.getElementById("clock").innerHTML = message;
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