Lockscreen: LockMS - Rough Draft Release

freedevil · Aug 19, 2010

@boshi Sure but some things are changed like Day size etc.

http://www.mediafire.com/?0ft5e2kc4fmde70

boshii · Aug 19, 2010

freedevil said:
@boshi Sure but some things are changed like Day size etc.

http://www.mediafire.com/?0ft5e2kc4fmde70

thanks! that didn't really help me much though because of the customization.

here's my Lockbackground.html http://www.mediafire.com/?cui8ubuuoppcxa5

you think you can add the code to it?

iphonegeek786 · Aug 19, 2010

Dammit Cubs said:
Whats that weather info? I love it.

Is the weather only for iphone 4.

freedevil · Aug 19, 2010

@boshi http://www.mediafire.com/?qpa4sm93veindwe

greatestash · Aug 19, 2010

weemanpow3 said:

Try this, it works for me. Also I modified it so it uses less images and more text. The original creator should switch the entire lockscreen theme to use all text instead of the images.

Code:

<?xml version="1.0" encoding="utf-8"?>
<html><head>
    <base href="Private"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
        body {
        	background-color: #000000;
			margin: 0;
			padding: 265px 0 0 0;
			height: 480px;
			width: 320px;
			background-image: url(Private/Background.png);
			background-size: 61%;}
	</style>
</head>
<body>
<base href="Private"/>
<div style="position:relative; font-size:50px; z-index:2;">

<table style="position: absolute; top: -411px; left: 6px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="center">
<td height="40" border="0">
<img src="Private/dg8.gif" name="hr1" width="67" height="105" heigth="69" /><img 
src="Private/dgb.gif" name="b1" width="2" heigth="69" /><img 
src="Private/.png" name="hr2" width="67" height="105" heigth="69" /><img 
src="Private/dgc.gif" name="c" width="30" height="85" heigth="69" /><img 
src="Private/8.png" name="mn1" width="67" height="105" heigth="69" /><img 
src="Private/dgb.gif" name="b2" width="2" heigth="69" /><img 
src="Private/8.png" name="mn2" width="67" height="105" heigth="69" /></td>
</table>

<script type="text/javascript"><!-- start

dg0 = new Image();dg0.src="Private/0.png";
dg1 = new Image();dg1.src="Private/1.png";
dg2 = new Image();dg2.src="Private/2.png";
dg3 = new Image();dg3.src="Private/3.png";
dg4 = new Image();dg4.src="Private/4.png";
dg5 = new Image();dg5.src="Private/5.png";
dg6 = new Image();dg6.src="Private/6.png";
dg7 = new Image();dg7.src="Private/7.png";
dg8 = new Image();dg8.src="Private/8.png";
dg9 = new Image();dg9.src="Private/9.png";
dgc = new Image();dgc.src="Private/dgc.gif";
dgz = new Image();dgz.src="Private/dgz.gif";
dgb = new Image();dgb.src="Private/dgb.gif";


function dotime(){ 
theTime=setTimeout('dotime()',1000);
d = new Date();
hr = d.getHours()+100;
mn = d.getMinutes()+100;
se = d.getSeconds()+100;
if(hr==100){hr=112;am_pm='am';}
else if(hr<112){am_pm='am';}
else if(hr==112){am_pm='pm';}
else if(hr>112){am_pm='pm';hr=(hr-12);}
tot=''+hr+mn+se;

if (am_pm=='am'){document.c.src = 'Private/AM.png';}
else if(am_pm=='pm'){document.c.src = 'Private/PM.png';}
document.hr1.src = 'Private/'+tot.substring(1,2)+'.png';
document.hr2.src = 'Private/'+tot.substring(2,3)+'.png';
document.mn1.src = 'Private/'+tot.substring(4,5)+'.png';
document.mn2.src = 'Private/'+tot.substring(5,6)+'.png';
}

dotime();
//end -->
</script>
</div>
<div style="position:absolute; top:126px; left:6px; font-family: Verdana; margin:auto; color:#61bee5; font-size:50px; z-index:1;">
  <script language="JavaScript" type="text/javascript">
