Introduction to Publishing.

As covered in previous sections there are several ways to extract, export and use creations made in Mindmatters. With the additional option to Publish your creations Mindmatters provides a suite of unique functionality. Publication options can be managed via the Publisher Control Panel.

Publish Control

The first button opens the Publication Editor Menu. All Settings relating to the behaviour of this diagram can be managed from here.

The second shows a preview of the diagram in interactive mode, based on current settings.

The final button opens the Publication Manager Menu. From here publications can be added, deleted or updated.

Published diagrams are stored on our database and a permanent URL is generated. When shared with other users this allows access to the interactive version of your creation, without being able to edit, change or even access the diagram on which it is based. Currently all users are able to upload three free diagrams.

temporaryThere are currently no options available to increase the number of published diagrams. Although this will be added in future development cycles.

Interactive Shapes and Diagrams

Every shape within your diagram has one of three states in publish or preview mode; Open, Closed or Selected.

A "Closed" shape remains closed when clicked by a user. An "Open" shape becomes "Selected", and a "Selected" shape becomes "Open" ie Toggles between the two states.

Special custom commands and visual effects can be assigned to run anytime a user interacts with a shape (such as with a touch screen press, mouse click or hover over). By using these options it is possible to create anything from simple interactive displays to complex, multi functional presentations. Shape states can also be set through custom commands.

Publication Editor Menu

There are five tabs on the Publication Editor. The general function of each is described below.

TabFunction
General Settings Contains the options for diagram level options, including background colour and the default behaviour of shapes.
Individual Shape Settings Contains a number of display options that can be set for individual shapes within the diagram. Events and commands can be set to run on user interaction.
Custom Commands Contains user defined special functions that allow a range of custom functionality.
Presentation Areas Areas are special shapes that define specific areas of the diagram. This can be used to control zoom levels for different view screen size or as interactive navigational areas.
Special Effects and Menu Options Design and create effects that can be applied to shapes (interactively or with commands). Set menu icon sizes.
Publish Editor
The Presentation Editor Menu

General Settings

The General Settings sections contains a number of controls that control the general behaviour of interactive elements within your diagram.

The "Selection Mode" contains a number of prebuilt modes to simulate most common needs. By default all shapes are Closed, interactivity is enabled but users cannot drag/drop any shape. No interactive events are assigned by default and so the diagram is simply displayed.

Other selection modes consist of; "Free (All Open)", "Free (Mind Map)", "Strict (Flow Chart)". The settings associated with each are explained in the following table. They can be used unmodified or as the starting point for custom settings.

General Settings
General Settings

Quick Settings

ControlFree (All Open)Free (Mind Map)Strict (All Closed)Strict (Flow Chart)
Starting Open All All None Parent Nodes
Free Camera
Camera Controls
Zoom
When clicked...
Opens Children
Selects Parents
Deselects Peers
Deselects All
Interactive Shapes...
Disable Interactivity
Allow Drag/Drop

Controls Explained

Diagram Background Controls

Background controls allow control over background colour and grid line visibility to ensure that the appearance of a published diagram appears as the designer intends.

Shape State Interactivity Options

Although state related effects and commands are disabled for general settings (and must be added as Individual Shape Settings), camera and tint controls can be used.

The "Camera Over On" control can be used to centre the view screen over the shapes to create navigation behaviours (eg centring on a shape when selected). Coloured tints can also be used to add quick visual distinction between shapes in different states (eg a dark tint can be added to closed or disabled shapes).

It is possible to apply any shape effects to any links it has.

Visual Effects and Menu Options

Effects are range of visual effects that can be applied to shapes and shape components by assigning them in individual shape settings or by running custom commands. Effects consist of four basic varieties; blurs, glows, outlines and shadows.

Multiple variants of each basic type can be designed from this menu. Likewise multiple effects and/or variants of the same effect type can be applied to shapes.

To preview any of the currently selected effects, select the appropriate effect type and open the preview menu.

This example shows the default shadow effect assigned to the demonstration shape.

Effect and Menu Settings
Effect and Menu Settings

The menu settings control defines the size of icons in the control panel.

Effects
Effect Preview

