Hi,

Today will be more technical than usually, I will explain how to put two clock on your lockscreen with Lock Screen Info on the theme : LockInfo Matte UI.

This extension allow you to customize your lockscreen in HTML, CSS and Javascript! So today, we will to a migration of a script found on Internet and adapt it on the iPhone.

First step : What we want do ?

I was living in China for nearly two years, and I still have my fiancée study there, for me it’s very important to know if I call or send her a message and I will not wakeup her or be able to get her on the phone. But basically, we have only one clock so that it’s what I want : Two Clock (France / China) !
Second step: Understand how it work.

To understand how it work, we need to analyze the files. Theses files are store at this location : /private/var/stash/Themes

In this folder, you will find all files used by WinterBoard (and Lock Info Screen).

We want custom the clock of the LockInfo Matte UI so we go to this folder : /private/var/stash/Themes/LockInfo Matte UI.theme/Bundles/com.havrest.lockinfo.ClockPlugin

By default in this folder we have these files :

• settings.js : Settings of the plugin
• plugin.js : The code in JavaScript of the plugin
• plugin.css : Style CSS of the plugin

If we look the plugin.js we see it’s all in JavaScript. The code is easy to understand, if at this step you don’t understand it, the next step will be a little bit hard for you.

Third Step: Find how to solve the problem.

I am lazy to re-code a function for a world clock in JavaScript so I use my favorite tool to find it : Google ! and here we go !

Thanks to the guy develop this function we have the solution :

// If you want the full code go on the website link previously

function worldClock(zone, region){ [...] }

document.getElementById("Paris").innerHTML = worldClock(1, "Europe")

document.getElementById("Shanghai").innerHTML = worldClock(8, "Shanghai")

Fourth Step: Adapt the solution!

As we can see on the plugin.js file, we have the object Clock. We will create a new method to this object.

So :

function worldClock(zone, region){ [...] } 

Will become :

Clock.worldClock = function (zone, region){ [...] }

After, I want add more flexibility to my customization so we will also mofidy the return code line.

So :

return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec + " DST"
}
else{
return monthArray[month] + " " + day + ", " + year + "<br>" + hr + ":" + min + ":" + sec
}

Will become :

// Return an array of Month, Day, Year, Hour, Minute, Second, DST (True or False)
return new Array(month,day,year,hr,min,sec,true);
}
else{
return new Array(month,day,year,hr,min,sec,false);
}

Finally we need to modify what it will be display.

So:

header.appendChild(this.Design.generateCustom(now.format(this.dateFormat), 'date', null, 'span'));
 header.appendChild(this.Design.generateCustom(now.format(this.timeFormat), 'time', null, 'span'));

Will become :

var paris = this.worldClock(1, "Europe") ;
var shanghai = this.worldClock(8, "Shanghai");

header.appendChild(this.Design.generateCustom(paris[1]+"/"+paris[0]+"/"+paris[2]+"<br>"+
shanghai[1]+"/"+shanghai[0]+"/"+shanghai[2], 'date', null, 'span'));
header.appendChild(this.Design.generateCustom("FR: "+paris[3]+":"+paris[4]+":"+paris[5]+"<br>"+
"CN: "+shanghai[3]+":"+shanghai[4]+":"+shanghai[5], 'time', null, 'span'));

And it’s done! We respring, wait, and Voilà! It’s working !

Bonus Step: Pictures

I want add picture to make more “sweet”. It’s also very simple, put the pictures in the same folder, and write just an <IMG> HTML Tag.

header.appendChild(this.Design.generateCustom(paris[1]+"/"+paris[0]+"/"+paris[2]+"<br>"
+shanghai[1]+"/"+shanghai[0]+"/"+shanghai[2], 'date', null, 'span'));
header.appendChild(this.Design.generateCustom("
<img src='/private/var/stash/Themes.nEIlIy/LockInfo Matte UI.theme/Bundles/com.havrest.lockinfo.ClockPlugin/france.png'> "
+paris[3]+":"+paris[4]+":"+paris[5]+"<br>"+
"<img src='/private/var/stash/Themes.nEIlIy/LockInfo Matte UI.theme/Bundles/com.havrest.lockinfo.ClockPlugin/chine.png'> "
+shanghai[3]+":"+shanghai[4]+":"+shanghai[5], 'time', null, 'span'));

Nice no ?

You understand nothing at all? No problem, you can download there a zip files already modify just put in on the folder :  /private/var/stash/Themes/LockInfo Matte UI.theme/Bundles/com.havrest.lockinfo.ClockPlugin

• ClockPlugin

Have fun !