Skip to main content

Displaying Texts

You can display texts in an element by specifying the text in the Texts → Text property.

You can also have a text displayed as a tooltip (Texts → Tooltip element property).

These texts are static. They are automatically managed in the GlobalTextList object in the POUs view and cannot be changed, neither programmatically nor by user input during the runtime of the visualization. However, you can expand a static text by exactly one placeholder with a formatting specification in order to output the content of a variable at this point. The actual value of the variable which you have assigned in the Text variable property will then be displayed at runtime.

Tip

For more information about the formatting specifications, see: Placeholders with Format Definition

When UTF-8 encoding is enabled for the STRING data type, texts with language-specific characters are allowed. Texts with language-specific characters, such as diacritic characters or Chinese characters, can be specified both during input and output. You can enable UTF-8 encoding in Dialog: Project Settings: Compile options.

You can animate the strict visual text display by means of dynamic configuration.

You can localize the static texts if you have set up the multilingual capability in the project.

Display a variable value dynamically

The element outputs the result of an ST code executed upon a mouse click in text form.

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Button element.

    The Properties view opens for the new button.

  2. Configure the Text property: Number of clicks: %i.

    The string contains the placeholder %i.

  3. In the application, in the PLC_PRG POU, declare a type-compliant variable: iClicks : INT;.

  4. Configure the Text variable property of the button as PLC_PRG.iClicks.

    The variable value is output instead of the placeholder at runtime.

  5. In the Input configuration property, click the Configure button in the OnMouseClick line.

  6. Select Execute ST code from the list of possible actions.

  7. Program the code for the action in the editor in Execute ST code:

    PLC_PRG.iClicks := PLC_PRG.iClicks + 1;

  8. Click OK to exit the dialog.

    The user input is configured.

  9. Compile, download, and start the application.

    The application runs. The visualization opens. The element is labeled and the number of clicks is output. The number is increased if you as the user click the button.

    _visu_img_user_input_button.png

Dynamically output text from a text list

You can dynamically output text with the help of the Text Field element. You can implement a text output by a user input or programmatically.

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Text Field element.

    The Properties view shows the configuration of the element.

  2. Below the application, add a text list with text list entries: Textlist_A.

    _visu_img_textlist_a.png

  3. In the application in the POU PLC_PRG, declare the text variable: strTextID : STRING := '0';

  4. Also declare there the variable strTooltipID : STRING := '0';

  5. Also declare there the variable iText : INT;

  6. Configure the Dynamic texts → Text list property with 'Textlist_A'.

  7. Configure the Dynamic texts → Text index property with PLC_PRG.strTextID.

  8. Configure the Dynamic texts → Tooltip index property with PLC_PRG.strTooltipID.

  9. In the application in the POU PLC_PRG, program the CASE instruction as shown below.

    The variables in the Dynamic texts property are programmed.

  10. Configure the property Input configuration → OnMouseclick for Execute ST code with PLC_PRG.iText := (PLC_PRG.iText + 1) MOD 4;

    A user input is configured for the Text Field element.

  11. Compile, download, and start the application.

    The application runs. The visualization opens. The text None is output in the text field. If you as the user click the element, the text changes to Dynamic_ File_A. In addition, the matching tooltip is shown: Information A. The text changes with each click according to the CASE instruction.

    _visu_img_output_dynamic_text.png

CASE statement

CASE iText OF
    0:  strTextID := '0';
        strToolTipID := '0';

    1:  strTextID := '1';
        strToolTipID := '4';

    2:  strTextID := '2';
        strToolTipID := '5';

    3:  strTextID := '3';
        strToolTipID := '6';
ELSE
    strTextID := '0';
    strToolTipID := '0';
END_CASE;

Configure input for a text field

So that the user can enter text in a text field, configure an input of the type Write a Variable to a text output variable. This text output variable will save the user's input and display it the output text in place of the placeholder ( %s in the example below). You specify the text output variable in the Text variables → Text variable property.

