Colour Coding - Part 1

The 800 x 600 VGA display is partitioned into 16 "Keyholes" or code windows

Colour Coding was a quick Sunday afternoon hack to see if there might be a better way of presenting a coding environment to the human user.

The code was written in "Arduino" and running on a ZPUino soft core processor hosted on a Papilio Duo Spartan 6 FPGA board.

This combination was chosen because the ZPUino supports VGA generation hardware, and can make use of the Adafruit GFX common graphics library.

This is just a trial mockup of how code might look if presented in a radically different format on a VGA screen - plus it's a means of trying out some ideas - of what might work, and what won't.

These big bold, bright displays can easily be generated with modest hardware and limited processing power.  However they have their application for FPGA projects that need to generate more than just a UART output - but create an interactive graphical user interface on a big LCD monitor.

Historical Note 

The traditional screen editor has been around for about 45 years - ever since serial terminals could rapidly update a whole page of text and show screen cursor and editor operations.

Expressing source code as a linear text file has always been accepted as one the easiest means of getting source code into a compiler, so that the various functions may be compiled in the order that they appear in the text file. Its a throwback to paper tape and punched cards that were fed in and read in sequence until the end of the tape or card deck was reached.

This might not be the best way to organise source code for display - especially, as in the case of Forth, and certain object oriented languages, where the source consists of a lot of very short functions.

Forth traditionally organised it's source into 1024 byte blocks - as these were seen to be a convenient size to edit, update and store on the disc.  A 1024 character block of source code is just 32 lines of 32 characters, and on a modern display 1024 x 768 screen - at a comfortable text size, this occupies about 1/15 of the screen viewing area.

The text in the white keyhole is 32 x 16 characters

Colourful Times

Text has traditionally been in monochrome, but more modern editors have started to add colour to the text in order to signify meaning.

Colour is something that is so simple to overlay over monochrome data - even in chunky VGA text, that it is surprising that not more use has been made of it. Indeed whe I edit pcb layouts in EagleCAD - the only way I can distinguish the top layer tracks from those of the bottom layer is by the use of bold colours.

The same process could be applied to text - making it more readable and conveying meaning through the colour attributes.

The text is almost the same as a screenful of ZX81 BASIC

Micro-Windows or "Keyholes"

Perhaps there might be a  better way of presenting source code on the screen, rather than having to constantly scroll up and down the text file looking for the function that you wish to edit.

Using standard 1024 character Forth blocks, it would be practical to display up to 15 blocks arranged as a 5 x 3 array. The background colour of each block would be set to be different to that of it's neighbours, for ease of visibilty, and using the mouse or touch pad, each of these "micro-windows" could be brought into focus, to allow editing, compilation or execution of that block.

Each micro-window would have access to its own toolset: edit, compile, execute, save etc accessed from buttons along the base of the window.

Where a high level code definition was dependent on certain lower definitions, then those lower definitions could be colour-tagged to show the dependency tree.

Micro-Windows is such a dreadful constructed name, perhaps "porthole" or "spyhole" or even "keyhole" may be more appropriate.

Small Objects of Desire.

Much of modern application development is done in object oriented languages,  where objects are created from data structures, and those structures are manipulated by methods. An object plotted to a screen might take the form of a Red Ball,  located at a certain x,y position on the screen and with a certain diameter and colour.  Further attributes could be used to describe it's shading, transparency or what graphics layer it resides on.  The use of keyholes might be a good way to present the attributes to the developer, such that they could be edited.  Likewise the method scripts that manipulate the objects could be viewable through the porthole system.

Mouselection   

Another questionable made up word, however, one that describes the selection and subsequent viewing of a particular block of code based on its colour.  A great deal should be possible by partitioning the overall screen view into zones, and sub-zones defined by colour.  When the mouse mouseovers or lands in a zone or subzone the options are immediately highlighted.

Multi Processor Arrays

The array of keyholes might be a good way to view tasks that are distributed across arrays of multi processors.


TBC