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...

Access Settings Menu
Opens 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).

The Settings Menu
The Settings Menu

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

Add New Shape
The "Add Shape" button

Unless you have already selected a different type, a new standard text box will be added to your diagram.

Default Shape

Clicking this shape will select it and surround it with the selector box.

Default Shape Selected

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

Edit Shape
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.

Shapeedit Shape
The "Edit Shape" menu

Placement Values

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

Shapeedit Shape
Add a new Internal Element

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

Shapeedit Shape
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

Shapeedit Shape
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

Shapeedit Shape
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

Edit Graphic
The Graphic Editor Menu

The basic types are; Rectangle, Rounded Rectangle, Star and Ellipse

Edit Graphic

Several basic shape types can be selected, with each yielding different "dimension" settings.

Edit Graphic

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

Edit Image
The Image Editor Menu

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.

Main Control
Opening the image browser

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.

Main Control
Opening the image browser

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.

Main Control

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.

Main Control

Working with text

Main Control
Text Editor Menu

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.

Shape Control
Add New Shape Button

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

Shape Control
Copy Selected Shape Button

You can pick templates, or use your own creations as templates, by accessing the object library.

Shape Control
Pick Default Template Button

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.

Object Library
The Object Library

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.

Object Library Controls
The Object Library Controls

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.

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.

Camera Centre
Camera and Diagram centre points

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.

Zoom controls

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.

Camera Zoom
Zoom Controls

Shape display order (z-Index)

Like elements within a shape it is possible to change the display order of shapes themselves.

Display Order
Display Order Controls

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.

Save Creation
The Save Button

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.

Export Creation
The Export Button

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.

Export Commands
Export Options

Keyboard shortcuts