• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Can I animate JPEGs in JSP?

 
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I build several JPEG files using JFreeChart in an automated process.

I then want to display these created JPEGs to the user and give the illusion of animation.

So, what I want to do is to have each image appear in the same place on the JSP page to give this illusion of animation.

However, when I try to display the three images in a for loop, I end up getting three images down the page instead of one image that changes. (The resulting HTML page source has three img tags instead of one).

Do I need to use Flash for this or can this animation be done in JSP.

Also, I tried to do a Thread.sleep(1000), but it didn't seem to pause correctly.

I would welcome any advice or suggestions on this.

Thanks.

----

Mike
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Think about it.

JSP executes on the server in order to construct an HTML page to display in the browser. So any looping that you do in JSP happens in order to build an HTML to send after the JSP is executed.

So if you want client-side activity, you need client-side technology. Flash is one way, but for simply swapping out images, some very simple Javascript will do just fine.

For more on JSP please read this article.
 
Rancher
Posts: 43081
77
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Voodoo's Introduction to JavaScript covers switching images in Part 8.
 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Bear and Ulf! I clearly wasn't thinking about JSP vs. Javascript and thank you both for helping me focus on client vs. server. (Java Ranch to the Rescue!!! <s>

I came up with the following functions below to "animate" my charts. I see that there's no built in way to pause execution "between" Javascript statements (rather the pause is between calls to a function).

So, assuming I have three JPEGs, chart1, chart2, and chart3, I wrote the functions as you see below.

Can these be improved? What if I had 100 (or 1000) images I wanted to animate with a 1 second delay between images. I don't see how Javascript makes this delay easy. I'd hate to add 1000 "if else" clauses to the code below for each image!

Look forward to any updates and replies!

Thanks.

mike

---------------

function showChart()
{
var timeOut = setTimeout("nextChart(1)", 2000);
var timeOut = setTimeout("nextChart(2)", 3000);
var timeOut = setTimeout("nextChart(3)", 4000);
}

function nextChart(nextChart)
{
if (nextChart == 1)
{
document.chart.src = "chart1.jpg";
}
else if (nextChart == 2)
{
document.chart.src = "chart2.jpg";
}
else
{
document.chart.src = "chart3.jpg";
}
}
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
One thing you need to note is there will be a LOAD time. Depending on the size of the file, it may be big.

In that case you might want to look at preloading the images. You can search the net for JavaScript image preloaders.

Eric
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Please use UBB code tags when posting code.

I would not pre-schedule all the time-out handlers up front as you are doing. Rather, I'd either schedule the next time-out when the previous time-out fires, or use setInterval rather than setTimeout.
[ January 10, 2007: Message edited by: Bear Bibeault ]
 
author and cow tipper
Posts: 5009
1
Hibernate Spring Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ya know, you can animate a JPG with JavaScript, but I must say, using some of the gif animator tools you can try out at tucows might be more up your alley.

I've tried a bunch of them, and they're all fairly straight forward. Just convert the JPG to GIF, which you can do with pretty much any image viewer, and create an animated GIF. Then they'll even work if a client has turned scripting off.

-Cameron McKenzie
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Did you miss his very first sentence?

I build several JPEG files using JFreeChart in an automated process.

 
Mike London
Bartender
Posts: 1971
17
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Cameron,

As Bear pointed out, the process I've built is currently automated. However, an automated GIF is yet another cool solution I might use for another project.

Thanks very much for mentioning this idea!

---------

M
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic