Requesting Java Help (Weather Widget Wallpaper Integration)

**Tranas** · 10-07-2008, 12:52 AM

First and fore-most, I don't take any form of ownership over whatever I will soon post. I had no part in the scripting or formation/tweaking of Weather Widget or Tea Wallpaper.

Okay, So I use the wallpaper package called "Tea Wallpaper". It's available on Cydia and is a time of day wallpaper set. I'm trying to integrate it's script with the Weather Widget.

I have been able to tweak it so far (thanks to my limited knowledge of java) to the point of the weather widget working correctly, but the tea wallpaper is over-lapping it.

Here's what I have so far:

Code:

<html>
<head>
<base href="Private/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

// Tea Script Starts
<img id="img1" class="fade-in">
<img id="img2" class="fade-out">

<script>
    // By Craig Laparo <[email protected]>
    //  Displays each image once, rotating based on the time of day
    //  Just add the image's filename to the list to add an image,
    //  and the rotation interval will be based on the number of images
    //  (each image will be displayed once daily)

    var offset = 8;                 // The hour of day to display the first image in the list
    var blendInterval = 5;          // Minutes between transparency updates
    //var imageDir = "./";            // The (relative) path containing the images
    var duration = 1;               // The transition's duration in seconds
                                    //    (must match -webkit-transition-duration above)
    var images = [                  // List of image filenames
                    "Tea_Sunrise.png",
                    "Tea_Day.png",
                    "Tea_Afternoon.png",
                    "Tea_Sunset.png",
                    "Tea_Dusk.png",
                    "Tea_Night.png",
                    "Tea_Twilight.png",
                    "Tea_Morning.png"
                 ];

//// You shouldn't need to change anything below ////

    var img1 = document.getElementById("img1");
    var img2 = document.getElementById("img2");
    var anHour = 60 * 60 * 1000;
    var imageCount = images.length;
    var interval = 24 / imageCount;
    var intervalMS = interval * anHour;
    var index = (imageCount + Math.floor((new Date().getHours() - offset) / interval)) % imageCount;
    var offsetMS = offset * anHour;

    var getTimeStamp = function(time){
        if(!time){
            var time = new Date();
        }

        return (time % (60000) + time.getHours() * anHour + time.getMinutes() * 60000);
    };

    var rotate = function(){
        var time = new Date();
        var timestamp = getTimeStamp();
        img1.style.zIndex = 1;
        img2.style.zIndex = 2;
        img1.className = "fade-in";
        img1.style.opacity = '';
        img2.className = "fade-out";
        img2.style.opacity = '';

        index = (index + 1) % imageCount;
        img2.src = imageDir + images[index];

        var tmp = img1;
        img1 = img2;
        img2 = tmp;

        fade();

        setTimeout(rotate, intervalMS - Math.abs(getTimeStamp() - offsetMS % intervalMS) % intervalMS);
    };

    var fade = function(){
        img1.style.opacity = (Math.abs(getTimeStamp() - offsetMS % intervalMS) % intervalMS) / intervalMS;
    };

    img1.src = imageDir + images[index];
    rotate();
    setInterval(fade, blendInterval * 60000);
</script>
//Tea Script Ends

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


img {
    position: absolute;
    width: 320px;
    height: 480px;
}

img.fade-out {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    opacity: 0;
}

img.fade-in {
    opacity: 1;
}
</style>
</head>
//Wallpaper Preferences End???

//Weather Widget Preferences Start
<body>

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

<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>
//Obviously Weather Widget End Point :P

I attempted to organize the script as well as I could for easy readability.
I also threw in some comments to point out for those un-familiar with Tea.

In the end, I'm asking if there's a way to force the weather widget properties to the front, so the tea wallpaper won't over-lap. I can't understand why it's forcing the over-lap like that.

Thanks!!

**NetMage** · 10-08-2008, 11:42 PM

At a quick glance, your post shows two <body> tags - I would remove the first one.

Also, you appear to be missing the img1 and img2 elements for the Tea app to work right?

Can you post the originals?

Thread: Requesting Java Help (Weather Widget Wallpaper Integration)

LinkBack

Thread Tools

Display

Requesting Java Help (Weather Widget Wallpaper Integration)

Posting Permissions