My Current Time
From OpenSocial Directory
|
|
| ||||||||||||||||||
Image:Example.jpg==Reviews==
Add a Review
Template:My Current Time Reviews
[edit] Comments
| Leave a comment |
|---|
[edit] Code
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My Current Time:" title_url="http://www.iwiddit.com" thumbnail="http://www.iwiddit.com/xml_support/myCurrentTime/myCurrentTime-tn.png" description="This app auto-adjusts iself to your time zone and shows your visitors what time it is in your neck of the woods. Full digital readout clock with under 5k net download size, use User Preferences to adjust color (when they start working)." height="140" scrolling="true">
<Require feature="opensocial-0.5" />
</ModulePrefs>
<userPref name="col" display_name="Digital Letter Color:" datatype="enum" default_value="orange">
<EnumValue value="black" display_value="Black" />
<EnumValue value="blue" display_value="Blue" />
<EnumValue value="brown" display_value="Brown" />
<EnumValue value="burgandy" display_value="Burgandy" />
<EnumValue value="gray" display_value="Gray" />
<EnumValue value="green" display_value="Forest Green" />
<EnumValue value="neonGreen" display_value="Neon Green" />
<EnumValue value="orange" display_value="Orange" />
<EnumValue value="pink" display_value="Pink" />
<EnumValue value="purple" display_value="Purple" />
<EnumValue value="red" display_value="Red" />
<EnumValue value="rust" display_value="Rust" />
<EnumValue value="skyBlue" display_value="Sky Blue" />
<EnumValue value="yellow" display_value="Yellow" />
</userPref>
<Content type="html">
<![CDATA[
<style type='text/css'>#opensocialexa{display:none;}div#block{height:140px;width:100%;}div#housing{ width:350px; margin-left:-175px; position:absolute; left:50%; top:0px;} div#clock{font:10px Arial; color:#069;}#pb{display:block;width:95%;text-align:right;position:absolute;top:90px;}#pb img{border:0px;}#pb a{border:0px;color:#006699;font:10px Arial;}#pb a#xml{float:right;position:relative;top:-8px;}</style>
<div id='housing'><div id='clock'></div></div>
<div id='pb'></div>
<script type="text/javascript">
/* DigiClock Controller--
Written by Dustin Jorge, 11/21/07
(c) 2007 Dustin Jorge / iWiddit.com
Usage: -- restricted to non-commercial, non-syndicated usage unless given written permission.
Controller.init();
//Note to self: Obj Notation is much prettier than chaos :D
*/
var Controller = {
reqObj:null, uP:null, tz:null, col:null, viewer:null, owner:null, myTz:null
,init:function(){
this.log("Loading data...");
this.reqObj = opensocial.newDataRequest();
this.uP = new _IG_Prefs();
this.col = this.cleanPath( this.uP.getString("col") );
this.col = this.col=="undefined" ? "orange" : this.col;
this.reqObj.add(this.reqObj.newFetchInstanceAppDataRequest("tz"),"timezone");
this.reqObj.add(this.reqObj.newFetchPersonRequest("VIEWER"),"viewer");
this.reqObj.add(this.reqObj.newFetchPersonRequest("OWNER"),"owner");
var _self = this;
this.reqObj.send(function(ret){ _self.initData(ret); });
return;
}
,initData:function(ret){
if( ret.get("timezone").hadError() || ret.get("viewer").hadError() || ret.get("owner").hadError() ){
this.log("Error in getting data");
return;
}
this.tz = ret.get("timezone").getData() == null ? null : ret.get("timezone").getData()["tz"];
this.viewer = ret.get("viewer").getData();
this.owner = ret.get("owner").getData();
this.myTz = new Date().getTimezoneOffset()/60;
if(realIsOwner(this.viewer,this.owner) && (this.tz != this.myTz)){
// need to update owner timezone
this.log("Updating Time Zone...");
toUpd = this.myTz;
this.reqObj.add(this.reqObj.newUpdateInstanceAppDataRequest("tz",toUpd),"stat");
_self = this;
this.reqObj.send(function(ret){ _self.reloadData(ret); });
return;
}
this.drawClock();
return;
}
,reloadData:function(ret){
if(ret.get("stat").hadError()){
this.log("An update error occured.");
return;
}
this.tz = this.myTz;
this.drawClock();
return;
}
,drawClock:function(){
this.log("");
DigiClock.make("clock",50,20,10,-this.tz,this.col);
this.drawPowered();
}
,log:function(str){
_gel("clock").innerHTML = str;
return;
}
,cleanPath:function(str){
str = unescape(str);
return str.replace(/(http:)|(www.)|\.{2}\/|\.{1}\/|\/*/ig,"");
}
,drawPowered:function(){
var a = document.createElement("A");
a.href="http://www.iwiddit.com/";
a.target="_blank";
var a2 = document.createElement("A");
a2.href="http://www.iwiddit.com/xml/myCurrentTime.xml";
a2.target="_blank";
a2.id = "xml";
a2.appendChild(document.createTextNode("(xml)"));
var img = document.createElement("IMG");
img.src = "http://www.iwiddit.com/xml_support/img/iw_log_s.gif";
a.appendChild(img);
_gel("pb").appendChild(a);
_gel("pb").appendChild(a2);
return;
}
}
/* DigiClock --
Written by Dustin Jorge, 11/18/07
(c) 2007 Dustin Jorge / iWiddit.com
Usage: -- restricted to non-commercial, non-syndicated usage unless given written permission.
DigiClock.make(elemId, w, sw, lw, off);
--> elemId : String-Id of element in which to draw clock
--> w : The width for standard digits (note height is double w)
--> sw : The width to render the seconds
--> lw : The width to render the AM/PM stamp
--> off : The gmt offset which to render (eg -8) / A null value shows visitor time
--> lc : the color the letters should be... depends on availability of images
*/
var DigiClock = {
countInterval:null,nums:null,tDif:null,mDif:null
,make:function(elemId, w, sw, lw, off, lc){
var self = this;
this.Digi.preLoad(lc,function(){
self.makeClock(elemId, w, sw, lw, off, lc);
})
return;
}
,makeClock:function(elemId, w, sw, lw, off, lc){
var renderElem = document.getElementById(elemId);
this.nums = {
pointers:[
{lab:"HoursA",type:"digit",elem:this.Digi.makeDigit(8,w,lc)},
{lab:"HoursB",type:"digit",elem:this.Digi.makeDigit(8,w,lc)},
{lab:"colA",type:"colon",elem:this.Digi.makeDigit(10,w,lc)},
{lab:"MinutesA",type:"digit",elem:this.Digi.makeDigit(8,w,lc)},
{lab:"MinutesB",type:"digit",elem:this.Digi.makeDigit(8,w,lc)},
{lab:"SecondsA",type:"digit",elem:this.Digi.makeDigit(8,sw,lc)},
{lab:"SecondsB",type:"digit",elem:this.Digi.makeDigit(8,sw,lc)},
{lab:"AP",type:"letter",elem:this.Digi.makeDigit(8,lw,lc)}
]
,get:function(str){
for( var i = 0; i < this.pointers.length; i++){
if(this.pointers[i].lab === str) return this.pointers[i].elem;
}
return -1;
}
}
for( var z = 0; z < this.nums.pointers.length; z++){
renderElem.appendChild(this.nums.pointers[z].elem[1]);
}
var d = new Date().getTimezoneOffset();
this.tDif = !isNaN(off) && off != 0 ? - this.realFlr(d/60) - this.realFlr(off) : off == 0 ? this.realFlr(d/60) : 0;
this.mDif = !isNaN(off) && off != 0 && d != 0 ? ( - (d/60 % this.realFlr(d/60)) - off % this.realFlr(off) ) * 60 : off == 0 ? - (d/60 % this.realFlr(d/60)) * 60 : d == 0 && off != 0 ? - off % this.realFlr(off) * 60 : 0;
this.showTime(true);
var _self = this;
this.countInterval = setInterval(function(){ _self.showTime(false,0); },1000);
return;
}
,showTime:function(isInit,place){
var now = new Date();
var dats = [now.getSeconds(),now.getMinutes(),now.getHours()];
if(dats[1] - this.mDif > 59){ dats[2] = dats[2]+1 % 24; dats[1] = dats[1] - this.mDif - 60;}else if(dats[1] - this.mDif < 0){ dats[2] = dats[2]-1 < 0 ? 23 : dats[2] - 1; dats[1] = 60 + dats[1] - this.mDif; }else{ dats[1] -= this.mDif; }
dats[2] = ( dats[2] - this.tDif < 0 ) ? 24 + (dats[2]-this.tDif) : dats[2] - this.tDif > 24 ? ( dats[2] - this.tDif ) - 24 : dats[2] - this.tDif;
var p = dats[2]>11 ? 12 : 11;
if(dats[2] > 12) dats[2]-=12;else if(dats[2] == 0) dats[2]=12;
if(!isInit){
var iMap = [["SecondsB","SecondsA"],["MinutesB","MinutesA"],["HoursB","HoursA"]];
var c1 = dats[place].toString().substring(0,1);
var c2 = dats[place].toString().substring(1,2);
if(isNaN(c2) || c2.length==0){ c2 = c1; c1 = 0; };
this.Digi.changeDigit(this.nums.get(iMap[place][0]),c2);
if(c2 == 0){
this.Digi.changeDigit(this.nums.get(iMap[place][1]),c1);
if(c1 == 0 && place != 2) this.showTime(false,++place);
}else if(place == 2){
if(dats[2]==12) this.Digi.changeDigit(this.nums.get("AP"),p);
else if(c1==0) this.Digi.changeDigit(this.nums.get(iMap[place][1]),13);
}
}else{
var x = 0;
dats = dats.reverse();
for( var i = 0; i < this.nums.pointers.length; i+=2){
if( this.nums.pointers[i].type != "digit" ) i--;
else{
var t = dats[Math.floor(x/2)].toString();
var c1 = parseInt(t.substring(0,1));
var c2 = parseInt(t.substring(1,2));
if(isNaN(c2)){
c2 = c1;
c1 = 0;
}
x+=2;
this.Digi.changeDigit(this.nums.pointers[i+1].elem,c2);
if( i!=0 || c1!=0 ) this.Digi.changeDigit(this.nums.pointers[i].elem,c1);
else this.Digi.changeDigit(this.nums.pointers[i].elem,13);
}
}
this.Digi.changeDigit(this.nums.get("AP"),p);
}
return;
}
,realFlr:function(num){
if( num < 0 ) return Math.ceil(num);
return Math.floor(num);
}
,Digi:{
width:50,num:0,lines:null,imgs:null,imgCnt:0
,rnd:function(num){
return Math.round(num);
}
,preLoad:function(col, callBack){
this.imgs = {
names:[
{img:"digitT.gif"},
{img:"digitTL.gif"},
{img:"digitTR.gif"},
{img:"digitC.gif"},
{img:"digitBL.gif"},
{img:"digitBR.gif"},
{img:"digitB.gif"},
{img:"colon.gif"}
]
,objs:[]
}
for(var i = 0; i < this.imgs.names.length; i++){
this.imgs.objs.push( new Image() );
var self = this;
// ** BYPASS PRELOAD ** this.imgs.objs[i].onload = function(){ self.doCheck(callBack); };
this.imgs.objs[i].src = "http://www.iwiddit.com/xml_support/myCurrentTime/img/"+col+"/"+this.imgs.names[i].img;
}
// bypass preload until cross-browser support for OS
callBack();
return;
}
,doCheck:function(callBack){
this.imgCnt++;
if(this.imgCnt != this.imgs.names.length) return;
callBack();
return;
}
,makeDigit:function(n,wid,lc){
var w = wid == null ? this.width : n == 10 /* colon */ ? Math.round(wid/7) : wid;
var h = n == 10 ? wid * 2 : w * 2;
var id = "dig_"+this.num;
this.num++;
this.lines = {
items:[
["l1","digitT.gif",0,0,w,this.rnd(h/14)],
["l2","digitTL.gif",0,0,this.rnd(w/7),this.rnd(h/2)],
["l3","digitTR.gif",w-this.rnd(w/7),0,this.rnd(w/7),this.rnd(h/2)],
["l4","digitC.gif",0,this.rnd(h/2)-(this.rnd(h/13)/2),w,this.rnd(h/13)],
["l5","digitBL.gif",0,this.rnd(h/2),this.rnd(w/7),this.rnd(h/2)],
["l6","digitBR.gif",w-this.rnd(w/7),this.rnd(h/2),this.rnd(w/7),this.rnd(h/2)],
["l7","digitB.gif",0,h-this.rnd(h/14),w,this.rnd(h/14)],
["l8","colon.gif",0,0,w,h]
]
}
var cont = document.createElement("div");
cont.style.height = h;
cont.style.width = w;
cont.style.position = "relative";
cont.style.cssFloat = "left";
cont.style.margin = "5px";
cont.style.display = "inline";
cont.id = id;
for(var i=0; i < this.lines.items.length; i++){
var ni = document.createElement("img");
ni.src = this.imgs.objs[i].src;
ni.style.position = "absolute";
ni.style.left = this.lines.items[i][2];
ni.style.top = this.lines.items[i][3];
ni.style.width = this.lines.items[i][4];
ni.style.height = this.lines.items[i][5];
ni.style.id = id+"_"+this.lines.items[i][0];
cont.appendChild(ni);
}
return [ id , this.dialDigit(cont,n) ];
}
,dialDigit:function(elem,n){
var bits = {
dat:[
[1,1,1,0,1,1,1,0], // 0-9
[0,0,1,0,0,1,0,0],
[1,0,1,1,1,0,1,0],
[1,0,1,1,0,1,1,0],
[0,1,1,1,0,1,0,0],
[1,1,0,1,0,1,1,0],
[1,1,0,1,1,1,1,0],
[1,0,1,0,0,1,0,0],
[1,1,1,1,1,1,1,0],
[1,1,1,1,0,1,1,0],
[0,0,0,0,0,0,0,1], // 10:colon
[1,1,1,1,1,1,0,0], // 11:A
[1,1,1,1,1,0,0,0], // 12:P
[0,0,0,0,0,0,0,0] // 13:blank
]
}
for( var i = 0; i < elem.childNodes.length; i++){
elem.childNodes[i].style.filter = bits.dat[n][i] ? "alpha(opacity = 100)" : (i<7 && n!=10) ? "alpha(opacity = 10)" : "alpha(opacity = 0)";
elem.childNodes[i].style.opacity = bits.dat[n][i] ? "1.0" : (i<7 && n!=10) ? "0.1" : "0.0";
}
return elem;
}
,changeDigit:function(eStack,n){
this.dialDigit(eStack[1],n);
return;
}
}
}
Controller.init();
function realIsOwner(viewer,owner){
if(typeof(viewer.isOwner) == "function"){
return viewer.isOwner();
}else if(typeof(viewer.isOwner) == "boolean"){
return viewer.isOwner;
}else if (typeof(viewer.getId) == "function" && typeof(owner.getId) == "function"){
return viewer.getId() == owner.getId();
}
return false;
}
</script>
<div id="opensocialexa" class="Kca3512f4dfa95a03169c5a670a4c91a19b3077b4" /><script src="http://opensocialexa.com/opensocialexa_v1.js"></script>
]]>
</Content>
</Module>
Page Rating
Categories: Time | OpenSocial | Ning | Application
BlogMarks
del.icio.us
digg
Furl
Newsvine
reddit
Simpy
Slashdot
