A tool to think with, allowing the user to easily map out their space. Therefore the layout must be user controlled.
This is seen as as tool for thinking about relationships, first and foremost.
- Initially inspired by Scapple
- Typeface Helvetica.
- Light grey bgr. #f8f8f8
- Black text and lines.
Different from Scapula (visual and interaction)
- The grey, not beige background.
- Dragging a node should be in real time, with real time update of lines.
- No bar at the bottom of the screen.
- Pinch or cmd- cmd+ should not zoom screen but scale any selected nodes text.
- Double click/tap to add a new node. A dialog appears, as is shown in the About section below. On creating a new node all others fads into 10% opacity.
- Double-click node and all others fads into 10% opacity and box with drop shadow appears, same as when creating a new node.
- Click and drag onto other node to add grey line.
- Click and alt-drag onto other node to add black line with arrow.
- Click/Tap to grey all other connections and nodes to 10% opacity, as shown here. Tap outside to revert to normal mode.
When click/tap and move, make all other connections and nodes 40% opacity. This happens whether the node was first clicked on/tapped or user goes straight to click and move:
This might be the most important part – what we can assign each node as being all about.
Each node is created with a set of fields which are shown in a dialog box when the node is double clicked/tapped.
Note, this illustration is for general design. For the actual fields refer to the lists below, since they will change as the project develops.
- Title (once node is created, this shows as heading, not editable, however double click to edit)
This section is about whether the node should be presented as an icon/screenshot or picture, or if it should be simply the heading text. Therefore any one chosen below will grey out the others (user can still use any other, thereby greying out the previously chosen one).
- No. Keeps this as a simple text heading. Default.
- URL to web resource. If used, a screenshot of that web page will be generated and used as the image.
- Link to other Liquid | Space document: (this can be searched for or dragged onto this field. If so, the screenshot of the other document canvas will be used in the picture field below, to give a sense of seeing through).
- Picture: (allows user to drag a picture here which will then be the node, with the heading below it. user can also drag a picture from desktop onto canvas and spawn this dialog with the picture in this field automatically shown.
This node is a: [pop-up list of types which all have icons, such as lightbulb, + sign, – and so on] If this is chosen AND an external resource (which all have screenshots or pictures), then this will show as a small badge, lower right in the screenshot or picture. If not then this will be used above the node title, same as a picture or screenshot.
I have not thought this section through yet. I am not sure if we should let the user choose this or let it be chosen through choosing a type of node.
- Shape of this node: (none, box, circle, rounded box, triangle, hexagon, pentagon)
- Colour of Outline:
Each connection to and from the node can be tagged, giving the user a way to categorise them.
I am not sure how we should decide on categories and how they should be illustrated.
User can drag and drop text from Author to Liquid | Space and headings will turn into nodes which are connected by normal (grey lines). Saving the .space document will be linked to the original .author document and if the user adds nodes in Liquid | Space, the .author document will add the nodes as headings int he original .author document
Any .space document can be inserted into a .author document and the a preview .png will show the canvas, while the full .space document is saved inside the .author document. If double-clicked, the .space document will open in Liquid | Space for editing/interaction.
- Compatible with OS X El Capitain
- Modern architecture including continual auto-save.
- Full screen support.
- Save as a .space which includes an image preview which is a full size screenshot.
- Export as transparent .png
- Multiple undo.