1. sharp2G's Avatar
    var currentTime = new Date ( );

    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( );

    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

    // Choose either "AM" or "PM" as appropriate
    var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

    // Convert the hours component to 12-hour format if needed
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

    // Convert an hours component of "0" to "12"
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;

    // Compose the string for display
    var currentTimeString = currentHours + ":" + currentMinutes;




    do i change something from there?
    2010-11-26 07:11 AM
  2. bjbinc's Avatar
    var currentTime = new Date ( );

    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    var currentSeconds = currentTime.getSeconds ( );

    // Pad the minutes and seconds with leading zeros, if required
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

    // Choose either "AM" or "PM" as appropriate
    var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

    // Convert the hours component to 12-hour format if needed
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

    // Convert an hours component of "0" to "12"
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;

    // Compose the string for display
    var currentTimeString = currentHours + ":" + currentMinutes;




    do i change something from there?
    That's not the latest version of the file. I don't get why you're not getting the updated version. Are you using it on your springboard or lockscreen? Forecast or no forecast?
    2010-11-26 07:38 AM
  3. rameses09's Avatar
    Hey i don't know if you read my other post about panorama covering the widget, could it become compatible? Thanks in advanced
    2010-11-26 07:44 AM
  4. bjbinc's Avatar
    Have you had any luck using it with other widgets?
    2010-11-26 07:48 AM
  5. rameses09's Avatar
    Well the only other widget I used was the iHY widget but that one required @2x.png wallpapers. So since this one can use camera roll walls I thought it might work. Would be nice if it did.
    2010-11-26 07:53 AM
  6. bjbinc's Avatar
    Sorry, but I don't think it's possible
    2010-11-26 07:55 AM
  7. rameses09's Avatar
    K thanks.
    2010-11-26 07:56 AM
  8. kimvy's Avatar



    An HTC Widget for the iPhone 4 / 3GS and optimized for the retina display.

    To change your location, edit the PrivateWeatherWidgetWeatherWidget.html file in notepad. About half way down the file you'll find the locale variable. Change it to your zip code.

    To place on the lockscreen instead of the springboard, simply rename Wallpaper.html to LockBackground.html

    I've included a .psd to create your own digits.

    I used the template from here

    UPDATE
    Fixed bug with displaying temp in Celsius

    UPDATE 2
    Added version without forecast
    Added 24hr clock option (half-way down Wallpaper.html file, change TwentyFourHourClock variable to true)

    UPDATE 3
    Fixed bug preventing weather from updating reliably (Hopefully)
    Attempt at fixing a bug causing springboard to crash

    UPDATE 4
    Added option to translate weather descriptions. Currently, it only has Italian and English, but you can add your own. Open the translation.js file and make a copy of the Italian translation code. Then replace the descriptions with your own translations and rename the language array from "Italian" to whatever your language is. Finally, open the WeatherWidget.html file and change the LangTranslate variable to your new language.
    If people submit their translations to me, I'll add them to the default download to save others all this trouble. Thanks!

    UPDATE 5
    Added Hi and Lo temps to the "No Forecast" version

    UPDATE 6
    Added option to remove leading zero from the hours. In the LockBackground.html and Wallpaper.html files, look for "var showLeadingZero = true" and change it to false to remove the leading zero.


    Download
    Thanks for sharing this. It look amazing!

    Have you had any luck using it with other widgets?
    I didn't think there was room for other widgets!
    Last edited by kimvy; 2010-11-26 at 11:38 AM. Reason: Automerged Doublepost
    2010-11-26 11:38 AM
  9. sharp2G's Avatar
    That's not the latest version of the file. I don't get why you're not getting the updated version. Are you using it on your springboard or lockscreen? Forecast or no forecast?
    i am using the forecast version and just redownloaded from the link provided, but still nothing. i am using it on springboard.


    maybe you can edit the file for the "forecast version" and upload it to rapidshare or something
    Last edited by sharp2G; 2010-11-26 at 02:45 PM.
    2010-11-26 02:30 PM
  10. CydiaForYou's Avatar
    Best widget so fat, but I'm not a fan of the fonts.
    2010-11-26 06:52 PM
  11. buste2's Avatar
    Best widget so fat, but I'm not a fan of the fonts.
    Font is based on your font. It is not fixed.

    Now this leads to another request

    Can you help me add the font family code for the widget? I would like to use "font-family: Trebuchet MS;"

    It's the closest I found that matches the HTC font.

    I can't find anywhere to add it besides the Wallpaper.html and that changes the date font. I can't find where to change the font for city, weather, hi/low, and temp.
    2010-11-26 06:58 PM
  12. bjbinc's Avatar
    Thanks for sharing this. It look amazing!

    I didn't think there was room for other widgets!
    I was referring to the Panorama app from Cydia, not my widget

    i am using the forecast version and just redownloaded from the link provided, but still nothing. i am using it on springboard.


    maybe you can edit the file for the "forecast version" and upload it to rapidshare or something
    Just copy and paste this. It's the whole Wallpaper.html file for the forecast version with 24hr clock and no leading zero.

    Code:
    <html>
    <head><title>newclock</title><base href="Private/"/>
    
    <style>
    
        SPAN#clock
    {
    	font-family: Helvetica;
    	font-weight: bold; 
    	color: #d1d1d1; 
    	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);	
    	/*text-shadow: #FFFFFF 0px 1px 0px;*/
    	font-size: 26px;
    	
    
    }
    
        SPAN#ampm
    {
    	font-family: Helvetica;
    	font-weight: bold; 
    	color: #d1d1d1; 
    	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);	
    	/*text-shadow: #FFFFFF 0px 1px 0px;*/
    	font-size: 15px;
    	display:none;
    }
    TD#dateString
    {
    	font-family: Helvetica;
    	font-weight: bold; 
    	color: #d1d1d1; 
    	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);	
    	/*text-shadow: #FFFFFF 0px 1px 0px;*/
    	font-size: 11px;
    text-align:center;
    	}
    
    TABLE#CalendarTable
    {
    	font-family: Helvetica;
    	font-weight: bold; 
    	color: #d1d1d1; 
    	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);	
    	/*text-shadow: #FFFFFF 0px 1px 0px;*/
    	font-size: 11px;
    text-align:center;
    margin-top:6px;
    	}
        SPAN#calendar 
    {
    	font-family: Helvetica;
    	font-weight: bold;
    	color: #d1d1d1; 
    	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);	
    	/*text-shadow: #FFFFFF 0px 1px 0px;*/
    	font-size: 14px;
    	position:absolute;
    	top:162px;
    	text-align:right;
    	width:300px;
    	
    }
     body {
        background-image:url('../L.png');
    
    	
    </style>
    
    <script type="text/javascript">
    <!--
    
    var this_weekday_name_array = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
    var this_month_name_array = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")	//predefine month names
        
    var this_date_timestamp = new Date()	
    
    var this_weekday = this_date_timestamp.getDay()    
    var this_date = this_date_timestamp.getDate()	 
    var this_month = this_date_timestamp.getMonth()    
    var this_year = this_date_timestamp.getYear()	 
    
    if (this_year < 1000)
        this_year+= 1900;
    if (this_year==101)
        this_year=2001;	   
    
    var this_date_string = this_weekday_name_array[this_weekday] + " " + this_date + " " + this_month_name_array[this_month]//concat long date string
    
    // -->
    function init ( )
    {
      timeDisplay = document.createTextNode ( "" );
      document.getElementById("clock").appendChild ( timeDisplay );
    
    }
    
    function updateClock ( )
    {
    	
    	var TwentyFourHourClock = true
    
    
      var currentTime = new Date ( );
    
      var currentHours = currentTime.getHours ( );
      var currentMinutes = currentTime.getMinutes ( );
      var currentSeconds = currentTime.getSeconds ( );
    
      // Pad the minutes and seconds with leading zeros, if required
      currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
      currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
    
    if (TwentyFourHourClock == false){
    
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    if (timeOfDay == "PM"){
    document.getElementById("ampm").src="pm.png"
    }
    else
    {
    document.getElementById("ampm").src="am.png"
    }
    }
      // Compose the string for display
      var currentTimeString = currentHours + ":" + currentMinutes;
    
      // Update the time display
      currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
    
    document.getElementById("hr1").src="Digits/"+currentHours.charAt(0)+".png";
    document.getElementById("hr2").src="Digits/"+currentHours.charAt(1)+".png";
    document.getElementById("min1").src="Digits/"+currentMinutes.charAt(0)+".png";
    document.getElementById("min2").src="Digits/"+currentMinutes.charAt(1)+".png";
    
    //Removes leading zero from the hours.  Set showLeadingZero to false to remove leading zeros, set it to true to leave zeros
    
    
    var showLeadingZero = false
    
    
    if (showLeadingZero == false){
    if (currentHours.charAt(0)=="0"){
    document.getElementById("hr1").style.display='none';
    document.getElementById("hr1block").width=25
    document.getElementById("spaceblock").width=54
    }	
    else
    {
    document.getElementById("hr1").style.display='';
    document.getElementById("hr1block").width=0
    document.getElementById("spaceblock").width=30
    }
    }
    //End leading zero removal code
    
    }
    
    
    function init2 ( )
    {
      timeDisplay = document.createTextNode ( "" );
      document.getElementById("ampm").appendChild ( timeDisplay );
    }
    
    function amPm ( )
    {
      var currentTime = new Date ( );
    
      var currentHours = currentTime.getHours ( );
    
      // Choose either "AM" or "PM" as appropriate
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
    
      // Convert the hours component to 12-hour format if needed
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    
      // Convert an hours component of "0" to "12"
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    
      // Compose the string for display
      var currentTimeString = timeOfDay;
    
      // Update the time display
      document.getElementById("ampm").firstChild.nodeValue = currentTimeString;
    }
    
    function init3 ( )
    {
      timeDisplay = document.createTextNode ( "" );
      document.getElementById("calendar").appendChild ( timeDisplay );
    }
    
    function daysInMonth(iMonth, iYear)
    {
    	return 32 - new Date(iYear, iMonth, 32).getDate();
    }
    
    function zeroPad(num,count)
    {
    var numZeropad = num + '';
    while(numZeropad.length < count) {
    numZeropad = "0" + numZeropad;
    }
    return numZeropad;
    }
    
    function calendarDate ( )
    {
    var this_weekday_name_array = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
    var this_month_name_array = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")	  //predefine month names
        
      var this_date_timestamp = new Date()	  
    
      var this_weekday = this_date_timestamp.getDay()    
      var this_date = this_date_timestamp.getDate()  
     
      var this_month = this_date_timestamp.getMonth()    
    Current_Month = this_month
    //document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + " " + this_date + " " + this_month_name_array[this_month]//concat long date string
    
    //document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + "," + " " + this_month_name_array[this_month] + " " + this_date //concat long date string
    document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + ", " + this_month_name_array[this_month] + " " + this_date 
    
    
    }
    
    // -->
    </script>
    
    </head>
    
    
    <body style="margin-left: 0">
    <img src="/private/var/mobile/Library/SpringBoard/HomeBackgroundPortrait.jpg" height="480" width="320" style="position: absolute; top: 0px; left: 0px; z-index:-1;">
    <img src="bg.png" style="position: absolute; z-index:-1;top:25; left: 0px;" height="186" width="320">
    <img src="forecast-bg.png" style="position: absolute; z-index:-1;top:225; left: 0px;" width="320">
    <img src="" id="ampm" style="position: absolute; z-index:-1;top:135; left: 40px;" width="20">
    <table border=0 style="position: absolute; z-index:-1;top:47; left: 37px;"><tr><td id="hr1block"><img src="" width="49" height="80" border=0 id="hr1"></td><td id="hr1block"><img src="" width="49" height="80" border=0 id="hr2"></td>
    <td width=30 id="spaceblock"></td>
    <td id="min1block"><img src="" width="49" height="80" border=0 id="min1"></td><td id="min2block"><img src="" width="49" height="80" border=0 id="min2"></td>
    </tr>
    </table>
    <span id="calendar" align=right>
    	<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
    	</span>
        <span id="clock">
    	<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span> <span id="ampm">
        </span>
        <object data="WeatherWidget/WeatherWidget.html"  type="text/html" height="480" width="320" style="left:0px">
           <p>Place WeatherWidget in Subthemes</p>
        </object>
    
    </body>
    </html>
    Font is based on your font. It is not fixed.

    Now this leads to another request

    Can you help me add the font family code for the widget? I would like to use "font-family: Trebuchet MS;"

    It's the closest I found that matches the HTC font.

    I can't find anywhere to add it besides the Wallpaper.html and that changes the date font. I can't find where to change the font for city, weather, hi/low, and temp.
    Try editing the myopiaAlt.css file. It's in the /Private/WeatherWidget/Private/stylesheets" folder.
    Last edited by bjbinc; 2010-11-26 at 10:29 PM.
    2010-11-26 10:03 PM
  13. sashaarrabi91's Avatar
    yea, i modified this theme to work with lockinfo, and it is great...
    the only thing i dont like about lockinfo is the first page and rest of pages wallpaper dont lineup properly... maybe just my settings
    Hey, could you perhaps share your knowledge of how to add this widget to make it appear only on the Homescreen using LockInfo? I'm in the process of making quite a killer theme and I'd super appreciate your help!!
    2010-11-27 12:45 AM
  14. kimvy's Avatar
    [QUOTE=bjbinc;5608669]I was referring to the Panorama app from Cydia, not my widget

    2010-11-27 08:16 AM
  15. sharp2G's Avatar
    i don't think thats the entire file .. your missing a lot of stuff like var_locale and stuff like that
    2010-11-27 04:57 PM
  16. bjbinc's Avatar
    i don't think thats the entire file .. your missing a lot of stuff like var_locale and stuff like that
    I think youve been looking in the wrong file this whole time. Var locale is in the WeatherWidget.html file. To change the clock, you need to change edit the Wallpaper.html file, which is what I posted above.
    2010-11-27 07:20 PM
  17. sharp2G's Avatar
    k that makes sense... i feel like a dumbass ahha

    thanks for all your help it works
    2010-11-27 11:41 PM
  18. bjbinc's Avatar
    lol! no prob man
    2010-11-28 12:20 AM
  19. monkey87's Avatar
    Hey bjbinc, sorry to bother you again, but do you think you can help me out? I want to move the date to where the you had the forecast. you think you can do it or tell me how? thanks
    Attached Thumbnails iPhone 4 / 3GS HTC Clock &amp; Weather Widget-photo.png  
    2010-11-28 02:33 AM
  20. bjbinc's Avatar
    hey, no bother. This goes near the top of your wallpaper.html file

    Code:
        
    SPAN#calendar 
    {
    	font-family: Helvetica;
    	font-weight: bold;
    	color: #d1d1d1; 
    	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);	
    	/*text-shadow: #FFFFFF 0px 1px 0px;*/
    	font-size: 14px;
    	position:absolute;
    	top:228px;
    	text-align:left;
    	width:300px;
    	left:20px;
    }
    2010-11-28 04:53 AM
384 ... 2345614 ...
LINK TO POST COPIED TO CLIPBOARD