Schneider Electric’s M-171 and -172 PLCs use the EcoStruxure Machine Expert - HVAC software (formerly SoMachine). The program includes a section for developing a web site. In this section, pages can be created from templates or as standard table pages.
Generally, all of the pages have a set style native to Schneider Electric; for instance, the standard table page’s program and its corresponding web view are shown below:
Figure 1- Standard Table Page (Web View)
General Page Creation
To create web-based views of the web sites created in EcoStruxure ME, each page must be added to the ‘Web Site’ category and, once configured, the web site must be built. The image below shows the program view of the webpage above:
Figure 2- Standard Table Page (Program View)
Once all tags have been added to the table page, the website can be built as shown:
Figure 3 - Build Web Site Command
In general, every page that is added under ‘Web Site’ in EcoStruxure ME requires the website to be rebuilt as described above. When this build occurs, the software automatically creates an HTML file for the page and a corresponding CGX file in the ‘Web’ folder of the project. An example of the ‘Web’ folder’s contents is shown below:
Figure 4 - Web Folder Example
Both of these files are required for the custom HMI page to interact with the desired tags. So, before any linkage can occur, a CGX file must be created for the custom page. We will use a copy of the original project file to do so.
After the desired PLC tags are created and ready to be implemented on an HTML page, a temporary project must be created to establish the connection for the desired tags.
The first step is to make a copy of the project, delete all pages, and insert a single table page. Once a copy of the project is ready, all the tags that will be passed to the custom page must be added to the table page.
Figure 5- Copied File's Table Page Configuration
Now, when the website is built in this copy project, the table page containing all the tags will be referred to as ‘index’ and will have the HTML and the CGX file as shown below:
Figure 6- DemoCopy Web Files
The .CGX file must be renamed to match the name of the custom page in the original project.
Once the original project has been built, this new .CGX file must be copied into its web folder, and the contents of the copy’s HTML file can be added to the custom HTML file to ease tag identification. Below is the CGX file for two-tag table shown above:
Figure 7- Custom Page’s CGX File
HTML File and Java Script
Figure 8- Tag-Address Table
The HTML file that is created from the project copy contains the code for identifying these tag objects in the new custom page. Open the HTML file and add its contents to your custom HTML script, or simply customize the code straight from this document. While all of the code (excluding the ‘body’ section) from the copy’s HTML file is necessary for functionality, the most important part for tag-linkage is shown in the scripts below:
Figure 9- HTML Code for Tag Objects
Beyond displaying these tags, their values can be evaluated by assigning the HTML object to a variable, providing endless possibilities for the custom HTML page— image toggling, background colors, displaying value-levels etc. Below are basic HTML and JS files for a custom page with tag references. These scripts produce a basic HTML webpage with a link back to the main page and a box whose color is tag-controlled.
Figure 10-Basic HTML Example
Figure 11- Basic JS Example
Writing to Tags
Below is an example of the modified custom JS script with this capability. This script not only modifies the color of a box, but also writes a value of ‘9’ to another tag when the If-Statement conditions are met.
Figure 12- Basic JS Example with Writing Functionality
Final Webpage Variations
To implement this page, go back to the original project, add a custom webpage, and link it to the custom HTML file:
Figure 13 - Custom Page Configuration Screen
Build the project and manually copy the new HTML, CGX, JS files into the web folder, which should now resemble this image:
Figure 14-Copied Files in Web Folder
With all the new added functionality, the custom webpage can interact with PLC tags. Below are examples of the webpage states we designed above.
Final Main Page:
Figure 15: Final Main Page
Initial Custom Page:
Figure 16: Custom Page – Red State
Updating Tag to 1:
Figure 17: CustomPage – Green State
Figure 18:Final Main Page with Updated Tags
Learn more about DMC's HMI and SCADA Systems programming expertise and contact us for your next project.