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.
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.
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
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
Publication Editor Menu
There are five tabs on the Publication Editor. The general function of each is described below.
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.
Contains user defined special functions that allow a range of custom functionality.
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.
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.
Free (All Open)
Free (Mind Map)
Strict (All Closed)
Strict (Flow Chart)
Starting Open: Defines whether shapes start open (and are therefore selectable) or closed. In addition users can choose to open
parent shapes. These are any shapes that would be the "top level" of a flow chart.
Free Camera: Defines whether viewers of the publication can move around the diagram by clicking and dragging the background.
Camera Controls: Defines whether camera movement controls are visible in presentation mode.
Zoom: Adds or removes zoom level controls to the camera control panel.
Opens Children: When the shape is selected, any others connected as a child will be set from closed to open. When deselected child
shapes will be closed.
Selects Parents: When the shape is selected, any shape connected to it as a parent will also be selected. Use this option to
allow users to selected any point in a connection chain, like a Mindmap.
Deselects All: When selected, any other shape currently selected will be returned to an open state. Use this setting to enforce
only one selection at a time.
Disable Interactivity: Prevents all mouse over / click event functions. Setting visual effects by command will be overwritten
by a shapes event settings unless its interactivity is disabled.
Allow Drag/Drop: Allows shapes to be dragged and dropped by those viewing the diagram.
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.
The menu settings control defines the size of icons in the control panel.
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.
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.
Building Custom Commands
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:
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.
Commands to control other commands. Can be used to build complex sequences and loops of commands and animations.
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.
Commands that control and manage buttons on the control panel.
Shape Link Commands
Commands to edit and manage links between shapes within the diagram.
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.
Selecting the camera command type gives the following options
Returns the camera to the defined diagram centre position.
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.
Moves the camera to a specific point defined by x and y values
Moves the camera over a specific shape in the diagram
Alters the current zoom level (default 100%) without adjusting the camera position.
Screen / Diagram Commands
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.
Downloads a snapshot of the diagram to the user's system, using a preconfigured file name.
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]
Starts recording a webm video of the diagram.
Stops the recording of the webm video and triggers a download.
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.
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.
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.
Hide or show the shape. Set transparency level or change rotation.
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.
Alter the shape's size.
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
Editing Internal Components
Editing options for Internal Components depends on the specific type and refers to settings accessible via the editor or custom commands.
Axis Scale Interval
Axis Scale Show Lines
Change Data Array
Change Data Point
Change Plot Type
Position - x
Position - y
Resize with Shape
Resize % - Horizontal
Resize % - Vertical
Set Text From Input
Applies the table's highlight style to a specified row/column.
Sorts the table by a selected field.
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.
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
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.
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
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.
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.
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~# 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
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.
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.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 / Property
The left hand co-ordinate of the screen measured from the diagram centre point (see the camera variable for an alternative).
The right hand co-ordinate of the screen measured from the diagram centre point.
The top co-ordinate of the screen measured from the diagram centre point.
The bottom co-ordinate of the screen measured from the diagram centre point.
The left hand co-ordinate of the specified area.
The right hand co-ordinate of the specified area.
The top co-ordinate of the specified area.
The bottom co-ordinate of the specified area.
The left hand co-ordinate of the screen measured from the current centre of the screen.
The right hand co-ordinate of the screen measured from the current centre of the screen.
The top co-ordinate of the screen measured from the current centre of the screen.
The bottom co-ordinate of the screen measured from the current centre of the screen.
The x position of the specified shape.
The y position of the specified shape.
The width of the specified shape.
The height of the specified shape.
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
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.
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
This is applied when a mouse button is pressed while the pointer is over the shape, or a touch screen is pressed.
The effect is applied continously.
The effect is applied when the mouse pointer is over the shape.
Fires when either the hover or click condition is met.
Fires when the mouse pointer is no longer over the shape.
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.