The main control panel is home to most critical and commonly used controls for the application. From left to right; Undo, Redo, New (from template), New (blank),
Save, Open Item Library (Saves and templates), Export, Open Settings Menu, Open Image Library, Manage Data Sources
The shape control panel contains most editing options for the individual parts of a diagram. From left to right; Edit Text (if any), Edit Shape, Copy Shape, Pick default shape
(from item library), Add Shape, Add Shape (Connect Left), Add Shape (Connect Right), Add Shape (Connect Up), Add Shape (Connect Down),Clear Selection,
Move to Front (z - index), Move Forward, Move Backward, Move to Back, Delete Shape
The camera control panel lets you move around the screen (alternatively you can drag and hold anywhere in the background) or set/return to the centre points of your diagrams.
From left to right; Navigate Left, Right, Up, Down, Zoom In, Zoom Out, Zoom Reset, Return to Centre Point, Set Centre Point.
The publication control allows you to manage your published creations and preview your current creation in Publisher mode. From left to right; Open the publication editor menu,
preview your creation, manage data sources (spreadsheets) for this creation.
The group control allows you to group and ungroup shape collections for easier management. From left to right; Toggle multi select mode, Create Group from selection, Split selected group.
The link control allows for the editing, adding and deletion of links to assist with swift diagram creation. From left to right; Toggle the ability to edit the links by selecting them,
Show the edit link menu, Add a link by choosing two shapes, Choose defaults for newly created links.
Background colour, grid lines and other basic settings
One of the first thing you may wish to do, is customise the appearance of your workspace. Background colour as well as the appearance of gridlines can be controlled by accessing the settings menu...
... and altering fields in the General Settings sections. Other options allow you to show or hide control panels or control how to work with your Google Account (if you choose to use it).
Adding and editing a shape
You can choose the type of shape that is added by either picking one from the item library or by, essentially, copying and pasting an existing shape. To add a new shape of
whatever type is currently selected click the "add shape" button on the Shape control panel
Unless you have already selected a different type, a new standard text box will be added to your diagram.
Clicking this shape will select it and surround it with the selector box.
By clicking and dragging the bottom corner of the selection box you can resize the shape. How it behaves depends on the settings of the internal components.
For this default shape. The background graphic will resize as the shape is resized. The text will retain a central position and wrap over multiple lines.
These behaviours can be changed.
To do so, click the "Edit Shape" button
Just as a diagram is made up of one or more shapes, a shape is made up of one of more internal components. The default shape has to internal components, a rectangular Graphical background
and a piece of text.
Several options are provided to allow for the swift placement of shape components and to manage their behaviour as you update size and content.
Use "Align" to set an components position relative to the left and right side or horizontal centre (x axis), and/or to the top and bottom or vertical centre (y axis).
Use "Order" to set an components position relative to the position of components that have a set order. Ie an component with an x axis order of 2 will be
placed to the right of an components with an order of 1
Use "Position" to specify the x and y co-ordinates of the component (the top left corner of the shape is 0,0). This can be used in conjuction with either "Alignment" or "Order" to fine tune placement.
Z-Index can be specified to ensure overlapping items are shown as intended. Ie to ensure text remains in front of a background graphic etc
Adding and editing a shape component
Adding and internal to a shape
In the shape editor, click the "Add Internal" button. This will show an additional menu with a dropdown box. From this dropdown choose the component type and confirm your selection
Delete an existing internal
With the component you wish to delete selected, press the delete button and then confirm your decision when prompted.
Edit an existing internal
With the component you wish to edit selected, press the edit button. This will open a new menu depending on the type of component selected, specifics for each type can be
found in the sections below.
Duplicate an existing internal
As an alternative to adding a new component you can select one to duplicate. This will create an exact copy allowing swifter and more convenient further customisation.
Working with graphical components (coloured shapes)
Choosing to edit a graphical component will show the the following menu
The basic types are; Rectangle, Rounded Rectangle, Star and Ellipse
Several basic shape types can be selected, with each yielding different "dimension" settings.
Rounded rectangles provide a "corner" dimension, and Stars have variables for the number of points and for their depth (from the centre). To create a circle, use a graphic component
with equal width and height.
While height and width can be set for all types, this values will be ignored if the component is configured to resize with the shape. In addition to resize options, users can
alter the colour and opacity of the shapes border and fill. Use an alpha value of 1 to achieve near total transparency.
Working with images
Editing images offers similar options to graphics, allowing the image to be resized with the shape or to allow varying transparency levels. One notable difference is the option
to either "Tile" or "Scale" an image.
A scaled image will be resized to fit the dimensional parameters chosen, where as a tiled image will be repeating horizontally and vertically to fill the desired space. This
allows the use of seamless textures.
Adding user images
There are two ways of adding your images to Mindmatters to use them in your creations. The first, and easiest, is to drag and drop them from your file system/desktop. This will
add your image to the gallery and create a new shape, containing that image as a component.
Alternatively you can view your images and upload new ones via the image browser, accessed from the main control panel.
The image browser will open in a new window and until you have added some images will consist only of blank panes and the control panel.
The control panel has two commands; the first allows a image to be uploaded from your file system. The second allows you to add an image from Google Drive. The extra
options that come with using your Google Account are discussed in more detail in later topics.
Other image browser controls
Once you've added an image to Mindmatters selecting in the image browser will add two additional options to the image browser control panel. The option to either delete the image
or to add a new shape containing your selected image as an internal component.
Any user image can also be added to any other shape as an internal component by following the steps described above.
Working with text
There are effectively four parts to the Text editing menu. Font Settings; gives the usual options found in document editing. Graphic Settings; allows users to set the outline
and fill colour of each letter. Text Settings; determines how the text will behave within a shape. Finally the text input itself.
Text can also be dynamically linked to a spreadsheet range through this menu. Details on how to use spreadsheets from Google Drive can be found in later topics.
Adding and merging content; using content from the object library
Cloning and pasting shapes
There are several variations of methods to add content to your creation. The simplest is to use the "Add New Shape Button" (Or press Ctrl and v). This will add a copy
of the currently selected template.
This template can be changed by picking a new one from the object library, or by pressing the "Copy selected shape button" (Or press Ctrl and c) while an existing shape is selected
You can pick templates, or use your own creations as templates, by accessing the object library.
The object library is a collection of users saved creations as well as pre-made templates; ranging from simple single shapes to complex and complete presentations with
fully functional interactive commands.
There are a number of filters available to allow users to narrow the selection, either by type or by function. Each individual object has either two or three commands.
With the library controls you can create a NEW project. This will clear any existing diagrams and create a new project with the selected template.
You can MERGE projects. This will add shapes from the selected template to your existing diagram.
Finally, for simple components, you can set this object as the default template. This will affect any subject shape you add via the controls panels or keyboard shortcut.
Merging from the library versus Adding or Copying and Pasting
There are a few key differences in behaviour between adding a new shape and merging it from the library. That's because merging content also incorporates any
custom interactivity settings while copying or adding creates only a new version of the shape.
This means that merging from the object library can be used to rapidly and effectively combine different components into one overall interactive presentation.
When merging content, individual shape commands will be preserved. Any custom commands referring to shapes in the template will be updated. Further details can
be found in later topics.
Linking shapes; creating editing and deleting links
Linked shapes are integral to several types of diagram and Mindmatters supports a number of ways to customise and maintain shape links. Rather than adding individual shapes
to the diagram, directionally linked shapes can be added from the link control panel. Whichever shape template is currently active, will be added to a selected shape with a
By default links can be selected and edited with the Link Editor Menu
Shapes can be connected at any point you wish by altering values in the "Link Connections" section. The Parent/Child relationship is important only if you intend to use
interactive features but can easily be swapped from this menu.
Three basic connection types are supported; stepped, curved and straight.
Step and curved connections have control points to allow users to fine tune the appearance of links. They can be reset and edited directly from the link editor menu.
Additionally users can add straight "elbows" to allow multi jointed connections.
Finally users can change link appearance with the "Graphic Data" section of the Link Editor form. From here the width and colour can be set, as well as caps on either/both
the parent and child connection. Sizes, colours and types can be mixed.
Changing default link settings
In many instances, it might be appropriate to alter the default link settings for any given diagram. To do so click the Set Link Defaults button on the Link Editor Control Panel
This will open a version of the link editor menu. Any changes made with apply to all subsequently created links but will not effect existing links.
Other link options
There are three other options available from the Link Editor Control Panel. With the first, you can toggle link editing on and off. When turned off this prevents the direct
selection of links. This is useful on a crowded screen or to select smaller shapes. By default link selection is on.
Clicking edit links will show a list of all links contained in your diagram, as well as the ability to edit or delete them.
You can also add links to existing shapes. First, select the shape that is to serve as the link's "parent". Select "Add Link". This will cause all controls to disappear. Next
select the shape that is to serve as the link's "child". This will generate a new link (click the red cross to cancel).
The work space, shape placement, display order and camera movement
Your work space in Mindmatters is a fluid space, that expands to fit its content. The App has always been designed with the end goal of creating interactive presentations in mind. As
well as adjusting for screen size and different devices.
Using the screen as a camera it is possible to build complex movements and visual effects. This section explains some of the implications of that for users of more basic functions,
or for new users.
The Diagram Centre Point
The centre of the diagram is x=0,y=0: This will also be the centre point of your screen, on the creation of a new diagram. To place a shape of width
=100 and height=100 with it's centre over the diagram centre. The co-ordinates would be x=-50,y=-50.
You can set an alternative central point and/or move to the diagram centre from the camera control panel.
The exact centre point of the diagram is not necessarily important for anything other than user convenience. With interactive diagrams, display areas can be defined or commands used
that move the camera over shapes or to defined points. See later topics for more detail.
You can use the zoom controls to zoom in and out or reset the zoom level. Zoom levels can also be controlled for interactive creations and you can use presentation areas
to automatically scale content to different device and screen sizes. This is is discussed in greater detail in later topics.
Shape display order (z-Index)
Like elements within a shape it is possible to change the display order of shapes themselves.
From the Shape Control Panel you can bring a shape to the front, the back or move it up or down; layer by layer. Moving a shape to the back will also ensure that it
is drawn behind shape links graphics. All links are drawn to the same layer.
Saving diagrams and exporting content
Mindmatters supports file storage in Google Drive for those who sign in with their Google Account but by default newly created diagrams are saved locally in your browser.
Every time you press "Save" on the Main Control Panel, your diagram will be updated in either case and a message will inform you when that update is complete.
Any content saved locally will become available via the Object Browser
Using Google Drive and switching between storage types is covered in later topics.
You can export a saved file by clicking the "Export" button. This will take you to the export page, containing an image preview of your creation.
From here you can either download a .PNG image file or a .JSON text file. Alternatively you can export either of these types to Google Drive.
Ctrl+Shift+S : New Diagram / Clear Screen
Ctrl+C : Copy Selected Shape
Ctrl+V : Paste Shape
Ctrl+← : Add Linked Shape to the Left
Ctrl+↑ : Add Linked Shape Above
Ctrl+→ : Add Linked Shape to the Right
Ctrl+↑ : Add Linked Shape Below
HOLDING Ctrl : Toggle Multiselect for grouping shapes