<!--
mymonth=new Date();
mymonth=mymonth.getMonth()+1;
if (mymonth==1){document.write("JANUARY");}
else if (mymonth==2){document.write("FEBRUARY");}
else if (mymonth==3){document.write("MARCH");}
else if (mymonth==4){document.write("APRIL");}
else if (mymonth==5){document.write("MAY");}
else if (mymonth==6){document.write("JUNE");}
else if (mymonth==7){document.write("JULY");}
else if (mymonth==8){document.write("AUGUST");}
else if (mymonth==9){document.write("SEPTEMBER");}
else if (mymonth==10){document.write("OCTOBER");}
else if (mymonth==11){document.write("NOVEMBER");}
else if (mymonth==12){document.write("DECEMBER");}
if (mymonth==10 && mydate==31){document.write("<img width=auto src=holiday/hallowen.bmp>");}


//-->
</script>
</div>

<div style="position:absolute; top:181px; left:128px; color:#ffdc92; font-family: Verdana; font-weight:lighter; font-size:25px; z-index:3; width:100;">
<script>
day = new Date();
day = day.getDay();
arday = new Array("SUNDAY", "MONDAY", "TUESDAY", "WEDNESSDAY", "THURSDAY", "FRIDAY", "SATURDAY");
document.write("" + arday[day] + "");
// End -->
</SCRIPT>
</div>

<div style="position:absolute; top:156px; left:3px; color:red; font-size:80px;  z-index:4; width:100;">
<script language="javascript"> 

var picture='';
myday=new Date(); 
myday=myday.getDate(); 
picture="<span style='font-family: Helvetica Neue; font-size: 88pt; color: #FFFFFF;'>"+myday+"</span>"
document.write(picture); 

</script>
</div>

<div style="position:absolute; top:197px; left:143px; color:#9dfa99; font-family: Helvetica Neue; font-size:68px; font-weight:lighter; z-index:10; width:100;">
<script language="JavaScript" type="text/javascript">
<!-- date
myDate=new Date(); 
myDate=myDate.getFullYear(); 
if (myDate==2010){document.write("2010");}
else if (myDate==2011){document.write("2011");}
else if (myDate==2012){document.write("2012");}
else if (myDate==2013){document.write("2013");}
else if (myDate==2014){document.write("2014");}
else if (myDate==2015){document.write("2015");}
document.close()
//--> 
</script> 
</div>

</body></html>

Awsome... really like it... but just a quick question/ thought: it looks really nice when we have 2 digit date like 12 or 13 but when date is single digit, it gets displayed to the left with lots of unused space between date and year like in my attachment. Is there a way in code that we can insert 0 if date is single digit (to fill up space)?

Thanks,

cougar11 · Aug 19, 2010

nice weather theme!!! IM LOVIN IT!!! PROPZ TO ALL THE DEVELOPERS!!

freedevil · Aug 19, 2010

Yeah I agree with greateststash can someone good at html edit it so it can display 05

boshii · Aug 19, 2010

freedevil said:
@boshi http://www.mediafire.com/?qpa4sm93veindwe

worked perfectly! thanks freedevil

bw1128 · Aug 19, 2010

i know this is a easy fix and saw it somewhere. but lost it in the million pages this has now. i changed the background to be switched with the navtive background changer. but the pic keeps getting zoomed it.

what was the fix?

thanks

creeman · Aug 19, 2010

With the theme with the weather widget, how are all of you getting TTU? When I apply it it still has the green slide to unlock.

EDIT: Never mind, I got it.

weemanpow3 · Aug 19, 2010

bw1128 said:
i know this is a easy fix and saw it somewhere. but lost it in the million pages this has now. i changed the background to be switched with the navtive background changer. but the pic keeps getting zoomed it.

what was the fix?

thanks

Edit the inline css twords the top of the html page and add this line

background-size: 61%;

weemanpow3 · Aug 19, 2010

greatestash said:
Awsome... really like it... but just a quick question/ thought: it looks really nice when we have 2 digit date like 12 or 13 but when date is single digit, it gets displayed to the left with lots of unused space between date and year like in my attachment. Is there a way in code that we can insert 0 if date is single digit (to fill up space)?

