[hunchentoot-devel] blinking hunchentoot logo
My daughter was looking at the Hunchentoot logo this morning and said she thought someone ought to make it animated so that one the eyes blinks every so often, and then another one - randomly. I don't know how to do that. Does anyone know how to do that? It would be really cool. I suppose it would have to be a GIF though. Jeff
My daughter was looking at the Hunchentoot logo this morning and said she thought someone ought to make it animated so that one the eyes blinks every so often, and then another one - randomly. I don't know how to do that. Does anyone know how to do that? It would be really cool. I suppose it would have to be a GIF though.
Sounds cool! GIF is a suitable image format, although it's technically possible with MNG too. You can achieve a non-random effect with Gimp, for example. If you build in enough frames you can make it look random enough. Or you can generate the image yourself with Skippy: http://www.xach.com/lisp/skippy/ This method also allows you to generate random transitions on the fly. Leslie -- LinkedIn Profile: http://www.linkedin.com/in/polzer Xing Profile: https://www.xing.com/profile/LeslieP_Polzer Blog: http://blog.viridian-project.de/
no gif please, they are dead! this can be easily done with very little js code and a bit of css,and png! kiuma On Sun, Nov 9, 2008 at 2:27 PM, Leslie P. Polzer <sky@viridian-project.de> wrote:
My daughter was looking at the Hunchentoot logo this morning and said she thought someone ought to make it animated so that one the eyes blinks every so often, and then another one - randomly. I don't know how to do that. Does anyone know how to do that? It would be really cool. I suppose it would have to be a GIF though.
Sounds cool!
GIF is a suitable image format, although it's technically possible with MNG too.
You can achieve a non-random effect with Gimp, for example. If you build in enough frames you can make it look random enough.
Or you can generate the image yourself with Skippy:
http://www.xach.com/lisp/skippy/
This method also allows you to generate random transitions on the fly.
Leslie
-- LinkedIn Profile: http://www.linkedin.com/in/polzer Xing Profile: https://www.xing.com/profile/LeslieP_Polzer Blog: http://blog.viridian-project.de/
_______________________________________________ tbnl-devel site list tbnl-devel@common-lisp.net http://common-lisp.net/mailman/listinfo/tbnl-devel
no gif please, they are dead!
What's wrong with GIF?
this can be easily done with very little js code and a bit of css,and png!
Using JS would have the advantage that you could get straight random intervals. But also two disadvantages: cpu overhead (with the current state of JS engines) and non-compatibility with JS-incapable browsers (or just JS turned off). Leslie
On 2008-11-09 16:28:34, Leslie P. Polzer wrote:
random intervals. But also two disadvantages: cpu overhead (with the current state of JS engines) and non-compatibility with JS-incapable browsers (or just JS turned off).
People with JavaScript turned off mostly don't like any blinking elements on a web page. So, that's OK. -- Web (en): http://www.no-spoon.de/ -*- Web (de): http://www.frell.de/
Here's a quick hack to display a blinking logo. Put this JavaScript in the head element of your page: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var blinkInterval = 5 * 1000; // five seconds var blinkTime = 1 * 1000; // one second var logoFile = "hunchentoot-logo.png"; var blinkImageFiles = new Array ("hunchentoot-logo-blink-1.png", "hunchentoot-logo-blink-2.png", "hunchentoot-logo-blink-3.png", "hunchentoot-logo-blink-4.png"); var imageCount = blinkImageFiles.length; function startBlink() { setInterval("blink()",blinkInterval); } function blink() { var index = Math.floor(imageCount * Math.random()); var imageFile = blinkImageFiles[index]; document["HunchentootLogo"].src = imageFile; setTimeout("unBlink()",blinkTime); } function unBlink() { document["HunchentootLogo"].src = logoFile; } // End --> </script> Put a named image tag in the body of your page like this: <img border="0" src="hunchentoot-logo.png" name="HunchentootLogo"/> That's it. I've attached the images hacked from the Hunchentoot logo on the website. Hopefully they'll get through the mail list software. Now to modify this to use parenscript.... Regards, Patrick ---- pjm@spe.com S P Engineering, Inc. Large scale, mission-critical, distributed OO systems design and implementation. (C++, Java, Common Lisp, Jini, middleware, SOA)
Patrick May wrote:
Here's a quick hack to display a blinking logo. Put this JavaScript in the head element of your page:
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var blinkInterval = 5 * 1000; // five seconds var blinkTime = 1 * 1000; // one second
var logoFile = "hunchentoot-logo.png";
var blinkImageFiles = new Array ("hunchentoot-logo-blink-1.png", "hunchentoot-logo-blink-2.png", "hunchentoot-logo-blink-3.png", "hunchentoot-logo-blink-4.png"); var imageCount = blinkImageFiles.length;
function startBlink() { setInterval("blink()",blinkInterval); }
function blink() { var index = Math.floor(imageCount * Math.random()); var imageFile = blinkImageFiles[index]; document["HunchentootLogo"].src = imageFile;
setTimeout("unBlink()",blinkTime); }
function unBlink() { document["HunchentootLogo"].src = logoFile; } // End --> </script>
Put a named image tag in the body of your page like this:
<img border="0" src="hunchentoot-logo.png" name="HunchentootLogo"/>
That's it. I've attached the images hacked from the Hunchentoot logo on the website. Hopefully they'll get through the mail list software. Now to modify this to use parenscript....
Regards,
Patrick
The images came through just fine. Thanks, Patrick. I'll see if I can make it work this afternoon. (I wonder how long it will take her to notice...?) Jeff
Jeff Cunningham wrote:
Patrick May wrote:
Here's a quick hack to display a blinking logo. Put this JavaScript in the head element of your page:
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var blinkInterval = 5 * 1000; // five seconds var blinkTime = 1 * 1000; // one second
var logoFile = "hunchentoot-logo.png";
var blinkImageFiles = new Array ("hunchentoot-logo-blink-1.png", "hunchentoot-logo-blink-2.png", "hunchentoot-logo-blink-3.png", "hunchentoot-logo-blink-4.png");
I modified the javascript slightly so it would find the images on my server (in /images/) like this: But it doesn't work and I have no clue how Javascript works. Is there a way to debug it when you hit the page? maybe make it write out what the state is of the variables? What I've pasted below came from View/Source, so that's what my cl-who code is generating for both the script and the subsequent image below on the page <script language='javascript'> <!-- Begin var blinkInterval = 4 * 1000; // five seconds var blinkTime = 1 * 1000; // one second var logoFile = "/images/hunchentoot-logo.png"; var blinkImageFiles = new Array ("/images/hunchentoot-logo-blink-1.png", "/images/hunchentoot-logo-blink-2.png", "/images/hunchentoot-logo-blink-3.png", "/images/hunchentoot-logo-blink-4.png"); var imageCount = blinkImageFiles.length; function startBlink() { setInterval("blink()",blinkInterval); } function blink() { var index = Math.floor(imageCount * Math.random()); var imageFile = blinkImageFiles[index]; document["HunchentootLogo"].src = imageFile; setTimeout("unBlink()",blinkTime); } function unBlink() { document["HunchentootLogo"].src = logoFile; } // End --> </script> <img src='/images/hunchentoot-logo.png' name='HunchentootLogo' alt='hunchentoot logo'> Jeff
On 9 Nov 2008, at 17:12, Jeff Cunningham wrote:
I modified the javascript slightly so it would find the images on my server (in /images/) like this: But it doesn't work and I have no clue how Javascript works. Is there a way to debug it when you hit the page? maybe make it write out what the state is of the variables?
You can turn on debugging in most browsers. In Safari, doing so gives me a "Develop" menu with a number of items including "Show Error Console" that helps chasing down problems like this. Regards, Patrick ---- pjm@spe.com S P Engineering, Inc. Large scale, mission-critical, distributed OO systems design and implementation. (C++, Java, Common Lisp, Jini, middleware, SOA)
argh! you need only two imeages one with eyes open and the other with eyes closed, then you have a div with background-image (eyes-open.png); and you can put inside one dive with eyes-closed.png then shape and position the close eyes div accordingly. cheers, kiuma On Sun, Nov 9, 2008 at 9:40 PM, Jeff Cunningham <jeffrey@cunningham.net> wrote:
Patrick May wrote:
Here's a quick hack to display a blinking logo. Put this JavaScript in the head element of your page:
<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var blinkInterval = 5 * 1000; // five seconds var blinkTime = 1 * 1000; // one second
var logoFile = "hunchentoot-logo.png";
var blinkImageFiles = new Array ("hunchentoot-logo-blink-1.png", "hunchentoot-logo-blink-2.png", "hunchentoot-logo-blink-3.png", "hunchentoot-logo-blink-4.png"); var imageCount = blinkImageFiles.length;
function startBlink() { setInterval("blink()",blinkInterval); }
function blink() { var index = Math.floor(imageCount * Math.random()); var imageFile = blinkImageFiles[index]; document["HunchentootLogo"].src = imageFile;
setTimeout("unBlink()",blinkTime); }
function unBlink() { document["HunchentootLogo"].src = logoFile; } // End --> </script>
Put a named image tag in the body of your page like this:
<img border="0" src="hunchentoot-logo.png" name="HunchentootLogo"/>
That's it. I've attached the images hacked from the Hunchentoot logo on the website. Hopefully they'll get through the mail list software. Now to modify this to use parenscript....
Regards,
Patrick
The images came through just fine. Thanks, Patrick. I'll see if I can make it work this afternoon. (I wonder how long it will take her to notice...?)
Jeff
_______________________________________________ tbnl-devel site list tbnl-devel@common-lisp.net http://common-lisp.net/mailman/listinfo/tbnl-devel
On 9 Nov 2008, at 17:43, Andrea Chiumenti wrote:
argh!
you need only two imeages one with eyes open and the other with eyes closed, then you have a div with background-image (eyes-open.png); and you can put inside one dive with eyes-closed.png then shape and position the close eyes div accordingly.
If it causes you such consternation, please feel free to modify the code I provided. Your textual description fails to compile. ;-) Regards, Patrick ---- pjm@spe.com S P Engineering, Inc. Large scale, mission-critical, distributed OO systems design and implementation. (C++, Java, Common Lisp, Jini, middleware, SOA)
I'm a little puzzled about this; why? Where would it go? On Edi Weitz's Hunchentoot page? Rob
On 9 Nov 2008, at 19:35, Robert Synnott wrote:
I'm a little puzzled about this; why? Where would it go? On Edi Weitz's Hunchentoot page?
Why? What a strange question. Post hoc, I could say that I did it because I, too, have daughters and wanted to help Jeff mess with his girl's mind. Alternatively, I could say I did it because I had 15 minutes to kill while waiting to play taxi for said daughters. The real reason is probably that it amused me more to make the logo blink than to groom the cat or do a Sudoku. I didn't actually try all that hard to justify the urge. Regards, Patrick ---- pjm@spe.com S P Engineering, Inc. Large scale, mission-critical, distributed OO systems design and implementation. (C++, Java, Common Lisp, Jini, middleware, SOA)
Ok :) I didn't see it didn't compile ;p here it is the compiling sample. cheers, kiuma On Mon, Nov 10, 2008 at 12:41 AM, Patrick May <pjm@spe.com> wrote:
On 9 Nov 2008, at 17:43, Andrea Chiumenti wrote:
argh!
you need only two imeages one with eyes open and the other with eyes closed, then you have a div with background-image (eyes-open.png); and you can put inside one dive with eyes-closed.png then shape and position the close eyes div accordingly.
If it causes you such consternation, please feel free to modify the code I provided. Your textual description fails to compile. ;-)
Regards,
Patrick
---- pjm@spe.com S P Engineering, Inc. Large scale, mission-critical, distributed OO systems design and implementation. (C++, Java, Common Lisp, Jini, middleware, SOA)
_______________________________________________ tbnl-devel site list tbnl-devel@common-lisp.net http://common-lisp.net/mailman/listinfo/tbnl-devel
Yeah, I know it is silly, but I could not resists. 1514 bytes for the animated GIF, no deployment hassle at all (just replace the image). See attached. -Hans On Mon, Nov 10, 2008 at 11:10, Andrea Chiumenti <kiuma72@gmail.com> wrote:
Ok :) I didn't see it didn't compile ;p
here it is the compiling sample. cheers, kiuma
On Mon, Nov 10, 2008 at 12:41 AM, Patrick May <pjm@spe.com> wrote:
On 9 Nov 2008, at 17:43, Andrea Chiumenti wrote:
argh!
you need only two imeages one with eyes open and the other with eyes closed, then you have a div with background-image (eyes-open.png); and you can put inside one dive with eyes-closed.png then shape and position the close eyes div accordingly.
If it causes you such consternation, please feel free to modify the code I provided. Your textual description fails to compile. ;-)
Regards,
Patrick
---- pjm@spe.com S P Engineering, Inc. Large scale, mission-critical, distributed OO systems design and implementation. (C++, Java, Common Lisp, Jini, middleware, SOA)
_______________________________________________ tbnl-devel site list tbnl-devel@common-lisp.net http://common-lisp.net/mailman/listinfo/tbnl-devel
_______________________________________________ tbnl-devel site list tbnl-devel@common-lisp.net http://common-lisp.net/mailman/listinfo/tbnl-devel
Leslie P. Polzer wrote:
My daughter was looking at the Hunchentoot logo this morning and said she thought someone ought to make it animated so that one the eyes blinks every so often, and then another one - randomly. I don't know how to do that. Does anyone know how to do that? It would be really cool. I suppose it would have to be a GIF though.
Sounds cool!
GIF is a suitable image format, although it's technically possible with MNG too.
You can achieve a non-random effect with Gimp, for example. If you build in enough frames you can make it look random enough.
Or you can generate the image yourself with Skippy:
http://www.xach.com/lisp/skippy/
This method also allows you to generate random transitions on the fly.
Leslie
The skippy idea is pretty neat - doing it to the spider would make a great little demo. Maybe one of the eyes should be bloodshot once in a while - like he's been up all night on a binge - and then - blink - they're back to normal and people aren't sure they really saw it or not.
On 2008-11-08 19:30:31, Jeff Cunningham wrote:
My daughter was looking at the Hunchentoot logo this morning and said she thought someone ought to make it animated so that one the eyes blinks every so often, and then another one - randomly. I don't know how
For her MySpace page? -- Web (en): http://www.no-spoon.de/ -*- Web (de): http://www.frell.de/
Stefan Scholl wrote:
On 2008-11-08 19:30:31, Jeff Cunningham wrote:
My daughter was looking at the Hunchentoot logo this morning and said she thought someone ought to make it animated so that one the eyes blinks every so often, and then another one - randomly. I don't know how
For her MySpace page?
No - she was watching me troubleshoot my website when I had an error page up and was just making an idle comment.
participants (7)
-
Andrea Chiumenti -
Hans Hübner -
Jeff Cunningham -
Leslie P. Polzer -
Patrick May -
Robert Synnott -
Stefan Scholl