Skip to main content

Configuring Text Input

Visualizations support input via mouse/gestures or keyboard, as well as virtual keyboards for touch devices.

Note

0_Sample_Project Sample project for user input with a virtual numeric keypad or virtual keyboard

The virtual keyboards in CODESYS provide different functionalities. Which keyboard should actually be used is selected by using the input type. This input type is configured application-wide in the Visualization Manager. When programming the user input for a visualization, a specific input type can be selected.

The input type is configured in the following places:

  • In the Visualization Manager, you can preset a keyboard visualization under the Settings for Default Text Input group. This is then called up by all visualizations in the application as needed. This works without having to customize the user inputs of the visualizations.

  • In the individual visualization elements which respond to user input, you can configure the Input configuration property with the input action Write Variable. From the various virtual keyboards, choose the one that has the desired range of functions.

For more information, see the following:

Virtual keyboards

Table 2. Dialogs from the VisuDialogs library

Input type

Virtual keyboard

VisuDialogs.Numpad2

_visu_img_numpad2.png

The size and position can be changed.

VisuDialogs.Numpad

_visu_img_numpad.png

VisuDialogs.Keypad2

The keyboard is language-specific in terms of the layout and function of the keys. It is prepared for the languages German, English (en-US), and French. A language change is possible.

If a physical keyboard is also available, then input can be made from there as well.

The virtual keyboard is suitable for entering numerical values. During input, compliance with the expected data type (integer, floating-point number, time, or date/time) is checked.

The size and position can be changed.

VisuDialogs.Keypad

_visu_img_keypad.png

VisuDialogs.NumpadExtended

Extended numeric keypad, also for entering hexadecimal numbers

VisuDialogs.TextinputWithLimits2

The dialog works the same as TextInputWithLimits. Visually it is displayed like Numpad2/Keypad2.

The size and position can be changed.

VisuDialogs.TextinputWithLimits

Input of values within a range of numbers



Tip

With the compiler define VISU_DIALOGS_NO_GENERAL_AUTO_SIZE_UPDATE, changes to dialog position and size by different scaling can generally be disabled.

Programmatic options

The virtual keyboards VisuDialogs.*2 can be changed programmatically.

Tip

To make sure that settings are retained even during online changes, it is advisable to configure them in the Visualization Manager using the functionality "Call after visu initialization".

Programmatic options

  • To programmatically change the default layout or to extend your own layouts, you can use the variable Dialog_Variables.g_ptLanguageSpecificSettings.

  • To configure the switch time of the extended keyboard characters, you can use the variable VisuDialogs.Dialog_Variables.g_DialogSettings.tKeyboardCharSwitchTime.

  • To disable the "Clear Text" button, you can use the variable Dialog_Variables.g_DialogSettings.xDisableClearTextButton.

  • To disable the password visibility, you can use the variable Dialog_Variables.g_DialogSettings.xDisablePasswordVisibilityButton.

  • The time of day in time dialogs can be specified in 12-hour format (e.g., 3:00 PM) or in 24-hour format (e.g. 15:00). By default, the format depends on the language setting of the client.

    You can use the variable Dialog_Variables.g_ptLanguageSpecificSettings to change the format.

    If you want to define more different language settings, you can declare and assign your own array of type VisuDlg_LanguageSpecificSetting.

Configuring text input via the standard procedure

Configuration via Input type = Default

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 then be specified both during input and output. You can enable UTF-8 encoding in Dialog: Project Settings: Compile options.

Requirement: A project with a visualization is open. The CODESYS TargetVisu does not have a keyboard.

  1. Declare an input variable in the PLC_PRG program.

    Declaration

    VAR_INPUT 
    stInput : STRING; 
END_VAR

  2. Add a button to the visualization and select the element.

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

  4. Configure the Text variables → Text variable property with PLC_PRG.stInput.

  5. In the Input configuration → OnMouseClick property, click Configure.

    The Input Configuration dialog opens. The selected input event is displayed below the caption.

  6. Select the Write Variable action.

  7. Select the value Standard in Input type of the implementation of the action.

    The input is configured as usual.

  8. Compile, download, and start the application as CODESYS TargetVisu.

    The visualization opens.

  9. As a visualization user, click the button.

    An input field is displayed with a virtual keyboard which allows text input by means of the mouse.

  10. Compile, download, and start the application as CODESYS WebVisu.

    The visualization opens.

  11. As a visualization user, click the button.

    An input field is displayed and prompts for text input.

Configuring text input especially for the virtual keyboard VisuDialogs.Keypad

Requirement: A project with a visualization is open.

  1. Declare an input variable in the PLC_PRG program.

    Declaration

    VAR_INPUT 
    stInput : STRING; 
END_VAR

  2. Add a button to the visualization and select the element.

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

  4. Configure the Text variables → Text variable property with PLC_PRG.stInput.

  5. In the Input configuration → OnMouseClick property, click Configure.

    The Input Configuration dialog opens. The selected input event is displayed below the caption.

  6. Select the Write Variable action.

  7. Select the visualization Visudialogs.Keypad in Input type of the implementation of the action.

    The virtual keyboard Visudialogs.Keypad is selected as the input device.

  8. Compile, download, and start the application.

    The visualization opens.

  9. As a visualization user, click the button.

    The virtual keyboard is displayed and allows text input by means of the mouse.

    _visu_img_call_virtual_keypad.png

Configuring numeric input especially for virtual numeric keypads

Requirement: A project with a visualization is open.

  1. Declare an input variable in the PLC_PRG program.

    Declaration

    VAR_INPUT 
    iInput : INT; 
END_VAR

  2. Open the visualization and add a Rectangle element.

  3. Select the element in the editor.

    The properties are visible in the Properties view.

  4. Configure the Texts → Text property with Number input: %i.

  5. Configure the Text variables → Text variable property with PLC_PRG.iInput.

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

    The Input Configuration dialog opens. The selected input event is displayed below the caption.

  7. There you select the Write Variable action from the list of possible actions and click the _visu_img_add_selected_alarm_group.png symbol.

    The action is displayed in the list of actions to be executed. The blank implementation of the action is displayed in the window area to the right of the list.

  8. Select the following settings:

    Input type set to VisuDialogs.Numpad.

    Choose variable to edit set to Use text output variable.

    Dialog title set to 'My virtual numpad'.

  9. Click OK to close the dialog.

    The user input is configured.

  10. Compile, download, and start the application.

    The application runs. The visualization opens. When a user clicks the rectangle, the numeric keypad opens.

    _visu_img_call_virtual_numpad.png

Defining default text input

Requirement: A project with a visualization and a user input configuration is open. For all Write Variable follow-up actions, the value Default is selected for the Input type setting.

  1. Double-click the Visualization Manager.

  2. On the Settings tab, in the Default Text Input group, click in the default text input to assign visualizations.

    These visualizations are defined as default text input. If a display variant does not have a keyboard, then these visualizations are called without you having to adapt the user input.

In this section: