Boss Mode: Siemens Web Server Part Two
If you missed part one, check it out here.
Building Powerful User Pages
With user pages enabled in the PLC’s web server, we can now expand into a lot of different areas. Dashboards, reports, trends, API’s, the list goes on. What you choose to do with your pages is entirely dependent on your needs, and we will cover some of the common use cases we have implemented on most of the web-based systems we have developed over the years.
We will cover the various functionality components below, in no particular order. At this point you can jump around the article to find what interests you most and work through the exercise without a whole lot of overlap between sections.
There are a variety of frameworks you can use for this, D3, High Charts, Google Charts, or our framework of choice Flot Charts. They all have their pros and cons, some including license ramifications, open-source vs. closed source, and free vs. paid. We have found Flot Charts to work extremely well for our needs, typically trending time-stamped process data. If you have any questions about our experience with any of the tools we have used, please feel free to reach out and ask.
The basic overview of this section is we will generate a date/time range using date/time pickers on the page. When the user selects the date range and clicks the “Update” button we will request a list of data log files and based on their name, including the date/time the logs began, will select the appropriate file, parse its contents into the format required by Flot and will then display the trend to the user with the correct date/time range on the X-Axis.
From A Data Set
First we will go through the process of generating a basic trend with fixed data set. From there we will get into dynamic datasets with date range selections. To demonstrate basic trending our PLC has a small log file tracking the run status of two pumps as seen below:
How Do We Do This?
Following the tip to load libraries from a CDN, we will load the library from a CDN in the header of our HTML page. Keep in mind you can use any CDN you prefer, store the file on another machine on the network, or even put it directly in the PLC as necessary. Since we will be using jQuery libraries, we will also include the jQuery library itself:
This is the basic format we need to display a single trend on a page, so we are done with our HTML page for now. Save it to your user pages folder, generate blocks, and download to the processor. We will do the rest of the work to generate a trend in the s7_Demo.js file linked to in the header.
Generating The Trend
The next section defines and AJAX call to our server. This loads data from the specified URL without the user having to interact with the page, and doesn’t require the page to be refreshed. We are specifying the specific URL for our datalog file in the URL parameter, telling the server we are requesting or “getting” data, specifying we want expect the data to be returned as text, and are defining the function we will execute when the AJAX call as successfully completed.
The next two lines as simply declaring variables we will use to store the data for each of our trend lines.
The format Flot requires for trend data is an array of elements of the form [x value, y value]. For our trend we want the x-axis to display the timestamp, and the y-axis to display the value of each dataset at that time. Flot requires the timestamp data to be in a certain format, so we will have to manipulate the data in our object appropriately.
This takes care of the x-axis value, for the y-value we specify the specific data point in our object, in this case Pump1_On or Pump2_On and include it in our elements to be pushed onto the appropriate array.
The final piece of code except for closing brackets/parentheses is to generate the plot itself. To accomplish this we call the .plot() function of the Flot library. We pass the ID value of the div we created in our HTML file as the container for the trend to be put in to, specify an array of the variables we want to use for trend lines, in this case the variables we worked with in the previous section of code, and specify a mode of “time” for the x-axis.
This generates a basic trend on our page:
Be sure to catch part three of the series!