Presentation Areas

Presentation Areas are pre-set portions of the diagram that help control how they are presented to users viewing the published shape. They can be referenced in custom commands and contain useful camera functions that can help users define how diagrams are displayed on different display sizes.

Coordinates and height/width measurements for all Presentation Areas are listed on this page.

Checking "Expand" forces the area to resize content to fit the view screen.

Checking "Shrink" will shrink all content within the area to fit the view screen.

These options can be used together or individually and areas can overlap.

Presentation Area Manager
Presentation Areas

Custom Commands

Custom Commands are the most powerful presentation feature in Mindmatters. They can be used to control most shape and diagram properties and offer flexible ways of building custom presentations for audiences. By default new diagrams begin with a single command; a camera control triggered at the start of the presentation to move the diagram to its centre point.

Options to add additional commands or duplicate/delete existing ones can be accessed from here. The command can be edited by clicking it's button.

As complex creations can consist of large numbers of commands this form also contains filters by Command Type and by Command Trigger to aid searching and editing.

Presentation Commands
Custom Commands

Building Custom Commands

Command Types

A new command has no assigned properties and when the Command Editor is launched only the main Command Type control is shown. Commands can be one of seven types:

TypeDescription
Camera Commands to move the view point to co-ordinates, predefined areas or shapes and control zoom levels.
Screen / Diagram Commands to switch diagrams (changing the URL), to capture and download screenshots or to create and edit custom variables.
Sequences Commands to control other commands. Can be used to build complex sequences and loops of commands and animations.
Shape Commands Commands to control numerous properties of shapes within the diagram.
Shape Collection Commands Similar to Shape Commands but designed to cycle shapes connected with similar IDs.
Menu Commands Commands that control and manage buttons on the control panel.
Shape Link Commands Commands to edit and manage links between shapes within the diagram.
Edit Commands
Custom Command Editor

Selecting a value opens the next series of command options until complete. Many commands have several settings in common including time, speed and trigger. Generally speaking any numerical variable that changes over time will be animated (eg shape and camera movement). These animations can be chained together using sequence commands.

TemporarySpeed is not implemented. Use time for animations or delays etc.

Finally all shapes can be given a name, to help with managing and identifying them.

Camera Commands

Selecting the camera command type gives the following options

CommandDescription
Diagram Default Returns the camera to the defined diagram centre position.
On Area Moves the camera to a predefined Presentation Area. Zoom changes are yielded to the Presentation Area's settings.
Cycle Area Collection Cycle between a range of Presentation Areas in ascending or descending order. Assigning a Named Index allows different commands to share the current index position.
To Point Moves the camera to a specific point defined by x and y values
On Shape Moves the camera over a specific shape in the diagram
Zoom Alters the current zoom level (default 100%) without adjusting the camera position.
Screen / Diagram Commands
CommandDescription
Change Diagram (URL) Opens a different diagram including the option on whether to load in an additional browser instance or navigate away in the active window.
Download Screenshot Downloads a snapshot of the diagram to the user's system, using a preconfigured file name.
Set Variable Creates and/or assigns the supplied value for a variable that can be accessed and used by other commands. Arrays can be created by passing comma seperated values enclosed in square brackets eg [a,b,c]
Start Video Starts recording a webm video of the diagram.
Stop Video Stops the recording of the webm video and triggers a download.
Sequences

Sequences are critical to the creation of functional diagrams as they represent a way to execute and control groupings of commands and animations.

Sequences are divided into five phases, into which one or more commands can be placed. Individual commands in each phase run simultaneously, but subsequent phases will not run until the earlier ones are complete.

In addition to sequence phases, additional playback options can be set. Individual phases can be set to repeat, as can the sequence it its entirety.

It is possible to nest sequences within each other. So in this way, sequences can be used to package similar groups of commands for convenient management.

Sequence
Sequence Commands
Shape and Shape Collection Commands

Shape collections can be effectively created by using a common ID with an attached numerical ID. Three shapes called "Box 1", "Box 2" and "Box 3" would form a "Box" collection and a shape collection command could be used to affect these shapes sequentially. This presents an alternative to shape commands tailored to individual shapes (although editing internal components in shape collections is not possible).

Selecting "All" means that all shapes within the group are affected simultaneously instead of sequentially.

Assigning a named index to a collection allows different commands to share the current index position.

CommandDescription
Apply Filter Applies one of the defined effect variants to the shape.
Copy Text to Clipboard Copies the text content of a shape (if any) to the clipboard.
Change Property Hide or show the shape. Set transparency level or change rotation.
Edit Internal Change the properties of one of the shape's internal components. Subsequent options depend on the type of internal component selected.
Move Shape By... Shift the shape's position by a specified number of pixels.
Move Shape To... Shift the shape's position to a specific point.
Resize Shape Alter the shape's size.
Change Z-Order Alter the shape's display order.
Path - Plot Path Allows the calculation of x or y values based either on input or in the form of a function.
Set Text From Input Launches a text input control and alters the shape's text based on the value entered.
Set Text From Table Set text based on a chosen table's value. This can either be from a specific row and/or column or from a user clicking a table (add the command to the table shape's click event to read live data from the table). The value substitute can be surrounded with a custom string.
Set Text From URL Allows designers to set a shape's text based by reading a URL. Variables can be passed based either on the context of shape text, or by values supplied at design time.
Editing Internal Components

Editing options for Internal Components depends on the specific type and refers to settings accessible via the editor or custom commands.

PropertyChartImageGraphicTableText
Axis Maximum
Axis Minimum
Axis Scale Interval
Axis Scale Show Lines
Change Data Array
Change Data Point
Change Plot Type
Fill Alpha
Fill Colour
Line Alpha
Line Colour
Line Size
Position - x
Position - y
Resize with Shape
Resize % - Horizontal
Resize % - Vertical
Rotation
Text Size
z Index
CommandChartImageGraphicTableText
Apply Filter
Set Text
Set Text From Input
Table Highlight
Table Sort
CommandDescription
Table Highlight Applies the table's highlight style to a specified row/column.
Table Sort Sorts the table by a selected field.
Menu Commands

Menu commands can be used to manipulate the control panel shown to users when they view a published diagram. When a command trigger is set to a control panel button it is assigned an order number. This number can be unique or it can represent a collection of controls. Commands refer to menu item via their order numbers.

CommandDescription
Change Group / Order With this command the order of a button or buttons can be changed. Changing button order with commands has a chain effect. Moving a button from position four to two, for example, will also move any existing buttons at positions two or three to move up the order etc.
Show / Hide Button With this command buttons can be shown or hidden. This command can be used to tailor available user commands to correspond with different states of the diagram.
Shape Link Commands

Shape Link Commands allow control over the links between shapes. Transparency, visibility, thickness and colour of shape links can be adjusted by custom commands described above.

Spreadsheet Commands

Spreadsheet commands control real time interactions with linked spreadsheets while a diagram is in preview or publication mode. They can be used to control if, and when, a spreadsheet should be checked for data changes and they can be used to capture user input and save changes.

CommandDescription
Refresh Spreadsheet Data Can be used to check for data changes in spreadsheets linked to the diagram. The command can be used to refresh on demand or to start (or stop) automatic checking. When new data is returned diagrams are automatically updated.
Write (Append) Spreadsheet Data Appends data to a specified range (locating the first blank row). Uses the append command from the Google Sheets API
Write (Update) Spreadsheet Data Writes data to a specified range overwriting any existing data. Uses the update command from the Google Sheets API

Command Triggers

A command can have one of four trigger assignments: Start, Button (Control Panel), Button (On Shape) and None. These assignments are discussed in the table below.

As well as having it's own trigger (or none), a command maybe also part of a defined command sequence.

TriggerDescription
Start Any command with the start trigger is executed when the diagram is first loaded and whenever the diagram is reset via the control panel.
Button (Control Panel) Commands with this trigger have a button generated and displayed on the control panel. Button display order, tooltip text and the button image can all be set from the Command Editor.
Button (On Shape) Temporary Buttons attached to shapes is not yet implemented.
None This value means the command has no specific trigger.

Command Conditions, Referencing Variables and Using Functions

Command conditions are simple evaluating statements that resolve to either true or false and determine if the command should be run when triggered. Tests can be for equality a=b, difference a<>b, greater than a>b or less than a<b

User created and system variables can be substituted in many custom commands in place of fixed values and can also be used in the command condition. To replace a variable use its name, surrounded by the hash and tilde characters #~variablename~# in the command's text box field. Variables that consist of arrays of data must include an index; ie #~createdarray[0]~# would return the first item of an array called "createdarray".

Mathematical operators can be included with or instead of variable references. It would be possible to increment "counter", for example, by using a set variable command with #~counter~#+1.

A condition statement written as follows #~var1~#<5 would be true if user defined variable "var1" was lower in value than 5. Conditional statements can include mathematical operators.

Just as variables can be referenced by custom commands, it is also possible to provide values with conditional clauses using a ternary operator. The following example would assign the text "First" if a variable "var1" is less than five or "Last" if it is equal or higher. (#~var1~#<5)?First:Last

There are a number of system variables and inbuilt functions designers can use with custom commands. Like user variables they can be referenced with hash and tildes. arrays (like areas) require the index to be supplied. Eg #~area[3].xmax~# would return the xmax property of the 4th item in the array of defined areas.

The shapeid array variable requires the desired shape's assigned name; a string/text value.

Variable / PropertyDescription
screen.xmin The left hand co-ordinate of the screen measured from the diagram centre point (see the camera variable for an alternative).
screen.xmax The right hand co-ordinate of the screen measured from the diagram centre point.
screen.ymin The top co-ordinate of the screen measured from the diagram centre point.
screen.ymax The bottom co-ordinate of the screen measured from the diagram centre point.
area[n].xmin The left hand co-ordinate of the specified area.
area[n].xmax The right hand co-ordinate of the specified area.
area[n].ymin The top co-ordinate of the specified area.
area[n].ymax The bottom co-ordinate of the specified area.
camera.xmin The left hand co-ordinate of the screen measured from the current centre of the screen.
camera.xmax The right hand co-ordinate of the screen measured from the current centre of the screen.
camera.ymin The top co-ordinate of the screen measured from the current centre of the screen.
camera.ymax The bottom co-ordinate of the screen measured from the current centre of the screen.
shapeid[id].x The x position of the specified shape.
shapeid[id].y The y position of the specified shape.
shapeid[id].width The width of the specified shape.
shapeid[id].height The height of the specified shape.
FunctionDescription
RANDOM(a,b,c) Returns a random number where a=minimum, b=maximum, c=number of decimal places. To return a random whole number between 1 and 10 the correct use would be

#~RANDOM(1,10,0)~#

Individual Shape Settings

Individual Shape Profiles can be added for any/all shapes within a diagram. Any shape with an Individual Profile Defined will ignore and over ride those options specified in general settings.

Camera and tint controls replicate the functions described in the previous sections, but effects and commands can also be added for Individual Shapes.

Individual Shape Settings
Individual Shape Settings

Clicking the effects button for any button state will open a selector listing every effect variant currently defined. To add an effect, use the checkbox and then choose a condition from the drop down menu.

Condition options are

ConditionDescription
Click This is applied when a mouse button is pressed while the pointer is over the shape, or a touch screen is pressed.
Constant The effect is applied continously.
Hover The effect is applied when the mouse pointer is over the shape.
Hover/Click Fires when either the hover or click condition is met.
Hover [Ends] Fires when the mouse pointer is no longer over the shape.
Effect Options
Effect display options

The command option picker functions identically and uses the same conditions.

Managing Published Creations

Publishing a diagram uploads it, and any images you use, to MindMatters servers. A unique Id code and URL is generated which can then be shared with any intended audience.

The unique ID is displayed on the button and the generated URL is of the form
https://mindmattersapp.com/shapeviewer/viewer/?id=UNIQUE ID

Clicking the button on the form opens a new browser page at that URL, publications can also be deleted from this form.

To preserve an ID/URL, users can instead choose to update an existing publication. Once the maximum number of publications is reached, updating existing diagrams will be the only available option.

Publisher Menus
Managing Publications