49
User Guide Part 3 Mimic Designer

Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

  • Upload
    dongoc

  • View
    217

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

User Guide Part 3

Mimic Designer

Page 2: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

1

© 2017 B-Scada, Inc. All Rights Reserved.

Contents 1 OVERVIEW .................................................................................................................................. 5

1.1 HMI Designers ...................................................................................................................... 5 1.1.1 Mimic Designer .................................................................................................................. 5 1.1.2 Application Designer .......................................................................................................... 5 1.2 General ................................................................................................................................. 5 1.3 Implementation ..................................................................................................................... 5

2 MIMIC CREATION ........................................................................................................................ 7

2.1 Getting Started ...................................................................................................................... 7 2.2 Creating a Mimic ................................................................................................................... 7 2.3 Components of the Mimic Designer...................................................................................... 9 2.3.1 Document Tree .................................................................................................................. 9 2.3.2 Toolbox Panel .................................................................................................................. 10 2.3.3 Property Panel ................................................................................................................. 10 2.3.4 Resources Panel ............................................................................................................. 11 2.3.5 Preview Window .............................................................................................................. 12 2.3.6 Activity Log....................................................................................................................... 13 2.4 Toolbar Icons ...................................................................................................................... 13 2.4.1 File Management Icons ................................................................................................... 14 2.4.2 Cached Control and Viewing Icons ................................................................................. 14 2.4.3 Editing Icons .................................................................................................................... 15 2.4.4 Test Run, View Panels, and View Source Icons ............................................................. 16 2.4.5 Shape Joining Icons ........................................................................................................ 17 2.4.6 Arrangement Icons .......................................................................................................... 17 2.4.7 Control Manipulation Icons .............................................................................................. 18 2.4.8 Show Grid, Snap to Grid, Ruler, Hairline cursor, and Grid Style Icons ........................... 18 2.4.9 Search Bar ....................................................................................................................... 19 2.5 Adding Controls to the Design Surface .............................................................................. 19 2.5.1 Adding a Control as a Child of Another ........................................................................... 19 2.5.2 Adding a Gauge Control to a XAML Document ............................................................... 20 2.5.3 Adding a Shape to the XAML Document ......................................................................... 21 2.5.4 Adding Shapes by Click-and-Drag .................................................................................. 21 2.5.5 Adding a Polyline Shape by Click .................................................................................... 21 2.5.6 Adding Shapes Using Polygon and Polyline Pencil ........................................................ 22 2.5.7 Joining Shapes ................................................................................................................ 22 2.6 Forms and Documents ....................................................................................................... 23 2.6.1 Creating Forms ................................................................................................................ 24 2.6.2 Viewing Documents ......................................................................................................... 25 2.6.3 Document Viewer ............................................................................................................ 25 2.6.4 Document Link ................................................................................................................. 25 2.6.5 Document Tree ................................................................................................................ 26 2.7 Saving a Mimic .................................................................................................................... 26 2.8 Shortcuts ............................................................................................................................. 28 2.8.1 Keyboard Short Cuts ....................................................................................................... 28 2.8.2 Other Keystroke Commands ........................................................................................... 28 2.8.3 Object Adorners ............................................................................................................... 28 2.8.4 Mouse Cursors ................................................................................................................ 29

3 DATA BINDING .......................................................................................................................... 30

3.1 Configuring Data Binding .................................................................................................... 30 3.2 Testing Data Binding .......................................................................................................... 32

4 TOOLBOX CONTROLS ............................................................................................................... 34

4.1 Control Overview ................................................................................................................ 34 4.2 Web Friendly Controls ........................................................................................................ 34

Page 3: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

2

© 2017 B-Scada, Inc. All Rights Reserved.

4.3 Workspaces ........................................................................................................................ 35 4.3.1 Setting Up Workspaces for Controls ............................................................................... 35

5 MIMIC RUNTIME ........................................................................................................................ 38

5.1 Starting the Status Mimic Runtime ..................................................................................... 38 5.2 Mimic Runtime Configuration Scheduler ............................................................................ 40 5.3 Embedding the Mimic Runtime into Your Own Windows Application ................................ 41

6 MISCELLANEOUS ...................................................................................................................... 42

6.1 Extending and Customizing the Mimic Designer ................................................................ 42 6.2 Creating Custom Controls for Mimics ................................................................................. 42 6.3 Embedding Mimic Runtime Sample Code .......................................................................... 43

7 ADDITIONAL INFORMATION AND SUPPORT.................................................................................. 48

Page 4: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

3

© 2017 B-Scada, Inc. All Rights Reserved.

Table of Figures

Figure 1 - Mimics ........................................................................................................................................... 6

Figure 2 - Login Screen ................................................................................................................................. 7

Figure 3 - New File ........................................................................................................................................ 8

Figure 4 - New Mimic Dialog Box .................................................................................................................. 8

Figure 5 - Document Tree ............................................................................................................................. 9

Figure 6 - Toolbox Panel ............................................................................................................................. 10

Figure 7 - Property Panel ............................................................................................................................ 11

Figure 8 - Property Sorting Icons ................................................................................................................ 11

Figure 9 - Resources Panel ........................................................................................................................ 12

Figure 10 - Preview Window ....................................................................................................................... 12

Figure 11 - Activity Log ............................................................................................................................... 13

Figure 12 - Toolbar ...................................................................................................................................... 13

Figure 13 - File Management Icons ............................................................................................................ 14

Figure 14- File Open and Save Icons ......................................................................................................... 14

Figure 15 - Cached Control and Viewing Icons .......................................................................................... 14

Figure 16 - Editing Icons ............................................................................................................................. 15

Figure 17 - Test Run, View Panels, and View Source Icons ...................................................................... 16

Figure 18 - View Panels .............................................................................................................................. 16

Figure 19 - View Source .............................................................................................................................. 16

Figure 20 - Arrangement Icons ................................................................................................................... 17

Figure 21 - Arrangement Icon Descriptions ................................................................................................ 17

Figure 22 - Control Manipulation Icons ....................................................................................................... 18

Figure 23 - Control Manipulation Icon Descriptions .................................................................................... 18

Figure 24 - Show Grid and Snap to Grid Icons ........................................................................................... 18

Figure 25 - Grid Style drop down ................................................................................................................ 19

Figure 26 – Search Bar ............................................................................................................................... 19

Figure 27 - Add Child Dialog ....................................................................................................................... 20

Figure 28 - Paste Special ............................................................................................................................ 20

Figure 29 - Toolbox Panel - Gauges ........................................................................................................... 21

Figure 30 - Toolbar – Shape Joining Tools ................................................................................................. 22

Figure 31 - Join ........................................................................................................................................... 22

Figure 32 - Subtract .................................................................................................................................... 23

Figure 33 - Intersect .................................................................................................................................... 23

Figure 34 - Sample Change Request Form ................................................................................................ 24

Figure 35 - Forms in the Data Model Asset Tree ........................................................................................ 25

Figure 36 - Document Tree ......................................................................................................................... 26

Figure 37 - Save Menu Option and Icon ..................................................................................................... 27

Page 5: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

4

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 38 - Save Mimic Dialog .................................................................................................................... 27

Figure 39 - Object Adorners ........................................................................................................................ 29

Figure 40 - System View Tree .................................................................................................................... 30

Figure 41 - Relative Type Tree ................................................................................................................... 31

Figure 42 - Properties Panel ....................................................................................................................... 31

Figure 43 - Configuring Data Binding .......................................................................................................... 32

Figure 44 - Test Run Icon ........................................................................................................................... 33

Figure 45 - 3D Fluid Silo Tanks .................................................................................................................. 34

Figure 46 – HTML 5 Check Box .................................................................................................................. 34

Figure 47 - Adding User .............................................................................................................................. 35

Figure 48 - Adding User Accounts .............................................................................................................. 35

Figure 49- Selecting Profile ......................................................................................................................... 36

Figure 50 - Selecting Workspace ................................................................................................................ 37

Figure 51 - Status Server Login .................................................................................................................. 38

Figure 52 - Open Mimic Dialog Box ............................................................................................................ 39

Figure 53 - Mimic Runtime Scheduler ......................................................................................................... 40

Figure 54 - Add Button ................................................................................................................................ 40

Figure 55 - Delete Button ............................................................................................................................ 40

Figure 56 - The Up and Down Buttons ....................................................................................................... 41

Figure 57 - Start Runtime Button ................................................................................................................ 41

Figure 58 - Add WPF Control ...................................................................................................................... 42

Figure 59 - Bar Chart .................................................................................................................................. 42

Page 6: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

5

© 2017 B-Scada, Inc. All Rights Reserved.

1 Overview Mimics can also be referred to as dashboards or HMI screens. Status Enterprise has two design environments for creating HMI Screens.

1.1 HMI Designers

1.1.1 Mimic Designer

Design once view in Windows Thick Client or HTML 5 enabled browser Screens are saved into the Data Model in the Status Server Zero deployment required Limited code behind capabilities Screens viewable in the Model Browser Screens embeddable into 3rd party applications using WPF StatusRuntimeControl Supports Custom WPF controls

1.1.2 Application Designer

High performance Unlimited extensibility with full .NET code behind in C# or Visual Basic with intellisense Screens compiled into a .NET assembly and viewed by a Windows Thick Client Automated screen scheduling for digital signage and other applications Supports Custom WPF controls

This document outlines the design and creation of graphical interfaces using the Status Enterprise Mimic Designer. The Application Designer is discussed in Part 4 – Application Designer For more information, frequently used terms, definitions and abbreviations, please see Part 1 – Overview and Concepts.

1.2 General The Mimic Designer is used to create screens (mimics) with graphics and user interface controls, and attach those graphics and controls to data in the Object Model with data bindings. As the data is updated in the Data Model either manually or from a remote server, the Status Server sends out notification events of the changing values. Clients load the screens, listen for the property changes, and update the user interface controls as configured. Mimics can be viewed by either a Windows Thick Client or HTML 5 enabled device. Mimics are frequently used as an HMI for graphically viewing data, but they are also used for such necessary tasks as creating forms and viewing documents.

1.3 Implementation The mimics are stored in the Data Model of the Status Server and retrieved with the Status Client or with

Page 7: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

6

© 2017 B-Scada, Inc. All Rights Reserved.

the Status Model Browser. Using the Status Enterprise Gateway, screens can be viewed through a web browser or mobile device.

Figure 1 - Mimics

Mimics are stored as XAML (Extensible Application Markup Language), an XML format developed by Microsoft.

Page 8: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

7

© 2017 B-Scada, Inc. All Rights Reserved.

2 Mimic Creation

2.1 Getting Started When the Mimic Designer is first opened, you will be presented with the Status Server Login dialog. You can login using the default settings or configure them to your liking. For more information on Status Server login settings, see Part 1 – Overview and Concepts.

Figure 2 - Login Screen

2.2 Creating a Mimic

To create a mimic, select the New File icon, the 'New Mimic' dialog box will appear.

Page 9: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

8

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 3 - New File

Enter the name of the document you wish to create.

Figure 4 - New Mimic Dialog Box

The Mimic Designer is capable of creating two types of mimics: A Mimic Template for a given type of Asset, or a regular mimic. A Mimic Template is a graphic that can be used over and over with different instances of a type (assets). For example, if you were making a mimic to view data for a wind turbine, and your data model has many similar wind turbines in it, you would want to create a Mimic Template for the type 'Wind Turbine'. This one mimic could then be used with all of your wind turbines. A regular mimic is usually used for main menus, or if you have an Asset and there was only ever one instance of that asset. A regular mimic binds directly to a specific Asset; it cannot be used with any other Asset. Regular mimics are also the correct document type for a main page or a page intended for navigation. In the New Mimic dialog box enter the name of the mimic and select the type of mimic, regular or template. If creating a template, an Asset type will need to be associated with the template. You are also given the option to choose to use a Canvas or a Grid as your root layer. On a Canvas, objects are positioned explicitly starting from the Canvas's upper left-hand corner according to exact x,y coordinates. Objects are uniformly scaled in the mimic if the mimic is resized.

Page 10: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

9

© 2017 B-Scada, Inc. All Rights Reserved.

A Grid consists of adaptable rows and columns and has resizing capabilities for both itself and its child objects. Precise spacing for columns and rows can be set using the Margin property. Grids are more complicated to use than a canvas, but can provide some layout capabilities that a canvas can’t. For more extensive information on Grids and Canvas, consult Part 5 – Designer Controls Reference or Microsoft .NET WPF documentation. Once you select <OK>, you will have a clean design surface on which to create your mimic. When a document is saved, it is saved into a folder on the Status Server.

2.3 Components of the Mimic Designer

2.3.1 Document Tree

The Document Tree panel holds the Document Tree (also referred to as the Logical Tree) that corresponds to the document you are currently editing. The Document Tree is a hierarchal visual representation of all the elements in your workspace. The Document Tree panel remains blank until you open a document.

Figure 5 - Document Tree