Thanks,

Im working on a fix right now, ill release soon if it works without error.

hlkc · Aug 19, 2010

dzendeh said:
You can get the theme with the weather-widget included from here: LockMS_Weather.theme
To install, unzip it and copy the theme-file(s)/directory (LockMS_Weather.theme) into /private/var/stash/Themes on your iPhone 4; you need Winterboard from the Cydia-Store to activate it.

First of all many thanks to all of you. I used the WeatherWidget.theme from Adam Watkins (special thanks to you) and I did the implementation for this project.

I tried to clean up (No offense. Still, there is much place for further improvement) and simplified the code as much as possible.

choosing your language:
In the theme, you'll find the "configureMe.js" file, where you can edit the language (bottom line). Currently there only are two languages supported: english "en" and german "de". You will find the images in the corresponding folders (under "Private").

Be sure to set the suitable value for the twentyFourHourClock.

choosing your weather:
Use the locale variable in "configureMe.js" to set your location, isCelsius should be known.

There are several themes/styles ('originalBubble', 'myopia', 'iconOnly' and 'split'). I adapted most of them. You need to adjust the other ones, if want to try them out. Make sure to set the appropriate values for #TimeContainer in the corresponding css-files. Be sure to try out the different iconSets (new sets highly appreciated).

Knock yourselves out,

daze

I was wrong as usual when I think this can't get any better and it just get better and better.

Now, I tried few tricks but my LockInfo can't show up. Is it same to you?

risenshine85 · Aug 19, 2010

I am not sure anyone has noticed yet... I am not a big fan of the slider image included with this theme....would it be possible to keep the original one ...

I was able to get that for lockscreen
but if someone is calling you .... it doesn't work

dzendeh · Aug 19, 2010

freedevil said:
Yeah I agree with greateststash can someone good at html edit it so it can display 05

Done: LockMS with Weather

bw1128 · Aug 19, 2010

weemanpow3 said:
Edit the inline css twords the top of the html page and add this line

background-size: 61%;

I'm sorry. Where? I'm looking at the top and not sure where to input. I don't want to put it in the wrong place.

dzendeh · Aug 19, 2010

risenshine85 said:
I am not sure anyone has noticed yet... I am not a big fan of the slider image included with this theme....

me neither, just delete the folder Bundles

weemanpow3 · Aug 19, 2010

bw1128 said:
I'm sorry. Where? I'm looking at the top and not sure where to input. I don't want to put it in the wrong place.

Look for this area in the html page twords the top of the page and copy paste the code below over yours into your page.

Code:

<style>
   body {
        background-color: #000000;
	margin: 0;
	padding: 265px 0 0 0;
	height: 480px;
	width: 320px;
	background-image: url(Private/Background.png);
	background-size: 61%;}
</style>

dzendeh · Aug 19, 2010

hlkc said:
I was wrong as usual when I think this can't get any better and it just get better and better.

Now, I tried few tricks but my LockInfo can't show up. Is it same to you?

Lockinfo will still come up, if I activate the plugins.

bw1128 · Aug 19, 2010

weemanpow3 said:
Look for this area in the html page twords the top of the page and copy paste the code below over yours into your page.

Code:

