Displaying Web Content

Requirement: A visualization open in a CODESYS project. The 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 assined in the project.

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

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

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, Fett, 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.

See also

• Visualization Element 'Web Browser'

• Input action 'Toggle a variable'