The conventional mouse interface is too simplistic for drawing vectors. Try out the demo below to experience a completely different setup for vector drawing that uses the keys to click, instead of using mouse buttons.
DRAWING:1. Press the F key to deposit a point.2. Move the mouse. 3. Press the F key again to deposit another point. 4. Repeat until you wish to press an END key: A - END the stroke path. E - END and fill the shape. R - END and stroke the shape. S - END and fill+stroke the shape. |
SELECTING AND DRAGGING:1.Select objects with Tab.2.To drag the selection, turn on the drag-lock with SPACEBAR, then move the mouse. (Press it again to turn it off.) 3. Stamp a selection with W while dragging. 4. Scale a selection down and up with [ and ]. 5. Rotate a selection forwards and backwards by 15 degrees with ; and '. 6. The Esc key will also cancel the selection and dragging. ADJUSTING STROKE WIDTH:1. To thin or thicken the stroke, use C and V. |
It's understandable that a person feels uneasy using the keyboard and mouse this way for controlling software. However, the key-click UI is solving a real problem: the mouse provides limited dexterity for the user.
During the original 1968 demo of the mouse by Douglas Engelbart, there was a five-key device sitting to the left of the keyboard. The mouse was placed to the right of the keyboard. This five-key device was later dropped at Xerox PARC, but it was part of Engelbart's setup.
In professional media production software today, such as video editors and 3D modeling programs, the mouse is used to simulate a hand on the screen, but that would be a single finger, only able to click one button at a time.
The key-click UI breaks away from this confining setup and repurposes the keyboard keys as a set of buttons for a machine. The keyboard and mouse are reconfigured to provide mechanical controls. This is more appropriate for software, especially applications like video editors where there are constant interactions with mechanisms, like the timeline. Mechanisms pervade user interface but have always disappeared into the screen as something more vague in experience. For example, the scrollbar is a mechanism. The system menu is also a machine containing menu items that drop down.
For the future of software, this key-click is the best modification for desktop computers as they are owned by consumers across the world, if the goal is the match a mechanical controls with the user interface.
Although the key-click UI appears to be trivial, a mere hack at first, that is only if it is left in a basic state like the demo above. The key-click UI can provide the core UI component of a new type of software, and this demo on this page is just what is provided as an introduction, so it isn't going to address every aspect all at once. There are other points to discuss about implementing it comprehensively, such as that text fields, sliders, and everything else should be modified to match what it provides.
Once practiced for a period of time, the key-click UI becomes natural and preferred over the standard use of the mouse for software.
An app under development, called Floating Marker, is the origin of the key-click UI. For the benefit of developers who use GitHub, the key-click UI is demonstrated on this page. Its applicability extends beyond vector-drawing to software situations of all kinds. It can take over the positioning of windows, the dragging of nodes in node-based programming, the connecting of nodes (with lines), and the changing of values in sliders and other controls.
All desktop computers are equipped with keyboard and mouse, and the key-click UI is a convenient upgrade for interactive vector graphics software.
Only straight segments were drawable in the basic demo above. In Floating Marker, curves have been implemented with these straight segments through the b-spline (similar to Bezier paths). The b-spline has the characteristic that it is rather pliable. It can be shaped for different purposes programmatically in combination with the key-click UI. For example, Noctivagous uses its own data structure made of composite spline points that bow (bend) the line, as shown in the video below.
For a vector graphics program, shapes can be drawn because a vector line can be used by a program as:
Other uses of the key-click UI are possible besides making vector-graphics.
In the same way that vector shapes are dragged, the drag-lock can be used to move windows on the screen, with the scale buttons letting the user shrink them, etc. It is possible to implement an entire desktop UI in the key-click UI, with no mouse clicks.
For the desktop UI, the vector line can serve as:
The key-click UI is an improved software user interface for the desktop computer.
A software program that implements the key-click UI treats the keys
on a keyboard as click buttons. The mouse buttons are ignored except for
the purpose of accommodating the old habits that all users have.
After a person becomes accustomed to the key-click UI, he or she will
want it implemented across all of desktop user interfaces.
The concept is that there is currently too much work assigned to an individual mouse hand. Compared to the key-click UI, the mouse hand is currently overstressed. It has to do two things at once: coordinate the position of the cursor and click the buttons with the index finger.
In a vector-drawing program, especially, this is too much; the standard mouse interface is too simplistic for drawing vectors. Thus, to establish a normal situation for drawing vectors with a mouse, it's important first to modify the overall interface.
Separating the click from the mouse divides the labor of directing cursor activity to two hands instead of one. This leads to a leap in possible dexterity. Each hand has been given its own role: the mouse hand just moves the cursor and the clicking hand just clicks with keys. This opens up a totally different interactive dynamic with the desktop computer, because previously there was never such alternation occuring between two hands (move, click, move, click). But importantly, many more "click" buttons are available, because any alphanumeric key can serve as one.
As shown in the demo above, to select an individual object, you press the tab key, and it is selected immediately underneath the cursor as if you had pressed shift+left mouse button. The tab key selects and de-selects. It is the selection click.
Though any key could be used for this, tab has been chosen because of its location on the keyboard that makes the keyboard behave as live controls instead of character entry for a program.
The purpose of assigning shift+left mouse button to the tab key is that the key-click UI works better with the shift modifier for selections most of the time. The interactive dynamic has changed, and it is far easier to select multiple objects at a time with the key-click UI. Tweaks and modifications like this are needed to make the key-click UI translate existing conventions. Just like before, clicking outside of the selection de-selects everything.
In a convention specific to the key-click UI, the tab key has been paired with the spacebar key to move objects around the screen. It is possible to use any combination of keys, but these are very large and they will be tapped frequently as buttons of a machine.
To drag an object, press the spacebar key after the object has been selected (using tab click), and the object moves in lock step with the cursor. This is a drag lock, affixing objects to the cursor relative to their position at the time of the drag lock. To release the drag lock, press the spacebar key again and then the objects are left at their location.
For ease of providing upfront terminology this is called a drag-lock, but it is also called "carting" by Noctivagous, in place of "dragging". It is named as such because a cart moves its contents smoothly using wheels on the ground whereas the dragging of something on the ground makes lots of noise. That is the degree of UI improvement that carting (a drag-lock) provides.
If the Escape is pressed and there is any drag lock occurring, it will be turned off. The current selection will be canceled as well. Using the Escape for this is not only a convenience, it fits into the whole of using of the keyboard to click when using the key-click UI.
Moving objects around on screen is very smooth when a drag lock is used in the way described above. But in addition to this, it provides opportunities to operate with the selection or apply functions to it in real time.
In a vector-drawing program, the drag-locked selection can be scaled up or down with the bracket keys ([ and ]). In the demo, the two keys below the bracket keys (; and ') rotate the selection by an increment of 15 degrees clockwise and counterclockwise. The selection can be stamped with the E key during the drag-lock. So this means that transformed copies of the dragged selection can occur in real time. This is what Floating Marker uses for its vector-drawing user interface.