<style> body { background-color: #000000; margin: 0; padding: 265px 0 0 0; height: 480px; width: 320px; background-image: url(Private/Background.png); background-size: 61%;} </style>

That's what I thought. But wanted to be sure. Thanks! I love this forum. Everyone is so helpful!

bw1128 · Aug 19, 2010

dzendeh said:
me neither, just delete the folder Bundles

So by deleting that folder it will revert all sliders back to stock? And you can still hide the lockscreen slider with lockinfo?

UCLAKoolman · Aug 19, 2010

dzendeh said:
Done: LockMS with Weather

Can you do this for the version of LockMS with the info on the top and without the weather widget

dzendeh · Aug 19, 2010

bw1128 said:
So by deleting that folder it will revert all sliders back to stock? And you can still hide the lockscreen slider with lockinfo?

that's right, that is exactly what I am doing

weemanpow3 · Aug 19, 2010

greatestash said:
Awsome... really like it... but just a quick question/ thought: it looks really nice when we have 2 digit date like 12 or 13 but when date is single digit, it gets displayed to the left with lots of unused space between date and year like in my attachment. Is there a way in code that we can insert 0 if date is single digit (to fill up space)?

Thanks,

Fixed, and it now fills in the zero if single digit. Use this HTML code instead. Example picture below.

Code:

<?xml version="1.0" encoding="utf-8"?>
<html><head>
    <base href="Private"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
        body {
        	background-color: #000000;
			margin: 0;
			padding: 265px 0 0 0;
			height: 480px;
			width: 320px;
			background-image: url(Private/Background.png);
			background-size: 61%;}
	</style>
</head>
<body>
<base href="Private"/>
<div style="position:relative; font-size:50px; z-index:2;">

<table style="position: absolute; top: -411px; left: 6px; width: 320px; height: 461px;" cellspacing="" cellpadding="" align="center">
<td height="40" border="0">
<img src="Private/dg8.gif" name="hr1" width="67" height="105" heigth="69" /><img 
src="Private/dgb.gif" name="b1" width="2" heigth="69" /><img 
src="Private/.png" name="hr2" width="67" height="105" heigth="69" /><img 
src="Private/dgc.gif" name="c" width="30" height="85" heigth="69" /><img 
src="Private/8.png" name="mn1" width="67" height="105" heigth="69" /><img 
src="Private/dgb.gif" name="b2" width="2" heigth="69" /><img 
src="Private/8.png" name="mn2" width="67" height="105" heigth="69" /></td>
</table>

<script type="text/javascript">

dg0 = new Image();dg0.src="Private/0.png";
dg1 = new Image();dg1.src="Private/1.png";
dg2 = new Image();dg2.src="Private/2.png";
dg3 = new Image();dg3.src="Private/3.png";
dg4 = new Image();dg4.src="Private/4.png";
dg5 = new Image();dg5.src="Private/5.png";
dg6 = new Image();dg6.src="Private/6.png";
dg7 = new Image();dg7.src="Private/7.png";
dg8 = new Image();dg8.src="Private/8.png";
dg9 = new Image();dg9.src="Private/9.png";
dgc = new Image();dgc.src="Private/dgc.gif";
dgz = new Image();dgz.src="Private/dgz.gif";
dgb = new Image();dgb.src="Private/dgb.gif";


function dotime(){ 
theTime=setTimeout('dotime()',1000);
d = new Date();
hr = d.getHours()+100;
mn = d.getMinutes()+100;
se = d.getSeconds()+100;
if(hr==100){hr=112;am_pm='am';}
else if(hr<112){am_pm='am';}
else if(hr==112){am_pm='pm';}
else if(hr>112){am_pm='pm';hr=(hr-12);}
tot=''+hr+mn+se;

if (am_pm=='am'){document.c.src = 'Private/AM.png';}
else if(am_pm=='pm'){document.c.src = 'Private/PM.png';}
document.hr1.src = 'Private/'+tot.substring(1,2)+'.png';
document.hr2.src = 'Private/'+tot.substring(2,3)+'.png';
document.mn1.src = 'Private/'+tot.substring(4,5)+'.png';
document.mn2.src = 'Private/'+tot.substring(5,6)+'.png';
}

dotime();
</script>
</div>
<div style="position:absolute; top:126px; left:6px; font-family: Verdana; margin:auto; color:#61bee5; font-size:50px; z-index:1;">
  <script language="JavaScript" type="text/javascript">
mymonth=new Date();
mymonth=mymonth.getMonth()+1;
if (mymonth==1){document.write("JANUARY");}
else if (mymonth==2){document.write("FEBRUARY");}
else if (mymonth==3){document.write("MARCH");}
else if (mymonth==4){document.write("APRIL");}
else if (mymonth==5){document.write("MAY");}
else if (mymonth==6){document.write("JUNE");}
else if (mymonth==7){document.write("JULY");}
else if (mymonth==8){document.write("AUGUST");}
else if (mymonth==9){document.write("SEPTEMBER");}
else if (mymonth==10){document.write("OCTOBER");}
else if (mymonth==11){document.write("NOVEMBER");}
else if (mymonth==12){document.write("DECEMBER");}
</script>
</div>

<div style="position:absolute; top:181px; left:128px; color:#ffdc92; font-family: Verdana; font-weight:lighter; font-size:25px; z-index:3; width:100;">
<script>
day = new Date();
day = day.getDay();
arday = new Array("SUNDAY", "MONDAY", "TUESDAY", "WEDNESSDAY", "THURSDAY", "FRIDAY", "SATURDAY");
document.write("" + arday[day] + "");
</SCRIPT>
</div>

<div style="position:absolute; top:158px; left:3px; font-family: Helvetica Neue; color:#FFFFFF; font-size:115px; font-weight:lighter; z-index:4; width:100;">
<script language="javascript"> 

myday=new Date(); 
myday=myday.getDate(); 
if (myday==01){document.write("01");}
else if (myday==02){document.write("02");}
else if (myday==03){document.write("03");}
else if (myday==04){document.write("04");}
else if (myday==05){document.write("05");}
else if (myday==06){document.write("06");}
else if (myday==07){document.write("07");}
else if (myday==08){document.write("08");}
else if (myday==09){document.write("09");}
else if (myday==10){document.write("10");}
else if (myday==11){document.write("11");}
else if (myday==12){document.write("12");}
else if (myday==13){document.write("13");}
else if (myday==14){document.write("14");}
else if (myday==15){document.write("15");}
else if (myday==16){document.write("16");}
else if (myday==17){document.write("17");}
else if (myday==18){document.write("18");}
else if (myday==19){document.write("19");}
else if (myday==20){document.write("20");}
else if (myday==21){document.write("21");}
else if (myday==22){document.write("22");}
else if (myday==23){document.write("23");}
else if (myday==24){document.write("24");}
else if (myday==25){document.write("25");}
else if (myday==26){document.write("26");}
else if (myday==27){document.write("27");}
else if (myday==28){document.write("28");}
else if (myday==29){document.write("29");}
else if (myday==30){document.write("30");}
else if (myday==31){document.write("31");}
document.close()

</script>
</div>

<div style="position:absolute; top:197px; left:143px; color:#9dfa99; font-family: Helvetica Neue; font-size:68px; font-weight:lighter; z-index:10; width:100;">
<script language="JavaScript" type="text/javascript">
<!-- date
myDate=new Date(); 
myDate=myDate.getFullYear(); 
if (myDate==2010){document.write("2010");}
else if (myDate==2011){document.write("2011");}
else if (myDate==2012){document.write("2012");}
else if (myDate==2013){document.write("2013");}
else if (myDate==2014){document.write("2014");}
else if (myDate==2015){document.write("2015");}
document.close()
</script> 
</div>

</body></html>

dzendeh · Aug 19, 2010

UCLAKoolman said:
Can you do this for the version of LockMS with the info on the top and without the weather widget

Just search for these lines in the file LockBackground.html:

Code:

var picture='';
myday=new Date(); 
myday=myday.getDate(); 
picture="<span style='font-family: Helvetica Neue; font-size: 88pt; color: #FFFFFF;'>"+myday+"</span>"
document.write(picture);

and replace it with this code-block:

Code:

var picture = '';
myday = new Date(); 
myday = myday.getDate();
if (myday < 10){
preDay = "0";
}
else{
preDay = "";
}
         
picture = "<span style='font-family: Helvetica Neue; font-size: 90pt; color: #FFFFFF;'>" + preDay + myday + "</span>"
document.write(picture);

Lockscreen: LockMS - Rough Draft Release

macrumors 6502a

macrumors 68040

macrumors 6502

macrumors 6502a

macrumors member

Attachments

macrumors member

macrumors 6502a

macrumors 68040

macrumors 6502a

macrumors 6502

macrumors 6502

macrumors 6502

macrumors regular

macrumors regular

macrumors member

macrumors 6502a

macrumors member

macrumors 6502

macrumors member

macrumors 6502a

macrumors 6502a

macrumors 6502a

macrumors member

macrumors 6502

Attachments

macrumors member

Our Staff