TM611TRE.4B1-EnG Working With Mapp View 5.18 V3001

TM611
Working with mapp View

Requirements
Completed
SEM210 Automation Studio training: Basics
Training
Automation Studio 4.11.1
Software Automation Runtime 4.92
mapp View 5.18
ARsim
or
Hardware
X20 CPU with ETAL611.1T10-1
www.br-automation.com/eta-system
2 TM611 - Working with mapp View

Table of contents
Table of contents
1 Introduction........................................................................................................................................... 5
1.1 Learning objectives................................................................................................................. 6
1.2 Symbols and safety notices....................................................................................................6
1.3 B&R Tutorial Portal................................................................................................................. 7
2 mapp View concept..............................................................................................................................8
2.1 Installing the mapp View Technology Package...................................................................... 9
2.2 Licensing............................................................................................................................... 10
2.3 Organization of an HMI application...................................................................................... 11
3 mapp View HMI application............................................................................................................... 12
3.1 .vis file................................................................................................................................... 12
3.2 .mappViewConfig file............................................................................................................ 14
4 Creating pages................................................................................................................................... 15
4.1 Packages in the Logical View...............................................................................................15
4.2 Layout....................................................................................................................................16
4.3 Areas..................................................................................................................................... 17
4.4 Content.................................................................................................................................. 18
4.5 Page...................................................................................................................................... 20
4.6 HMI application in the browser............................................................................................. 22
5 Navigation...........................................................................................................................................23
5.1 Manual navigation................................................................................................................. 23
5.2 Automatic navigation.............................................................................................................24
5.3 Using manual navigation...................................................................................................... 25
6 Visual appearance - Styling............................................................................................................... 29
6.1 Styleable property................................................................................................................. 29
6.2 Style.......................................................................................................................................30
6.3 Theme................................................................................................................................... 31
6.4 Default style.......................................................................................................................... 33
7 Data binding....................................................................................................................................... 35
7.1 Binding...................................................................................................................................35
7.2 OPC UA................................................................................................................................ 36
7.3 Using data binding................................................................................................................ 37
8 Media files.......................................................................................................................................... 46
8.1 Image widget.........................................................................................................................46
8.2 SVG icon library....................................................................................................................48
9 User role system................................................................................................................................ 49
9.1 RBAC concept.......................................................................................................................49
9.2 Using the user role system...................................................................................................50
10 Localization.......................................................................................................................................57
10.1 Text system......................................................................................................................... 57
TM611 - Working with mapp View 3

Table of contents
10.2 Using the text system......................................................................................................... 60

10.3 System of units................................................................................................................... 64
10.4 Using the unit system......................................................................................................... 65
11 Events and actions........................................................................................................................... 69
11.1 Events..................................................................................................................................69
11.2 Actions................................................................................................................................. 70
11.3 Using events and actions....................................................................................................71
12 Notes on putting systems into operation......................................................................................... 77
12.1 Putting the mapp View server into operation on the controller........................................... 77
12.2 Putting the mapp View client into operation on a T50........................................................78
13 Summary.......................................................................................................................................... 82

Introduction
1 Introduction
Figure 1: mapp Technology - The future of software engineering
mapp Technology
mapp View is part of the mapp Technology software framework.

The modular, preprogrammed software components – known as
"mapps" – substantially reduce the time and cost of developing au-
tomation software. The intelligent mapps communicate with each
other automatically – even further reducing the amount of program- Figure 2: B&R mapp Technology logo
ming required. The extensive mapp portfolio is growing all the time.
mapp View
With mapp View, automation engineers have all the tools they need
to create powerful, intuitive, web-enabled HMI screens. There is no
need to deal with the underlying web technology. These technolo-
gies are encapsulated in widgets, which are simply dragged and
dropped into place and configured.
Figure 3: B&R mapp View logo

Introduction
1.1 Learning objectives
This training module shows the first steps for creating an HMI application. In exercises, typical use cases
are shown and the functions required for them are explained.
• Participants will learn the basic concepts of mapp View and gain a better understanding of the
characteristics of these concepts.
• Participants will be able to add a new mapp View visualization object to an Automation Studio
project and configure it.
• Participants will be able create layouts and use them to organize HMI pages.
• Participants will be able to use widgets to manage mapp View HMI application content.
• Participants will become familiar with the different ways of navigating between HMI pages and
will be able to configure manual navigation.
• Participants will be able to include process data from the control application in a mapp View
HMI application.
• Participants will be able to implement images to organize the visual design in a mapp View
HMI application.
• Participants will learn how the user role system is used to configure the properties of a mapp
View HMI application depending on the logged in user.
• Participants will become familiar with the text system functions and will be able to configure
language switching.
• Participants will become familiar with the system of units and will be able to configure unit con-
version.
• Participants will learn how to configure triggering specific actions when events occur.
• Participants will learn about events and actions and be able to configure the connection be-
tween a triggering event and the subsequent action.
1.2 Symbols and safety notices
Unless otherwise specified, the symbol descriptions and safety notices listed in "TM210 - Working with
Automation Studio" apply.

Introduction
1.3 B&R Tutorial Portal
The B&R Tutorial Portal provides tutorials on a wide range of subjects. Because
the tutorials are interactive, they allow content to be learned effectively. To make
it easier for you to find the tutorials you need, they are organized according to the
structure of our modular training content.
B&R Tutorial Portal (https://tutorials.br-automation.com/publisher/)
Login required: Follow the link and you will be redirected to the B&R Tutorial Portal. Use the same
access data as for the B&R website to log in.
Figure 4: Navigating within the course in the B&R Tutorial Portal

mapp View concept
2 mapp View concept
Platform-independent
Figure 5: mapp View is platform independent
mapp View is built on the globally accepted web standards HTML5, CSS3 and JavaScript. Unlike pro-
prietary platforms, these standards are updated continually and remain usable for decades – ensuring
maximum return on investment.
Seamlessly integrated
Figure 6: mapp View is seamlessly integrated
HMI projects are developed in B&R's development environment, Automation Studio. Pages and other
resources are managed in the Logical View. The Toolbox provides an excellent overview of all available
widgets.

mapp View concept
2.1 Installing the mapp View Technology Package
Automation Studio is required to use mapp View.

The desired version of the mapp View Technology Package can be downloaded from the B&R website
or via the upgrade dialog box. The installation is done via the upgrade dialog box in Automation Studio.
When installing the Technology Package, Automation Help is automatically extended to include the new
information (from mapp View).
Figure 7: Automation Studio upgrade dialog box \ Technology Packages
mapp Technology \ Release strategy \ Transport mechanism

mapp View concept
2.2 Licensing
A mapp View HMI application can be used in ARsim without restrictions or licenses. A license is required
for hardware-based target systems.
Licensing model Order number Range of functions

mapp View "Starter" 1TCMPVIEW.00-01 Permits the use of one mapp View
client and one OPC UA server. All base
widgets are also included.
Widget limitations are indicated by cor-
responding symbols in the Widget Cat-
alog when the Content Editor is open.
mapp View "Premium" - Wid- 1TCMPVIEWWGT.10-01 Permits the use of all widgets that are
gets not included in the free version, e.g.
ContentCarousel, FlexBox, VNCView-
er, WebViewer.
mapp View "Premium" - Clients 1TCMPVIEWCLT.10-01 Permits the use of any mapp View
clients.
mapp View "Premium" - Server 1TCMPVIEWSRV.10-01 Permits binding to more than one OPC
UA server.
mapp View "Ultimate" 1TCMPVIEW.20-01 Permits the use of all widgets, any
number of mapp View clients and bind-
ing to more than one OPC UA server.
Table 1: B&R package-based licensing model
If the necessary licenses are missing, a corresponding entry is made in the logbook.
Visualization \ mapp View \ General \ Licensing

mapp View concept
2.3 Organization of an HMI application
The elements of a mapp View HMI application are configured and managed in Automation Studio.
HMI pages, texts and image files are managed in the Logical View.
The Configuration View is where one or more HMI applications are "assembled" in the active configura-
tion from the elements in the Logical View. In this way, there is a clear separation between the source
files for HMI elements and the necessary HMI for a machine configuration.
Figure 8: Organization of the HMI application in Automation Studio
Logical View
In the Logical View, elements of an HMI application (pages, pieces of content, texts, media files, etc.)
are managed in a mapp View package.
Configuration View
The Configuration View is where one or more HMI applications are configured and managed. This is
also where binding information between a widget and variable is managed.
Page Editor / Content Editor

Visual editor for designing a page and or its parts (piece of content). A piece of content can be edited
either graphically or in plain text (XML).
Toolbar
The toolbar in the visual editor provides tools for working with widgets during the design phase.
Widget Catalog
When a piece of content is opened (graphically or in XML form), widgets can be added from the catalog
and configured.
Properties window
Elements of an HMI application are configured in the Properties window. Depending on the property (of
a widget, for example), different dialog boxes are available for editing.

mapp View HMI application
3 mapp View HMI application
A mapp View HMI application consists of elements in the Logical View and in the Configuration View.
This chapter provides a detailed explanation of the files that are added to the Configuration View.
Visualization \ mapp View \ Concept \ Elements of an HMI application
3.1 .vis file
The mapp View visualization object (.vis) defines which visualization components in the Logical View
and Configuration View are involved in displaying pages on the client. Each configuration can contain
1-n visualization objects (.vis).
Figure 9: Visualization ID and autoUpdate are configured
We recommend closing the .vis file when not in use so referencing can be entered in the back-
ground when working on the HMI application.
Visualization ID
The "Visualization ID" element determines how the HMI application is launched from the client.
autoUpdate
The attribute "autoUpdate" in the HMI application defines whether HMI elements are automatically en-
tered into the .vis file (true by default) or not (false).
It must be ensured that attribute "autoUpdate" is set to "true". This will automatically include all HMI
elements added in the Logical or Configuration View in the HMI application.
The first page added in the Logical View is also used as "StartPage".
Visualization \ mapp View \ Engineering \ Organization of the HMI application \ Configuration

View \ mapp View HMI application \ Updating element IDs automatically
Attribute "autoUpdate" is available starting with mapp View 5.17. With mapp View 5.18, the
default value = true. If an existing HMI application is opened and new elements are added, they
are not automatically applied. The attribute must be entered manually here.

Exercise: Adding a visualization object in the Configuration View

The objective of this first exercise is to add a visualization object in the Configuration View based on
Automation Studio project "mappViewGettingStarted".
The mappViewGettingStarted project is available for the training as a .zip file and serves as the basis for
creating the mapp View HMI application.
1) Open project "mappViewGettingStarted"
2) If necessary, download and install the mapp View version and select it in the project
3) Switch to the Configuration View

4) Add a "visualization object" (.vis) from the "mappView" node in the Object Catalog
5) Rename the ID (name of the visualization object) to "Training"
Result:
In this exercise, the name of the visualization object is changed to "Training".
Figure 10: The visualization object name "Training" is entered for the visualization ID

3.2 .mappViewConfig file
This static configuration makes it possible to configure various settings for the mapp View server e.g.
maximum client connections.
The visualization ID can be entered under "Client configuration". This has the advantage that the HMI
application is opened directly in the browser - even without specifying the visualization ID in the URL.

View \ mapp View configuration
Exercise: Adding and editing a server configuration

In this exercise, the mapp View Server configuration is added and edited so the client automatically opens
the "Training" HMI application.
1) In the "mapp View" node, add the "mapp View configuration" ("Config.mappviewcfg") from the Ob-
ject Catalog
2) Enter the ID of the HMI application ("Training") in field "ID of default visualization"
Result:
The name of the HMI application is entered in field "ID of default visualization".
Figure 11: The mapp View server configuration is added and the Visualization ID is configured
Redirect configuration
In the mapp View node, a "Redirect configuration" can also be added. Redirect rules are used to assign
a defined HMI application to the client based on certain properties. This is especially useful when there
are multiple HMI applications.
Visualization / mapp View / Engineering / Organization of the HMI application / Configuration

View / Navigation

Creating pages
4 Creating pages
All components of an HMI application in mapp View are given an ID or name.

Each file must have a unique name within a package as well as an individual ID to make it distinguish-
able from similar components. In this way, no two pieces of content are permitted to have the same ID
in the Logical View.
Visualization \ mapp View \ Engineering \ Organization of visualization \ Naming and organiza-

tion \ Naming of mapp View components
4.1 Packages in the Logical View
After the necessary files (.vis and .mappViewConfig) have been added into the Configuration View, the
mapp View package and the Visualization package from the Object Catalog are added in the Logical
View.
Visualization \ mapp View \ Engineering \ Organization of the HMI application \ Logical View
• mapp View package
• The mapp View visualization package
Exercise: Adding packages
1) Add the mapp View package.
2) Add the visualization package.
Result:
The packages named "mapp View" and "Visualiza-
tion" are located in the Logical View of the Automa-
tion Studio project.
Figure 12: Both packages are integral parts of

the project

Creating pages
4.2 Layout
A layout defines the space in which multiple areas

are structured. The area structured by the layout is
defined in pixels using the parameters "width" and
"height". For clear identification, each layout has
an ID.
Figure Layout with a width and height in pixels
shows the outline of a layout.
Figure 13: Layout with a width and height in pixels
Visualization \ mapp View \ Engineering \ Layout and areas \ Adding a layout
If possible, the same layout should be used for the most frequently used pages of the HMI
application. This is because changing the layout during a page change triggers a complete
rebuild of the page.
Exercise: Creating the layout

The goal of this exercise is to structure the HMI application into sub-areas. A layout is created and edited
for this purpose.
1) In the Logical View under "mapp View", click on "Layouts"
2) Add the layout file from the Object Catalog
3) Change the name of the layout file to "MyLayout"
4) Change the properties of the layout file:
Name Width Height

MyLayout 1280 800

Creating pages
Result:
The layout is created and a set size has been specified.
Figure 14: In the Logical View, "MyLayout.layout" is added and graphically edited
4.3 Areas
Areas are defined portions of a layout.

Each area within a layout has a unique "ID". An
area is defined according to its size ("width" and
"height") and position ("top" and "left") within the
layout, which is also specified in pixels.
The reference point for an area's position within a
layout is the upper left corner.
Figure 15: Layout with three areas
An area with the name (ID) "area1" already exists after being added and can be reused. A new area is
added via the corresponding icon in the toolbar or by double-clicking on an empty area of the layout.
Visualization \ mapp View \ Engineering \ Layout and areas \ Add layout \ Edit layout (graphi-
cally) \ Configure areas
Exercise: Defining areas

The goal of this exercise is to divide layout "MyLayout.layout" into three areas.
1) Change the properties of "area1"
2) Double-click on the layout to create two additional areas
3) Change the properties of the two new areas:

Creating pages
Name Top Left Width Height

AreaTop 0 0 1280 100
AreaLeft 100 0 150 700
AreaMain 100 150 1130 700
Result:
The finished layout consists of three areas: "AreaTop", "AreaLeft" and "AreaMain".
Figure 16: "MyLayout.layout" with three areas
4.4 Content
Content refers to a piece of content that can be displayed in an HMI application. A piece of content is
identified using a globally unique "ID" and its size ("width" and "height").
Widgets can be placed and configured in a piece

of content.
The figure shows a piece of content with
the following widgets:
• Button
• Label
• Numeric output
• Numeric input
• Image
Figure 17: One piece of content with multiple widgets

Creating pages
A piece of content that is used on several pages can be added to package "AreaContents".
Visualization \ mapp View \ Engineering \ HMI page content \ Adding content
Exercise: Creating pieces of content

In this exercise, two pieces of content are created that are reused on multiple pages. The definition is
made in folder "AreaContents". The pieces of content are edited here using the visual editor.
1) In the Logical View under "mapp View \ Visualization \ Pages", click on "AreaContents"
2) Add the page content file twice from the Object Catalog
3) Rename the pieces of content:

° ContentTop
° ContentLeft
4) Change the properties of the two pieces of content:
Name Height Width

ContentTop 100 1280
ContentLeft 700 150
Result:
The figure shows the two pieces of content added
in the "AreaContents" folder.
Both files each have a filename and an ID. The file-
name is primarily used to make the project clearer
and to identify the piece of content at first glance.
Figure 18: Two contents are created in the

AreaContents folder

Creating pages
4.5 Page
An HMI page defines the content that can be displayed in the visible space of an HMI application client.
The page is identified using a globally unique ID. The page defines which layout will be used to structure
the areas and which content will be assigned to the individual areas.
Figure "Page with areas, content and widgets"

shows an example of a page. The three areas have
different background colors to make them more
distinctive. In property "backColor", a hexadecimal
value is specified as the color code.
Figure 19: Page with areas, content and widgets
Visualization \ mapp View \ Engineering \ Pages \ Adding pages \ Editing a page (graphically)
Exercise: Creating a page

The goal of this exercise is to create an HMI page called "MainPage". The layout and the contents should
be assigned to the page. For this purpose, a new piece of content is also created, which is placed in
"AreaMain".
1) In the Logical View under "mapp View \ Visualization", click on "Pages"
2) Add the page file from the Object Catalog
3) Rename the overview page and the page file to "MainPage

4) Change the properties of the page file:
PageID LayoutID
MainPage MyLayout
5) Click on the areas and change their properties:
refID backColor
AreaTop ContentTop rgba(255,133,0,1)
AreaLeft ContentLeft rgba(102,53,0,1)
6) Double click on "AreaMain" and enter "ContentMainPage" as the name of the piece of content
7) Change the property of "AreaMain": "backColor" = rgba(240,240,240,1)

Creating pages
Result:
The file "MainPage.page" is created and directly below it is the file "ContentMainPage.content".
The HMI page has a layout with three areas and the pieces of content are referenced to the
areas.
Figure 20: Result of HMI page "MainPage"

Creating pages
4.6 HMI application in the browser
The HMI application can be tested with a browser from the point at which the first HMI application pages
(.page) were referenced in the visualization object (.vis).
After this is successfully built and transferred to ARsim, the HMI application is provided to the browser
(Google Chrome or Microsoft Edge) with the URL:
localhost:81/index.html
Visualization \ mapp View \ Guides \ Getting started \ Testing the HMI application
Exercise: Opening the HMI application in a browser

After the first page has been created and automatically referenced in the visualization object (.vis) through
autoUpdate=true, the project can be compiled and transferred to ARsim.
Since the first page created was entered directly in the .vis file via autoupdate=true, it is also automatically
set as "StartPage".
Result:
The HMI application can be displayed using the following URL:
http://127.0.0.1:81/index.html
Figure 21: HMI application containing a layout with three areas shown in browser

Navigation
5 Navigation
More often than not, an HMI application consists of more than one page. A system of navigation is
needed in order to switch between these HMI pages.
This system determines how these pages are navigated in the HMI application.
The example in figure Navigation schema shows

the three pages "MainPage", "ServicePage" and
"AlarmPage" as well as the options for navigating
between them.
In this example, it is possible to navigate to any
page from any other page.
Figure 22: Navigation schema
Two options are available for navigation in an HMI application: Manual and automatic navigation. Both
types of navigation can be combined.

View \ Navigation
5.1 Manual navigation
Manual navigation is implemented using an individual NavigationButton widget. In this case, a Naviga-
tionButton widget must be placed and configured for each page that can be navigated to from the current
page.
The image Schema for manual

navigation shows that three Nav-
igationButton widgets that have
been placed and configured on
each page. Each individual Navi-
gationButton is configured with the
ID of the target page for navigation.
Figure 23: Schema for manual navigation
Manual navigation is well-suited to situations where the same NavigationButton widgets can be used
for all pages. In this case, they have to be positioned in a piece of content and configured there. This
navigation content can then be reused (referenced) on each page.

Navigation
One drawback of manual navigation is that it is context-independent. The placement and configuration
of the NavigationButton widget is the same on every page. If the placement and configuration of the
NavigationButton widgets should vary depending on the page, you will have to create different pieces of
content for navigation and reference them individually on the corresponding pages.
5.2 Automatic navigation
Automation navigation relies on the definition of a navigation structure. This is used to define the different
navigation paths, i.e. which pages can be navigated to from which other pages. mapp View takes care
of placing the corresponding NavigationButton widgets on each page at runtime.
Each page only displays the target pages for which a navigation path from the current page has been
defined. Displaying the NavigationButton widget is context-sensitive.
The image Automatic navigation

paths shows automatic navigation
for the three pages "MainPage",
"ServicePage" and "AlarmPage". It
is possible to navigate from any
page to any other page, but each
page shows only the context-sen-
sitive navigation targets.
Figure 24: Automatic navigation paths

Navigation
5.3 Using manual navigation
Multi-part exercise - Manual navigation

5.3.1 "Creating additional pages"
1) "Exercise: Creating a ServicePage and AlarmPage" on page 25

5.3.2 "NavigationBar widget"
2) "Exercise: Adding the NavigationBar widget" on page 26

5.3.3 "NavigationButton widget"
3) "Exercise: Adding the NavigationButton widgets" on page 26
4) "Exercise: Opening the HMI application in a browser" on page 28
5.3.1 Creating additional pages
Important: If pages are copied, the IDs of the individual components must remain unique!
Exercise: Creating a ServicePage and AlarmPage

In this exercise, two more pages are created, each with a new piece of content ("ContentServicePage"
and "ContentAlarmPage").
The pages use "MyLayout" and reference "ContentServicePage" and "ContentAlarmPage" in AreaMain.
For information about creating a page, see chapter 4 "Creating pages" on page 15.
1) Create "ServicePage" with "ContentServicePage"
refID backColor
AreaMain ContentServicePage rgba(240,240,240,1)
2) Create "AlarmPage" with "ContentAlarmPage"
refID backColor
AreaMain ContentAlarmPage rgba(240,240,240,1)
5.3.2 NavigationBar widget
The "NavigationBar" widget is used as a container for "NavigationButton" widgets.

When navigation buttons are added to the navigation bar, they can be automatically positioned or aligned
with other navigation buttons that have been added. This can be set via property "childPositioning".
If the "relative" option is selected, the child widgets are automatically positioned in order. This saves the
user from having to manually align each individual navigation buttons.
Visualization \ mapp View \ Widgets \ Container \ NavigationBar

Navigation
Exercise: Adding the NavigationBar widget

In this exercise, the NavigationBar widget is added in "ContentLeft" and configured.
1) "Open "ContentLeft"
2) Add the NavigationBar widget from the Object Catalog
3) Change the properties of the NavigationBar widget:
childPositioning Position Size

relative 0; 0 150; 300
Result:
Properties "childPositioning", "Position" and "Size" of the NavigationBar widget are adjusted.
Figure 25: Adjusted properties of the NavigationBar widget
5.3.3 NavigationButton widget
The "NavigationButton" widget is used to navigate between the different HMI pages.
The text displayed on the navigation button is specified by the "Appearance/text" property.
The unique name of the NavigationButton is defined in property "Common \ Name".
The page to be navigated to when the NavigationButton is pressed is selected using property "Data \
pageID".
Visualization \ mapp View \ Widgets \ Buttons \ NavigationButton
Exercise: Adding the NavigationButton widgets

In this exercise, the NavigationButton widgets are added and configured in the NavigationBar widget.

Navigation
1) On" ContentLeft", mark the NavigationBar widget
2) Add the NavigationButton widget three times from the Object Catalog
3) Change the properties of the NavigationButton widgets:
Text Name pageID Margin Size

MainPage MainPageButton MainPage 5px 140;60
ServicePage ServicePageButton ServicePage 5px 140;60
AlarmPage AlarmPageButton AlarmPage 5px 140;60
Result:
Properties "Text", "Name", "pageID", "Margin" and "Size" of the three NavigationButton widgets
are adjusted.
Figure 26: Adjusted properties of the NavigationButton widget for "MainPageButton"

Navigation
Exercise: Opening the HMI application in a browser

After all "NavigationButton" widgets have been added and configured, the project can be compiled and
transferred to ARsim.
Result:
The HMI application can be displayed using the following URL:
http://127.0.0.1:81/index.html
Figure 27: HMI application in the browser with manual navigation

Visual appearance - Styling
6 Visual appearance - Styling
Styling refers to the ability to design the appearance of an HMI application without affecting how it actually
functions.
The way an HMI application looks in its entirety as well as the appearance of its individual elements is
determined using styleable properties, styles and themes.
Visualization \ mapp View \ Engineering \ Themes and styles
6.1 Styleable property
A styleable property describes a single property of a HMI element

that affects its appearance.
Each widget type has specified styleable properties, which are de-
scribed in Automation Help for the respective widget. An example of
a styleable property on the Button widget is backColor.
Figure 28: Turning styleable properties
on and off
If a widget is used more than once, the styleable properties must be changed for each individual widget
instance. This approach results in increased effort and the susceptibility to errors is disproportionately
high. To change the appearance of a larger number of widget instances, the use of styles is a better
option.
Exercise: Changing styleable properties of NavigationButton widgets

The goal of this exercise is to change the background color of the NavigationButton widgets using
styleable properties.
1) In "ContentLeft", mark the NavigationButton widgets
2) Change the properties of the NavigationButton widgets
backColor
MainPageButton rgba(255, 255, 192, 1)
AlarmPageButton rgba(192, 255, 192, 1)
ServicePageButton rgba(192, 255, 192, 1)

Result:
The "ServicePage" page is displayed.
The active navigation button shows the default color for the pressed state since the property
"backColor" is only used for the "not pressed" state.
Figure 29: HMI application in the browser with changed "backColor" for the navigation buttons
6.2 Style
A style combines the values of all its styleable properties for a type of a HMI element. There can be
several styles for each type of a HMI element.
The style of a button widget (button style) has a concrete value for each of the widget's styleable prop-
erties. There can be multiple styles for the button widget, e.g. Command, Operate, Default.

6.3 Theme
B&R provides themes that make it possible to quickly and easily give an appealing appearance to an
HMI application. In it, styles are predefined for different types of HMI elements, which can be applied
using their style name.
A typical use case for themes involves toggling between day/night display in HMI applications where
natural light plays a role. The night theme shows widgets with dark background colors and bright text
fonts while daylight styles include bright background colors and dark text fonts.
Figure 30: Displaying an HMI application with different themes
Visualization \ mapp View \ Engineering \ Themes and styles \ Adding a theme
Exercise: Adding B&R theme and applying style to button widgets

The goal of this exercise is to add the included BuRTheme package. The styles in it are applied to two
newly created button widgets. The styleable properties for the NavigationButton widgets are reset and
the default style is loaded instead.
1) In the Logical View under "mapp View \ Resources", click on "Themes"
2) Add package "BuRThemeFlat1 Package" from the Object Catalog
3) Open "ContentMainPage"
4) Add two button widgets next to each other from the Object Catalog
5) Click on the "Editor Theme" icon in the toolbar and select "BuRThemeFlat1"
6) Change the properties of the left button: "Appearance \ Style \ Default" = "Command1",
"Size" = 100; 60

7) Change the properties of the right button: "Appearance \ Style \ Default" = "Operate1",
"Size" = 100; 60
8) Open "ContentLeft" and change "backColor" for the three NavigationButtons to rg-
ba(255,255,255,1)
Result:
The theme is part of the project and two button widgets have the styles "Command1" and "Op-
erate1" applied to them.
Figure 31: Theme package is added, the theme is applied to the HMI application and two button widgets have a style
The content editor is displayed with a white background by default. If widgets that are predom-
inantly white are added, an editor background can be set via the designer settings. This is
opened in the content editor toolbar.
Figure 32: Adjusting the background color in the content editor

6.4 Default style
Each widget has a default style that is used automatically whenever a style called "default" is included
in a theme.
Example:
In theme package "BuRThemeFlat1", a default style is defined for each widget. This style is
applied when no styleable properties are set for the widget. Since the styleable properties of the
NavigationButton widgets have been reset, the default style for the NavigationButton widgets
is now loaded.
Figure 33: HMI application in the browser with B&R theme
To ensure that the font size for all widgets used in the training is sufficiently large (e.g. on a
T50), the default font sizes (fontSize) for the following widgets must be adjusted:
• Label: fontSize = 16 px
• NumericOutput: fontSize = 18 px
• NumericInput: fontSize = 18 px
Visualization \ mapp View \ Engineering \ Themes and styles \ Adjusting styles
Exercise: Changing default style of NavigationButton widget

In this exercise, the default style of the NavigationButton widget is changed in BuRThemeFlat1 so that
the text size is also easily readable on a display with a small diagonal size and high resolution (e.g. on
a Power Panel T50).
1) Under "BuRThemeFlat1 \ Brease", open file "Default.styles"
2) Search for entry <Style id="default" xsi:type="widgets.brease.NavigationButton" ...>
3) Change property "fontSize" to "18px"

4) Change property "bold" to "true"
5) Compile/Transfer the project and display the HMI application.
Result:
In theme "B&RThemeFlat1", style "default" is adjusted for the NavigationButton widget.
Figure 34: The default style of the NavigationButton widget is adjusted
The font size for the NavigationButton widget is 18 px.
Figure 35: HMI application in the browser with changed default style for the NavigationButton

