Testing the functionality of the HTML5 control

We recommend that you first test your HTML5 control on an HTML demo page. The HTML5 control can be displayed in the browser without an ‎ElementWrapper‎ script and the functionality can be tested. You start creating the JavaScript file (‎ElementWrapper.js‎) only after the functionality has been successfully tested.

For CODESYS Visualization V4.8.0.0 and higher, the JS file ‎ElementWrapper‎ is automatically created when a new HTML5 control is created. It contains only the framework. The element-specific functionality must be added in the next step.

Create the HTML page ‎TestControl.html‎ to test the script without additional installation in CODESYS.

Structure of the HTML page

<!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

Include additional files (JavaScript files or stylesheet files) for the HTML5 control in this test page. These are files which are responsible for the layout or provide additional functionality.

This corresponds to a script import to make the sources available.

Code example
```
<link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>
```
This can be inserted above the following line:
```
<script type="text/javascript" src="ElementWrapper.js"> 
 </script> 
```
Display the element (without ElementWrapper) in the browser and test the functionality.

After the test has been successfully completed, you can start creating the JavaScript file (ElementWrapper.js).