BlogBoss ModeSiemens WinCC OA (Open Architecture)Web-based Solutions

Boss Mode: Siemens Web Server Part Two

By November 2, 2017 July 23rd, 2019 No Comments

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.


General Concepts

While it is possible to include all of your HTML and Javascript/jQuery code in your user pages directory and on the PLC itself, you might find it beneficial to host the files on another machine on the network, or use a content delivery network (CDN) to deliver the files you need for client-side functionality. Including these files directly in the PLC can cause to large amounts of memory usage, potentially impacting your data logging capabilities. Hosting this files on a different machine or CDN alleviates these issues and can also speed up the load time of your pages. This article will demonstrate how to use a CDN to deliver the jQuery libraries we will be using.

In line with hosting libraries outside of the PLC, we have found hosting a Javascript file on another machine and updating it during development saves a lot of time compared to generating blocks for user pages, compiling, downloading the processor, and rebooting every time a change is made. Using a different machine allows you to edit the Javascript file on the machine, save it, and simply refresh the browser to update the page with any changes. This results in a significant time savings over the course of developing and testing a full application.

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.


Basic Trending

If you are using the data log functionality of the S7-1200 or the S7-1500, one powerful tool you can use in your user pages is trending. Given the relative simplicity of most web servers, including the one in our PLC, we will focus on implementing client based trending tools through the use of Javascript and jQuery.

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:

Data logs are stored as .CSV files in the S7-1200 and S7-1500 PLCs. This format defines the value of each column in the first line, with each column separated by a comma. Subsequent lines represent values at a particular timestamp, again with each column separated by a comma. This format, while useful for storage and analysis using a program like Excel, isn’t directly useful for the approach we will take to generating a trend. The first step we need to accomplish is to break down the CSV data into something Javascript can deal with more effectively.

How Do We Do This?

To accomplish this, we will use a jQuery library called jQuery-CSV. This library allows us to break the CSV file down into a list of objects we can easily manipulate to work with using Javascript.

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:

We will do the same thing for the Flot Charts library, and for development purposes, the development version of the Javascript file we will use for testing. Since we are dealing with time series data, we will also include the Flot Time library, and the Moment.js library to simplify working with different date formats:

For Flot to function properly, we will need to add a <div> element to our page, and specify the width and height for our trend, and give it an ID so we can refer to it later in our Javascript code:

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

Let’s go through the code used to generate a trend line by line. If you are familiar with Javascript and jQuery this will be pretty straightforward, if not it will cover the basics of what is required for this piece of functionality, and you can find plenty of resources online to go as in-depth as you like on the language as a whole.

The first line of code tells the browser to execute this code only after the pages has completely loaded. This is to make sure all of the Javascript files and jQuery libraries are ready, and the page itself is loaded and ready for us to interact with it:

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 line begins the code executing once our AJAX call is complete. The first step is to take the results from our AJAX call, in this case the data in the .CSV file, and use the jQuery-CSV library to convert it to a list of objects Javascript can more easily understand. This is accomplished by calling the jQuery function to convert a CSV file into objects as described in the jQuery-CSV documentation. Once this function has executed, we can use the variable “results” to generate the data we will use for the trend.

The next two lines as simply declaring variables we will use to store the data for each of our trend lines.

The meat of our Javascript code, where we take the data from the objects we generated from the CSV file and parse them for our trend comes next. We are using a for loop to iterate over all of the objects. Within this loop we are pushing data onto the arrays we defined previously. This simply adds a new element onto each array for each object in the list.


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.

The innermost portion of this function is adding together the “Date” and “UTC Time” columns from our object, with a space separating them. This gives us a human readable timestamp of the format “Month/Day/Year Hours:Minutes:Seconds”. To turn this into the format Flot expects (milliseconds since January 1, 1970, 00:00:00) we use the simply use the parse function of the Date type in Javascript as shown below.

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!