Data binding
7 Data binding
7.1 Binding
Data is displayed in an HMI application and entered by users. In mapp View, this connection is imple-
mented using what is known as binding (data binding).
A binding is a configuration-specific definition that defines the connection between a source (e.g. OPC
UA variable) and a target (e.g. widget property) and its read/write direction (binding mode).
In mapp View, there are different types of bindings for different purposes:
• "Value binding" for binding simple values
• "Node binding" for binding OPC UA nodes with a unit and limits
• "Array binding" for binding arrays
• "List binding" for selecting variables from a list
• "Structure list binding" for selecting structure variables from a list
• "Complex binding" for binding structures
Only the binding types "value binding" and "node binding" will be included in this training module.
Binding modes
Specifying the binding mode defines the direction in which data should flow.
Binding mode "oneWay" (read only)

The "oneWay" binding mode is used for read access to the source.
Example: Binding between an OPC UA node and an output widget (e.g. "NumericOutput" widget).
Binding mode "twoWay" (Read / Write)

The "twoWay" binding mode is used for read and write access to the source.
Example: Binding between an OPC UA node and an input widget (e.g. "NumericInput" widget).
Binding mode "oneWayToSource" (Init read/write)

The "oneWayToSource" binding mode is only used for write access to the source.
Example: Binding between an OPC UA node and a "PushButton" widget.
Visualization / mapp View / Engineering / Variables and data / Binding
If the name (ID) of a piece of content or a widget is subsequently changed, this is not automat-
ically adjusted in the binding.

Data binding
7.2 OPC UA
OPC Unified Architecture (OPC UA) is a standard for interoperability that ensures secure and reliable
data exchange in industrial automation. OPC UA is platform-independent and can be used to seamlessly
exchange data between devices from different vendors.
Figure 36: OPC UA architecture
OPC UA node
If a process variable is made available via the OPC UA system, it can be read or written from OPC
UA clients as an OPC UA node. Properties such as engineering unit or EU range can be added to an
OPC UA node.
Engineering unit
The engineering unit for an OPC UA node specifies the physical unit to be used when interpreting the
value. Automation Studio provides 1,400 engineering units for seven physical quantities: length, mass,
time, current, temperature, material amount and luminosity as well as derived physical quantities (e.g.
speed, force, pressure, acceleration).
EU range
The EU range (engineering unit range) determines the valid range of values for an OPC UA node. The
EU range is defined by a lower and upper limit value.
OPC UA default view

The OPC UA default view contains all process variables in an automation application that are made
available by the OPC UA server on the B&R controller to the OPC UA clients.
Communication \ OPC UA \ Configuration in AS \ Enable OPC UA system

Communication \ OPC UA \ Configuration in AS \ OPC UA default view configuration
Communication \OPC UA \Configuration in AS \OPC UA default view configuration \ OPC UA
default view configuration \ Properties of OPC UA tags \ Range of values \ Role-based range
of values

Data binding
7.3 Using data binding
Multi-part exercise - Data binding

7.3.1 "Displaying data in the HMI application"
1) "Exercise: OPC UA configuration - Enabling variables" on page 37
2) "Exercise: Node binding between NumericOutput widget and global variable" on page 38
3) "Exercise: Value binding between NumericOutput widget and global variable" on page 39
4) "Exercise: Comparing node binding and value binding" on page 40

7.3.2 "Setpoint (SetTemperature) entry"
5) "Exercise: Node binding between NumericInput widget and global variable" on page 41
6) "Exercise: Value binding between NumericInput widget and global variable" on page 42
7) "Exercise: Comparing node binding and value binding" on page 43

7.3.3 "Defining the range of values"
8) "Exercise: OPC UA configuration - Defining the range of values" on page 44
7.3.1 Displaying data in the HMI application
Exercise: OPC UA configuration - Enabling variables

The goal of this exercise is to set up the OPC UA configuration so that the tag for the global variables
"CurrentTemperature" and "SetTemperature" is activated. This activates the OPC UA node.
For communication to take place between the automation application and the HMI application, the OPC
UA server must be enabled. In order to use the process variable in the HMI application, it must be declared
as an OPC UA node.
1) Check if the OPC UA server is enabled

"CPU configuration \ OPC UA system \ Enable OPC UA system" = On
2) Click on "OpcUA" in the Configuration View under "Connectivity"
3) Add the file "OPC UA Default View File" from the Object Catalog and open it
4) Right-click on the global variables "CurrentTemperature" and "SetTemperature" and click "Enable
Tag"

Data binding
Result:
The OPC UA node for variables "CurrentTemperature" and "SetTemperature" is enabled. The
font for the entries is no longer grayed out.
Figure 37: Enabling the global process variables in the OPC UA default view
Exercise: Node binding between NumericOutput widget and global variable

In this exercise, a NumericOutput widget is added and bound with the "CurrentTemperature" variable.
"Read-only" is used as the binding mode. Node binding is used as the binding type.
2) Add a NumericOutput widget from the Object Catalog
3) Click on the NumericOutput widget
4) In the properties window under "Data \ Value", click on the "Binding" field and open the selection
dialog box
5) In the tab "OPC UA" under "Global Variables", click on "CurrentTemperature"
6) Select "Read Only" as binding mode
7) Enable the "Content related" checkbox under "Bindings Set ID".
8) Close the selection dialog box with OK

Data binding
Result:
The NumericOutput widget has node binding to the "CurrentTemperature" variable.
Figure 38: NumericOutput widget shows "CurrentTemperature", Binding art = Node binding
Exercise: Value binding between NumericOutput widget and global variable

In this exercise, a NumericOutput widget is added and bound with the "CurrentTemperature" variable.
"Read-only" is used as the binding mode. Value binding is used as the binding type.
2) Add a NumericOutput widget from the Object Catalog
3) Click on the NumericOutput widget
dialog box
5) In the tab "OPC-UA" under "Global Variables \ CurrentTemperature", click on "value"
6) Select "Read Only" as binding mode

Data binding
Result:
The NumericOutput widget has value binding to the "CurrentTemperature" variable.
Figure 39: NumericOutput widget shows "CurrentTemperature", Binding art = Value binding
Exercise: Comparing node binding and value binding

In this exercise, NumericOutput widgets are added and binding with the "CurrentTemperature" variable
is set. "Read-only" is used as the binding mode. Value binding is used as the binding type.
2) From the Object Catalog, add two Label widgets next to the NumericOutput widgets
3) Change the properties of the top Label widget: "Appearance \ text" = Node binding
4) Change the properties of the bottom Label widget: "Appearance \ text" = Value binding
5) From the Object Catalog, add a Label widget above the NumericOutput widgets
6) Change the properties of the Label widget: "Appearance \ text" = Current temperature
7) Compile the project, transfer it and display it in the HMI application.

Data binding
Result:
So far, you can't see any difference between node binding and value binding in the HMI appli-
cation. After the unit configuration in chapter 10.3 "System of units", you will be able to see a
difference.
Figure 40: HMI application in the browser with NumericOutput widget and different binding types
7.3.2 Setpoint (SetTemperature) entry
Exercise: Node binding between NumericInput widget and global variable

In this exercise, a NumericInput widget is added and bound with the "SetTemperature" variable. "Read /
Write" is used as the binding mode. Node binding is used as the binding type.
2) Add a NumericInput widget from the Object Catalog
3) Click on the NumericInput widget
dialog box
5) In the tab "OPC UA" under "Global Variables", click on "SetTemperature"
6) Select "Read / Write" as binding mode

Data binding
Result:
The NumericInput widget has node binding to the "SetTemperature" variable.
Figure 41: NumericInput widget shows "SetTemperature", Binding art = Node binding
Exercise: Value binding between NumericInput widget and global variable

In this exercise, a NumericInput widget is added and bound with the "SetTemperature" variable. "Read /
Write" is used as the binding mode. Value binding is used as the binding type.
2) Add a NumericInput widget from the Object Catalog
3) Click on the NumericInput widget
dialog box
5) In the tab "OPC-UA" under "Global Variables \ SetTemperature", click on "value"
6) Select "Read / Write" as binding mode

Data binding
Result:
The NumericInput widget has value binding to the "SetTemperature" variable.
Figure 42: NumericInput widget shows "SetTemperature", Binding art = Value binding
Exercise: Comparing node binding and value binding

In this exercise, the HMI application is opened and the NumericInput widgets with node binding and value
binding are compared.
2) From the Object Catalog, add a Label widget above the NumericInput widgets
3) Change the properties of the Label widget: "Appearance \ text" = Set temperature

Data binding
Result:
As a user, you can click on the NumericInput widgets in the HMI application.
If you click on node binding, you have a different available range of values as an input option
than if you click on value binding.
Figure 43: HMI application in the browser with NumericInput widget and different binding types
Up to now, the temperature setpoint ("SetTemperature") in node binding can be set to any value.
This is not always useful. To prevent a user from entering impermissible values, the EU range
(limits low/high values) of the OPC UA node is defined.
For additional information, see chapter 7.3.3 "Defining the range of values".
7.3.3 Defining the range of values
Exercise: OPC UA configuration - Defining the range of values

The goal of this exercise is to prevent the user form entering an impermissible value for the "NumericInput"
widget.
1) Click on "OpcUaMap.uad" in the Configuration View under "Connectivity \ OpcUA"
2) Click on global variable "SetTemperature"
3) Set the following parameters in the properties window under "Value range" (EU range):
Lower limit Upper limit

25 50

Data binding
Result:
Figure 44: The range of values for "SetTemperature" is defined in the OPC UA default view
Limits for NumericInput widget node binding: Lower limit = 25, Upper limit = 50
Figure 45: Range of values for NumericInput widget with node binding
Limits for NumericInput widget value binding: Lower limit = 0, Upper limit = 100
This range of values is set for the NumericInput widget.
Figure 46: Range of values for NumericInput widget with value binding

Media files
8 Media files
Media files can be added to mapp View in order to improve the appearance of an HMI application.
8.1 Image widget
When the mapp View package is added into the Logical View, the Media package is automatically cre-
ated. This is used for logical management of graphics in the HMI application. All files stored in the Media
package are transferred to the target system.
The Image widget supports the following image formats: .png, .jpg, .svg, .gif and .bmp.
Visualization \ mapp View \Engineering \ Organization of the HMI application \ Logical View \
mapp View media package
Example:
The path used to reference images always starts with the package name "Media". This is fol-
lowed by the name of the sub-package, if any, and the file name of the image at the end.
Example for the image "Test.png", which is stored directly in the Media package:
URL= "Media/Test.png"
Example for the image "Test.png", which is stored in the "SmallPictures" sub-package in the
Media package:
URL = "Media/SmallPictures/Test.png"
Exercise: Adding an image

The goal of this exercise is to display the B&R logo on every HMI page. The logo is part of Automation
Studio project "mappViewGettingStarted".
To display the graphic, the Image widget is added and configured in ContentTop.
1) Mark the "Images" folder in the Logical View
2) Drag and drop the folder here:

Logical View \ mapp View \ Resources \ Media
3) Open "ContentTop"
4) Add the Image widget from the Object Catalog
5) Change the properties of the Image widget:
Position Size
20; 20 100; 60
6) In the properties window under "Appearance \ Image", click on the Default field and open the se-
lection dialog box
7) Under "Media \ Images", select the file "BuR.png"

Media files
Result:
Figure 47: Images folder in the Media package, Image widget in "ContentTop"
Since the size of the "Image" widget has already been adjusted and the default property setting
is "sizeMode"="contain", the "Image" widget is completely filled by the image.
The possible options for the "sizeMode" property of this widget are described in Automation Help.
Figure 48: Displaying the HMI application in the browser with a B&R logo added

Media files
8.2 SVG icon library
mapp View provides an extensive SVG symbol library for free use.
Exercise: Adding an SVG icon library

The goal of this exercise is to add the SVG symbol library in order
to use the graphics for subsequent exercises. The library is added
in the "Media" package.
1) Under "mapp View \ Resources" click on "Media"
2) Add the file "SVG Symbols Package" from the Object Catalog
Figure 49: SVG icon library added in the

mapp View project
This is a good time to start up the HMI application on a terminal. This is done, for example, by
adding a Power Panel T50 to the hardware configuration. Next, the configuration is transferred
to the terminal using a USB flash drive. Now the HMI application can be operated directly on
the terminal.
See
• "Putting the mapp View client into operation on a T50" on page 78

User role system
9 User role system
Automation Studio provides a user role system that is used by mapp View. This system implements role-
based access control (RBAC) as per ANSI standard 359-2004.
9.1 RBAC concept
Role-based access control deals with users, roles and rights. Rights are assigned to roles and roles
are associated with users. Users can have several roles at once. Users are not assigned permissions
directly because this has proven to be complex and error-prone in practical situations.
In the system, a user is a real person, who is identified by first and last name, etc. A user also incorporates
information used for authentication in the system. With this authentication, a natural person can prove to
the system that they are who they claim to be. The most commonly used authentication method consists
of a unique identification of the user (User ID) and a secret password that only the natural person and
the system should know.
A role describes how a user interacts with a system to carry out specific tasks. Examples of roles can be:
administrator, service engineer, machine operator. Different permissions are usually required to perform
different exercises. For this purpose, rights are assigned to roles. If the task area of a natural person
changes, it is only necessary to change the assignment of the corresponding user to the new roles in
order to provide this person with the rights required for the new task.
Figure 50: Interrelationships in the user role system
Programming \ Access & Security \ User role system \ General
In a new Automation Studio project, the roles "Administrators" and "Everyone" and the user
"Everyone" are already created by default.
The Everyone role and the Anonymous user is not permitted to be deleted or renamed.

User role system
9.2 Using the user role system
Multi-part exercise - User role system

9.2.1 "Limiting write permissions to OPC UA nodes"
1) "Exercise: Configuring the user role system" on page 50
2) "Exercise: OPC UA configuration - Assigning permissions for roles" on page 51
3) "Exercise: Authentication in the HMI application" on page 53

9.2.2 "Limiting the range of values"
4) "Exercise: Extending the range of values for the "Service" role" on page 55
9.2.1 Limiting write permissions to OPC UA nodes
Adding new roles and users
Programming \ Access & Security \ User role system \ Configuration \ Automation Studio con-
figuration
• Editing roles in the user role system
• Editing users in the user role system
Exercise: Configuring the user role system

The goal of this exercise is to prevent write access to SetTemperature for non-authorized users. To do
this, the user role system is configured accordingly.
1) Open the file "Role.role" in the Configuration View under "AccessAndSecurity \ UserRoleSystem"
2) With a right click, add two new roles
3) Rename the "Operator" role to "Service"
4) Open the file "User.user" in the Configuration View under "AccessAndSecurity \ UserRoleSystem"
5) Right-click to add two new users and configure them:
Username Password Role

John John Operator
Dave Dave Service

User role system
Result:
In the user role system, there are now four roles and three users.
Figure 51: New roles "Operator" and "Service" and new users "John" and "Dave"
OPC UA configuration
The default permissions are set for the "Default view" node. These permissions apply to all underlying
variables as long as nothing else is set for them. The permissions for each role can be defined by adding
the various roles.
Before granting write permissions, check whether the OPC UA write permissions should be
restricted only for a few OPC UA variables or for the majority of the variables.
If the write permission restriction should only apply to a few OPC UA variables, it is easiest to
select these variables and restrict the write permissions there.
If a user is not authenticated, the system assumes that user "Anonymous" is interacting with it.
The rights given to all roles assigned to user "Anonymous" are valid during non-authenticated
use of the system. By default, user "Anonymous" is assigned role "Everyone".
Exercise: OPC UA configuration - Assigning permissions for roles

The goal of this exercise is to define the permissions for the roles in the OPC UA default view. For variable
"SetTemperature", it is also defined that only users with the Service role have the right to overwrite this
variable.
1) Open the file "OpcUaMap.uad" in the Configuration View under "Connectivity \ OpcUA"
2) Click on the "Default view" entry
3) In the properties window under "Authorization", click on the field "Rights / Roles" and add all roles
4) In the "Write" row, enable all checkboxes

User role system
In this training course, the write permission is restricted only to OPC UA variable "SetTem-
perature". I.e. the higher level node "Default View" is where write permission is enabled
for all roles.
5) Click on the "SetTemperature" entry
6) In the properties window under "Authorization", click the "Inherit from parent" field and select "In-
herit none"
7) In the properties window under "Authorization \ Rights / Roles", click on the "Write" row
8) Disable the checkboxes for "Everyone" and "Operator"
Result:
In the default view, all roles receive write permission.
Figure 52: Defining the write permission for all roles in the OPC UA default view
"Inherit none" only gives write permission for the "SetTemperature" variable to the "Service" and
"Administrator" roles.
Figure 53: Defining write permissions for the OPC UA variable "SetTemperature" only to the roles "Service" and
"Administrator"

User role system
Authentication in the HMI application

For the permissions set for each user to take effect, the user needs be authenticated on the system.
There are widgets available to log in and log out as well as to display detailed login information.
If a logged in user is logged out using the "LogoutButton" widget, the rights assigned to user
"Anonymous" are once again valid.
Exercise: Authentication in the HMI application

The goal of this exercise is to allow users with configured permissions to authenticate themselves on the
system. For this purpose, the following widgets are used: Login, LogoutButton, LoginInfo.
1) Open "ContentTop"
2) Add and configure the following widgets from the Object Catalog:
Widget Image Position Size

Image Media/SymbolLib/User/User.svg 11; 830 30; 38
Widget Text Padding Position Size

Label Logged in as: 0px 15; 880 140; 30
Widget Position Size

LoginInfo 15; 1030 230; 30
Widget Text Position Size

LogoutButton Logout 50; 1030 100; 30
3) Open "ContentServicePage"
4) Add and configure the following widget from the Object Catalog:
Widget Position Size

Login 40; 50 300; 160

User role system
Result:
After logging in as the user "Dave", entries can be made in the "NumericInput" widget on the
MainPage. For all other users, input is automatically deactivated due to the lack of write permis-
sion on the OPC UA node.
Figure 54: HMI application in the browser with functioning login
9.2.2 Limiting the range of values
EU range OPC UA node

OPC UA nodes make it possible to limit the range of values (EU range) when making entries. Using the
user role system, the range of values can be defined individually for each role.
Previously, the "Default" EU range for the OPC UA node was used. By adding a role in the EU range
category, the range of values can be extended or limited. If a specific range of values is not defined for
a role, the default values apply.
EU range violation
The EU range violation response is the behavior that should occur when you enter a value outside of
the range of values.
The following EU range violations responses exist:
EU range violation Description

Accept Entry of the value will be accepted even if the value is outside of the EU
range.
Reject The entered value will not be applied.
Clamp The entered value is truncated at the high/low limits.
Table 2: Overview - EU range violation
Communication / OPC UA / Configuration in AS / OPC UA default view configuration / OPC UA

default view configuration / Properties of OPC UA tags / Range of values / Role-based range
of values

User role system
Exercise: Extending the range of values for the "Service" role

The goal of this exercise is to extend the range of values of the OPC UA node for the "Service" role. To
achieve this goal, a new role and a new user must be created and the EU range of the OPC UA nodes
must be defined.
1) Open the file "OpcUaMap.uad" in the Configuration View under "Connectivity \ OpcUA"
2) Click on the "SetTemperature" entry
3) In the properties window, click on Range of values and add the "Service" role
4) Configure the following under Range of values:
Lower limit Upper limit

20 60

User role system
Result:
The range of values for the "Service" role is extended.
Figure 55: EU range extended for the "Service" role
When "Dave" logs in, he can use the range of values for the "Service" role (20 to 60).
Figure 56: HMI application in the browser with the user "Dave" logged in and "NumericInput" selected

Localization
10 Localization
With mapp View, localization means adapting the content of an HMI application to the local language
and local cultural norms. mapp View allows texts and units to be adapted at runtime for localization of
the HMI application.
The text system is used for localization of texts and the unit system is used to adjust the units.
10.1 Text system
Automation Studio provides the text system for the localization of texts. The various languages are
managed in the text system. The representation of the text system is two-dimensional as can be seen
in the following table.
One dimension lists semantic meanings that are represented by a unique identifier, and the other di-
mension is formed by all languages with a text-based representation of the semantic information.
Each line corresponds to a semantic meaning with texts in the respective languages.
Each column represents the texts in a specific language with the various semantic meanings.
Each cell is thus a text for the semantic meaning (identifier in the first column) in the language that this
table column represents.
Example:
The example in the table shows the semantic meanings of "Cancel", "Yes" and "No" in different
languages. These semantic meanings are clearly designated using identifiers "Text_Cancel",
"Text_Yes" and "Text_No".
For semantic meaning "cancel", there is text in German ("Abbrechen"), English ("Cancel"),
French ("Annuler") and Spanish ("Cancelar").
Identifier DE EN FR ES
Text_Cancel Cancel Cancel Annuler Cancelar
Text_Yes Yes Yes Oui Si
Text_No No No Non No
Table 3: Example of a schematic representation of localized texts
If text statements are used in a system with localizable text, identifiers for the semantic meanings of
these textual statements must be used. If the system is used in linguistic context "German", the system
replaces the identifier for the semantic meanings with the German language texts. Here, the texts from
the table column "de" are used for the identifier. If the same system is used in linguistic context "English",
the system replaces the identifier for the semantic meanings with the English language texts (table
column "en").

Localization
10.1.1 Identifier
An identifier is a semantic statement that is represented as text in different languages. Because a large
quantity of semantic statements can be contained in an automation system, it is necessary to be able to
structure them in order to prevent having the same identifier assigned to different semantic statements.
This is particularly important because semantic statements can be defined by different people indepen-
dently of each other. For example, the developer of the automation application can define semantic
statements for use within logger entries and, independent of this, the developer of the HMI application
can define semantic statements that are used in HMI elements.
The text system provides the ability to structure identifiers for semantic statements in namespaces. An
identifier for a semantic statement is composed of several parts:
Identifier = Namespace+NamespaceSeparator+Text_ID
A namespace can in turn also be part of a different namespace. Namespaces can therefore be structured
hierarchically. The following applies for a namespace:
Namespace = NamespaceName [ + NamespaceSeparator+Namespace]
Identifiers are also referred to as fully qualified Text_IDs. For Text_IDs and NamespaceName, there are
rules described in detail in Automation Help. The NamespaceSeparator is a single character, which is
also described in Automation Help.
Example:
A few identifier examples are shown below (fully qualified Text_IDs).
1) Texts/AppEvents/Internal/FatalError
2) Texts/Alarms/Alarm1
3) Texts/Program/Alarms/AlarmID1
For all examples, the NamespaceSeparator is the character "/". The Text_IDs in the examples
are "Fatal Error", "Alarm1" and "AlarmID1". The first example contains a namespace called
"Texts", which includes another namespace called "AppEvents" and this namespace also in-
cludes another namespace called "Internal".
10.1.2 Configuration of the project languages
In an Automation Studio project, it is necessary to define which languages can have texts specified for the
semantic statements. In addition to specifying the project languages that should be provided, the "design
language" must also be defined. The design language defines the language used when displaying the
texts in Automation Studio during configuration.
Programming \ Text system \ Configuring project languages
10.1.3 Text system configuration file
From the languages configured in the Automation Studio project, it is possible for the languages that
should be transferred to the target system for this specific configuration to be defined for each project
configuration.

Localization
The "system language" and "fallback language" are also defined. The "system language" determines the
language used to display the texts on the target by default. The "fallback language" defines the language
used to display the texts if no texts are available in the "system language".
Programming \ Text system \ Configuration file details
10.1.4 Text files in mapp View
In mapp View, localized texts from the text system can be used. Text files are used in order to be able
to make your own texts in mapp View. If your own texts are entered in the system using text files, they
will be made available for use by the text system.
Your own localized texts and the text system are the basis used to allow mapp View HMI applications
to be displayed in different languages. mapp View provides the capability to switch languages for an
HMI application.
Namespace "IAT" must be entered for the text file in order to use it in a mapp View HMI appli-
cation. This namespace is reserved for mapp View and is required at runtime for reading the
HMI application texts from the text system. This enables faster image or text changes.
Visualization / mapp View / Engineering / Text system / Adding text files

Localization
10.2 Using the text system
Multi-part exercise - Text system

10.2.1 "Texts for manual navigation"
1) "Exercise: Creating project languages and entering texts" on page 60
2) "Exercise: Referencing texts in widgets" on page 61
3) "Exercise: Adding a text system configuration file and LanguageSelector widget" on page 62
10.2.2 "Texts for other widgets"
4) "Exercise: Language switching for Label widget and LogoutButton widget" on page 64
10.2.1 Texts for manual navigation
Exercise: Creating project languages and entering texts

The goal of this exercise is to add the Project.language configuration file. The "design language" remains
"English" as set by default. Then the texts for the NavigationButton widget will be created in the table
editor in English and German with a unique Text ID.
1) In the Logical View, click on the project name
2) Add the project languages file from the Object Catalog
3) Open "Project.language"
4) Delete the "fr" entry
5) Under "mapp View \ Resources" click on "Texts"
6) Add a "mapp View LocalizableTexts.tmx" file from the Object Catalog
7) Rename the file to "VisualizationTexts"
8) Open and edit "VisualizationTexts.tmx":
Text ID German (de) English (en)

1 MainPage Start Main
2 ServicePage Service Service
3 AlarmPage Alarms Alarm

Localization
Result:
For manual navigation, the button texts are defined in German and English.
Figure 57: mapp View Localizable Text file with defined texts
Exercise: Referencing texts in widgets

The goal of this exercise is to reference the texts to the NavigationButton widgets.
1) "Open "ContentLeft"
2) Click on "MainPageButton"
3) In the properties window under "Appearance \ text", click on the "Default" field and open the selec-
tion dialog box
4) Select the Text_ID "MainPage" and click OK

Localization
Result:
The texts are linked to the NavigationButton widgets.
Figure 58: Assigning the localized texts to the NavigationButton widgets via the selection dialog box
LanguageSelector widget
The LanguageSelector widget is used to select the language in the HMI application. The "LanguageS-
elector" widget that has been added makes languages available in a drop-down list.
Visualization \ mapp View \ Widgets \ System \ LanguageSelector
Exercise: Adding a text system configuration file and LanguageSelector widget

The purpose of this exercise is to add and edit the text system configuration file so that the texts are
transferred to the target system. Also, the LanguageSelector widget is added to the HMI application to
switch the language during runtime.
1) Click on "TextSystem" in the Configuration View
2) Add the text system configuration file from the Object Catalog
3) Open and edit "TC.textconfig":
System language Fallback language Target languages TMX files for target
EN EN EN mappView.Resources.Texts.Vi-
DE sualizationTexts.tmx

Localization
5) Add the LanguageSelector widget from the Object Catalog
6) Compile and transfer the project and display it in the browser.
Result:
Due to referencing of the text files in "TC.textconfig", the texts are loaded onto the target system
at runtime.
Figure 59: Configured TextConfig file
The LanguageSelector widget can be used to choose between the project languages.
Figure 60: HMI application in the browser with localized texts for manual navigation

Localization
10.2.2 Texts for other widgets
Exercise: Language switching for Label widget and LogoutButton widget

The goal of this exercise is to localize the texts for the Label widget (with information about the logged
in user) and the LogoutButton widget in order to then be able to switch between German and English
using the LanguageSelector widget.
Result:
In the file "VisualizationTexts.tmx", all other texts for the HMI application are entered in German
and English. The widgets are linked to the appropriate texts.
Figure 61: Localized texts for the Label widget and the LogoutButton widget
10.3 System of units
Automation Studio provides users with an integrated unit system with automatic unit conversion. For
localization of units, users have the "metric", "imperial" and "imperial-us" systems of measurement and
more than 1400 units available to them.
With an OPC UA node, the engineering unit can be configured in addition to the range of values. The
engineering unit for a node specifies the physical unit to be used when interpreting the value.
With a widget, the unit used to display the value for a bound OPC UA node can be defined for the selected
system of measurement. Automation Help lists all units and common codes (e.g. degrees Celsius =
CEL). The common code is required in the widget properties. If you change the measurement system in
the HMI application, the value and the unit will be converted automatically.
Programming / Unit system / Available standard units

User-defined units can also be created in Automation Studio, see:
Visualization \ mapp View \ Guides \ FAQ \ Widgets applications \ User-defined unit 1/10°

Localization
10.4 Using the unit system
Multi-part exercise - System of units

10.4.1 "Displaying a value with a unit and switching the system of measurement"
1) "Exercise: OPC UA configuration - Assigning an engineering unit" on page 65
2) "Exercise: Displaying units in widgets" on page 66
3) "Exercise: Adding a MeasurementSystemSelector widget" on page 67
10.4.1 Displaying a value with a unit and switching the system of measurement
Appending "degrees Celsius" to OPC UA node "Engineering unit"

In the OPC UA default view, a unit can be configured for an OPC UA node after it has been enabled.
HMI application \ mapp View \ Guides \ Getting started / Connecting widgets to data \ Displaying
values and units
Exercise: OPC UA configuration - Assigning an engineering unit

The goal of this exercise is to define the unit degrees Celsius (°C) for OPC UA nodes "CurrentTemper-
ature" and "SetTemperature".
1) Click on "OpcUaMap.uad" in the Configuration View under "Connectivity \ OpcUA"
2) Click on global variable "SetTemperature"
3) Click on "Name" in the properties window under "Engineering unit"
4) Drag unit "degrees Celsius" from the Object Catalog to "SetTemperature"
5) Drag unit "degrees Celsius" from the Object Catalog to "CurrentTemperature"
Result:
The variables "SetTemperature" and "CurrentTemperature" have the engineering unit "degrees
Celsius".
Figure 62: Appending the degrees Celsius unit to OPC UA node "CurrentTemperature"

Localization
Configuring unit switching

Conversion of the value from the unit provided by the automation application to the unit in which the
value is to be displayed is performed automatically.
The unit property is specified as follows:
{'metric':'<CommonCode>','imperial':'<CommonCode>','imperial-us':'<CommonCode>'}
Example:
For our example, the unit string looks as follows after selection using the "Unit" dialog box:
{'metric':'CEL','imperial':'FAH','imperial-us':'FAH'}
Exercise: Displaying units in widgets

The goal of this exercise is to have the unit of variables SetTemperature and CurrentTemperature dis-
played on the NumericInput widget and NumericOutput widget. In addition, the units for the three mea-
surement systems are defined for the widgets in order to be able to switch the unit later. The unit that
should be displayed must be specified for each system of measurement ("metric", "imperial", "imperi-
al-us").
• Metric: Degrees Celsius (°C)
• Imperial: Degrees Fahrenheit (°F)
• Imperial-US: Degrees Fahrenheit (°F)
2) Click on the NumericInput widget with node binding
3) In the properties window under "Appearance \ unit", click on the "Default" field and open the selec-
tion dialog box
4) Define the units for the three measurement systems
5) Repeat steps 3 and 4 for the NumericOutput widget with node binding

Localization
Result:
For the NumericInput widget and the NumericOutput widget with node binding, the units are
defined for all three measurement systems.
Figure 63: Defining the unit property
Widget "MeasurementSystemSelector"
Widget "MeasurementSystemSelector" allows the user to select a system of measurement. The "Mea-
surementSystemSelector" widget that has been added makes system of measurement available in a
drop-down list.
Visualization \ mapp View \ Widgets \ System \ MeasurementSystemSelector
Exercise: Adding a MeasurementSystemSelector widget

The goal of this exercise is to make unit switching in the HMI application work via the MeasurementSys-
temSelector widget.
2) Add the MeasurementSystemSelector widget from the Object Catalog
3) Compile and transfer the project and display it in the browser.

Localization
Result:
The difference between value binding and node binding can now be seen because node binding
uses data forwarding (incl. value, unit and limits). The engineering unit is degrees Celsius, but
the configured units of measure allow switching between these various units.
Figure 64: HMI application in a browser: Anonymous, English, Imperial

Events and actions
11 Events and actions
mapp View provides events and actions to individually configure the behavior of an HMI application.
11.1 Events
An event is an occurrence that can be used to trigger a response. mapp View provides HMI application
developers with several types of events.
HMI application \ mapp View \ Engineering \ Events and actions \ Event

• OPC UA event
• Widget event
• Session event
OPC UA events
mapp View defines events to provide information about changes to values in the automation application.
For this purpose, mapp View provides event type "opcUa.Event" with the name "ValueChanged".
Widget events
Widget events provide information about occurrences in specific widget instances. Different types of
widgets can provide information about different occurrences in the form of events. An example of this
is event Click for widget Button.
Session events
mapp View defines events in order to detect occurrences in a client session. Session events are handled
in TM671 e.g. ContentLoaded, KeyboardEvent.

Events and actions
11.2 Actions
An action is a response triggered by an event. Actions are grouped together by provider. The following
action providers exist in mapp View:
• OPC UA
• Session
• Client
• Widgets
Each provider defines one or more groups of actions.

The "OPC UA" provider provides the group "opcUa.NodeAction" and the "Widgets" provider provides
the group "widgets.brease.<WidgetType>".
The providers "Session" and "Client" are topics in TM671. In this training module, we will only cover the
providers "OPC UA" and "Widgets".
Each group defines one or more actions.
HMI application \ mapp View \ Engineering \ Events and actions \ Action

• Session actions
• OPC UA actions
• Widget actions
OPC UA actions
For OPC UA, actions are made available that have an effect on OPC UA nodes. An example of this is
SetValue number.
Widget actions
For widgets, actions are available that have an effect on instances of widgets.
There are specific actions for each widget type. To find out more about actions available for a widget
type, see the documentation for that widget. An example of this is SetVisible.
Session actions
Actions for the client session can be defined in mapp View, e.g. SetValueNumber, TimerAction.Start.

Events and actions
11.3 Using events and actions
Multi-part exercise - Events and actions

11.3.1 "Setting a value"
1) "Exercise: Resetting the setpoint for the OPC UA node by clicking a button" on page 72
11.3.2 "Showing and hiding a widget"
2) "Exercise: Showing and hiding an image when a value is reached" on page 74
11.3.1 Setting a value

Configuring events
Widget events can be configured in the Properties window of the
content editor. To do this, switch to the "Events" display.
When creating a new event for a widget, a new event binding file
is generated in the Configuration View and the source of the event
is entered. The event binding file is automatically referenced in the
visualization object (.vis).
Figure 65: Creating a new widget event

in the content editor
Event binding file

The opened event binding file already contains an automatically generated ID, which consists of the
content ID with the suffix "_eventbinding". The event binding is preset with <Source>.
The event binding ID always consists of the content reference, the widget and the widget event. After
saving the event binding file, this ID will be displayed in the widget under "Events".

Events and actions
Example:
The filename of the event binding file is "ContentMainPage.eventbinding". If you click in the
white area of the visual editor, you will see the ID of the event binding file; "ContentMain-
Page_eventbinding".
In the event binding file, there is an event binding with the ID "ContentMainPage.ButtonSet-
ToDefault.Click".
Figure 66: Opened event binding file with an event binding in it
Note: With mapp View 5.10 the text-based event binding editor can be closed and opened
using the visual editor. The error messages displayed in the output window can be ignored.
The invalid action must be deleted in the event handler of the event binding.
Starting with mapp View 5.11, the visual event binding editor is opened automatically and an
action can be immediately configured for the displayed event.
Exercise: Resetting the setpoint for the OPC UA node by clicking a button
The purpose of this exercise is to specify the setpoint of OPC UA node "SetTemperature" as the default
value 35 by clicking on a button. For this, a click event is configured for an existing Button widget.
2) Click on "Button1" and change the properties:

"Appearance \ text" = Set to default, "Common \ Name" = ButtonSetToDefault, "Layout \ Size" =
140; 60
The new "ButtonSetToDefault" ID makes it easier to identify it in the event binding. Afterwards, the
text of the button can still be localized so it is possible to switch between German and English.
3) Click on "Events" in the properties window
4) Click on the "Click" field and open the selection dialog box
5) Expand "Event binding"
6) Drag "opcUa.NodeAction" from the Object Catalog to the event binding
7) Mark action "opcUa" and change the properties:

Events and actions
refID Method Value Static

Select "SetTemperature" in the selection dialog SetValueNumber Static 35
box
8) Compile the project, transfer and display in HMI application and test it with different users
Result:
Figure 67: Configuring the OPC UA action
The value of "SetTemperature" will only be set if all defined parameters (OPC UA default view)
and permissions for the logged-in role/user are met.
Figure 68: HMI application in the browser with the user "Dave" logged in

Events and actions
11.3.2 Showing and hiding a widget
Exercise: Showing and hiding an image when a value is reached

The goal of this exercise is to show an image in the "MainPage" content (action) when a certain value
has been reached on the "CurrentTemperature" OPC UA node (event).
To achieve this goal, an image will be added on "ContentMainPage" and its visibility set to "false". Then,
the event will be defined in the event binding when reaching the value along with the action for displaying
the image.
2) Add/Configure Image widget:
Image imageColor Visible Name Position Size

Media/SymbolLib/Alarm/ rgba(255, 128, 0, 1) false ImageWarning 250; 500 40; 40
Alarm.svg
3) Open "ContentMainPage.eventbinding"
4) Add "opcUa.Event" from the Object Catalog via double-click
5) Mark event "opcUa" and change the properties:
Event refID
ValueChanged Select "SetTemperature" in the selection dialog box
6) Drag "widgets.Action" from the Object Catalog to the event binding
7) Click on the action or execute and change the condition (event handler):
newValue ≥ 45
8) Mark action "Widget" and change the properties:
contentID widgetID Method Value Static

ContentMainPage ImageWarning SetVisible Static true
9) Drag "widgets.Action" from the Object Catalog to the event binding
10) Click on the action or execute and change the condition (event handler):
newValue ≥ 45
11) Mark action "Widget" and change the properties:
contentID widgetID Method Value Static

ContentMainPage ImageWarning SetVisible Static false
12) Compile the project, transfer and display in HMI application and test it with different users

Events and actions
Result:
Figure 69: Image widget properties
Figure 70: Event binding file with opened binding with one OPC UA event and two widget actions

Events and actions
As soon as "SetTemperature" is greater than or equal to 45, the warning triangle is displayed.
If the value drops below 45, the Image widget is invisible again.
Figure 71: HMI application in the browser with image shown

Notes on putting systems into operation
12 Notes on putting systems into operation
This section briefly describes how the mapp View server is installed on the controller and how the mapp
View client is installed on a terminal.
12.1 Putting the mapp View server into operation on the controller
Exiting simulation mode

To start up the mapp View server on the controller, simulation mode must first be ended in Automation
Studio.
The Automation Studio status bar indicates when a CPU simulation is running.
Figure 72: Automation Studio status bar - Simulation running
Project management \ Simulation \ CPU simulation
Project installation
The project is then compiled and transferred to the controller.
A connection to the controller is established using the "Browse for target system" feature in Automation
Studio. This function searches the network for B&R controllers. The connection settings of the controllers
can be temporarily changed in the search dialog box.
Programming \ Building and transferring projects \ Establishing a connection to the target sys-
tem \ Ethernet connections \ Browse for targets
Automation Runtime can be transferred or onlineinstallation performed once the connection has been
established.
Programming \ Building and transferring projects \ Online services \ Transfer Automation Run-
time \ Transferring to SGx target systems \ Installing via an online connection
Project management \ Project installation \ Scenarios \ Online commissioning
For offline installation, Automation Studio is used to generate an installation medium (CompactFlash or
CFast card). This is then added to the target system. When the supply voltage is switched on, Automation
Runtime and the application are started.
Project management \ Project installation \ Scenarios \ Offline commissioning
Automation Runtime and the application software can be included in a project installation package and
transferred to the target system on a USB flash drive, CompactFlash card or via a DHCP server.

Project management \ Project installation

• Scenarios \ Offline commissioning
• Overview \ Transfer \ Project installation package
Programming \ Libraries \ Configuration, system information, runtime control \ ArProject
Display the HMI application in a browser.

To test the connection, the URL is entered in the address line of the browser. The IP address of the
controller is used here:
For example: http://10.43.15.46:81/index.html?visuId=Training
Exercise: Putting a mapp View server into operation on an X20 CPU

The objective of this exercise is to operate the mapp View server on a controller:
1) Disable simulation mode in the project.
2) Compiling a project
3) Transfer the project to the controller.
4) Display the HMI application in a browser.
12.2 Putting the mapp View client into operation on a T50
The Power Panel T50 can be configured directly via the Service menu item or Automation Studio project.
Configuration via the Service menu item

When defining the configuration via the Service menu item, all necessary settings are made directly on
the terminal. Then the configuration is saved and the terminal restarted.
Hardware \ Power Panel \ Power Panel T50 \ Configuration \ Service pages
12.2.1 Configuration in Automation Studio
The terminal is added in the Physical View via the Object Catalog on the Ethernet interface for the
controller.

Figure 73: Power Panel T50 in the Physical View and System Designer
The second step is to configure the device. All parameters are described in the configuration manual for
the respective device. The example configuration looks like this:
Figure 74: Setting required for connecting to the mapp View server
The following parameters have been set in the example configuration:
Parameter Value Note

Start mode Web After switching on, the device immediately attempts to establish
a connection to the configured web server.
Network Settings depend on the corresponding network infrastructure
Active web server 10.43.15.46:81/index.html?visuId=Training
Enable virtual key- Off The mapp View virtual keyboard is shown.
board
Table 4: Example configuration for the terminal


• Service page "Startup"
• Service page "Network"
• Service page "Web"
12.2.2 Transferring the configuration to the terminal
The configuration for the terminal is transferred in Automation Studio directly to the controller. In Au-
tomation Studio, the configuration can either be copied to a USB flash drive as a project installation
package or loaded directly onto the terminal from the controller.
Generating a project installation package

The project installation package is generated via the Project menu item. In the dialog box, select the
device for which the project installation package should be created. The terminal is selected here.
Figure 75: Generating a project installation package for a terminal
Loading the configuration onto the terminal

The Service menu item on the terminal can be used either to import a project installation package from
a USB flash drive or to load it directly from the controller.
Once the USB flash drive is connected to the terminal, the configuration can be loaded by selecting
"Load settings from USB" on the "Update" service page. After confirmation, the terminal is restarted, the
configuration is updated and the device then starts in the configured mode.


• Service page "Update"
• Service page "Backup & reset"
Exercise: Putting a mapp View client into operation on a Power Panel T50
Now the terminal will be configured for accessing the mapp View HMI application.
1) Add the terminal in the Physical View or System Designer.
2) Configure the device (see example configuration).
3) Create a project installation package.
4) Update the terminal configuration.
5) Test the HMI application.
12.2.3 Improving performance with content caching
When requesting a page from the terminal, each page is delivered from the mapp View server and set
up on the mapp View client. The loading time depends on the complexity of the page.
The mapp View server supports the "content caching" function so pages that are already loaded do not
have to be sent to the client again. Content that has already been loaded on the client is kept in memory
and can be re-used on demand. This improves performance significantly when changing pages.
The settings for content caching are made in the advanced mapp View server settings.
Figure 76: mapp View configuration - Enabling content caching

View \ mapp View configuration \ Client configuration \ Content caching

Summary
13 Summary
After completing all exercises in this training module, a mapp View HMI application with multiple HMI
pages can be created.
Navigation between the HMI pages can be configured for both manual and automatic navigation.
Displaying values from the automation application can also be configured as well as entering data. When
doing so, value range limits defined in the automation application can be automatically checked in the
HMI application. Value range limits defined differently for specific roles can also be checked.
To allow role-specific behavior of the HMI application, the user role system in Automation Studio can be
used for HMI user authentication.
Widgets and media can be modified using themes and styles in order to adapt the appearance of the
HMI application to individual needs. Texts and units can be adapted to linguistic and cultural conditions
via localization.
As a conclusion to this training module, the definition of actions as responses to events has been covered.
Figure 77: mapp View glasses

Automation Academy
Automation Academy
Your knowledge advantage

The Automation Academy provides targeted training courses for our customers as well as for our own
employees. The available seminars are designed to build and expand your professional competence in
the field of automation technology. After attending a seminar, you will be able to implement efficient
automation solutions with B&R systems. This will make it possible for you to secure a decisive com-
petitive edge by allowing you and your company to react faster to constantly changing market demands.
B&R offers standard seminars at all B&R locations. Services include: Sem-
inar documentation, sustainable teaching methods and an automation diplo-
ma.
Remote Lectures supplement B&R's continuing education portfolio with a vir-

tual classroom, offering an alternative to our on-site seminars. Selected con-
tent from our standard seminars is offered online.
The B&R Tutorial Portal provides tutorials on a range of subjects and in a

variety of languages. Because the tutorials are interactive, they allow content
to be learned effectively.
The abbreviation ETA stands for "Evaluation and Training for Automation".
B&R components are sometimes wired with sensors and actuators. This way,
they can be used as training hardware for seminars and in the laboratory.
Training modules provide the basis for both in-person seminars and self-
study. These compact modules follow a clear, uniform structure, where the
topics build on one another.
Would you like additional training? Are you interested in finding out what the B&R
Automation Academy has to offer? If so, this is the right place.
Access additional information here:
https://www.br-automation.com/de/academy/
Enjoy your next training course!

V3.0.0.1 ©2022/08/23 by B&R, All rights reserved.
All registered trademarks are the property of their respective owners.
Subject to technical changes without notice.

TM611TRE.4B1-EnG Working With Mapp View 5.18 V3001

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TM611TRE.4B1-EnG Working With Mapp View 5.18 V3001

Uploaded by

Copyright:

Available Formats

TM611

Working with mapp View

2 TM611 - Working with mapp View

TM611 - Working with mapp View 3

10.2 Using the text system......................................................................................................... 60

4 TM611 - Working with mapp View

Figure 1: mapp Technology - The future of software engineering

mapp View is part of the mapp Technology software framework.

TM611 - Working with mapp View 5

1.1 Learning objectives

1.2 Symbols and safety notices

6 TM611 - Working with mapp View

1.3 B&R Tutorial Portal

B&R Tutorial Portal (https://tutorials.br-automation.com/publisher/)

Figure 4: Navigating within the course in the B&R Tutorial Portal

TM611 - Working with mapp View 7

2 mapp View concept

Figure 5: mapp View is platform independent

Figure 6: mapp View is seamlessly integrated

8 TM611 - Working with mapp View

2.1 Installing the mapp View Technology Package

Automation Studio is required to use mapp View.

Figure 7: Automation Studio upgrade dialog box \ Technology Packages

mapp Technology \ Release strategy \ Transport mechanism

TM611 - Working with mapp View 9

Licensing model Order number Range of functions

Visualization \ mapp View \ General \ Licensing

10 TM611 - Working with mapp View

2.3 Organization of an HMI application

Figure 8: Organization of the HMI application in Automation Studio

Page Editor / Content Editor

TM611 - Working with mapp View 11

3 mapp View HMI application

Visualization \ mapp View \ Concept \ Elements of an HMI application

3.1 .vis file

Figure 9: Visualization ID and autoUpdate are configured

Visualization \ mapp View \ Engineering \ Organization of the HMI application \ Configuration

12 TM611 - Working with mapp View

Exercise: Adding a visualization object in the Configuration View

1) Open project "mappViewGettingStarted"

3) Switch to the Configuration View

5) Rename the ID (name of the visualization object) to "Training"

TM611 - Working with mapp View 13

3.2 .mappViewConfig file

Visualization \ mapp View \ Engineering \ Organization of the HMI application \ Configuration

Exercise: Adding and editing a server configuration

Visualization / mapp View / Engineering / Organization of the HMI application / Configuration

14 TM611 - Working with mapp View

All components of an HMI application in mapp View are given an ID or name.

Visualization \ mapp View \ Engineering \ Organization of visualization \ Naming and organiza-

4.1 Packages in the Logical View

Exercise: Adding packages

1) Add the mapp View package.

2) Add the visualization package.

Figure 12: Both packages are integral parts of

TM611 - Working with mapp View 15

A layout defines the space in which multiple areas

Figure 13: Layout with a width and height in pixels

Visualization \ mapp View \ Engineering \ Layout and areas \ Adding a layout

Exercise: Creating the layout

1) In the Logical View under "mapp View", click on "Layouts"

2) Add the layout file from the Object Catalog

3) Change the name of the layout file to "MyLayout"

4) Change the properties of the layout file: