Lockscreen: LockMS - Rough Draft Release

dzendeh · Aug 19, 2010

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:

jayo123456 · Aug 19, 2010

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

dzendeh · Aug 19, 2010

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

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

jayo123456 · Aug 19, 2010

^thankx, i got it. Looks good!

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

redbeard331 · Aug 19, 2010

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!

duffer · Aug 19, 2010

Lockscreen clock hide in cydia.

dzendeh · Aug 19, 2010

jayo123456 said:
^thankx, i got it. Looks good!

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

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!

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.

Gripzel · Aug 19, 2010

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

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

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

@

redbeard331 · Aug 19, 2010

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.

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..

dzendeh · Aug 19, 2010

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..

So you are a PC guy?

try THIS file and tell me if you can use it.

xcel360 · Aug 19, 2010

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.

sjm300 · Aug 19, 2010

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

localboy28 · Aug 19, 2010

love the weather add on

great work

redbeard331 · Aug 19, 2010

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

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!

dzendeh · Aug 19, 2010

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.

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".

dzendeh · 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>

Oo

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

risenshine85 · Aug 19, 2010

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.

Can you please post your slider image?

cLin · Aug 19, 2010

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

UCLAKoolman · Aug 19, 2010

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

Biscotti · Aug 19, 2010

Awesome

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

nfl46 · Aug 19, 2010

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

boshii · Aug 19, 2010

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

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

freedevil · Aug 19, 2010

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!

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

freedevil · Aug 19, 2010

modafroman said:
Code:

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

Best TIP ever! Thanks.

boshii · Aug 19, 2010

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?

freedevil said:
Best TIP ever! Thanks.

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.

Lockscreen: LockMS - Rough Draft Release

macrumors member

macrumors regular

macrumors member

macrumors regular

Suspended

macrumors regular

macrumors member

macrumors newbie

Suspended

macrumors member

macrumors 6502

macrumors member

macrumors 6502a

Suspended

macrumors member

macrumors member

macrumors regular

macrumors member

macrumors 6502a

macrumors regular

macrumors G3

macrumors 68040

macrumors 6502a

macrumors 6502a

macrumors 68040

Our Staff