Requirement: A project with a visualization is open.

  1. In the application in the POU PLC_PRG, declare a string variable: strInput : STRING;

  2. Open the visualization and add a Text Field element.

    The Properties view shows the configuration of the element.

  3. Configure the Texts → Text property with Input: %s.

  4. In the Input configuration property for the OnMouseClick mouse action, click Configure to open the Input Configuration dialog. Select the Write a variable action in the dialog and activate the Use text output variable option for this purpose. Click OK to close the dialog.

  5. Now assign the text output PLC_PRG.strInput variable in the Text variables → Text variable property.

  6. Compile, download, and start the application.

    The application runs. The visualization opens. The element outputs the text: Input:. Click the element. An input field then appears in which you can enter a string. The text is accepted when you press the Enter key.

    _visu_img_current_imput.png

Configure output in a text field

You can use the Text Field element into your visualization in order to display text in it or to give the user an option to input to this variable.

In addition, you can configure a text input. Upon a user input, an input field then appears in the window area of the Text Field element. This necessitates configuring a user input in the Input configuration property.

Showing text as a tooltip

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Text Field element.

    The Properties view shows the configuration of the element.

  2. Configure the Texts → Text property with File name: %s.

    The text contains the placeholder %s.

  3. Configure the Texts → Tooltip property with Storage location: %s

  4. In the application in the POU PLC_PRG, declare a type-compliant variable strFileName : STRING := 'File_A';

  5. In the application in the POU PLC_PRG, declare the variable strFileDir : STRING := 'D:/Data';

  6. Configure the Text variable property of the text field with PLC_PRG.strFileName.

    The content of the variable will be output instead of the placeholder at runtime.

  7. Configure the Tooltip property of the text field with PLC_PRG.strFileDir.

  8. Compile, download, and start the application.

    The application runs. The visualization opens. The element outputs the text: File name: File_A When the mouse pointer moves over the text field, the tooltip appears: Location : D/Data.

    _visu_img_output_text.png

Animation of the text display

You can configure an animation of the display of text in the Font variables property. All basic elements have this property as well as tables, scroll bars, and text fields.

Procedure. Example: Animate the font size

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Rectangle element.

    The Properties view shows the configuration of the element.

  2. Configure the Texts → Text property with Important.

  3. In the application, declare a type-compliant variable in the PLC_PRG POU.

    iFontHeight : INT;

  4. Configure the Font variables → Size property with PLC_PRG.iFontHeight.

  5. Implement a change in the size of the font.

    iFontHeight := iFontHeight + 1) MOD 20;

  6. Compile, download, and start the application.

    The application runs. The visualization opens. The rectangle is labeled Important. The font size increases from 1 to 20.

Labeling

You can output information using the Label element.

Requirement: A project with a visualization is open.

  1. Open the visualization and add a Label element.

    The Properties view opens with its default properties.

  2. Configure the Texts → Text property with Visualization A.

For more information, see: Label

Hiding an element

You can configure the State variable → Invisible property to hide an element.

Requirement: You have a text field in the visualization that is shown only if a specific application variable is TRUE. For example, in order to display instructions or an explanation for a specific state only.

  1. Configure the Texts → Text property for the text field with Error detected: Do the following....

    Configure the Text property → Font color property with Dark red.

  2. In PLC_PRG, declare the variable bIsInvisible : BOOL := TRUE;

    The initialization here is for the example; otherwise the variable is set to TRUE by the application program under certain conditions.

  3. Configure the State variables → invisibility property with PLC_PRG.bIsInvisible.

  4. Compile, download, and start the application.

    The application runs. The visualization opens and the text field is invisible. If you now set 'bIsInvisible' to TRUE, the text field appears.

Aligning Text with Spacing to the Element Frame

Elements with the Horizontal alignment or Vertical alignment element property can not only align their text vertically or horizontally, but also use their style to align the text so that the text is displayed with spacing (in pixels) from the element edge.

In addition, define the following style properties in your style:

Figure 1. Style property for text alignment with spacing
Style property for text alignment with spacing


The affects the following elements:

The spacing value is applied only when the alignment is not centered.

Example 6. Example: Visualization style Test for text field margin
_visu_example_style_margin.png


: