[Guide]The Weather Widget-The Guide

Discussion in 'iOS Themes and Customization' started by Manic Nimrod, Sep 5, 2008.

Page 18 of 23

  1. thewuse New Member

    Member Since:
    Mar 16, 2009
    Message Count:
    104
    Device:
    4G iPod touch
    Problem with little "A" symbol: The only time it shows up is when you respring whether you were changing a theme or addon and it is showing up because it is prob confused as to what just happened, it didnt have a complete reboot, but half that along with a themes refresh so the "A" is prob a sign of confusion


    To get rid of the "A" you need to respring the ipod with 24HrWthr unchecked in Winterboard. Then respring it again with 24HrWthr rechecked in Winterboard. This basically makes it think that it was a clean start so when you slide/unlock back to your homescreen it should be back to normal by the second respring. If this doesn't work try respring with it unchecked, unchecked, then rechecked or other combinations it might take different number of resprings.



    I was able to place my custom wallpaper behind the 24HrWrth Widget.

    First. To change the wallpaper was easy its just a matter of tricking the pre-written code. Take a screenshot of the wallpaper on your ipod that way the picture comes out as .PNG (uppercase).

    Second. SSH into 24HrWthr and move to your desktop (just in case) the Wallpaper.png that is current there.

    Third. Next go into your "DCIM" folder under "Apple iPod" in "my computer" and rename the picture you previously took as Wallpaper and move the Wallpaper.PNG (the new wallpaper you took, notice the uppercase .PNG) into the 24HrWthr folder (essentially replacing the wallpaper that was there).

    Fourth. Finally open the Wallpaper.html and scroll about three-quarters of the way down and you should see <body bgcolor="black" background="Wallpaper.png"> change the lowercase .png to uppercase .PNG (it has to match the new wallpaper file you placed in the 24HrWthr file)

    Attached Files:

    thewuse, Mar 18, 2009
    #171

  2. thewuse New Member

    Member Since:
    Mar 16, 2009
    Message Count:
    104
    Device:
    4G iPod touch
    Now I'm having trouble with the clock, since it began with 24 hours I tried changing it to 12 a hour clock and somehow I only managed for it to show correctly only in the PM. Once it hit AM it went back to 24 hours. Then I began trial and error and it got to a point that idk how it was when I began >_< I need a new wallpaper.html or easier if someone was able to correctly change this to a 12 hour clock please attach the wallpaper.html so I can download and replace, not the entire theme.

    Thank You

    Attached Files:

    thewuse, Mar 18, 2009
    #172

  3. Augusta Banned

    Member Since:
    Mar 15, 2009
    Message Count:
    100
    var currentHours = 0 then (currentHours + 12), currentHours
    Augusta, Mar 18, 2009
    #173

  4. thewuse New Member

    Member Since:
    Mar 16, 2009
    Message Count:
    104
    Device:
    4G iPod touch
    so it should look like...


    function amPm ( )
    {
    var currentTime = new Date ( );

    var currentHours = 0 ( currentHours + 12 ), currentHours
    thewuse, Mar 18, 2009
    #174

  5. Augusta Banned

    Member Since:
    Mar 15, 2009
    Message Count:
    100
    Just post the whole HTML on second thought.

    put it in code brackets

    Edit: It's displaying properly for 1 AM, right?
    Augusta, Mar 18, 2009
    #175

  6. thewuse New Member

    Member Since:
    Mar 16, 2009
    Message Count:
    104
    Device:
    4G iPod touch
    ha alright and yes for 1 am it is




    <html>
    <head><title>newclock</title></head>
    <style>

    SPAN#clock
    {
    font-family: Helvetica;
    color: #FFFFFF;
    font-size: 30px;
    }

    SPAN#ampm
    {
    font-family: Helvetica;
    color: #FFFFFF;
    font-size: 15px;
    }

    TD#date
    {
    font-family: Helvetica;
    text-align: center;
    color: #FFFFFF;
    }

    </style>

    <script type="text/javascript">
    <!--
    var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    var this_month_name_array = new Array("Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dece") //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_month_name_array[this_month] + " " + this_date //concat long date string

    // -->
    function init ( )
    {
    timeDisplay = document.createTextNode ( "" );
    document.getElementById("clock").appendChild ( timeDisplay );
    }

    function updateClock ( )
    {
    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 24-hour format if needed
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

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

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

    // Update the time display
    document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    }

    function init2 ( )
    {
    timeDisplay = document.createTextNode ( "" );
    document.getElementById("ampm").appendChild ( timeDisplay );
    }

    function amPm ( )
    {
    var currentTime = new Date ( );

    var currentHours = 0 ( currentHours + 12 ), currentHours;

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

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

    // Compose the string for display
    var currentTimeString = timeOfDay;

    // Update the time display
    document.getElementById("ampm").firstChild.nodeValue = currentTimeString;
    }

    // -->
    </script>

    </head>


    <body bgcolor="black" background="Wallpaper.PNG">





    <table style="position: absolute; top: 38px; left: 0px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" align="center">
    <tr align="center" valign="top" border="0" cellpadding="0">
    <td height="10" valign="top">
    <span id="clock">
    <script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span><span id="ampm">
    <script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
    </span>
    </td>
    </tr>
    <tr>
    <td id="date" valign="top">
    <script language="JavaScript">document.write(this_date_string)</script>
    </td>
    </tr>
    </table>

    </body>
    </html>








    <?xml version="1.0" encoding="UTF-16"?>
    <html><head>
    <base href="Private/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <style>
    body {
    background-color: none;
    margin: 0;
    padding: 20px 0 0 0;
    height: 480px;
    width: 320px;
    }
    </style>


    <script type="text/javascript" src="configureMe.js"/>
    <script type="text/javascript" src="Wallpaper.js"/>

    </head>
    <body onload="onLoad()">

    <div id="WeatherContainer">
    <div id="TextContainer">
    <p id="city">Loading...</p>
    <p id="temp">-º</p>
    <p id="desc">-</p>
    </div>
    <img id="weatherIcon" src=""/>
    </div>

    </body></html>
    thewuse, Mar 18, 2009
    #176

  7. Augusta Banned

    Member Since:
    Mar 15, 2009
    Message Count:
    100
    Delete everything in the existing html, and paste this in. It was messing up because of this line:

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

    which I changed to

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

    Code:
    <html>
<head><title>newclock</title></head>
<style>

SPAN#clock
{
font-family: Helvetica;
color: #FFFFFF;
font-size: 30px;
}

SPAN#ampm
{
font-family: Helvetica;
color: #FFFFFF;
font-size: 15px;
}

TD#date
{
font-family: Helvetica;
text-align: center;
color: #FFFFFF;
}

</style>

<script type="text/javascript">
<!--
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday")
var this_month_name_array = new Array("Jan","Feb","Mar","Apr","May","June","July", "Aug","Sept","Oct","Nov","Dece") //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_month_name_array[this_month] + " " + this_date //concat long date string

// -->
function init ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
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 24-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

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

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

// Update the time display
document.getElementById("clock").firstChild.nodeVa lue = currentTimeString;
}

function init2 ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("ampm").appendChild ( timeDisplay );
}

function amPm ( )
{
var currentTime = new Date ( );

var currentHours = 0 ( currentHours + 12 ), currentHours;

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

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

// Compose the string for display
var currentTimeString = timeOfDay;

// Update the time display
document.getElementById("ampm").firstChild.nodeVal ue = currentTimeString;
}

// -->
</script>

</head>


<body bgcolor="black" background="Wallpaper.PNG">





<table style="position: absolute; top: 38px; left: 0px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" align="center">
<tr align="center" valign="top" border="0" cellpadding="0">
<td height="10" valign="top">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span><span id="ampm">
<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
</span>
</td>
</tr>
<tr>
<td id="date" valign="top">
<script language="JavaScript">document.write(this_date_str ing)</script>
</td>
</tr>
</table>

</body>
</html>








<?xml version="1.0" encoding="UTF-16"?>
<html><head>
<base href="Private/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>
body {
background-color: none;
margin: 0;
padding: 20px 0 0 0;
height: 480px;
width: 320px;
}
</style>


<script type="text/javascript" src="configureMe.js"/>
<script type="text/javascript" src="Wallpaper.js"/>

</head>
<body onload="onLoad()">

<div id="WeatherContainer">
<div id="TextContainer">
<p id="city">Loading...</p>
<p id="temp">-º</p>
<p id="desc">-</p>
</div>
<img id="weatherIcon" src=""/>
</div>

</body></html>
    Augusta, Mar 18, 2009
    #177

  8. thewuse New Member

    Member Since:
    Mar 16, 2009
    Message Count:
    104
    Device:
    4G iPod touch
    So simply I can replace this version with the current one and the clock should be displayed correctly. Thank you for doing that I appreciate it.

    Edit: After pasting it in and respring the clock isn't being shown at all, even opening the html in a browser it is just a black page.
    thewuse, Mar 18, 2009
    #178

  9. Augusta Banned

    Member Since:
    Mar 15, 2009
    Message Count:
    100
    Whoops, left a snip in there I shouldn't have. Try it again, and make sure you're deleting everything in the old HTML file.
    Augusta, Mar 18, 2009
    #179

  10. thewuse New Member

    Member Since:
    Mar 16, 2009
    Message Count:
    104
    Device:
    4G iPod touch
    A snip? ha and should I copy and paste the same thing that you did previously? or did you change it just now?
    thewuse, Mar 18, 2009
    #180
Page 18 of 23