Full version: jsB@nk » Text » Imatitation » L.E.D Text with Image
URL: https://www.javascriptbank.com/led-text-with-image-index.html
This JavaScript code uses images to makes the L.E.D messages on the web pages.
Full version: jsB@nk » Text » Imatitation » L.E.D Text with Image
URL: https://www.javascriptbank.com/led-text-with-image-index.html
<SCRIPT LANGUAGE="JavaScript"><!-- Hide from old browsers// set messages (specify backslash in double form (i.e, \\)var messages = new Array()messages[0] = "javascriptbank.com"messages[1] = "bank of free javascript"// number of milliseconds to pause between two messagesvar pause = 3000// set normal spacing between two characters (no whitespace inbetween)var space = 1// set height width of each charactervar height = 5var width = 3// create object of all supported characters in fontvar letters = new letterArray()// initialize image variablesvar on = new Image(5, 5)var off = new Image(5, 5)// set image URLson.src = "on.gif"off.src = "off.gif"// get number of images already laid out in pagevar imageNum = document.images.length// compute width of board//var boardWidth = longest * (width + space) - space// set maximum message length in imagesvar boardWidth = 0for (var i = 0; i < messages.length; ++i) { var lengthWithNoSpaces = messages[i].split(" ").join("").length var numberOfSpaces = messages[i].length - lengthWithNoSpaces var currentBoardWidth = lengthWithNoSpaces * (width + space) - space + numberOfSpaces * space * 2 if (boardWidth < currentBoardWidth) boardWidth = currentBoardWidth}// sign is currently not runningvar running = falsevar timerID = nullfunction letterArray() { this.a = new Array(height) this.a[0] = " * " this.a[1] = "* *" this.a[2] = "***" this.a[3] = "* *" this.a[4] = "* *" this.b = new Array(height) this.b[0] = "** " this.b[1] = "* *" this.b[2] = "** " this.b[3] = "* *" this.b[4] = "** " this.c = new Array(height) this.c[0] = "***" this.c[1] = "* " this.c[2] = "* " this.c[3] = "* " this.c[4] = "***" this.d = new Array(height) this.d[0] = "** " this.d[1] = "* *" this.d[2] = "* *" this.d[3] = "* *" this.d[4] = "** " this.e = new Array(height) this.e[0] = "*** " this.e[1] = "* " this.e[2] = "***" this.e[3] = "* " this.e[4] = "***" this.f = new Array(height) this.f[0] = "***" this.f[1] = "* " this.f[2] = "***" this.f[3] = "* " this.f[4] = "* " this.g = new Array(height) this.g[0] = "***" this.g[1] = "* " this.g[2] = "***" this.g[3] = "* *" this.g[4] = "***" this.h = new Array(height) this.h[0] = "* *" this.h[1] = "* *" this.h[2] = "***" this.h[3] = "* *" this.h[4] = "* *" this.i = new Array(height) this.i[0] = "***" this.i[1] = " * " this.i[2] = " * " this.i[3] = " * " this.i[4] = "***" this.j = new Array(height) this.j[0] = " *" this.j[1] = " *" this.j[2] = " *" this.j[3] = "* *" this.j[4] = "***" this.k = new Array(height) this.k[0] = "* *" this.k[1] = "* *" this.k[2] = "** " this.k[3] = "* *" this.k[4] = "* *" this.l = new Array(height) this.l[0] = "* " this.l[1] = "* " this.l[2] = "* " this.l[3] = "* " this.l[4] = "***" this.m = new Array(height) this.m[0] = "* *" this.m[1] = "***" this.m[2] = "***" this.m[3] = "* *" this.m[4] = "* *" this.n = new Array(height) this.n[0] = "* *" this.n[1] = "***" this.n[2] = "***" this.n[3] = "***" this.n[4] = "* *" this.o = new Array(height) this.o[0] = "***" this.o[1] = "* *" this.o[2] = "* *" this.o[3] = "* *" this.o[4] = "***" this.p = new Array(height) this.p[0] = "** " this.p[1] = "* *" this.p[2] = "** " this.p[3] = "* " this.p[4] = "* " this.q = new Array(height) this.q[0] = "***" this.q[1] = "* *" this.q[2] = "* *" this.q[3] = "***" this.q[4] = "***" this.r = new Array(height) this.r[0] = "** " this.r[1] = "* *" this.r[2] = "** " this.r[3] = "* *" this.r[4] = "* *" this.s = new Array(height) this.s[0] = "***" this.s[1] = "* " this.s[2] = "***" this.s[3] = " *" this.s[4] = "***" this.t = new Array(height) this.t[0] = "***" this.t[1] = " * " this.t[2] = " * " this.t[3] = " * " this.t[4] = " * " this.u = new Array(height) this.u[0] = "* *" this.u[1] = "* *" this.u[2] = "* *" this.u[3] = "* *" this.u[4] = "***" this.v = new Array(height) this.v[0] = "* *" this.v[1] = "* *" this.v[2] = "* *" this.v[3] = "* *" this.v[4] = " * " this.w = new Array(height) this.w[0] = "* *" this.w[1] = "* *" this.w[2] = "***" this.w[3] = "***" this.w[4] = "***" this.x = new Array(height) this.x[0] = "* *" this.x[1] = "* *" this.x[2] = " * " this.x[3] = "* *" this.x[4] = "* *" this.y = new Array(height) this.y[0] = "* *" this.y[1] = "* *" this.y[2] = "***" this.y[3] = " * " this.y[4] = " * " this.z = new Array(height) this.z[0] = "***" this.z[1] = " *" this.z[2] = " * " this.z[3] = "* " this.z[4] = "***" this['!'] = new Array(height) this['!'][0] = " * " this['!'][1] = " * " this['!'][2] = " * " this['!'][3] = " " this['!'][4] = " * " this[':'] = new Array(height) this[':'][0] = " " this[':'][1] = " * " this[':'][2] = " " this[':'][3] = " * " this[':'][4] = " " this['.'] = new Array(height) this['.'][0] = " " this['.'][1] = " " this['.'][2] = " " this['.'][3] = " " this['.'][4] = " * " this['='] = new Array(height) this['='][0] = " " this['='][1] = "***" this['='][2] = " " this['='][3] = "***" this['='][4] = " " this['='] = new Array(height) this['='][0] = " " this['='][1] = "***" this['='][2] = " " this['='][3] = "***" this['='][4] = " " this['+'] = new Array(height) this['+'][0] = " " this['+'][1] = " * " this['+'][2] = "***" this['+'][3] = " * " this['+'][4] = " " this['-'] = new Array(height) this['-'][0] = " " this['-'][1] = " " this['-'][2] = "***" this['-'][3] = " " this['-'][4] = " " this['/'] = new Array(height) this['/'][0] = " *" this['/'][1] = " *" this['/'][2] = " * " this['/'][3] = "* " this['/'][4] = "* " this['\\'] = new Array(height) this['\\'][0] = "* " this['\\'][1] = "* " this['\\'][2] = " * " this['\\'][3] = " *" this['\\'][4] = " *" this['\\'] = new Array(height) this['\\'][0] = "* " this['\\'][1] = "* " this['\\'][2] = " * " this['\\'][3] = " *" this['\\'][4] = " *" this['"'] = new Array(height) this['"'][0] = "* *" this['"'][1] = "* *" this['"'][2] = "* *" this['"'][3] = " " this['"'][4] = " " this["'"] = new Array(height) this["'"][0] = " * " this["'"][1] = " * " this["'"][2] = " * " this["'"][3] = " " this["'"][4] = " " this['('] = new Array(height) this['('][0] = " *" this['('][1] = " * " this['('][2] = " * " this['('][3] = " * " this['('][4] = " *" this[')'] = new Array(height) this[')'][0] = "* " this[')'][1] = " * " this[')'][2] = " * " this[')'][3] = " * " this[')'][4] = "* " this['*'] = new Array(height) this['*'][0] = " " this['*'][1] = "***" this['*'][2] = "***" this['*'][3] = "***" this['*'][4] = " " this['?'] = new Array(height) this['?'][0] = "** " this['?'][1] = " *" this['?'][2] = " * " this['?'][3] = " " this['?'][4] = " * " this['0'] = new Array(height) this['0'][0] = " * " this['0'][1] = "* *" this['0'][2] = "* *" this['0'][3] = "* *" this['0'][4] = " * " this['1'] = new Array(height) this['1'][0] = " * " this['1'][1] = " * " this['1'][2] = " * " this['1'][3] = " * " this['1'][4] = " * " this['2'] = new Array(height) this['2'][0] = "***" this['2'][1] = " *" this['2'][2] = "***" this['2'][3] = "* " this['2'][4] = "***" this['3'] = new Array(height) this['3'][0] = "***" this['3'][1] = " *" this['3'][2] = "***" this['3'][3] = " *" this['3'][4] = "***" this['4'] = new Array(height) this['4'][0] = "* *" this['4'][1] = "* *" this['4'][2] = "***" this['4'][3] = " *" this['4'][4] = " *" this['5'] = new Array(height) this['5'][0] = "***" this['5'][1] = "* " this['5'][2] = "***" this['5'][3] = " *" this['5'][4] = "** " this['6'] = new Array(height) this['6'][0] = "** " this['6'][1] = "* " this['6'][2] = "***" this['6'][3] = "* *" this['6'][4] = "***" this['7'] = new Array(height) this['7'][0] = "***" this['7'][1] = " *" this['7'][2] = " * " this['7'][3] = "* " this['7'][4] = "* " this['8'] = new Array(height) this['8'][0] = "***" this['8'][1] = "* *" this['8'][2] = "***" this['8'][3] = "* *" this['8'][4] = "***" this['9'] = new Array(height) this['9'][0] = "***" this['9'][1] = "* *" this['9'][2] = "***" this['9'][3] = " *" this['9'][4] = "***"}function drawBlank() { // assign greater than symbol to variable var gt = unescape("%3e") document.write('<TABLE BORDER=2 CELLPADDING=0' + gt + '<TR' + gt + '<TD BGCOLOR ALIGN="center" VALIGN="center"' + gt) // print entire board of off images for (var y = 0; y < height; ++y) { for (var x = 0; x < boardWidth; ++x) { document.write('<IMG SRC="' + off.src + '" HEIGHT=5 WIDTH=5' + gt) } document.write('<BR' + gt) } document.write('</TD' + gt + '</TR' + gt + '</TABLE' + gt)}function setLight(state, x, y) { // set a specific light in sign to on (true) or off (false) if (state) document.images[computeIndex(x, y)].src = on.src else document.images[computeIndex(x, y)].src = off.src}function drawLetter(letter, startX) { // draws a letter at the given x coordinate for (var x = 0; x < width; ++x) { for (var y = 0; y < height; ++y) { setLight(letters[letter][y].charAt(x) == "*", startX + x, y) } }}function drawSpace(startX) { // create a small space between each two characters for (var x = 0; x < space; ++x) { for (var y = 0; y < height; ++y) { setLight(false, startX + x, y) } }}function computeIndex(x, y) { // compute the document index of an image in the sign, based on the x-y coordinates return (y * boardWidth + x) + imageNum}function floodBoard(startX) { // set all lights from startX to off for (var x = startX; x < boardWidth; ++x) { for (var y = 0; y < height; ++y) { setLight(false, x, y) } }}function drawMessage(num) { // initialize variable to current message var text = messages[num] // initialize two counters (j - current character in message, i - current x coordinate) var i = 0 var j = 0 while (1) { if (text.charAt(j) != " ") { // draw current letter drawLetter(text.charAt(j), i) // increment i by the constant width of an image i += width } else { // add an extra space (do not advance j yet) drawSpace(i) i += space } // if j is less that index of last character if (j < text.length - 1) { drawSpace(i) i += space } else // j is the index of the last character (lsat character already printed) break // increment j by one because one letter was printed ++j } // flood the remaining piece of the sign (turn it off) floodBoard(i) // if message printed this time was not the last one in the array if (num < messages.length - 1) // val *must* be a global variable for use with the timeout val = ++num else val = 0 // start cycle over again // recursive call after waiting 3 seconds (some of the time already passed during printing) timerID = setTimeout("drawMessage(val)", pause)}function startSign() { running = true // wait 3 seconds and then call function to print first message drawMessage(0)}function stopSign() { if(running) clearTimeout(timerID) running = false}// open formdocument.write('<FORM>')// create initial sign (all sign is off)drawBlank()document.write('<INPUT TYPE="button" VALUE="start" onClick="startSign()">')document.write('<INPUT TYPE="button" VALUE="stop" onClick="stopSign(); floodBoard(0)">')document.write('</FORM>')// --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/text/LED_Text_with_Image/on.gifhttp://javascriptbank.com/javascript/text/LED_Text_with_Image/off.gif