{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Ilya Birman’s Blog: posts tagged UI museum", "_rss_description": "Ilya Birman’s blog on design, cities, music, and life", "_rss_language": "en", "_itunes_email": "ilyabirman@ilyabirman.net", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/ui-museum\/", "feed_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/ui-museum\/json\/", "icon": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "294", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/ui-museum-turbo-pascal-7-1\/", "title": "UI Museum: Turbo Pascal 7.1", "content_html": "

All screenshots for this post were made by Rakhim Davletkaliev<\/a>.<\/p>\n

About:
\n<\/p>\n

Menu<\/h2>\n

File. It’s interesting that it was F2 to save, F3 to open, even though the order is already New, Open, Save — as on the GUI systems:
\n<\/p>\n

Edit. These keyboard shortcuts for clipboard were much better than Ctrl+K,K and Ctrl+K,B from Turbo Pascal 5.0:
\n<\/p>\n

Search:
\n<\/p>\n

Run:
\n<\/p>\n

Compile. It’s always bothered me that Run, which you always wanted, had a more complex shortcut (Ctrl+F9) than Make (F9), which you never wanted by itself.
\n<\/p>\n

Destination: Memory. An interesting menu item where the value is displayed inline.<\/p>\n

Debug:
\n<\/p>\n

Tools:
\n<\/p>\n

Options:
\n<\/p>\n

Environment (we’ll get to the windows behind these items later):
\n<\/p>\n

Window:
\n<\/p>\n

Help:
\n<\/p>\n

File, Edit, whatever, Window, Help — Borland has copied this standard from the GUI OSes even though they didn’t have to. It was nice.<\/p>\n

Shortcut menu:
\n<\/p>\n

File dialogs<\/h2>\n

Open:
\n<\/p>\n

Save:
\n<\/p>\n

Change directory (in MS-DOS, there always was a current directory):
\n<\/p>\n

Printer setup:
\n<\/p>\n

Window management<\/h2>\n

Cascade mode:
\n<\/p>\n

Notice how the active window has a double border.<\/p>\n

Tile mode:
\n<\/p>\n

Window list:
\n<\/p>\n

No windows. Notice the background:
\n<\/p>\n

Working with code<\/h2>\n

A simple program:
\n<\/p>\n

Parameters:
\n<\/p>\n

Arguments (what is parameters, then?):
\n<\/p>\n

Compile-time error message:
\n<\/p>\n

Compiled successfully:
\n<\/p>\n

Information:
\n<\/p>\n

The full-stop at the end of a program is a nice quirk of Pascal.<\/p>\n

Go to line number:
\n<\/p>\n

Find:
\n<\/p>\n

Message box:
\n<\/p>\n

Notice that the main window still has the double border when a dialog is open.<\/p>\n

Replace:
\n<\/p>\n

Find procedure:
\n<\/p>\n

Debugging<\/h2>\n

Step-by-step:
\n<\/p>\n

Add breakpoint:
\n<\/p>\n

Breakpoints:
\n<\/p>\n

Call stack. Not a dialog box, so the unfocused main window gets the single border:
\n<\/p>\n

CPU:
\n<\/p>\n

Add watch:
\n<\/p>\n

Watches:
\n<\/p>\n

Output:
\n<\/p>\n

Evaluate and Modify:
\n<\/p>\n

Messages. I never knew what Messages were, and neither did the school teachers. And you couldn’t have just googled it:
\n<\/p>\n

Help<\/h2>\n

Pascal help:
\n<\/p>\n

The language syntax:
\n<\/p>\n

No search. Functions organised alphabetically in strange groups:
\n<\/p>\n

Error messages, by number:
\n<\/p>\n

There also was Turbo Help, the help system available from dialog boxes. For mysterious reasons it looked very different from the main Help:
\n<\/p>\n

Setup<\/h2>\n

Preferences:
\n<\/p>\n

Editor options. Editors of 2017 have so many options that you need search just for them:
\n<\/p>\n

Mouse options. This was not system-wide:
\n<\/p>\n

Startup options:
\n<\/p>\n

Colours. My favourite window:
\n<\/p>\n

Compiler options:
\n<\/p>\n

Memory sizes:
\n<\/p>\n

Linker:
\n<\/p>\n

Debugger:
\n<\/p>\n

Directories:
\n<\/p>\n

Tools:
\n<\/p>\n

Previous exhibit: Norton Commander 5.0<\/a><\/p>\n", "summary": "All screenshots for this post were made by Rakhim Davletkaliev", "date_published": "2017-09-28T16:24:48+03:00", "date_modified": "2017-10-11T11:43:51+03:00", "tags": [ "interface", "UI museum" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-1.png", "_date_published_rfc2822": "Thu, 28 Sep 2017 16:24:48 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "294", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-3.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-4.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-5.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-6.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-7.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-8.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-9.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-93.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-10.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-11.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-12.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-15.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-13.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-17.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-18.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-21.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-22.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-23.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-24.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-25.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-51.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-78.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-26.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-27.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-53.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-37.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-33.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-34.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-35.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-42.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-46.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-75.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-54.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-59.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-61.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-62.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-70.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-71.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-73.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-79.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-110.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-112.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-115.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-119.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-38.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-94.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-96.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-98.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-100.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-104.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-80.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-82.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-84.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-86.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-88.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tp-90.png" ] } }, { "id": "291", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/ui-museum-norton-commander-5-0\/", "title": "UI Museum: Norton Commander 5.0", "content_html": "

All screenshots for this post were made by Rakhim Davletkaliev<\/a>.<\/p>\n

The main interface<\/h2>\n

The canonical view of two directories in the Left and Right panels:
\n<\/p>\n

The right panel is active — you see the cursor and the highlighted path in the title. Use arrows to navigate the files. Change currently active panel with Tab.<\/p>\n

Alt+F1 or Alt+F2 changes the displayed volume in Left or Right panel respectively:<\/p>\n

<\/p>\n

MS-DOS uses drive letters for volumes, and the letters A and B are reserved for the floppy drives. Most computers had just one, and then the main hard drive was C.<\/p>\n

<\/p>\n

Hide the panels with Ctrl+F1 or Ctrl+F2:
\n<\/p>\n

In MS-DOS, the filename’s length is limited at 8 characters, and the extension, at 3. The dot between the file’s name and extension is not shown. Unlike the command prompt, Norton Commander displays filenames in lowercase letters and directories in all-caps. There is a special halftone pattern separating the extension of the system files like Io.sys and Msdos.sys (also they have their first letter capitalised).<\/p>\n

<\/p>\n

Ctrl+O hides both panels, for work with the MS-DOS prompt:
\n<\/p>\n

The main menu<\/h2>\n

The main menu is the one displayed on the bottom, with keys F1 to F10 mapped to the most-used functions.<\/p>\n

F1 for Help was a standard for many MS-DOS programs. I’m not sure if Norton Commander originated it.
\n<\/p>\n

F2, User Menu. The items can be programs for quick access. Here, the User Menu is empty:
\n<\/p>\n

The user has to edit a text-based configuration file to add items to this menu (press F4 while in this F2 menu):
\n<\/p>\n

The main panels are blue, the menus are cyan and the dialogs are grey. Unless they are error messages:
\n<\/p>\n

F3, View. Opens text view of the currently selected file:
\n<\/p>\n

Of course, for executables it shows “garbage”. But as far as I remember this version has the ability to set up external file viewers, so you can make it display images as actual images.<\/p>\n

F4, Edit:
\n<\/p>\n

See the Mark item in the main menu inside the editor? It has something to do with a clipboard. There was no system-wide clipboard, of course, and the programs that had this feature used very different keyboard shortcuts for it. In Turbo Pascal 5.5, I remember, there were crazy combinations like Ctrl+K,B and Ctrl+K,K.<\/p>\n

F5, Copy:
\n<\/p>\n

The Copy command opens the Copy dialog where the user enters the destination path. The input is pre-populated with the name of the directory in the opposite panel, and normally the user doesn’t edit it.<\/p>\n

F6, Rename or Move (shortened to RenMov in the menu line):
\n<\/p>\n

Why Rename or Move is one command? Because from the system point of view it’s the same: while you are within the same drive, it just changes the full name (i.e. including the path) of the file. Again, the input is pre-populated with the path of the directory in the opposite panel, so just press Enter to move there. Or type a name instead of the path to rename the file in-place. Or add the new name to the end of the path to move and change name at the same time.<\/p>\n

Moving between volumes involves actual copying and then deleting the original, but it was also done with this menu.<\/p>\n

F7, Make Directory:
\n<\/p>\n

Interestingly, the window has no confirmation button, unlike the previous ones. Just press Enter. Also notice that in the main menu bar it’s called Mkdir, not MkDir. Why? Probably, because that was the name of the MS-DOS system command to make a directory.<\/p>\n

F8, Delete. No question mark:
\n<\/p>\n

Before invoking the file operations like Copy or Delete, you could select many files with the Insert button, and they would display in yellow:
\n<\/p>\n

When files are selected, the bottom line changes to reflect this state.<\/p>\n

F10, Quit:
\n<\/p>\n

The pull-down menu<\/h2>\n

The top menu, or the “Pull-down menu” is shown when the user presses F9 (or clicks the top line of the UI, if your computer has a mouse).<\/p>\n

The Left menu sets up the Left panel. You may see many options of what to display in the panels, then how to sort it and more:
\n<\/p>\n

The Files menu lists many elements that have nothing to do with files, including Quit — not dissimilar to how the File menu is used in today’s applications:
\n<\/p>\n

Disk:
\n<\/p>\n

Commands:
\n<\/p>\n

Right, same as Left:
\n<\/p>\n

Panels setup<\/h2>\n

As you see in the menu, the panels could display a Brief or a Full view. The Brief view just shows the files, in three columns (as in the previous screenshot). The Full view shows one column of files with details:
\n<\/p>\n

In this mode, each line looks exactly like the bottom line in the panel, so why not just remove it to show two more files?<\/p>\n

You could also set up file filters:
\n<\/p>\n

Use a panel for file preview:
\n<\/p>\n

Or for search results:
\n<\/p>\n

Or for item information. Directory:
\n<\/p>\n

File:
\n<\/p>\n

Go to file (in the current directory) by typing a couple of letters of its name:
\n<\/p>\n

Other dialogs<\/h2>\n

Compress:
\n<\/p>\n

Find File. The dialog windows that have other dialog windows inside, are cyan, not grey — for contrast:
\n<\/p>\n

The inputs are shown with square brackets and dots between them. The focus is shown with a black background. Advanced search options — this window is grey:
\n<\/p>\n

Notice how checkboxes differ from radio buttons.
\n<\/p>\n

History:
\n<\/p>\n

NCD (Norton Change Directory? I’m not sure), a fancy way to navigate the folders on your disk:
\n<\/p>\n

Synchronise directories:
\n<\/p>\n

Format diskette:
\n<\/p>\n

Copy diskette:
\n<\/p>\n

Label disk:
\n<\/p>\n

Commander Link:
\n<\/p>\n

Commander Disk Cleanup helps find files to delete:
\n<\/p>\n

Honestly, I don’t remember this feature at all (but I didn’t use Norton Commander at that time because there was DOS Navigator, which is a whole different story).
\n<\/p>\n

Found something. Here, files are displayed with the dots in the names:
\n<\/p>\n

System information<\/h2>\n

System information:
\n<\/p>\n

Memory summary:
\n<\/p>\n

DOS memory blocks:
\n<\/p>\n

CMOS values:
\n<\/p>\n

Configuration<\/h2>\n

Now let’s look into the configuration dialog. Notice how the controls are organised and grouped:
\n<\/p>\n

By the fifth version, Norton Commander got colour schemes:
\n<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

<\/p>\n

The palette was limited to 16 colours. There was no way to make the colours darker in the shadows, so to simulate the darkened cyan-on-blue or white-on-cyan the applications of the era used grey-on-black. I’m not sure, but I guess Norton Commander has borrowed this visual style from Turbo Vision. The earlier versions had no shadows. If you go back to the Main menu section, you’ll notice that the help window has no shadow for some reason.<\/p>\n

EGA Lines is a mode where twice as many lines of text fits the screen. Nobody I knew ever used it:
\n.<\/p>\n

Fun fact: this post has 57 full-screen full-quality screenshots. Their aggregate size is 271 kilobytes.<\/p>\n", "summary": "All screenshots for this post were made by Rakhim Davletkaliev", "date_published": "2017-08-05T19:26:10+03:00", "date_modified": "2017-08-06T10:59:00+03:00", "tags": [ "interface", "UI museum" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc.png", "_date_published_rfc2822": "Sat, 05 Aug 2017 19:26:10 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "291", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-drvletter-l.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-drvletter-r.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-panel-r.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-panel-l.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-panels-none.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-ndc-help.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-user-menu-edit.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-error.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f3.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f4.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f5.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f6.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f7.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f8.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-selecting.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-f10.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-pdmenu-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-pdmenu-2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-pdmenu-3.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-pdmenu-4.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-pdmenu-5.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-full.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-filters.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-textview.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-find.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-view-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-view-2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-left-textview-quicksearch.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f5.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f7-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f7-2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f7-3.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f8.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f10.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-sync.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-format-diskette.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-copy-diskette.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-label-disk.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-link.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-cdc-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-cdc-3.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-cdc-4.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-sysinfo.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-memory-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-memory-2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-cmos.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-1.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-2.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-3.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-4.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-5.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-6.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-7.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-configuration-8.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/nc-menu-alt-f9.png" ] } } ], "_e2_version": 4269, "_e2_ua_string": "Aegea 12.0a (v4269e)" }