October 2005, Issue 183

The Silicon Wallet
CY8C27443-Based Data Manager

WEB KEYBOARD

The PC interface doesn’t require you to install specialized software or drivers. Simply open an HTML file with an ordinary web browser.

HTML files can be stored locally or accessed online because they can be used as pages in a web site. Photo 2a shows what happens when you open web_keyboard.htm with Internet Explorer 6. The screen displays a virtual QWERTY keyboard and a big white pad, which is the area that sends the signals to the Silicon Wallet’s photodetector, changing its color from white to black and vice versa. The keyboard screen is activated by means of a JavaScript program embedded in the HTML file, which runs automatically when the web browser loads the file. A nice feature of JavaScript programs is that they are platform independent. Additionally, many popular web sites require JavaScript, so most browsers enable it by default.

Processing takes place via strings, which are easy to manipulate with scripting languages. Each time you click on the picture, the browser invokes the keypress() function, passing it a string argument representing the 10-bit code to transmit (e.g., 0001010101 for the letter Q). Analyzing the string character-by-character, the encode() function builds another string that represents the sequence of color bursts to be transmitted, with B representing a 45-ms black pulse and W representing a white one. The string includes the stop bit and is appended to the transmission queue (another string, tx_queue).

A timer-invoked function (“timeout” in JavaScript parlance) checks the queue every 45 ms. If it’s empty, there’s no data to transmit and the transmission color is set to white. Otherwise, the color is set to either black or white according to the first character from the queue (B or W).

This is a liberal use of timeouts, a mechanism originally included in JavaScript in order to support things like animation effects, automatic picture switching, and page changeovers. Nonetheless, it proved to be effective for data transmission, too!  

Now that you know which color to display, the last method you need is a technique for painting a rectangle. Surprisingly, for a language that runs in a web browser, JavaScript doesn’t include graphics primitives like drawing lines or boxes (not to mention filling screen areas). What you can do is limited to loading an entire .GIF or .JPG file (slow). You can change the color attribute of screen objects like fonts and buttons. I selected the second option because it’s fast and compact. Actually, the set_color() function is just one line of code long.