User Interface Basics

Learning Objectives

Here we will explain the user interface of the Visual Designer. This is the web application you will be dealing with the most when you start with Dragon1.

In this lesson you will learn the following:

  • How to startup the Visual Designer
  • What are the names of the various areas of the Visual Designer are
  • How to change layout and look and feel of the Visual Designer to suit your personal need
  • Set the canvas to full screen
  • Expand the Explorer
  • Select a template
  • Start up the wizard

Startup Screen

If you are logged in and start up the Visual Designer, your screen will look a lot like this:

dragon1 startup screen

Startup Screen.


Throughout the help we make consistent use of names for the areas in the user interface. Below you'll see the area names for the Visual Designer.

dragon1 areas visual designer

Areas Visual Designer.

Website Menubar

This menu bar lets you choose between the various parts of the platform. Click on an item to go to that part.

dragon1 website menubar

Website Menubar.

Application Menubar

This menu bar lets you choose between the various web applications of the platform. Click on an item to go to that part.

dragon1 application menubar

Application Menubar.

Button Bar

This menu bar lets you choose between the various functions of the Visual Designer. To choose a function, click on a button or do a mouseover on a button and click on an item in the dropdown menu of that button.

dragon1 button bar

Button Bar.

New Cabinet

To create a cabinet, click on the New Cabinet Button in the Button Bar.

dragon1 new cabinet

New Cabinet.

New Dossier Button

To create a new dossier, click on the New Dossier Button in the Button Bar.

dragon1 new dossier button

New Dossier Button.

New Folder Button

To create a folder, click on the New Folder Button in the Button Bar.

dragon1 new folder button

New Folder Button.

Explorer Treeview

The Explorer Treeview shows the contents of an opened Cabinet. The Explorer Treeview gives you access to dossiers, folders and items.

If you have access rights to certain items, you will see them. If you do not, you don't see them. An empty folder does not mean that there are no items.

dragon1 explorer treeview

Explorer Treeview.

Expand the Explorer Treeview

The Explorer Treeview is a tri-state control: Normal height, Double height, Zero height.

To expand the Explorer Treeview, click once on the word Explorer.

To collapse the Explorer Treeview, click twice on the word Explorer.

Visible and Delete

At the bottom of the Explorer Treeview you have the option to hide and delete items. To hide an item, select an item and click on the visible button. To delete an item, select an item and click on the delete button.

Shapes Panels

dragon1 shapes panels

Shapes Panels.

The Shapes Panels are collections of core shapes of a modeling language. The default languages provided are:

  • Basic Shapes
  • Flowchart
  • Dragon1
  • Logi
  • UML
  • BPMN

If you have selected a visualization or model, you can drag shapes from the shapes panels onto the Drawing Canvas.

Dragging means clicking on a shape. Holding down the mouse button. Moving the shape to the desired position and then let go of the mouse button. Now the shape will be inserted into the model or visualization and the model or visualization will be automatically saved.

Inspector Panels

The Inspector Panels are panels with specialized attributes for shapes. There is a text panel, shape panel, color panel, data panel.

dragon1 inspector panels

Inspector Panels.

To change the title of a shape:

  • Select a shape on the Drawing Canvas
  • Click on the name 'Text Attributes' of an Inspector Panel
  • Type a new title in the title field
  • Press TAB
  • Save the visualization by pressing on the Save button in the Button Bar

Drawing Canvas

The Drawing Canvas is a sheet on which you draw shapes.

dragon1 drawing canvas

Drawing Canvas.

To draw shapes:

  • Drag a shape from the shapes panels
  • Click on a shape in the Insert Archifact or Insert Entity drop-down menu in the Button Bar

Player Bar

dragon1 player bar

Player Bar.

The Player Bar provides you with the functionality to play a scenario, go to the next or previous time frame in a visualization. And some other basic functionality.

To make use of tracing in a model, switch to normal mode and click the trace checkbox

To make use of the popup feature, switch to normal model

Resize the Canvas to Full Screen

To resize the Canvas to Full Screen in Edit Mode, click on the word Drawing Context in the title bar of the canvas.

To resize the Canvas for Presentation Mode, select Presentation Mode in the player bar.

Gaming Panel

dragon1 gaming panel

Gaming Panel.

The gaming panel measures how effective and efficient you work: in how much time and in how many clicks do you complete a tutorial?

To see how productive you are just look at the figures in the Gaming Panel.

Wizard Panel

dragon1 wizard panel

Wizard Panel.

The Wizard is a dialog with a set of basic tutorials. You can be guided in creating a basic model, diagram or presentation.

To start up the wizard, click on the wizard image.