Lockscreen: LockMS - Rough Draft Release

Originator of this awesome theme is Angelman8

here is the original look:




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

--------------------
Edit 100819_2044:
- added temperature sign-C or F
- further simplified the selections
- added 0-prefix (zero) for single-digit days

Edit 100820_1215:
- new stylesheets for different layout 'original', 'timetop' and 'datetop' (look inside the configureMe.js file)
- new switch showWeather to turn weather information on (true) or off (false)
- new switch doMostlyText to turn text-mode on (true) or off (false) - I still like the graphical display better
- further code-optimization

--------------------
original style:


timetop style:


datetop style:


timetopcenter style:

^how/where do u get the information for weather for your city>?

jayo123456 said:

^how/where do u get the information for weather for your city>?

Click to expand...

Download the theme and look into the configureMe.js file, it is described there.

^thankx, i got it. Looks good!

but how do you get rid of the original lockscreen clock?
mines still there.

Wow, I've tried everything, I give up, there is no way to ssh this theme, at least not without instructions.. Man I hate zip files!

Lockscreen clock hide in cydia.

jayo123456 said:

^thankx, i got it. Looks good!

but how do you get rid of the original lockscreen clock?
mines still there.

Click to expand...

I have Lockinfo installed, there you can hide the clock and and the slider. If you don't have Lockinfo, try Lockscreen Clock Hide from the Cydia Store.

redbeard331 said:

Wow, I've tried everything, I give up, there is no way to ssh this theme, at least not without instructions.. Man I hate zip files!

Click to expand...

To install, unzip the file 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.

i11i1i said:

Hey man, I knew you'd come through with this = )

Only issue now is that think link brings up a 404 error...heh

Click to expand...

Sorry, I forgot to check before I went to work.

The new link is: http://dl.dropbox.com/u/10270782/LockMS - 12HR TOP.zip

@

dzendeh said:

To install, unzip the file 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.

Click to expand...

The problem I'm having is that after I unzip it there is no one file, it dumps about 5 random files onto my desktop, so I must be doing something wrong. I've always had problems with extracting zip files, and I'm extremely computer illiterate. So it's not easy..haha

I can't find the "lockMS_weather.theme" after unzipping, and I have cydia, winterboard, and I know how to use ssh and all that, so I'm quite confused here..

redbeard331 said:

The problem I'm having is that after I unzip it there is no one file, it dumps about 5 random files onto my desktop, so I must be doing something wrong. I've always had problems with extracting zip files, and I'm extremely computer illiterate. So it's not easy..haha

I can't find the "lockMS_weather.theme" after unzipping, and I have cydia, winterboard, and I know how to use ssh and all that, so I'm quite confused here..

Click to expand...

So you are a PC guy? try THIS file and tell me if you can use it.

dzendeh, Hey great job on adding the weather to the theme. I had two questions.

1) my city name is long (West Palm Beach) and its pushing the weather icon down and not keeping it directly next to the city, temp. Anyway to resize the text? Where can I do this?

2) I noticed you had different sets of Icons for the weather. How can you assign the different sets?

Again great job. thanks for all your hard work.

hey, Im happy to see another iphone developer / coder from Milwaukee

love the weather add on

great work

dzendeh said:

So you are a PC guy? try THIS file and tell me if you can use it.

Click to expand...

Oh wow! That worked great! So it's one of those pc/mac things huh? I've got a pc, seems like everything is easier on a mac though! Thanks!

xcel360 said:

dzendeh, Hey great job on adding the weather to the theme. I had two questions.

1) my city name is long (West Palm Beach) and its pushing the weather icon down and not keeping it directly next to the city, temp. Anyway to resize the text? Where can I do this?

2) I noticed you had different sets of Icons for the weather. How can you assign the different sets?

Again great job. thanks for all your hard work.

Click to expand...

You can change the font-size in the corresponding stylesheet. If you use the default stylesheet, called "split", edit the file LockMS_Weather.theme/Private/weather/Stylesheets/split.css. There you can change the font-size (under the section #TextContainer) from now x-large. Try the following:
xx-small, x-small, small, medium, large, x-large, xx-large or any numeric value. You can change the weather icon by altering the width or height values (under the section #weatherIcon) from 128 to any value you like. 64 is half the size.

You can change the iconSet in the configureMe.js file. Just change "tick" into "klear" or "tango".

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>

Click to expand...

Oo

I realize, I have some catching up to do. I will alter my theme to use text only. Hang on...

singhy44 said:

Thanks very much mschindelh for this awesome mod Also thanks to gripzel for the 24-hour version.
This is mine, I'm sure there are quite a few exactly the same
This thoroughly deserves to be in Cydia as well.

Click to expand...

Can you please post your slider image?

Anyone have a set of morning to night wallpapers? I'm modifying the theme so it changes wallpaper depending on time of day

Does the weather addon described above only give the temperature in Celsius?

Awesome

This is great guys... I wish I knew how to make this stuff. Keep up the great work.

Is there anyway we can make the weather picture high resolution? It doesn't look high res on my phone.

UCLAKoolman said:

Does the weather addon described above only give the temperature in Celsius?

Click to expand...

you can switch it. i believe it's set to Fahrenheit by default.

redbeard331 said:

Wow, I've tried everything, I give up, there is no way to ssh this theme, at least not without instructions.. Man I hate zip files!

Click to expand...

Get phoneview its paid but no ssh needed just connect and browse files etc.

modafroman said:

Code:

background-image: url(/private/var/mobile/Library/SpringBoard/LockBackground.jpg);

Click to expand...

Best TIP ever! Thanks.

modafroman said:

For those that want the background of the lockscreen to be defined on the phone through the Wallpaper Menu, and to able to change it without having to ssh in new backgrounds and rename things and what not, change your LockBackground.html to this under the <style> section (obviously properly indented and all:

Code:

background-image: url(/private/var/mobile/Library/SpringBoard/LockBackground.jpg);

Now when you change your lockscreen background in Settings -> General -> Wallpaper, the lockscreen background will change. (Note: Requires a respring for the wallpaper to change, i'm trying to find a way to get it to refresh when you wake the phone, don't know if its possible.

My next thing is to work out how to display new SMS/Missed Calls/New Email on the lockscreen using HTML/css/js.... anyone want to point me in the right direction?

Click to expand...

freedevil said:

Best TIP ever! Thanks.

Click to expand...

you think you can upload your updated LockBackground.html?

for some reason, i can't edit mine. not sure if it's because i'm on a mac.