codesys visualization: using visualization styles to...

CODESYS® a trademark of 3S-Smart Software Solutions GmbH

CODESYS Visualization: using visualization styles to create smart interfaces

CODESYS Users' Conference 2014, Boris Schuster

2 © 3S-Smart Software Solutions GmbH

CODESYS Visualization

Agenda

1

2

3

1

2

3

Scenario

Options in CODESYS

Demo

3


© 3S-Smart Software Solutions GmbH

You are a service provider or a supplier for a certain industry.

Scenario

4



You want to offer your customers solutions which can be seamlessly integrated into already existing units.

As a system supplier or Store provider you offer toolkits for CODESYS end users which can easily be adapted to suite the most different needs.

Scenario

Goal

5



Despite the very different individual requirements, the support and maintenance of the software is to generate only very little additional effort.

The user wants to use existing visualizations.

Through configuration and using visualization styles we can give every visualization its own special look and feel.

In order to use visualization styles to adopt a certain corporate design you do not need any programming knowledge.

Scenario

Goal



Agenda

1

2

3

1

2

3

Scenario

Options in CODESYS

Demo

7



Visualizations are usually supplied in form of

In visualizations the element properties usually refer to the settings of a visualization style.

You provide the users with a detailed description on the settings of the visualization style.

The visualization style is adapted with the

Options in CODESYS

Visualization Styles Editor.

libraries.

8



An example can be found under C:\Program Files (x86)\3S CODESYS\CODESYS\Projects\VisuStyleExample

It is recommendable to copy this directory.

Visualization style

Options in CODESYS

Images

Example.visustyle.xml

9



Open the example with the Visualization Styles Editor.

Now you can edit already existing settings and add new key words.

Change the

Visualization style

Options in CODESYS

Colors Fonts

Images

• • •

10



Designing the visualization

Options in CODESYS

Corporate logo

Basic colors and fonts

Operating concept

11



Assign key words for a specific coloring.

You can differentiate between normal color state and alarm color state.


Options in CODESYS

CoverBackground

CoverFront

12




Options in CODESYS

Font color

Display color

13



Through slight changes in the configuration and the selection of a new viualization main page you can give your application a completely different look. Navigation buttons and status information bars can be individually arranged. Core elements are displayed using frames. FB instances are displayed through different visualizations with interfaces.


Options in CODESYS

14




Options in CODESYS

15



When working with the CODESYS Application Composer you can determine the cooperation of different visualization types and the template of the visualization main page through configuration.

In addition, it is always possible to manipulate visualizations in combination with a visualization style.


Options in CODESYS



Agenda

1

2

3

1

2

3

Scenario

Options in CODESYS

Demo


Inspiring Automation Solutions

Thank you for your attention. Спасибо за внимание

codesys visualization: using visualization styles to...

Documents