The purpose of the Document Tree is to: Provide you with a visual reference of your document's structure. Indicate how an object relates to other objects and siblings. Enable you to choose layers or objects within in the document, in order to add to, edit or delete these layers or object. Allows you to add and move objects between layers in a drag drop fashion. The Document Tree displays icons of each object in your document, as well as three different symbols that help keep track of where you are (e.g. which object is selected for editing) in your mimic. Blue ellipse with an inverted tree: the blue ellipse, shown to the left of the object's icon, indicates which layer is selected for editing. You'll notice that the symbol moves through the Document Tree as you move in and out of different layers, but doesn't always show to the left of every icon. Highlighted items in the tree indicate exactly which object(s) are the current selected object(s) in the Designer. The Mimic Designer works in layers. The Mimic Designer maintains an 'Active Layer' at all times. You can choose to edit, add, remove and reposition objects on the active layer. You can change layers two different ways. You can double-click on a tree view item (a canvas) in the Document Tree to make it the active layer, or you can right-click on a suitable object on the edit surface and select <Edit Layer> to make it the active layer. As a general rule, the following can be considered an editable layer in Status Enterprise: Any Canvas, Panel, Border or Path or similar container. Specialty layers like InkCanvas and ViewPort3D List Box and Stack Panel are editable layers. The following are not considered editable layers:

Page 11: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

10

© 2017 B-Scada, Inc. All Rights Reserved.

Excluding Path, any classes derived from Shape cannot be an editable layer (Rectangle, Ellipse, Polyline, etc.). Any class that cannot have child controls, like an Image control. Any object whose visibility is hidden or collapsed. You can hide layers on the design surface by toggling the visibility of the object in the Document Tree. This simply modifies the visibility of the object while you are editing. Ensure to make the object visible again before publishing your project. Within the Document Tree you can drag-and-drop one control onto another. This allows cross layer assignment of controls to new parents. It also allows some properties like Tool Tips and Headers to have content. Controls can also be dragged from the Toolbox and dropped onto new parent objects in the Document Tree. Screens that have a lot of objects on them can make it difficult to locate a particular control. The Search Bar on the toolbar allows you to seek the object you are looking for and then highlights it if it is on the currently active layer.

2.3.2 Toolbox Panel

Figure 6 - Toolbox Panel

The Toolbox Panel contains the controls available for use in the Mimic Designer.

2.3.3 Property Panel The Properties panel houses the corresponding properties, or characteristics, of each object that is currently selected in the current document.

Page 12: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

11

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 7 - Property Panel

By default, all elements are given a name of <element><number> which is relevant to what kind of element it is (i.e. Button, Grid, etc.) as well as how many of them are currently on the design surface. A group of icons near the top of the panel allow you to sort the properties exposed on any selected object in a number of ways to suit your preferences.

Figure 8 - Property Sorting Icons

The available sorting options include: Alphabetical – sorts all properties from A-Z based off the properties name In-Use – shows which properties are currently used by the selected element (not the default value) Category – sorts all properties into groups based on what the property does to the element (i.e. Appearance, Layout, etc.) Type – sorts all properties into groups based off what type of value the property expects (i.e. Double, Thickness, etc.) Class – sorts all properties into groups based on what they derive from in .NET (i.e. FrameworkElement, UIElement, etc.).

2.3.4 Resources Panel The Resources panel is a collection of objects that can be dragged onto the design surface. The Mimic Designer comes with many premade pieces of clip art. These can be dragged from the Resources panel and onto the design surface.

Page 13: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

12

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 9 - Resources Panel

You can export your own clip art from the design surface into the Resources panel. The folder location for this panel will vary depending on your operating system. Windows XP users will find them at: C:\Documents and Settings\All Users\Application Data\StatusEnterprise\Resources On Windows 7 or 8, they are located at: C:\ProgramData\B-Scada\StatusEnterprise\MimicDesigner\Resources

2.3.5 Preview Window

The Preview panel holds a preview window for your document. This preview window is a snapshot of the overall document and is a useful feature for extremely large and detailed documents that exceed the dimensions of the Designer workspace.

Figure 10 - Preview Window

If your document does not exceed the workspace area (e.g. it does not require bottom or side scrollbars when viewed at 100% size), then an entire preview of your document shows within the blue preview window frame. If, however, your document exceeds the workspace area (either because it is a large document or is a document that is being viewed at greater than its 100% size), a red square frame will appear inside the preview window. The elements inside the red frame correspond to the elements you

Page 14: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

13

© 2017 B-Scada, Inc. All Rights Reserved.

see in your immediate workspace area. As mentioned above, this feature helps to keep a "big picture" perspective when only certain elements fit within the available workspace. If you have zoomed in on your document, you can go to the Preview panel and 'drag' the red view rectangle to automatically scroll the view of your document.

2.3.6 Activity Log The Activity Log displays a running record of communication messages with the Status Server. If the designer is having trouble getting good quality data or cannot connect to a server, it will display the information in the Activity Log panel.

Figure 11 - Activity Log

2.4 Toolbar Icons The Mimic Designer toolbar provides a number of icons for performing common tasks quickly and easily. Some icons are related to file management, while others are for manipulating graphics. Some icons are contextual and may be grayed out at certain times. If an icon is not grayed out, hovering your mouse cursor over it will reveal a Tool Tip to indicate the icon’s purpose.

Figure 12 - Toolbar

Page 15: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

14

© 2017 B-Scada, Inc. All Rights Reserved.

2.4.1 File Management Icons

Figure 13 - File Management Icons

The icons grouped on the far left of the toolbar are used to provide various file management functions:

New File – click this icon to create a new mimic template or regular mimic

Open File – click this icon to open a saved mimic

Add Image File - click this icon to add an image file to your Asset Tree

Save – click this icon to save the mimic currently on your design surface

Save As – click this icon to save another copy of your mimic with a different name or in a different location

Export XAML – click this icon to export the raw XAML that describes your mimic

Export Raster – click this icon to export your mimic as an image

Close – click this icon to close the mimic currently on your design surface

Figure 14- File Open and Save Icons

2.4.2 Cached Control and Viewing Icons

Figure 15 - Cached Control and Viewing Icons

The next group of icons immediately to the right of the file management group provides two separate and distinct functions. The first is an icon and textual description of a control that is in the cache and ready to add to the design surface (Ellipse in this case). This will change each time a new control is highlighted in

Page 16: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

15

© 2017 B-Scada, Inc. All Rights Reserved.

the toolbox. Immediately to the right of the cached control icon are three tools for zooming in or out on the design surface. You can select a zoom level from the drop-down menu, or you can use the +/- magnifying glass icons to zoom in or out incrementally through the different zoom levels.

2.4.3 Editing Icons

Figure 16 - Editing Icons

Continuing to the right along the toolbar, the next group of icons provides some basic options for editing your mimic:

Cut – click this icon to remove a selected control from your design surface and place it on your clipboard to be pasted elsewhere

Copy – click this icon to place a copy of a selected control on your clipboard to be pasted elsewhere

Paste – click this icon to place a control that has been cut or copied onto your design surface

Delete – click this icon to delete a selected control

Undo – click this icon to undo the most recent action

Redo – click this icon to redo the most recent action that was undone

Select All – click this icon to select all controls currently on the design surface.

Figure 17 – Editing Icon Descriptions

Page 17: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

16

© 2017 B-Scada, Inc. All Rights Reserved.

2.4.4 Test Run, View Panels, and View Source Icons

Figure 17 - Test Run, View Panels, and View Source Icons

Immediately to the right of the editing icons, the next group contains the Test Run, View Panels, and View

Source icons. Test Run is used to open your current mimic in the Mimic Runtime and allow you to view it

with live data, navigation and the full Runtime functionality.

Clicking on the View Panels icon will reveal a drop-down menu which allows you to toggle the visibility of

the various panels within the Mimic Designer interface.

Figure 18 - View Panels

Clicking on View Source will open a pop-up window containing the XAML source code for the currently open mimic.

Figure 19 - View Source

Page 18: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

17

© 2017 B-Scada, Inc. All Rights Reserved.

2.4.5 Shape Joining Icons

Figure 21 – Shape Joining Icon Group

Shape join allows you to draw two shapes on the design surface, an ellipse and rectangle for example. And then have the two shapes ‘joined’ into one by either combining the shapes, or cutting one shape from the other.

2.4.6 Arrangement Icons

Figure 20 - Arrangement Icons

The next icon group to the right of the shape joining tools includes options for arranging the controls on the design surface:

Send to Back – click this icon to move a selected control to appear

behind all other controls on its layer

Move Backward – click this icon to move a selected control one step

further back on its layer

Move Forward – click this icon to move a selected control one step

forward on its layer

Bring to Front – click this icon to move a selected control to appear in

front of all other controls on its layer

Alignment – click this icon when multiple controls are selected to reveal

a list of alignment and spacing options

Figure 21 - Arrangement Icon Descriptions

Page 19: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

18

© 2017 B-Scada, Inc. All Rights Reserved.

2.4.7 Control Manipulation Icons

Figure 22 - Control Manipulation Icons

The next group of icons provides option for changing the size, shape and rotation of controls on the design surface:

Resize – click this icon to manually increase or decrease the size of a

selected control

Rotate – click this icon to manually rotate a selected control

Skew – click this icon to manually skew the edges of a selected control

Rotate Left – click this icon to rotate a selected control 90 degrees

counterclockwise

Rotate Right – click this icon to rotate a selected control 90 degrees

clockwise

Flip Horizontal – click this icon to perform a 180-degree horizontal flip of

a selected control

Flip Vertical – click this icon to perform a 180-degree vertical flip of a

selected control

Figure 23 - Control Manipulation Icon Descriptions

2.4.8 Show Grid, Snap to Grid, Ruler, Hairline cursor, and Grid Style Icons

Figure 24 - Show Grid and Snap to Grid Icons

The Grid and Snap to Grid options are for using a grid to enhance your mimic design capabilities. Clicking the Show Grid Icon will superimpose a visual grid on your design surface to aid in sizing and placement of controls. The grid is purely for design purposes and does not affect the mimic in Runtime. Clicking Snap to Grid before placing a control on the design surface will align the edge of the control with the nearest grid line when it is placed. Click the Ruler icon will hide or show the Ruler on the top and left of the design surface. This is a very helpful tool for quickly measuring controls out. Click the Show Hairline cursor icon to have the cursor change to a cross that spans the entire size of the design surface. This is very useful for aligning controls quickly.

Page 20: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

19

© 2017 B-Scada, Inc. All Rights Reserved.

Click the Grid Style icon to have a drop-down box appear. There are four options in this drop down, Dots Over, Dots Under, Lines Over, Lines Under. Dots Over will change the Grid to a Dot style grid where the dots will be over top of all controls. Respectfully, Dots Under does the same thing except the dots will be behind all controls. Lines work the same way, with the exception that they are Lines and not Dots.

Figure 25 - Grid Style drop down

2.4.9 Search Bar

Figure 26 – Search Bar

The final icon on the toolbar is the Search field. The search field allows you to search for a placed control by name. Simply enter the name of the control and, if found, the control will be highlighted on the design surface and in your preview window.

2.5 Adding Controls to the Design Surface There are a few ways that controls can be added to the design surface. Most can be added by simply dragging and dropping them from the toolbox to the design surface, or selecting the control in the toolbox and drawing them out on the design surface. Alternatively, they can be dragged and dropped directly into the Document Tree onto a chosen layer. Controls can also be copied, cut, and pasted on the design surface.

2.5.1 Adding a Control as a Child of Another Often, it will be useful to add a particular control as a child of another control. For example, you may want to put an Alarm Control and a Trend Graph on separate Tabs of the same Tab Control to make them both easily accessible. This would be accomplished by adding the Alarm Control as the child of one Tab Item and the Trend as a child of another Tab Item. There are a couple of ways this can be accomplished. You can drag and drop one item onto another item in the Document Tree. This will reveal a dialog box providing options of how you would like the one control added to the other.

Page 21: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

20

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 27 - Add Child Dialog

Another option is to Copy/Cut a control from the design surface, then right clicking on the parent object and selecting Paste Special from the contextual menu.

Figure 28 - Paste Special

This will also reveal the Add Child Dialog for you to choose the specific way you would like the control to be added.

2.5.2 Adding a Gauge Control to a XAML Document

With a New Project started, position the mouse pointer on the Toolbox tab and click.

Page 22: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

21

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 29 - Toolbox Panel - Gauges

With the mouse pointer click on <Gauges>. The title bar and panel expands displaying the different types of Gauge controls. Click on <Dual Gauge> title bar and the background is highlighted indicating the control selected. Move the mouse cursor to the center of the project canvas (the cursor should now be a cross), click-and-drag (to the right) to display the Dual Gauge to the desired aspect ratio and release. The control selected from the Toolbox appears on the project canvas. Most controls can also be dragged and dropped from the toolbox.

2.5.3 Adding a Shape to the XAML Document

Some shapes may be added to the XAML document by Drag-and-Drop feature such as an Ellipse and Rectangle. Others are done by using the click of the mouse. Select the Ellipse shape, click on the project canvas and drag the mouse to another location on the canvas and release. Blue adorners will appear on the start and end points of the shape.

2.5.4 Adding Shapes by Click-and-Drag

To add a Line shape, select <Line>. Move the mouse to the project canvas, left-click and drag the mouse to another point on the canvas. With this feature, the mouse cursor changes to a cross-hair and when terminated the cursor reverts back to a hand. The line created will have edit adorners at the start and finish points of the shape.

2.5.5 Adding a Polyline Shape by Click

Adding a Polyline shape to the canvas is accomplished by Click. Select Polyline shape and move the mouse cursor, now a cross-hair, somewhere on the canvas. Left-click the mouse, then move the mouse to another location and left-click. A Polyline appears from start point A and connected to point B. The cross-hair is still active indicating an additional point can be added. This feature is deactivated by

Page 23: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

22

© 2017 B-Scada, Inc. All Rights Reserved.

pressing <Esc> or right-clicking the mouse. Blue edit adorners appear at principle points just as Click-and-Drag. Pressing the Esc key terminates the feature totally.

2.5.6 Adding Shapes Using Polygon and Polyline Pencil

Adding Shapes using Polygon and Polyline Pencil is accomplished by Click-and-Drag. With Polygon Pencil the shape is continuously being created and filled using Click-and-Drag, then terminates when the mouse button is released. The same action applies to Polyline Pencil but it draws only a line.

2.5.7 Joining Shapes

All Shapes that are found in the Toolbox can be joined together to form complex shapes. You can join shapes in 1 of 3 ways. Join, Intersect, and Subtract. You can only combine shapes if there is more than one shape and if there is no rotation. These options can be seen on the menu bar when 2 or more shapes are selected.

Figure 30 - Toolbar – Shape Joining Tools

2.5.7.1 Join

Figure 31 - Join

Before: After:

The 3 shapes on the design surface were selected and then joined to make one shape.

Page 24: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

23

© 2017 B-Scada, Inc. All Rights Reserved.

2.5.7.2 Subtract

Figure 32 - Subtract

Before: After:

The 2 shapes on the design surface were selected and then the subtract option was selected. Note that subtract only works with 2 shapes.

2.5.7.3 Intersect

Figure 33 - Intersect

Before: After:

The 2 shapes on the design surface were selected and then the intersect option was selected. Note that intersect only works with 2 shapes.

2.6 Forms and Documents Mimic Designer also provides the ability to create forms and view documents in Runtime from within your mimic.

Page 25: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

24

© 2017 B-Scada, Inc. All Rights Reserved.

2.6.1 Creating Forms Mimic Templates can be created for various types of forms: Change Request Forms, Work Orders, Purchase Orders, etc. The design and function of your form is determined by you at the time of its creation.

Figure 34 - Sample Change Request Form

Useful controls for form-creation include Data Text Boxes, Combo Boxes and Text Blocks. The Data Text Box and Combo Box are configured for Two Way binding by default; they are able to write new values to the database, as well as read current values. In Runtime, forms can be retrieved, new forms created, and existing forms can be edited. When a created form is saved, it will become an Asset in your data model. Note that the fields in your form are bound directly to the data in your data model. As soon as you change the data in one field it is updated in the model. There is no ‘submit’ or ‘ok’ button that does a bulk write on all values of the form to the data model.

Page 26: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

25

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 35 - Forms in the Data Model Asset Tree

2.6.2 Viewing Documents Mimic Designer provides a few useful controls for viewing documents from within your mimics. These include the Document Viewer control, Document Link, and Document Tree.

2.6.3 Document Viewer The Document Viewer control is used to view Fixed-Document content (such as XML Paper Specification (XPS) documents) in a paginated format. In order for the Document Viewer to display the document, the document must be an Asset of your Data Model stored on the Status Server. Once the document is part of your Data Model, you can bind its ‘Content’ property to the ‘Document’ property of the Document Viewer Control. For more information on the Document Viewer Control, see Section 2.11.1 of Part 4 – Mimic Controls Reference.

2.6.4 Document Link

The Document Link Control allows you to insert a clickable link that can be used to open a specified

document using the default application for the document type.

Page 27: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

26

© 2017 B-Scada, Inc. All Rights Reserved.

To configure the Document Link Control, use the <SetUp> property of the Properties panel to define the

asset path of your desired document.

For more information on the Document Link Control, see Section 2.12.1 of Part 4 – Mimic Controls Reference.

2.6.5 Document Tree The Document Tree Control is listed under the ‘Documents’ section of the Toolbox. This control allows you to add to your mimics a collapsible list of documents that reside in your data model.

Figure 36 - Document Tree

Selecting <Open> will open the document in the default application for the document type. Selecting <Remove> will permanently remove the document from all collections and assets in the Data Model. Highlighting the root of the Document Tree will make the <Add> button active and gray out the <Open> and <Remove> buttons. Selecting <Add> will allow you to browse for a document to add to your data model. For more information on the Document Tree Control, see Section 1.6.2 of Part 4 – Mimic Controls Reference.

2.7 Saving a Mimic

To save your mimic, you can either click on the <Save> icon on the toolbar or select <Save> in the file menu.

Page 28: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

27

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 37 - Save Menu Option and Icon

You can also use the keyboard shortcut Ctrl + S to save mimics in Mimic Designer. Whichever option is chosen, Mimic Designer will then present you with a ‘Save Mimic’ dialog box.

Figure 38 - Save Mimic Dialog

Provide a name for your mimic and choose a View within your object model which you would like the mimic to be saved. The saved mimic will now be an Asset in your data model, and will be accessible for

Page 29: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

28

© 2017 B-Scada, Inc. All Rights Reserved.

viewing in Windows with the Mimic Runtime or Model Browser, or viewable in HTML 5 web browsers using the Web Gateway. If you are designing your mimic to be viewed in HTML 5 through the Gateway, be aware of what controls you are using and whether or not they are compatible with HTML5, only a subset of the toolbox is HTML 5 compatible. See Part 5 – Designer Controls Reference for more information on which controls are HTML 5 friendly.

2.8 Shortcuts With one or more objects on the workspace, the following actions may be accomplished using Keyboard Short Cuts. In order to use Keyboard Shortcuts, the object(s) must be selected.

2.8.1 Keyboard Short Cuts

Delete - Delete selected objects Ctrl + C - Copy all selected objects Ctrl + X - Copy and remove all selected objects Ctrl + V - Paste last cut or copied objects into current XAML document Ctrl +Z - Undo last task Shift + Ctrl + Z - Redo last undone task Ctrl + S - Save the current XAML document F1 – Help

2.8.2 Other Keystroke Commands

Other Keystroke Commands that are valid for fine-tuning selected objects in a XAML document: Shift + Left Mouse Button - Select an object without unselecting previously selected objects (clicking on objects) Ctrl + Left Mouse Button - Toggle select an object without unselecting previously selected objects (e.g. if an object is selected, you can unselect it) Up Arrow - Move selected object(s) up 5 pixels Down Arrow - Move selected object(s) down 5 pixels Right Arrow - Move selected object(s) right 5 pixels Left Arrow - Move selected object(s) left 5 pixels Shift + Up Arrow - Move selected object(s) up 1 pixel Shift + Down Arrow - Move selected object(s) down 1 pixel Shift + Right Arrow - Move selected object(s) right 1 pixel Shift + Left Arrow - Move selected object(s) left 1 pixel

2.8.3 Object Adorners

Blue - Indicates object is selected for editing. Depending upon the mouse cursor the object can either be moved around the workspace or resized.

Orange - Indicates object is selected for rotation

Purple - Indicates object is selected for skewing

Page 30: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

29

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 39 - Object Adorners

2.8.4 Mouse Cursors

White Hand - Indicates there are no objects in the cache and an existing object can be, or is, selected and may be dragged around the workspace. Cross Hair - A cross-hair indicates a selected object is in the cache and can be added to the workspace. This cursor appears when objects are being added to another object that specifies x,y coordinates. This is only applicable to Canvas and Grid panels. White Arrow - This indicates that the cursor is outside the editable area of a XAML document. There is the ability to click on and select items in other Solution Explorer panels. Size NWSE Arrow - In conjunction with blue object adorners this indicates that the object is ready for resizing. A horizontal double arrow resizes an object's width; a vertical double white arrow resizes an object's height; a diagonal double arrow resizes both the height and width of the object. Circular Arrows - Used in conjunction with orange object adorners, indicates the object is selected for rotation. Disjointed Double Arrow - Used in conjunction with purple object adorners, indicates the object is selected for skewing. Vertical disjointed arrows skew the object's height along its vertical plane; horizontal disjointed double arrows skew the object's width along its horizontal plane. Note: If the object has been rotated a minimum of 90 degrees the above skew movements will be reversed. Bold Plus (+) Sign with the Word "Object" - This indicates a selected object is in the cache and can be added to the workspace; this mouse cursor appears when objects are being added to another object that does not specify x,y coordinates.

Page 31: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

30

© 2017 B-Scada, Inc. All Rights Reserved.

3 Data Binding Data binding in Status Enterprise is the process of browsing data items from the Data Model, and associating the value of a data item with a property of a control on the design surface. As the data item’s value changes, the property of the visual on the design surface also changes. Data binding can be bi-directional, where a property change of a control on the design surface is propagated to the data item in the model, with a check box for example.

3.1 Configuring Data Binding To begin data binding, select a user interface control on the design surface. The Data Binding panel will show views of assets that are available for binding.

Figure 40 - System View Tree

If your mimic is a regular mimic and not a template, the System View Tree will be your only option and will contain every asset to which you can bind items in your mimic. If you are creating a mimic template (a reusable mimic that can be used with any Asset that is of a specific type or sub type), the Data Binding panel will also include a Relative Type Tree, which will expand to reveal all properties and components of your mimic’s particular type. If your mimic is a template, you should be using properties in the Relative Type Tree for your bindings.

Page 32: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

31

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 41 - Relative Type Tree

Select the item you would like to bind to from the available items tree and then select the Property you would like to bind to your graphic. With the Property highlighted, a list of selectable attributes of that Property will appear in the Properties panel directly beneath.

Figure 42 - Properties Panel

In most cases, you will bind to the Value of the Property, though there may be cases in which you will want to bind to other attributes like DisplayName or Timestamp, depending on your application. In the Data Binding Panel, you can select the Target Property of the control to which you would like to bind the data. Usually you will not need to change this because the Designer will choose the default property of the control for the binding, but in some cases, you may want to bind to a different property.

Page 33: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

32

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 43 - Configuring Data Binding

Additional options are provided in the Data Binding panel: Update Rate allows you to change the frequency with which the graphic will be updated with value changes. String Format allows you to format the output of the binding; for example, if you are displaying a double in a text block control, you may want to limit the number of decimal places displayed to 2 instead of 16. Binding Mode allows you to choose whether you will use OneWay, TwoWay, or OneTime binding: OneWay – The bound control will read property changes from the server but will not write them. TwoWay – The bound control will be able to read and write property changes. OneTime – The bound control will update with a property change one time; additional property changes at the server will not affect the control. Monitoring Mode allows you to choose Reporting, Sampling or Disabled to determine how data changes will be received. Reporting is event based, when the property changes. Sampling is at a fixed time interval. When all binding options have been configured to your liking, click the <Apply> button near the bottom of the panel to apply the binding. If the binding is a direct binding to specific Asset, the user interface control will be updated with the data of the property you are bound to in the Data Model. If binding to a property on a template, the control will not update with data until runtime when the mimic is associated with an Asset that matches the template type of the document.

3.2 Testing Data Binding To test your mimics with live data, select the test run icon in the toolbar. This will launch the Status Client which will display your mimic with the data from the Status Server. See the Status Client in Part 6 - Model Browser and Runtime for more information.

Page 34: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

33

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 44 - Test Run Icon

Page 35: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

34

© 2017 B-Scada, Inc. All Rights Reserved.

4 Toolbox Controls

4.1 Control Overview

Figure 45 - 3D Fluid Silo Tanks

The following is a partial list of some the available controls in the Mimic Designer Toolbox. Many others are available – including specialized data controls. All controls are discussed in greater detail in Part 5 – Designer Controls Reference.

Data Management Create Object Button Create Object Gel Button Historical Data Control Live Tile Tab Control

Documents Document Tree

4.2 Web Friendly Controls Mimics that are intended for viewing in a web browser need to use a sub set of the available controls and shapes in the Mimic Designer. While many controls are supported for use in web browsers, there are some that are not. To view a comprehensive list of mimic controls supported on the Web, please see Part 5 – Designer Controls Reference. There is also a Check Box Labeled HTML 5 on the Toolbar that will allow you to hide/show all Gateway compatible controls. When this box is checked, you will only see tools in the toolbox that will function correctly in that Gateway, all other controls will be hidden from view. If this box is unchecked, you will see all available controls.

Figure 46 – HTML 5 Check Box

Mimics viewed on the Web allow most of the functionality of those viewed in the Mimic Runtime or Model Browser. Web-based mimics support navigation, multiple layers, and two-way data binding. Live data can be read in real time, and can be written back to the server.

Page 36: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

35

© 2017 B-Scada, Inc. All Rights Reserved.

Mimics intended for the Web should be conceived with an understanding of what will or will not work before they are designed. If the same mimic is to be used both on a Windows client machine and via the Web, it would be a good practice to use only Web friendly controls when designing the mimic.

4.3 Workspaces

Aside from the ability to setup workspace access for mimics, Status Enterprise also allows users to setup

workspace access for controls.

4.3.1 Setting Up Workspaces for Controls

1. First, we need to create users and workspaces in the Data Model Designer.

2. Navigate to the Assets tab and select Users.

3. Click on the Create Asset button and an Add User screen will show up.

4. Type the username of choice. For this demonstration, we will create “user1”. Then, click OK.

For this demonstration, we will leave the password blank.

Figure 47 - Adding User

5. Let’s add another one by clicking the Create Asset button again and name it “user2”.

6. Now that we have created our users, navigate to the Workspaces tab.

7. On the left panel of the screen, click Add Workspace button.

8. Type the Workspace Name. For this demonstration, we will use “user1 workspace”.

9. Select the workspace we just created and navigate towards the bottom of the screen under

User Accounts.

Figure 48 - Adding User Accounts

10. Click the Add User button.

Page 37: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

36

© 2017 B-Scada, Inc. All Rights Reserved.

11. Select the user for this workspace. For this demonstration, we will select “user1”. Then, click

OK.

Figure 49- Selecting Profile

12. Create another workspace. Give it a name. For this example, let’s “user2 workspace”.

13. Assign a different user for this workspace. For our demonstration, select “user2”. Then, click

OK.

14. Now that we have created the necessary workspaces, we can now launch the Mimic

Designer.

15. Create new or open existing mimic.

16. Drag a control onto the design surface. For this demonstration, we will use the Compass

control under Gauges.

17. Select the Compass and go to the Properties section. Check the Advanced checkbox to

access workspace.

18. Click the Workspaces button. This will pull up the Workspace Configuration screen.

19. Click the Add button and select a workspace. For this demonstration, we will select “user1

workspace”.

Page 38: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

37

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 50 - Selecting Workspace

20. The workspace will now be listed in the Workspace Configuration screen. Underneath the

Workspace, there are two options to select:

Disabled – This will allow the control to be visible and enabled for the workspace it has been

specified for. The control will still be visible to the non-specified workspaces except it will be

disabled (grayed out).

Collapsed – This will allow the control to be accessible ONLY to the specified workspace.

NOTE: The controls will always be visible and enabled for the Administrator.

For this demonstration, we will select Disabled.

21. Click OK and save the mimic.

22. To check if the Workspace setup is working properly, access the mimic using either Mimic

Runtime or the Gateway.

23. Log in using the username from the other workspace. For this demonstration, we will use

“user2”.

24. Once the page loads, you will notice that it will be blank. This means that your Workspace

Configuration is working.

Page 39: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

38

© 2017 B-Scada, Inc. All Rights Reserved.

5 Mimic Runtime Status Enterprise provides separate Mimic Runtimes for running mimics created in the Mimic Designer and Application Designer. Additionally, many mimics can be converted to HTML5 via the Web Gateway and viewed on the internet. For more information on the Status Enterprise Web Gateway, please see Part 8 – Web Gateway.

5.1 Starting the Status Mimic Runtime The Mimic Runtime is used to run mimics created as XAML documents in the Mimic Designer. The Mimic Runtime is started in the same manner as all Status Client applications. The user will need to log in to the Status Server with a valid user account. For more information on logging in to the Status Server, see Part 1 – Overview and Concepts.

Figure 51 - Status Server Login

After logging in, the Mimic Runtime will need to know which mimic to open as your main screen. Mimics are designed with the Mimic Designer. You can select either a regular mimic or a template. If selecting a template, you also need to select an asset to open the mimic with.

Page 40: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

39

© 2017 B-Scada, Inc. All Rights Reserved.

Figure 52 - Open Mimic Dialog Box

On clicking <OK>, the mimic will be displayed in the Mimic Runtime application. If the mimic has been designed with navigation controls, you will be able to navigate to other mimics.

Page 41: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

40

© 2017 B-Scada, Inc. All Rights Reserved.

5.2 Mimic Runtime Configuration Scheduler

Figure 53 - Mimic Runtime Scheduler

The Mimic Runtime Scheduler allows you to configure the Mimic Runtime to cycle through specified

screens at pre-determined time intervals.

To add your screen to the configuration, double click to edit the Mimic Path column and select the mimic

that you would like to use for your screen. To set an asset path, edit the Asset Path column and select

the asset from the asset tree. The Time column is where the amount of time to display the screen is set,

at default it is set to 5 seconds (5000 milliseconds).

The <Add> button allows you to add a new row to your configuration.

Figure 54 - Add Button

Alternatively, there is an empty row at the bottom of the property grid that you can use to create a new

row as well. Simply edit the fields that you would like to change, and when you’re finished editing the

row, it will be automatically added to the configuration.

The <Delete> button allows you to delete a row from your configuration.

Figure 55 - Delete Button

To delete a row, select the row that you wish to delete and click the <Delete> button. The row will be

removed from the configuration and will no longer be seen when the Runtime is launched.

Page 42: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

41

© 2017 B-Scada, Inc. All Rights Reserved.

The <Up> and <Down> buttons allow you to shift the selected row either up or down to change its

location in the configuration order.

Figure 56 - The Up and Down Buttons

The <Start Runtime> button launches the Mimic Runtime and runs the configuration.

Figure 57 - Start Runtime Button

Clicking the <Start Runtime> button will launch the configuration in the Mimic Runtime. If you have not

yet saved your configuration and click the <Start Runtime> button, the Save As dialog will open first to

allow you to save your configuration before launching the Runtime.

5.3 Embedding the Mimic Runtime into Your Own Windows Application The Mimic Runtime is a .NET WPF Control. This control can be dropped onto a .NET Windows Presentation Foundation application. When the application is run, it will authenticate and load the selected mimic in the same manner as the Mimic Runtime. Sample code for embedding the Mimic Runtime is available in Appendix 1. In order to use the Mimic Runtime, the following assembly references will be required:

GenericBinding Opc.Ua.Client Opc.Ua.Core Status.Common.Diagnostics Status.Common.Interfaces Status.Common.ThemeManager Status.Controls.UIControls Status.DataModel.DataBinding Status.DataModel.DataSource Status.DataModel.ObjectModel Status.Resources.CommonResources Status.Resources.StatusResources Status.Runtime.ControlLibrary Status.StatusServer.Common StatusBrushConverter StatusControls StatusVisibilityConverter VantagePoint.Charts VantagePoint3D VantagePointTrend

Page 43: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

42

© 2017 B-Scada, Inc. All Rights Reserved.

6 Miscellaneous

6.1 Extending and Customizing the Mimic Designer

The Status Enterprise Mimic Designer was designed from the ground up to be an extensible and customizable system. Using the Status Object Model, plug-ins can easily be written to extend the functionality of the Designer. Many services are readily available as well as access to the design surface and Document Tree. You can even create your own skin for the product. For a developers guide on extending Status Enterprise, please contact support.

6.2 Creating Custom Controls for Mimics Custom .NET controls can be created and added to your mimics. These controls must be .NET 4.0 - 4.5 Windows Presentation Foundation controls. To add a control to the Mimic Designer, select <Add WPF Control> in the Toolbox and select the .NET assembly that contains your control.

Figure 58 - Add WPF Control

A dialog will be displayed to pick your control from a list of types in your .NET assembly. Once the dialog is dismissed, the control will be available in the Toolbox.

Figure 59 - Bar Chart

In order for the Model Browser and Mimic Runtime to load your control, the control - and all of its dependencies - will need to be in the executable directory of the Status Browser and Mimic Runtime or in

Page 44: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

43

© 2017 B-Scada, Inc. All Rights Reserved.

the Global Assembly Cache of your computer. If using these controls without accessing the Status Object Model, no special references to Status Enterprise assemblies are required. Your control can get the Status Object Model to interact with the Status Enterprise Server. To get the Status Object Model your control will need to link to the following assemblies: Status.Common.Diagnostics Status.Common.Interfaces Status.DataModel.ObjectModel Status.DataModel.ViewModels Status.Runtime.ControlLibrary Status.StatusServer.Common You will also need to link to the following OPC UA assemblies: Opc.Ua.Client Opc.Ua.Core The following code will then expose the Status Object Model to your application.

StatusRuntimeControl _statusRuntimeControl = Helper.GetCurrentStatusRuntimeControl(this); if (_statusRuntimeControl == null) // design time { return; } //get the object model _objectModel = _statusRuntimeControl.StatusObjectModel; For more information on the Status Object Model see Part 9 - Object Model Reference.

6.3 Embedding Mimic Runtime Sample Code

The following can be used to embed the Status Runtime Control into your WPF application.

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Net.Sockets; using System.IO; using Opc.Ua; using Opc.Ua.Client; using System.Security.Cryptography.X509Certificates; using System.Net; using Opc.Ua.Bindings;

Page 45: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

44

© 2017 B-Scada, Inc. All Rights Reserved.

using System.Diagnostics; using Status.DataModel.ObjectModel; using Status.DataModel.ObjectModel.Login; using Status.Runtime.ControlLibrary; using Status.Common; using Status.Common.Diagnostics; using Status.DataModel.ObjectModel.ServerLogin.Dialogs; using Status.DataModel.DataSource; using GenericBinding; using Status.Resources.CommonResources; using Status.Runtime.ControlLibrary.Supporting; using Status.DataModel.ObjectModel.Assets; using Status.StatusServer.Common.Helpers; using Status.DataModel.ObjectModel.Common; using Status.DataModel.ObjectModel.Files; namespace StatusClient { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { /// <summary> /// Initializes a new instance of the <see cref="MainWindow"/> class. /// </summary> public MainWindow() { InitializeComponent(); Loaded += new RoutedEventHandler(MainWindow_Loaded); } internal StatusObjectModel _objectModel; StatusServerClient _statusServerClient = null; void MainWindow_Loaded(object sender, RoutedEventArgs e) { Background = ThemeManager.Current.ApplicationBackground; Icon = Status.Resources.StatusResources.StatusIcons.GetBitmap("Status32.png"); Application.Current.MainWindow = this; Initialize(this); //get the arguments string[] args = Environment.GetCommandLineArgs(); if (args.Length > 1) { //use arguments to start the client InitializeStatusClientControlArguments(args); } else { InitializeStatusClientControl(); } } StatusRuntimeControl _statusClientControl = null; /// <summary>

Page 46: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

45

© 2017 B-Scada, Inc. All Rights Reserved.

/// Initializes this instance. /// </summary> private void Initialize(Window ownerWindow) { try { SResult sresult = LoginToUAServer(); if (sresult.IsNotGood()) { sresult.ShowMessage(); Application.Current.Shutdown(0); return; } if (sresult.Code == 11010048) { return; // shutting down } _statusServerClient.GetObjectModel(out _objectModel); if (sresult.IsNotGood()) { sresult.ShowMessage(); Application.Current.Shutdown(0); } GenericBindingManager.CurrentBindingManager.RemoveAllDataSources(true); StatusServerDataSource dataSource = new StatusServerDataSource(_objectModel); dataSource.DisplayName = "uaserver"; } catch (Exception ex) { MessageBox.Show(ex.Message, CommonStrings.ERROR); if (Application.Current != null) { Application.Current.Shutdown(0); } } } /// <summary> /// Start status client control /// </summary> void InitializeStatusClientControl() { if (_objectModel == null) { return;// shutting down } try { // the status client as a control _statusClientControl = new StatusRuntimeControl(); _statusClientControl.InitializeCompleted += new EventHandler(_statusClientControl_Initialized); _statusClientControl.Initialize(this, _objectModel); this.Content = _statusClientControl; this.Title = "Status Enterprise Runtime"; } catch (Exception ex) { MessageBox.Show(ex.Message, CommonStrings.ERROR); if (Application.Current != null) { Application.Current.Shutdown(0);

Page 47: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

46

© 2017 B-Scada, Inc. All Rights Reserved.

} } } /// <summary> /// Start status client control with passed in arguments /// </summary> /// <param name="args"></param> void InitializeStatusClientControlArguments(string[] args) { if (_objectModel == null) { return;// shutting down } string userNodeId = null; string assetId = null; args = args[1].Split('|'); userNodeId = args[0]; if (args.Count() > 1) assetId = args[1]; try { // the status client as a control _statusClientControl = new StatusRuntimeControl(); _statusClientControl.Initialize(this, _objectModel); this.Content = _statusClientControl; this.Title = "Status Enterprise Runtime"; SResult sResult = null; ObjectBase objectBase = _objectModel.ObjectFromNodeId(NodeHelper.NodeIdFromKey(userNodeId), out sResult); if (objectBase == null) return; Asset asset = null; if (assetId != null) asset = _objectModel.ObjectFromNodeId(NodeHelper.NodeIdFromKey(assetId), out sResult) as Asset; _statusClientControl.OpenMimic((UserFile)objectBase, asset, false, false); } catch (Exception ex) { MessageBox.Show(ex.Message, CommonStrings.ERROR); if (Application.Current != null) { Application.Current.Shutdown(0); } } } void _statusClientControl_Initialized(object sender, EventArgs e) { try { // if no command line arguements, show a mimic picker _statusClientControl.PickMimic(); } catch (Exception ex) { SResult.Create(ex, "Showing the mimic failed", "").ShowMessage(); }

Page 48: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

47

© 2017 B-Scada, Inc. All Rights Reserved.

} /// <summary> /// Shows the connection dialog to the UA server /// </summary> SResult LoginToUAServer() { LoginDialog loginDialog = new LoginDialog(); loginDialog.Owner = this; loginDialog.Resources = ThemeManager.Current; loginDialog.Background = loginDialog.Resources["ApplicationBackground"] as Brush; if (loginDialog.ShowDialog() == false) { if (Application.Current != null) { Application.Current.Shutdown(); } return SResult.Create(StatusCodes.GoodShutdownEvent, "User canceled", ""); } _statusServerClient = loginDialog.StatusServerClient; return SResult.Good; } } }

Page 49: Mimic Designer - B-Scadascada.com/Content/UserGuides/StatusEnterprise/Status Enterprise... · Status Enterprise Mimic Designer 3 © 2017 B-Scada, Inc. All Rights Reserved. Table of

Status Enterprise Mimic Designer

48

© 2017 B-Scada, Inc. All Rights Reserved.

7 Additional Information and Support For more information in using Status Enterprise, please visit us at www.scadauniversity.com. This will give you access to instructional videos, documentation and our online forum. You can also email B-Scada support at [email protected]. B-Scada, Inc. 9030 W. Fort Island Trail Building 9

Crystal River, FL 34429 USA +1 352-564-9610 www.scada.com