Skip to main content

Tutorial: Displaying Web Contents

Displaying websites in a visualization

Requirement: A visualization is open in a CODESYS project. The Visualization Toolbox and Properties views of the visualization are also open.

  1. Drag the Web Browser element from Special Controls to the visualization editor.

  2. Select the element in the editor.

    In the Properties view, the element properties are listed for the Web Browser element.

  3. In the Position property, specify the size (in pixels) for the Width and the Height (example: 600).

  4. In Control variables → URL property, specify the URL for the website (example: 'http://en.wikipedia.org').

    You can also specify a variable here (STRING or WSTRING) where the URL is assigned in the project.

  5. In the Control variables → Display property, specify a Boolean variable (example: bSetURL).

    If the variable bSetURL has the value TRUE, then the website 'http://en.wikipedia.org' is displayed at runtime.

Configuring the buttons for forward and back navigation of the website

Requirement: The Web Browser element of your visualization is configured as described above.

  1. In a POU, declare both Boolean variables bGoBack and bGoForward.

  2. In the visualization editor, click the Web browser.

  3. For the Controller variables → Back property, select the bGoBack variable from the Input Assistant. For the Control variables → Forward property, select the bGoForward.variable.

  4. In General Controls, add the Button element to your visualization two times.

  5. Click a Button in the visualization editor and drag the Button to the required position (for example above the Web Browser element).

  6. In the Texts → Text property, specify the > character. In the Text properties → Font property, select a font from the Input Assistant (example: Arial, Bold, 14).

  7. Configure the Input configuration → OnMouseClick property so that the bGoForward variable is toggled.

  8. Configure the second button for back navigation in the same way as described in Steps 5 to 7.

    If the variable bSetURL has the value TRUE, then the website 'http://en.wikipedia.org' is displayed with the forward and back buttons. Click the buttons to navigate to the next web pages.

: