While coming home, I’ve seen a super store showing their items on a big LED type banner. Where item names were scrolling using some lights on/off. It’s an everyday scenery, nothing special.
But I’ve come to realize soon, in back of my head, I am thinking how it can be made for web. And, LED banner has landed on earth within few hours using the wings of jQuery. Here is the fun!
How it works?
It’s pretty simple!
- createLights() makes the board (the target div) empty and create lights (span elements) in it as row and column.
- I have an array named ‘map’ that stores which lights should on for a character in 3 dimensional format.
- Using getMap() , I am creating an array of all columns for boards text.
- draw() is drawing (turning on required lights) the text.
- scrollText() make it moving. This funciton just take leftmost column and place after rightmost.
- LED Banner is scrolling. Done.
Let’s talk a bit more about map array. For eaxmple, take this line –
map[")"] = [[0,7],[1,6],[2,3,4,5]];
Here, this element of map store information for printing ‘)’.
it has 3 elements which means 3 columns will be used to print this.
[0,7] is first column for this character where 0th and 7th light (from top) should keep on.
Later, if I can manage some more time, hope to make it as a jQuery plugin.
However, if you are interested to make it as a plugin, go ahead!
Good work! It looks so simple after implementation. very nice one.
keep it up man.
It’s really nice 🙂
really its beautiful
Thumbs up!! Great idea.
And here I was, thinking we’d moved beyond the days scrolling marque… o.O It is nifty though.
That’s a beautiful thing. Good work.
@Wes P
No man, it’s not marquee. 🙂
Check the sourcecode to see how it works.
You can make it to write “Wes P” or anything, just need to map your characters.
@everybody
Thanks. Thanks a lot for your interest.
Very impressive!!!
Nice! Thanks for sharing.
Great tool. Thanks for this!
Ok, I’m sure this is going to get mangled by the reply editor, but here are the rest of the letters, the digits, and the important symbols:
Symbols are added in original source of demo.
Yes, I am lazy 😛
So, I’ve mapped only few characters (with the hope in mind that, someone will map rest of the characters).
James Curran, at last, have done this.
Thanks a loooooot to him. 🙂
Along with Alphabets and Digits, he has mapped common special characters too. Also he has overwritten my characters more beautifully.
I’ve added his map in the source of demo.
Thanks again to James Curran.
Hey Everyone,
After reading this and the source, I decide to program it from scratch. I call it jLED.
It’s the same concept but with a different approach.
http://bateru.com/projects/jled/jled.html
I’m going to convert it to a plugin in the next two days.
Woow. This is very great. Again showed the power of jQuery itself.
Led lights are great because they are long lasting and consumes less electricity. 🙂 cool idea!
Method Array.indexOf which is not supported in IE6, IE7.
For IE the given method becomes by means of file search in a cycle.
Help to alter for IE6, IE7.
Thanks.
This is Fun!
LED Lights are cool to touch and they do not have filaments that fail frequently “”
Thanks a lot for the sharing 😉
this very good….
thx for sharing..
Cool guy! Cool effect.
Thanks!
Sorry =) this very good….Thanks.!!!
this very good…
super post …thanks for share.