dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorTutorialdl-breadcrumb-item__separatorDisplaying Web Contents
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Displaying Web Contentsdl-permalink__symbolPermalink

Displaying websites in a visualization

Requirement: A visualization 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”, specify the URL for the website (example: ‎'http://de.wikipedia.org'‎). You can also specify a variable here (‎STRING‎ or ‎WSTRING‎) where the URL is assigned in the project.

  5. In “Control variables  Display”, 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 property “Control variables  Back”, select the variable ‎bGoBack‎ from the Input Assistant. For the property “Control variables  Forward”, select the variable ‎bGoForward‎.

  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 property “Texts  Text”, specify the character ‎>‎. In “Text properties  Font”, select a font from the Input Assistant (example: ‎Arial, Bold, 14‎).

  7. Configure the property “Input configuration  OnMouseClick” so that the variable ‎bGoForward‎ switches.

  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://de.wikipedia.org'‎ is displayed with the forward and back buttons. When you click the buttons, navigation to the previous and next websites is successful.

⮫ “Visualization Element 'Web Browser'”

⮫ “Input action 'Toggle Variable'”