How to add weather widget to homescreen

**NiCkStOuCh** · 09-05-2008, 12:03 AM

i played around with it and made 2 for the main to city's im in and just renamed the weatherwidget.theme to ColumbiaWeather.theme and FranklinWeather.theme and it works great!

**g4seb** · 09-05-2008, 01:38 AM

Originally Posted by sictirbc

The guide is great ... but i still can't get it to work. After integrating the code from Widget wallpaper.html to the illumination theme wallpaper.html it only shows "Loading - - ". (in the top left corner of the display) I followed your guide step by step.

Thanks

LATER EDIT: My bad...i was using a crap editor that was adding stuff in the code. Works now! Thanks man

Could you post your wallpaper.html modify file please...
I don't found the right place to post the the command line of weather widget on the wallpaper.html of my theme.

Please help

**mikeagby** · 09-05-2008, 01:50 AM

Originally Posted by alias_neo

Theres nothing to stop you putting multiple copies of it on your phone renamed each time and tweak it so they apear next to each other or on top of each other etc and have one for each city. You might want to only have it on your lock screen in that case though, they'd take up too much space on your home screen otherwise.

i just tried this and it doesnt work. only one works. which ever is higher on the winterboard list will show up. unless im doing something wrong. so i guess you can't add multiple weather widgets with different cities

**sictirbc** · 09-05-2008, 02:09 AM

Originally Posted by g4seb

Could you post your wallpaper.html modify file please...
I don't found the right place to post the the command line of weather widget on the wallpaper.html of my theme.
Please help

The problem now is that the wallpaper theme only refreshes if I respring.

Here it is (this is for Illuminated theme...don't forget to copy the files from Private folder)

HTML Code:

<?xml version="1.0" encoding="UTF-16"?>
<html><head>
    <base href="Private/"/>
    <!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	
	<noscript>
<!--
    We have the "refresh" meta-tag in case the user's browser does
    not correctly support JavaScript or has JavaScript disabled.

    Notice that this is nested within a "noscript" block.
-->
<meta http-equiv="refresh" content="60">

</noscript>

<script language="JavaScript">
<!--

var sURL = unescape(window.location.pathname);

function doLoad()
{
    // the timeout value should be the same as in the "refresh" meta-tag
    setTimeout( "refresh()", 60*1000 );
}

function refresh()
{
    //  This version of the refresh function will cause a new
    //  entry in the visitor's history.  It is provided for
    //  those browsers that only support JavaScript 1.0.
    //
    window.location.href = sURL;
}
//-->
</script>

<script language="JavaScript1.1">
<!--
function refresh()
{
    //  This version does NOT cause an entry in the browser's
    //  page view history.  Most browsers will always retrieve
    //  the document from the web-server whether it is already
    //  in the browsers page-cache or not.
    //  
    window.location.replace( sURL );
}
//-->
</script>

<script language="JavaScript1.2">
<!--
function refresh()
{
    //  This version of the refresh function will be invoked
    //  for browsers that support JavaScript version 1.2
    //
    
    //  The argument to the location.reload function determines
    //  if the browser should retrieve the document from the
    //  web-server.  In our example all we need to do is cause
    //  the JavaScript block in the document body to be
    //  re-evaluated.  If we needed to pull the document from
    //  the web-server again (such as where the document contents
    //  change dynamically) we would pass the argument as 'true'.
    //  
    window.location.reload( false );
}
//-->
</script>
</head>

<!--
    Use the "onload" event to start the refresh process.
-->

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

        img {
            -webkit-transition-property: opacity;
            -webkit-transition-duration: 2s;
            position: absolute;
            width: 320px;
            height: auto;
        }

        img.fade-out {
            opacity: 0;
        }

        img.fade-in {
            opacity: 1;
        }
    </style>
	<script language="JavaScript">
	
day=new Date()     //..get the date

x=day.getHours()    //..get the hour

if(x>=0 && x<3) {

   document.write('<style type="text/css">body{background: white url(midnight.png); color: black}"></style>')

} else


if(x>=3 && x<6) {

   document.write('<style type="text/css">body{background: white url(3a.png); color: black}"></style>')

} else


if(x>=6 && x<9) {

   document.write('<style type="text/css">body{background: white url(6a.png); color: black}</style>')
   
} else


if(x>=9 && x<12) {

   document.write('<style type="text/css">body{background: white url(9a.png); color: black}</style>')

} else

if(x>=12 && x<15) {

   document.write('<style type="text/css">body{background: white url(noon.png); color: black}</style>')

} else

if (x>=15 && x<18) {

   document.write('<style type="text/css">body{background: white url(3.png); color: black}</style>')

} else

if (x>=18 && x<21) {

   document.write('<style type="text/css">body{background: white url(6.png); color: black}</style>')

} else

if (x>=21 && x<24) {

   document.write('<style type="text/css">body{background: white url(9.png); color: black}</style>')

}
</script>

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

<script type="text/javascript" src="Wallpaper.js"/>
 
</head>
<body style="color: black" 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>

**g4seb** · 09-05-2008, 02:45 AM

Ok,
And in this wallpaper code, where could i put the weather widget?
Thanks

HTML Code:

<?xml version="1.0" encoding="UTF-16"?>
<html><head>
    <base href="Private/"/>
    <!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


    <style>
        body {
            background-color: black;
            margin: 0;
            padding: 20px 0 0 0;
            height: 442px;
            width: 320px;
        }

        img {
            -webkit-transition-property: opacity;
            -webkit-transition-duration: 2s;
            position: absolute;
            width: 320px;
            height: auto;
        }

        img.fade-out {
            opacity: 0;
        }

        img.fade-in {
            opacity: 1;
        }


       img.fade_dock-out {
          opacity: 0;
          position: absolute;
	   top:389px;
	   width: auto;
          height: auto;
	 }

       img.fade_dock-in {
          opacity: 1;
          position: absolute;
	   top:389px;
	   width: auto;
          height: auto;
 	}


    </style>
</head><body style="color: black">
    <img src="Wallpaper1.png" id="Wallpaper1"/>
    <img src="Wallpaper2.png" id="Wallpaper2"/>
    <img src="Wallpaper3.png" id="Wallpaper3"/>
    <img src="Wallpaper4.png" id="Wallpaper4"/>

    <img src="Dock1.png" id="Dock1"/>
    <img src="Dock2.png" id="Dock2"/>
    <img src="Dock3.png" id="Dock3"/>
    <img src="Dock4.png" id="Dock4"/>

    <script>
        var fade_in = Wallpaper1;
        var fade_to = Wallpaper2;
        var fade_tree = Wallpaper3;
	  var fade_out = Wallpaper4;

        var fade = function () {
            fade_in.className = 'fade-out';
		fade_to.className = 'fade-out';
		fade_tree.className = 'fade-out';
            fade_out.className = 'fade-in';

            var fade_tmp = fade_in;
            fade_in = fade_to;
          	fade_to = fade_tree;
		fade_tree = fade_out;
            fade_out = fade_tmp;
            setTimeout(fade, 15000);
        };

        fade();


        var fade_dock_in = Dock1;
        var fade_dock_to = Dock2;
        var fade_dock_tree = Dock3;
        var fade_dock_out = Dock4;


 	 var fade_dock = function () {
            fade_dock_in.className = 'fade_dock-out';
            fade_dock_to.className = 'fade_dock-out';
            fade_dock_tree.className = 'fade_dock-out';
            fade_dock_out.className = 'fade_dock-in';

            var fade_dock_tmp = fade_dock_in;
            fade_dock_in = fade_dock_to;
            fade_dock_to = fade_dock_tree;
            fade_dock_tree = fade_dock_out;
            fade_dock_out = fade_dock_tmp;

            setTimeout(fade_dock, 15000);
        };
	fade_dock();

    </script>
</body></html>

**persichini** · 09-05-2008, 05:47 AM

@gafu
sorry i forget that the rest of the world uses Celsius

If you used the transparrent icon for the weather app and put it in the top right corner it should work.

here is a Celsius version

**mike1114** · 09-05-2008, 08:17 AM

Sorry two quick questions...

I have my temp/icon in the taskbar, but the icon does not show, just a box, I think this was answered how to fix it, but I didn't understand the solution. Can someone explain. I have Vwallpaper, so this may have something to do with it not showing up.

I know I can change the color of the text, and I know how to, but could I make it BOLD also? How would the string look?

**ProjectGSX** · 09-05-2008, 08:25 AM

Originally Posted by g4seb

Ok,
And in this wallpaper code, where could i put the weather widget?
Thanks

HTML Code:

<?xml version="1.0" encoding="UTF-16"?>
<html><head>
    <base href="Private/"/>
    <!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


    <style>
        body {
            background-color: black;
            margin: 0;
            padding: 20px 0 0 0;
            height: 442px;
            width: 320px;
        }

        img {
            -webkit-transition-property: opacity;
            -webkit-transition-duration: 2s;
            position: absolute;
            width: 320px;
            height: auto;
        }

        img.fade-out {
            opacity: 0;
        }

        img.fade-in {
            opacity: 1;
        }


       img.fade_dock-out {
          opacity: 0;
          position: absolute;
	   top:389px;
	   width: auto;
          height: auto;
	 }

       img.fade_dock-in {
          opacity: 1;
          position: absolute;
	   top:389px;
	   width: auto;
          height: auto;
 	}


    </style>
</head><body style="color: black">
    <img src="Wallpaper1.png" id="Wallpaper1"/>
    <img src="Wallpaper2.png" id="Wallpaper2"/>
    <img src="Wallpaper3.png" id="Wallpaper3"/>
    <img src="Wallpaper4.png" id="Wallpaper4"/>

    <img src="Dock1.png" id="Dock1"/>
    <img src="Dock2.png" id="Dock2"/>
    <img src="Dock3.png" id="Dock3"/>
    <img src="Dock4.png" id="Dock4"/>

    <script>
        var fade_in = Wallpaper1;
        var fade_to = Wallpaper2;
        var fade_tree = Wallpaper3;
	  var fade_out = Wallpaper4;

        var fade = function () {
            fade_in.className = 'fade-out';
		fade_to.className = 'fade-out';
		fade_tree.className = 'fade-out';
            fade_out.className = 'fade-in';

            var fade_tmp = fade_in;
            fade_in = fade_to;
          	fade_to = fade_tree;
		fade_tree = fade_out;
            fade_out = fade_tmp;
            setTimeout(fade, 15000);
        };

        fade();


        var fade_dock_in = Dock1;
        var fade_dock_to = Dock2;
        var fade_dock_tree = Dock3;
        var fade_dock_out = Dock4;


 	 var fade_dock = function () {
            fade_dock_in.className = 'fade_dock-out';
            fade_dock_to.className = 'fade_dock-out';
            fade_dock_tree.className = 'fade_dock-out';
            fade_dock_out.className = 'fade_dock-in';

            var fade_dock_tmp = fade_dock_in;
            fade_dock_in = fade_dock_to;
            fade_dock_to = fade_dock_tree;
            fade_dock_tree = fade_dock_out;
            fade_dock_out = fade_dock_tmp;

            setTimeout(fade_dock, 15000);
        };
	fade_dock();

    </script>
</body></html>

Using my post a few pages back as a reference, you take the first block of text and replace the corresponding text from the data in the code fields. If you look for the first style tag, right after that is the body data. Remove that data and replace it with the data from my post.

Second, look for the closing style tag, and place the second block of text on the line below that.

Third, look for the body tag in your data and add the onload= info to it.

Fourth, look for the closing body tag and paste the div info from my post right above it. Make sure you copy the private folder data and deselect the weather widget theme in winterboard.

Originally Posted by Ramses2

How to make to translate the sentence “Partly Cloudy” into French

The Partly Cloudy text is provided by the weather source. Your best bet is to find a French language weather source and pull your data from there. Otherwise, someone has to write code to check all of the possibly variables and translate them all. I dont think its likely anyone will do that.

**alias_neo** · 09-05-2008, 09:32 AM

Originally Posted by aonavy

seems if you had a changing wallpaper the weather app doesnt work. just if u had a stationary wallpaper..it works. got any ideas?

Sorry about the late reply. Yeh, it seems as others have described here that you need to integrate it into the html file of the theme that you want to mix it with. Because one will be applied over the other you can't have two seperate ones. Someone has posted a guide but let me know if you needs help.

I am bored of the widget already so i won't be continuing with it, I will still edit the files for localities for people if they need. Please be patient though, I'm in the UK Time Zone so it might take a day to get back to you.

P.S. Below attached file is for howlett15 as requested by PM.

**g4seb** · 09-05-2008, 10:17 AM

Originally Posted by ProjectGSX

Using my post a few pages back as a reference, you take the first block of text and replace the corresponding text from the data in the code fields. If you look for the first style tag, right after that is the body data. Remove that data and replace it with the data from my post.

Second, look for the closing style tag, and place the second block of text on the line below that.

Third, look for the body tag in your data and add the onload= info to it.

Fourth, look for the closing body tag and paste the div info from my post right above it. Make sure you copy the private folder data and deselect the weather widget theme in winterboard.

Hi ProjectGSX,
I'll put the text with using your post....My wallpaper change now, but i just have the weather icon, but he don't refresh...I'll put the private directory with all document (configureme.js ......)
This is my wallpaper HTML. You could see the change.
Please help, best regards

HTML Code:

<?xml version="1.0" encoding="UTF-16"?>
<html><head>
    <base href="Private/"/>
    <!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/-->
    <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;
        }

        img {
            -webkit-transition-property: opacity;
            -webkit-transition-duration: 2s;
            position: absolute;
            width: 320px;
            height: auto;
        }

        img.fade-out {
            opacity: 0;
        }

        img.fade-in {
            opacity: 1;
        }


       img.fade_dock-out {
          opacity: 0;
          position: absolute;
	   top:389px;
	   width: auto;
          height: auto;
	 }

       img.fade_dock-in {
          opacity: 1;
          position: absolute; 
	   top:389px;
	   width: auto;
          height: auto;
 	}


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

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

<body style="color: black">
    <img src="Wallpaper1.png" id="Wallpaper1"/>
    <img src="Wallpaper2.png" id="Wallpaper2"/>
    <img src="Wallpaper3.png" id="Wallpaper3"/>
    <img src="Wallpaper4.png" id="Wallpaper4"/>

    <img src="Dock1.png" id="Dock1"/>
    <img src="Dock2.png" id="Dock2"/>
    <img src="Dock3.png" id="Dock3"/>
    <img src="Dock4.png" id="Dock4"/>

    <script>
        var fade_in = Wallpaper1;
        var fade_to = Wallpaper2;
        var fade_tree = Wallpaper3;
	  var fade_out = Wallpaper4;

        var fade = function () {
            fade_in.className = 'fade-out';
		fade_to.className = 'fade-out';
		fade_tree.className = 'fade-out';
            fade_out.className = 'fade-in';

            var fade_tmp = fade_in;
            fade_in = fade_to;
          	fade_to = fade_tree;
		fade_tree = fade_out;
            fade_out = fade_tmp;
            setTimeout(fade, 15000);
        };

        fade();


        var fade_dock_in = Dock1;
        var fade_dock_to = Dock2;
        var fade_dock_tree = Dock3;
        var fade_dock_out = Dock4;


 	 var fade_dock = function () {
            fade_dock_in.className = 'fade_dock-out';
            fade_dock_to.className = 'fade_dock-out';
            fade_dock_tree.className = 'fade_dock-out';
            fade_dock_out.className = 'fade_dock-in';

            var fade_dock_tmp = fade_dock_in;
            fade_dock_in = fade_dock_to;
            fade_dock_to = fade_dock_tree;
            fade_dock_tree = fade_dock_out;
            fade_dock_out = fade_dock_tmp;

            setTimeout(fade_dock, 15000);
        };
	fade_dock();

    </script>

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

**gtthomas4** · 09-05-2008, 10:20 AM

great work on this, is there a way to put 2 cities in the widget right on top of each other?

or is it possible to get the originalBubble to go on the left side of the screen?

**FliP76** · 09-05-2008, 11:51 AM

Heres my contribution, i ported a different iconset that didnt clash.

Myopia Stylesheet

#WeatherContainer{
float:right;
margin-top:-24px;
margin-right:-13px;
color:white;
padding:5px 10px 5px 10px;
}

#TextContainer{
clear: both;
text-align: center;
font-family: sans-serif;
text-shadow: #111 0 0 1px;
font-weight: bold;}

#city{
display: none;
}

#TextContainer p{
padding:0;
margin:0;
}

#desc{
text-transform:capitalize;
display:none;
}

#temp{
font-size: 16px;
}

#weatherIcon{
height:16px;
width:16px;
border:none;
float: right;
margin-top:-18px;
margin-right:198px;
}

**mike1114** · 09-05-2008, 03:44 PM

Ok, so can anyone tell me how to get RID of the icon?

I have the temp in my taskbar and I have vwallpaper so i don;t think the icon will work its just a box.

I tried putting :none; as the icon image but it still shows a box.

**Muggz5** · 09-05-2008, 04:10 PM

Originally Posted by yehlow

Does anyone know how to remove this while in SSH? When I try to remove this it gives me a failure to remove error.

You probably need to disable it in winterboard first and just delete it all together. It will still be on your pc, so you can add it again.

Now on my issue I am with a couple here, I first left it as it came from the devs. Didnt work. So I edited it as stated initially, still no show. So Sayam (the author of this thread) posted his edit text script and I just used his edit. Still doesnt show. I have mobile substrate installed and yes I checked it in Winterboard.
I havent changed the permissions yet but surely that wouldnt cause it not to show. maybe I edited in the wrong place, Ill post a screenshot when I get home.

If I can just get this working, next Id really love to have it up on the status bar like posted above.

**renegaderon** · 09-05-2008, 04:28 PM

What do I need to do to move the temp closer to the weather icon?

#WeatherContainer{
float:right;
margin-top:-24px;
margin-right:-13px;
color:white;
padding:5px 10px 5px 10px;
}

#TextContainer{
clear: both;
text-align: center;
font-family: sans-serif;
text-shadow: #111 0 0 1px;
font-weight: bold;}

#city{
display: none;
}

#TextContainer p{
padding:0;
margin:0;
}

#desc{
text-transform:capitalize;
display:none;
}

#temp{
font-size: 16px;
}

#weatherIcon{
height:18px;
width:18px;
border:none;
float: right;
margin-top:-18px;
margin-right:115px;
}

**FliP76** · 09-05-2008, 05:13 PM

you need to change the margin-right on the weather container. I believe it should be somewhere between 120-160.

**renegaderon** · 09-05-2008, 05:25 PM

That moves both

**FliP76** · 09-05-2008, 05:45 PM

then you have to adjust the weather icon as well, i just played with both right aligns untill they ended up in the right place

**t-baum** · 09-05-2008, 06:36 PM

That's cool, worked like a charm, thanks!

**nickh** · 09-05-2008, 06:45 PM

@ Flip76, just a quick question, What do you edit to make the font and icon a touch brighter?
Cheers,
Nick.

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.

Thread: How to add weather widget to homescreen

iPhone News

General iPhone

i played around with it and made 2 for the main to city's im in and just renamed the weatherwidget.theme to ColumbiaWeather.theme and FranklinWeather.theme and it works great!

The Following User Says Thank You to persichini For This Useful Post:

The Following User Says Thank You to alias_neo For This Useful Post: