Winterboard Animated SB Wallpapers?!?

[Talynrider]

Hey everyone. I just tried to put up a .gif as my wallpaper (3MB) through html. It didn't work . So I tried a smaller file, since we know the phone gets temperamental about size sometimes and it works! Installed a small 4K .gif and it runs in the background. This new Winterboard is going to be way more than anything we've had before. My questions now are:
1. What else can be html altered? The lockscreen? Icons? Can we change the screen behind the text message bubbles?
2. How big or small can the .gif file be?
3. Are there other ways to animate in html or css?

[bcons003]

what do you mean through html? like you got it from a website?

[Talynrider]

I wrote an html page like sauriks Wallpaper.html. I put my gif in a private folder, like sauriks and ran the new theme and now my background is animated. It's pretty cool.

[bcons003]

maybe cause i have 2.0.1 i havent been able to see the newer updates but i have no idea what you're talking about

[Talynrider]

it's a new ability found in the application Winterboard. Are you familiar with that?

[bcons003]

a tad i have made a basic skin through winterboard

[jakecigar]

if you are familiar with animated gif construction, you should learn about animated pngs using JavaScript!
Each frame is saved as a png, then the JavaScript rotates through them.

NO LIMITS!

by the way http://jpassoc.com/x uses this technique.

[Talynrider]

The animated png looks awesome. Do you think it'll work on the iphone? seems to be very browser based and safari (from my quick look at some googled pages) doesn't support apng.

[jakecigar]

here are 2 of my animated png wallpaper.html themes.

be warned that the they both take up a chunk of processor!

and http://jpassoc.com/x is for the iPhone/touch!!

[mudlark]

depending on what you are trying to do, you may want to consider using the other built in webkit stuff. There are a few pretty cool things that you can do with it that don't slow down the SB at all.

For instance: I am putting together a pip-boy style green-screen theme and I wanted to have a periodic semi transparent raster-scan line sweep across it. I started by making a few wallpapers with the scanline in various positions hoping that if it animated fast enough it would look like it moved. This proved both crappy looking and would slow down the SB a lot when it triggered.

I then discovered that webkit has a built in transform mechanism that allows you to do scaling, rotation, skews and translations (movement). So I now have a transparent png scanline img sitting on top of my wallpaper and I simply use the translate mechanism to move it across the screen every ten seconds or so. Its smooth and best of all doesn't seem to disturb the SB performance in the slightest. I can actually scroll through the pages while it is crossing the screen which I couldn't do with the opacity transition.

[jakecigar]

will you post some of yours?

I then discovered that webkit has a built in transform mechanism that allows you to do scaling, rotation, skews and translations (movement). So I now have a transparent png scanline img sitting on top of my wallpaper and I simply use the translate mechanism to move it across the screen every ten seconds or so. Its smooth and best of all doesn't seem to disturb the SB performance in the slightest. I can actually scroll through the pages while it is crossing the screen which I couldn't do with the opacity transition.

[jedinight]

hmmm.from looking at the sample htmls.there can be some killer animation done through the winterboard.,and webkit is the way to go for sure.

[mudlark]

will you post some of yours?

Attached the zip with the html and images (and a screenshot of the theme for some context). The zip has the same structure as a theme and the html expects it so unzip it with paths intact.

It's a pretty simple implementation of a translation modeled after saurik's opacity transition but it gets the job done.

The scan function is called first, and it will move my scanline image from a little ways off screen on the left, to a little ways offscreen on the right and it takes 2s to do it. Then it sleeps for 3 seconds and calls the reset function which hides the scanline by making it transparent, and moves it back to the start position. Three seconds later the scan function is called... etc.

I had also tried to do a skew/rotate/scale transform on the div with the wallpaper itself so that it would look like the screen was flickering a bit, but it didn't wind up looking very good so I tossed it. One cool thing about it was that since the scanline image is also part of the div, it inherited the translation, so as the wallpaper was rotating, skewing and scaling, the scanline did the same, as it was sliding across the screen. I suppose that's to be expected but I was impressed nonetheless.

[jakecigar]

you made the same mistake Saurik made. it's

<?xml version="1.0" encoding="UTF-8"?>

not
<?xml version="1.0" encoding="UTF-16"?>

and your processor utilization goes up to 28%+ while scrolling.

 4822 SpringBoar  28.5%  0:30.61  12   258    516   11M-   20M    39M+   76M+

if you kept running the animation, you would eat the processor too!

[mudlark]

Damn, that's a pretty big mistake, thanks! I had no idea.

[louns]

So I've tried to do some basic research on animated png's and I might be in a little over my head. Can you guys tell me what I should be reading to learn how to do this. Webkit if I'm not mistaken requires Apple's developer tools, which seems like a little much just to make an animated background. My knowledge of html and javascript is also pretty limited. But I do like learning and I'm willing to put in the time. Am I making this harder than it has to be? Are there any guides out there or is it simple enough for one of you to just tell me what to do?

[jakecigar]

both of the wallpapers I uploaded to this message use animated png techniques!

Saurik's wallpaper uses a 2 image animated png technique

So I've tried to do some basic research on animated png's and I might be in a little over my head. Can you guys tell me what I should be reading to learn how to do this. Webkit if I'm not mistaken requires Apple's developer tools, which seems like a little much just to make an animated background. My knowledge of html and javascript is also pretty limited. But I do like learning and I'm willing to put in the time. Am I making this harder than it has to be? Are there any guides out there or is it simple enough for one of you to just tell me what to do?

[Wongster360]

Attached the zip with the html and images (and a screenshot of the theme for some context). The zip has the same structure as a theme and the html expects it so unzip it with paths intact.

I just installed this and it's badasz...i'm not a developer so i'll be interested in seeing what you and others come up with. great job!

[Talynrider]

Have you found the animation is causing hiccups while using other apps? I can tell you with the .gif background I was experiencing a lot of slow down and pausing so I took it off. Once it was gone everything went back to normal. I'm pretty much a nob at this stage of the game but trying to learn everything I can. My estimation is that it keeps running in the background behind everything even when I'm not on the springboard screen...? Is the webkit animations doing the same thing? Is there a way to do an Activity Monitor and see what the Iphone is doing and what resources it's using?

[jakecigar]

processing is processing.
ani gif, webkit css, or JavaScript can all EAT the PROCESSOR.

I use the top command to monitor, the times all get adding in to springboard.