WINKEY

Every press is two calls in his main: draw the button in its pressed style, then draw its icon 2 pixels lower and 2 pixels to the right. Then the raised style, and the icon back in place. That small shift is the whole trick. The eye reads it as a key going down, the same thing a web page does with :active { translate: 2px 2px }.

The screen above is not a screenshot. Your browser redraws it from his button table and his icon file, and it matches the screen his own program draws, pixel for pixel. 177 buttons in all: the panel, then 8 buttons pressed and raised 11 times each.

His button routine reads a small table stored inside WINKEY.EXE. It holds 6 styles. Each style is a list of rings from the outside in. Each ring is 2 bytes: the color for the top and left edges, then the color for the bottom and right. A byte of 10h ends the list, and one fill paints the face. A whole look is a few bytes of data, like a CSS rule: border-style: outset raises a box and inset sinks it.

Pick another face color and the light follows. His routine moves every ring color except black and dark gray by the same step as the face. So white turns into the bright version of the face color. One table serves a gray button, a blue one or a green one.

The card keeps the screen in 4 layers called bit planes: one for blue, one for green, one for red and one for brightness. Think of 4 sheets of tracing paper over one drawing. A pixel's color is one bit from each sheet, and each byte of a sheet covers 8 pixels side by side.

So he sets the card up once. Its Set/Reset setting holds the color for all 4 sheets. Its Bit Mask says which of the 8 pixels may change, like a stencil. Then he reads the byte, so the card keeps a copy of what is already there in its latches, and writes it back. Every pixel inside the stencil takes the color, on all 4 sheets, and the rest stay as they were. Try both ways below.

The DOS logo takes 251 bytes. As a plain bitmap, 42 × 26 pixels at 4 bits each, it would take 546. The program loads the whole file with three DOS calls, open, read and close, and draws every icon from memory. On the web the same idea is an SVG sprite sheet: one file of pictures, loaded once, each picture found by name.

His Arabic engine stores its letters the same way: runs counted from the right edge, rows from the bottom up, and the same EF for one row up. Watch a letter paint itself on the ARABART page.

A textbook writes and bx,7, the x & 7 of JavaScript. Yasser shifts the 3 low bits out of x, one at a time. Each one falls into the carry flag and slides into a second register, so they arrive in reverse order. His 8-byte table, 00 04 02 06 01 05 03 07, turns them back. The same three shifts leave x ÷ 8 behind, so one small loop gives both answers.

WINKEY uses it in 5 of its routines: the icon, the bar, the line, the checkerboard and the highlight. The same bytes appear in his Arabic engine, ARABART 4.15, in ARAB-ART 7.15 and in PESM, and in no other program in this archive. Carried from project to project, it marks his code as surely as a signature. See it at work in ARABART.