PROTODOCUPLEXTRON
PROTODOCUPLEXTRON
VISIBLY-LINKED PARALLEL NOTECARDS
This is an editable Web page that allows you to work with text as a collection of movable items (cards, galleys, panes – I use all of these terms interchangeably). It has the novel feature of being able to display pointers between linked elements.
This is the root item. Hidden items in the document are listed at the bottom of the root item and can be opened by double-clicking on their titles.
To learn how this thing works, double-click on the item below, titled "1. Getting Started".
Alternatively, you can skip the tutorial for now and read more about the PROTODOCUPLEXTRON here: About.
Note: The scrollbars in this window are disabled. To scroll/pan around the document, hold the Alt+Shift keys and move your mouse.
1. Getting Started / Activation / Arrangement
Getting Started
Now that you have a couple of items opened-up, I can show you how to move them around, change their sizes, and file them away.
Activation
Before we do anything else, click anywhere on this item to make sure it's activated. You should see that its outside edge is highlighted red. You may also notice that when you click on an item, the text at the bottom of the browser window changes and tells you which item has been activated. Ignore the numbers and letters in parenthesis for now.
The PROTODOCUPLEXTRON is intended to be as keyboard-operable as possible, so there is another way to activate items without the mouse: Alt+left/right will activate the items adjacent to the currently activated item.
Arrangement
Now let's try rearranging items. If you hold down the Alt and Shift keys, and then press the left arrow key, this item will move to the left of the root. After you've done that, press Alt+Shift+right to move it back to the right. As you open and create items, they'll stack side-by-side, and by using Alt+Shift+left/right, you move the active item through the stack.
Sometimes you'll want more than one row of items, though. To demonstrate that, let's get the next item opened-up. Click on this link: 2. Rows and Panning
2. Rows
Breaking Rows
As stated a moment ago, items want to stack side-by-side continuously; they'll do so until you explicitly break the row. To do that now, click on this item to make sure it's activated, then press Alt+Shift+down.
Remember that to scroll around the workspace, you hold Alt+Shift and move the mouse.
What we've done is inserted a row-break marker between this item and the Getting Started item. The marker is sort-of an invisible item which tells the PROTODOCUPLEXTRON where to move everything down a row. If you activate the Getting Started item and press Alt+Shift+right, you'll see that it moves past the row-break marker and joins this item at the beginning of the lower row. Try that now.
You could move all of the items back up into the top row by activating them one-by-one and pressing Alt+Shift+left to move them past the row-break, but the marker would still be there at the end of the row. To erase the marker and re-join the rows, activate the left-most item on the lower row and press Alt+Shift+up.
Next: 3. Size and Toggling
3. Size and Toggling
Changing Item Size
Activate this item and press Ctrl+Alt+right a few times. As you see, this makes the item incrementally wider. Conversely, if you press Ctrl+Alt+left, the item grows incrementally narrower. As I'm sure you can guess, Ctrl+Alt+up and Ctrl+Alt+down make the item taller and shorter – sort of. While the item width is explicit, the height is not; when you adjust the height, you're actually setting a boundary, a maximum height. Items with small amounts of content are, so to say, shrink-wrapped to their contents.
Toggling
Items can store one alternative size specification, and you can easily toggle between the two by double-clicking on an item's title-area. To see what I mean, double-click on this item's title-area now.
The item, as you can see, is wider. If you double-click the title-area again, the item will toggle back to its previous size. The item only remembers the current size, and the previous size, but having a pair of view-sizes is sometimes handy for larger items, particularly when editing. 4. Editing
4. Editing / Command Palettes
Editing
Hold down the Alt key and click here -->
Now type something.
As you can see, the item has become editable. To turn editing back off, simply Alt+click in the item's body again. The item body supports bold, italic, underlined, superscript and subscript text, as well as headers, horizontal rules, and links – basically, anything you can do in HTML/CSS is available to you, one way or another. Formatting commands are issued via key combinations, but don't worry about memorizing them all. The PROTODOCUPLEXTRON makes use of command palettes, which you shall become acquainted with presently.
Command Palettes
Let's first introduce the Selection Ops palette. If this item isn't already editable, make it so by Alt+clicking on it. Next, invoke the Selection Ops palette by pressing Alt+C. You should see it now in the upper-right corner of the screen. When the command palette is visible, it means the PROTODOCUPLEXTRON is awaiting a keypress to perform a command. If you decide you don't want to issue a command, you can dismiss the palette by pressing the escape key or clicking away from it.
To see how this works, select some text in this item and press Alt+C to invoke the Selection Ops palette. Next, press the B key to embolden the text you've selected. You can undo this by pressing the usual system undo command, Ctrl+Z. Alternatively, you could select the text again, press Alt+C to activate the Selection Ops palette, and press F to strip all the formatting from your selection.
The sky is really the limit with what you can do inside an item, and you can certainly jump ahead to the Advanced Editing section if you like, but it might interest you first to learn how to Dismiss, Delete, and Create items.
4b. Advanced Editing
Advanced Editing
If you know some HTML/CSS, then you can do some pretty complex document markup, because you can write literal HTML code in an item, select it, and parse it in-place. Try it out!
Enable editing in this item by Alt-clicking on it. Then, highlight the following code:
<big style="font-family: monospace;"><i>Formatted</i> big text!</big>
And then open the Selection Ops palette with Alt+C, press M (for HTML) and ... POW! How 'bout that?
The extent to which you can do this is limited only by your imagination. You can even put Javascript in there. Try this one:
<span onclick="this.style.backgroundColor = '#' + parseInt(Math.random() * Math.pow(2,24)).toString(16);">Click me to see my background color change!</span>
As mentioned in the Editing item, you can later strip markup from a selection with Alt+C, F ("strip[F]ormat"). If, however, you want to expose markup so that you can edit it, there's an option in the Item Ops palette to convert an item's contents to HTML – Alt+X, M ("expose [M]arkup"). It doesn't do any pretty-printing, so ... it can be a little tricky to read through. But once you've made the changes you want, you just re-select the item's contents and parse it again (Alt+C, M – remember?).
5. Dismiss, Delete, Create
Dismissing Items ("filing away")
Sometimes you just want an item to go away. Not forever, but to get it off the screen. To do this, hold the Ctrl key and double-click the title-area of an item (pan over to one of the previous items and try it out). This "files away" the item into the section at the bottom of the root node. Remember when you double-clicked on "1. Getting Started" at the very beginning of the tutorial? That item was filed-away, and you can double-click on any of the filed-away items on the root node to restore them for viewing, or Ctrl+double-click on any open item's title to file it away for later.
Creating and Deleting Items
When you finally do want to get rid of an item forever, or to make a new one, you'll use commands on the Item Ops palette.
The Item Ops palette is invoked by pressing Alt+X. It works the same way as the Item Ops palette, but instead of performing commands on the current text selection, it performs commands on the active item itself, or the PROTODOCUPLEXTRON in general. Let's create a new item and then delete it to see how it works.
Make sure this item is active by clicking on it – Item Ops are performed on or relative-to the active item – and then press Alt+X to invoke the Item Ops palette. Next press N to create a new item to the right of this one. To delete the new item, activate it by clicking on it, then press Alt+X followed by the D key. Simple!
For our next trick, let's try to make some links: 6. Links
6. Linking
Basic Linking
The simplest kind of link to make is a run-of-the-mill HTML hyperlink, which you can do by selecting some text, pressing Alt+C, L, and then putting a URL in the dialog. Easy peasy.
Links To Items
Next, you might want to link to an item within the current document, so that when the link is clicked, the item will open from the file-away area if it's hidden there. For this, it's the same as a regular HTML hyperlink, but the URL you will use is the item's selector, or ID. Remember that when items are activated, the black box at the bottom of the window changes to show which item is active; the 8-letter alphanumeric code in parenthesis is the item's ID. So, to link to an item, activate the target item, select its ID from the info box – including the hash (e.g., "#k1l2m3n4") – then select some text in the document that will be the link anchor, press Alt+C, L, and paste the item ID into the URL field. Easy... peasy?
Visual Links
Finally, we have the PROTODOCUPLEXTRON's fanciest feature: the visual link! It's terribly fancy!
Visual links or "vlinks" are bi-directional hyperlinks with a line connecting them. The best way to experience their grandeur is to make one.
Open-up a couple of items and make them editable. Then, place your cursor somewhere that you'd like to place a link and hit Alt+C, V ([V]isual Link). A link will be created that just says "link". You can change the text, of course. Now take note of the fact that the status area at the bottom of the window says:
Backlink inserted. Place cursor at forelink location and press Ctrl+C, V to insert it.
The DOCUPLEXTRON is waiting to insert the other end of the link. So let's do that. Place the cursor somehwere else – in another item ideally – and press Alt+C, V again.
Voila! Do you see that witchcraft?
How, you may ask, is this useful? I don't know! But it's there if you need it. Each end of the link points back at the other end, so you can flip back and forth between far ends of a workspace, for example. The pointer lines can be a handy indicator of the fact that the other end of a link is open in the workspace, but off-screen. Perhaps you have a use-case that's interesting. Perhaps not!
If the two-way link is handy, but the lines drawn across items are not, you can toggle the link-lines from the Item Ops menu (Alt+X, V – [V]links toggle).
Enough of all that? Okay, just one more: 7. Containers.
7. Containers
Nested Layouts
The last thing I added to the PROTODOCUPLEXTRON was a layout container feature. Here's how it works:
As you know, items want to lie side-by-side, and they'll continue to be opened and created to the left and right of each other until you insert a row-break. They behave like the letters in a string of text. With a container you can group multiple items together so that you can do nested layouts. Let's just jump into an example.
Activate this item and create a container around it with Alt+X, C.
Next, create a new item with Alt+X, N.
Now, try to move the items around with Alt+Shift+left/right. You'll see that they only move relative to the other items inside of the container. If you select the new item and insert a row-break before it with Alt+Shift+down, you'll see that it moves down to a new row within the container.
To get items out of the container, they must go out through the bottom. Activate the new item again and press Alt+Shift+down one more time, and you should see it pop out of the container and move to its right side. To get it back into the container, it has to go in through the top. Use Alt+Shift+left to move the new item to the container's left side, then Alt+Shift+down to push it into the container.
Confused yet? I sure am!
When all items have been moved out of a container, it should collapse and disappear.
This is a great feature for doing more complex item layouts, but the controls are a bit goofy, and it's got some weird behaviours. I never really designed/tested/debugged it properly. Use at your own peril.
A. Quick Reference
KEYBOARD Commands
-----------------
Global
======
Alt+Shift + mouse move . . . Pan the workspace
Command Palettes
================
Alt+X . . . Item/Global Operations
Alt+C . . . Selection Operations
Selecting Items
===============
Alt + right . . . Select item to the right of the current selection
Alt + left . . . Select item to the left of the current selection
Moving items ============ Alt+Shift + <-- . . . move item left (back) in stack Alt+Shift + --> . . . move item right (forward) in stack Alt+Shift + down . . insert row break before active item Alt+Shift + up . . . remove row-break preceding active item
Sizing items
============
Double-click on title area . . . toggle sizes
Ctrl+Alt + <-- . . . make item narrower
Ctrl+Alt + --> . . . make item wider
Ctrl+Alt + up . . . make item's maximum-height taller
Ctrl+Alt + down . . make item's maximum-height shorter
SELECTION OPERATIONS (Alt+C palette)
------------------------------------
M . . HT[M]L . . . . Parse the selected text as HTML code
L . . hyper[L]ink . . Make the selected text into an <a> link
V . . [V]link . . . . Place one end of a visual link at the cursor.
The pDPTron will place the other end when you
press Alt+C,V again.
ITEM OPERATIONS (Alt+X palette)
-------------------------------
[V]links . . . . Toggle visual link line display
[C]ontainer . . . Place a container around the currently selected item
[E]dit . . . . . Toggle the editability of the current item
[F]ile-away . . . Hide/Show the current item into/out-of the root item
[S]ize . . . . . Toggle between alternate sizes
[N]ew item . . . Create a new item to the right of the current item
[D]elete . . . . Delete the current item
expose [M]arkup . Convert the item's contents to editable HTML
[W]idth . . . . . Explicitly set item width
[H]eight . . . . Explicitly set item max-height
[T]itle . . . . . Set item's title
B. Parallel Textface
Background
Below is a photograph from 1972 showing a mockup of a parallel textface with transpointing windows: two documents (or two views of the same document), side-by-side, with visual indicators of shared or related content — lively indicators that move and update with the content.
This interface paradigm has been an essential component of the Xanadu hypertext system, first conceptualized by Ted Nelson in the early 1960s.
I happen to be something of a devotee to Dr. Nelson's concepts, and would like someday to see a functioning, ubiquitous hypertext system based on his original designs. If it has to be implemented as an application within the framework of the World Wide Web, so be it.
i. ABOUT
PROTODOCUPLEXTRON: Sort-of A Tool For Doing ...Stuff
It may be debatable whether this is a tool or a toy — though there's no rule that says things can't be both, is there?
I programmed this in 2013 as one of a series of experiments implementing a parallel textface with transpointing windows in the browser (simple SVG pointers between elements is not terribly hard, it turns out). I didn't really use it, but I thought it was interesting. I added a few features in the spring of 2016 and then, again, didn't use it. I'm writing this at the tail-end of 2020, having fixed some bugs and written this little documentation 'plex. Will I use it now? I dunno! But I still kind-of like it.
What can you do with it? Well... you're lookin' at it. You can edit a document as a series of cards/pages, rearrange them, and have visible links drawn across them. That's it! Not terribly exciting, I'm sorry.
I do think it has some utility as a writing tool. The visual links are novel. I forked and scrapped a couple of derivative tools/systems from this in the early design phase of what ultimately became the DOCUPLEXTRON and Alph, my xanalogical Web project. This makes heavy use of document.execCommand(), which apparently is deprecated and could be removed from the mainstream browsers at any time, so... that's cool.
The Author
The PROTODOCUPLEXTRON, a thin layer of cruft on top of two decades of Web browser development by far more clever people, was devised and programmed by Adam Moore/LÆMEUR. If you have feedback, questions, or idle thoughts, I can be reached.
License
Do whatever, y'all.
Version
This document was last modified on 2020/12/18
protodocuplextron.js was last modified on 2020/12/18
protodocuplextron.css was last modified on 2020/12/12
ii. DOWNLOAD/INSTALL
Download/Installation
If you would like to make/save your own protodocuplexes on your computer, you just need a directory to put them in along with the required Javascript and CSS files. Here's a zipfile with the tutorial 'plex that you're currently reading, and the JS and CSS files: protodocuplextron.zip.
Unzip it to the directory of your choice, open the .html file in your browser, and save new or modified protodocuplexes in that same directory. Simple!
iii. SAVING
Saving Your Work
The root item has a [SAVE] button. This is actually a link that will let you download – so to speak – the current document from the browser. If you want to save it to a specific location (most browsers don't prompt for this, they just save to your "Downloads" folder), you can right-click on the [SAVE] button and choose "Save Link As..."
If you want to be able to view/edit the files in the way you can view/edit this one, you'll need to have downloaded and installed the PROTODOCUPLEXTRON Javascript and CSS files on your computer; then, when you save the current document, you'll wnt to save it into the folder with the JS/CSS files.
If you did not and/or do not want to download the JS/CSS, you will still have a nice, unstyled HTML document with everything you wrote in it.
Or, if you're handy with a text editor, you can just edit the HTML file and change the URL for the <script> element to this, and the stylesheet <link>'s 'href' to this. The danger there, though, is that if I make breaking changes to those files on the Web server, you may end-up with a borked document. It's safest to save the document alongside the version of the script/style files it was made with.