Blog

Siemens S7-1200 Web Server Tutorial - From Getting Started to HTML5 User Defined Pages

Siemens S7-1200 Web Server Tutorial - From Getting Started to HTML5 User Defined Pages

This is a brief tutorial on getting started with the Siemens embedded web server in the S7-1200 and S7-1500.  Using the concepts explained below, you can create a simple web page or a fully featured HTML5 web app. 


Getting Started

Step 1:  Turn on the web server.  To do this, navigate to the web server menu in the device configuration page and check the box to enable the web server.

Step 2: Download your project to your PLC and browse to its IP address using your web browser.  You will see the default Siemens PLC Web server.

Siemens s7-1200 Web Server

You can view the Diagnostic Buffer.  This is really helpful.

 

 

The variable status page allows you to view and modify PLC tags.  This is great for debugging, but be careful.  You will be directly editing PLC values!

If your PLC is configured to save data logs, you can easily download the log files from the Data Logs page and open them in Excel.

The default website is perfect for troubleshooting and looks great on a tablet.

 


User Pages

Before enabling User-defined pages in the PLC, we need to create an HTML file for our user page.  Create a text file called "index.htm" and save it to a folder on your computer (i.e. "C:\UserPages").

 

The file contents should look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Title</title>
    </head>
    <body>
    Hello World
    </body>
</html>

Now we can enable the user pages and use this file we created. To enable user pages, navigate to the device configuration -> Web server -> User-defined Web pages.  Set the HTML Directory to the folder you created and the Default HTML page to the file you created.  Then click Generate Blocks to compile the user page: 

You will notice that the "Generate Blocks" function creates two new data blocks in your project, and you may be wondering what these are for.  

 


Fragments

Fragments are the name given to each file in your user pages folder. Initially, we just created a single "index.htm" file, but let's suppose you had several files in this folder.  It would look something like this:

When you click the "Generate Blocks" button, the compiler takes all of these files and copies each byte into an array in the element of the Fragment data blocks.  The first Fragment DB starts at DB334. An array is dimensioned for each file.

Below you can see how each byte from the file is packed into the array:

As you add more files to your folder, you may exceed the maximum number of bytes that can be contained in a data block, when this happens, another sequential data block is created. You can include HTML files, JavaScript, CSS Files, and even image files.  They will all get converted into data block fragments:

 


WWW Function

In order for user pages to work, you have to call the WWW Function in your project.  Recall the DBs created by the "Generate Blocks" function. We already know that DB334 stores the fragments.  DB333 is used in conjunction with the WWW Function to control the retrieval and delivery of the fragments:

Insert the WWW Function into your code.  Compile and download your project.

This function process requests from the browser and synchronizes the data in the User Pages.  It handles retrieving the correct fragment from the Fragment data blocks as shown below:

If you browse to the IP Address of your PLC, you will see the main Siemens Web server login page.  There is a link on the left for User Pages.  The name in the hyperlink matches the Application name you specified in the User-defined Pages config screen in TIA Portal:

If you click this link, you will see your Hello World page: 

The format of the User-defined web page URL is as follows. I'm not sure what "awp" means, but it is a required part of the URL:


Reading PLC Data

In order to read PLC data we need to modify our file to include a special reference to the tag we are trying to read.  First create a data block called "webdata" and add define an integer variable called "counter."  In your PLC, add some code to make this increment around every second:

Download your project and then go online with the PLC to verify that the value is incrementing:

Now modify your "index.htm" as follows:

<!DOCTYPE html>
  <html>     
    <head>
      <meta charset="utf-8">
      <title>My Title</title>
    </head>
  <body>
     :="webdata".counter:
  </body>
</html>
 

Notice the tag name is prefixed with ":=" and suffixed with ":"  This is the key to injecting variables into the user page. When the page is rendered it will replace the token with the actual PLC tag value.

 

Next, click the "Generate Blocks" button in the Webserver config and download the program to the PLC.  When you browse to the user page, you will see the counter value update when the page is refreshed.  Notice how the page flickers when refreshed.  This can be annoying if you are trying to make your web page look and feel like a traditional HMI.

Below is an example of how annoying these page refreshes can be.  If you have an image on your page it will flicker as the page is refreshed.  In the example below, the page is automatically refreshed by adding a specific meta-tag to the HTML header.

 

<head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="1" >   <!-- meta tag refreshes page every second -->
    <title>DMC Demo - Auto Refresh</title>
</head>

 


Reading Data Using Javascript

To avoid the annoying page flickering, we need to employ some JavaScript to read the data and refresh the screen in the background.  

To demonstrate this, the first step is to move the PLC tags from our main page to a new page.  The new page will not contain any HTML, it will just be a simple HTML file with a single tag reference.  Create a new file and name it something like "IOCounter.htm" (I am prefixing the name with "IO" to remind myself that this file is used for data Input and Output).  The contents of your original "index.htm" should be modified as shown below.  Notice that we moved the tag reference :="webdata".counter: to a new file called "IOCounter.htm" and replaced it with a label with the id="counter."  We also included the popular JavaScript library JQuery.  You will need to download JQuery and copy it to your "UserFiles" directory.  My "UserFiles" directory looks like this:

 

IOCounter.htm

:="webdata".counter:

Index.htm:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Javascript Example</title>
    <script src="jquery-2.0.2.min.js"></script>
    </head>
    <body>
      <label id="counter">0</label>
    </body>
   
    <script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
        setInterval(function() {
            $.get("IOCounter.htm", function(result){
                $('#counter').text(result.trim());
            });
        },1000);
        });
    </script>
 
</html>

The JavaScript function above retrieves the current tag value by requesting the contents of the file "IOCounter.htm" and then using this value to set the text of the Label with id="counter."  This code runs automatically every second using the JavaScript setInterval function.  The process is illustrated below:

In the simple example above, we placed a single tag value in the file "IOCounter.htm".  A more advanced option would be to put several tags in this file and format the text into a JSON structure.  This would allow you to update several tags on the screen using just one external data file.  Be careful though, as you add more tags to an HTML page, the page loading time increases. 

 


Modifying PLC Tags From the Browser

A user web page would not be very helpful without allowing the user to modify PLC values. The following HTML page illustrates the simplest way of editing PLC tag values.  The special comment field (AWP_In_Variable) at the top tells the PLC which tags are allowed to be modified.  You will not be able to edit the tag values unless you include this comment for each tag.

First create a new variable in the "webdata" DB:po

Then modify "index.htm" as follows:

<!-- AWP_In_Variable Name='"webdata".myInt' -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Title</title>
    </head>
    <body>
     :="webdata".myInt:
     <form method="post">
       <input name='"webdata".myInt' type="text" />
       <button type="submit">Save</button>
     </form>
   </body>
</html>

The PLC will not allow you to modify values unless you are logged in.  Make sure to log in before navigating to the editor page you just created.  The default user name is admin and the default password is blank so you can leave that field empty.

After you have logged-in, browse to the page and go online with the PLC.  You should be able to edit the tag value using the web page you just created.  Notice how the page flickers when the save button is pressed. This is because a post-back is occurring and the page gets refreshed.

 

In order to update PLC tags without experiencing the post-back, we can use some more JavaScript to update the value in the background.  First, we need to create another HTML file and move our tag reference to it.

In order to illustrate this, create a new variable in the "webdata" DB called triangleWave.  Then write some code to make this value count up to 100 and then back down to -100, or whatever logic you like.  Next create a new file called "IOtriangleWave.htm" that looks like this:

"IOtriangleWave.htm"

<!-- AWP_In_Variable Name='"webdata".triangleWave' -->:="webdata".triangleWave:
The comment field tells the PLC that the triangleWave variable is editable and the :="webdata".triangleWave:  allows us to query the current value of the variable by requesting the contents of "IOtriangleWave.htm".

Now modify "index.htm" as follows:

<!-- AWP_In_Variable Name='"webdata".triangleWave' -->
 
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Javascript Example</title>
      <script src="jquery-2.0.2.min.js"></script>
    </head>
    <body>
      <!--This label value is being updated in the background using JavaScript-->
      <label id="triangleWave" name="triangleWave">:="webdata".triangleWave:</label>
      </br>
      <input id='setvar' type="text" />
      <!--This button modifies the value in the background using JavaScript without a postback-->
      <button>Modify</button>
     <p><img src="logo-DMC.png" alt="DMC Logo"><p/>
    </body>
 
    <script type="text/javascript">
    $(document).ready(function(){
        //query the trianglewave variable every second
        $.ajaxSetup({ cache: false });
        setInterval(function() {
            $.get("IOtriangleWave.htm", function(result){
                $('#triangleWave').text(result);
                });
        },1000);
         
        //modify the triangleWave value
                $("button").click(function(){
                    url="IOtriangleWave.htm";
                    name='"webdata".triangleWave';
                    val=$('input[id=setvar]').val();
                    sdata=escape(name)+'='+val;
                    $.post(url,sdata,function(result){});
                });
 
    });
    </script>
 
</html>
 

We also added an image to the file to show that the data is being read and written without any flickering or page refreshes:


Server Side Logic - String Variables

Full-featured web servers have powerful server-side engines that can dynamically generate HTML pages. The Siemens PLC has a small embedded server, but there are still a few server-side things that can be done.

Up to this point, we have been experimenting with integer tag values. If you embed a string tag into your page and include some HTML formatting in the string value, it will render as HTML.  Notice below that the string value is not displaying the exact values typed, but rather rendering as HTML:

 

Below are the HTML values that were assigned to the string tag above:

<font size="30" color="green">GREEN </font>
 
<font size="40" color="red">RED </font>
 
<ol>
  <li>Message 1</li>
  <li>Message 2</li>
  <li>Message 3</li>
</ol>
 
<ol>
  <li><font color="blue">Information</font></li>
  <li><font color="orange">Warning</font></li>
  <li><font color="red">Error</font></li>
</ol>
 

Server Side Logic - Delayed Delivery

Another technique that is very powerful for performing server-side logic is Delayed Delivery.  This is a technique that uses the WWW Function (in conjunction with DB333) to make the web-server wait before returning a requested page to the user. This allows the PLC to ensure that tag values are properly updated before being rendered on the web page.  A typical example would be a recipe editor web page.  The user selects a recipe from a dropdown box (which will cause a post-back and a page refresh).  We must ensure that the new recipe values have been loaded into the PLC tags before refreshing the page.  Normally the compiler automatically assigns a fragment number for each user-generated file.  In order to control the delivery of pages (i.e. fragments), we must specify a fragment number in the HTML file as shown below: 

<!-- AWP_Start_Fragment Name="Control" Type="manual" ID="2" -->

Adding this special comment to the top of your HTML file tells the compiler to use fragment #2 for this file.  You can specify the fragment number by setting the ID field to the desired number. 

Now that we know our file will be fragment #2, we can control the delivery of the page to the browser.  Below is a typical rung of ladder logic for implementing the delayed delivery of the page.  In my example, the "continue" bit does not become true until the recipe loading is complete.  In my case, the loading of a recipe required several PLC scans, so I needed to delay the page delivery until the recipe was loaded.  Note that the PLC can support several simultaneous connections.  If your application will support several simultaneous browser connections, you will have to replicate the code below for each index of the arrays shown.  Currently only index 1 is handled in the code below.  

Below is an example showing the recipe loading screen.  The user selects a recipe from the drop-down which causes a PLC tag to be changed and the browser waits for a post-back from the web server. The PLC detects this change and starts loading the recipe (which takes several PLC scans).  The web-server waits for the continue bit to be set before returning the page (fragment) is delayed until the recipe is loaded.  This ensures that the tag values injected into the HTML page will be updated with the correct values before being sent to the browser.  Below is a demonstration of this in action:

 


Conclusion

Knowing the basics and a few advanced tricks will enable you to create fully featured web pages served from a Siemens PLC. If you are comfortable with JavaScript, you can do some pretty amazing things and make a web page that looks and feels as good as a traditional HMI.   Below is a simple example showing graphing, gauges, user input, and pop-up alerts. This looks and feels like a native app when running on my iPad or Android tablet. Click on the image below to see it in action.  Happy coding!

 

EDIT: Below is a simple example of how to to use the gages shown in the demo above.  The gage javascript library is from HTTP://justgage.com. The example below references the IOTriangleWave.htm that we created above. 

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>DMC Gage Demo</title>
    <script src="js/jquery-2.0.2.min.js"></script>
    <script src="js/raphael.2.1.0.min.js"></script>
    <script src="js/justgage.1.0.1.min.js"></script>
</head>
 
<body>
<div id="g1"></div>
<div id="g2"></div>
     
<script type="text/javascript">
    $(document).ready(function(){
        var g1, g2;
        var g1 = new JustGage({
          id: "g1",
          value: getRandomInt(-100, 100),
          min: -100,
          max: 100,
          title: "Triangle Wave",
          label: "Value"
        });
         
        var g2 = new JustGage({
          id: "g2",
          value: getRandomInt(0, 100),
          min: 0,
          max: 100,
          title: "random data",
          label: ""
        });
 
        $.ajaxSetup({ cache: false });
            setInterval(function() {
                g2.refresh(getRandomInt(50, 100));
                $.get("IOtriangleWave.htm", function(result){
                    g1.refresh(parseInt(result));
                    g2.refresh(getRandomInt(50, 100));
                });
            },1500);
    });
</script>
 
</body>
</html>

 

 

Also, Here is a link to a zip file of the project examples. Enjoy!

Learn more about DMC's Siemens S7 PLC programming expertise. Contact us to get started on your next PLC programming project.

Comments

Priyanka Shahi
# Priyanka Shahi
Can somebody in this thread help me to post the code through which I can read multiple tags through one file. I also want to know if there is a way through which we can plot time series graph for the PLC variable directly into the user defined pages.
Marco
# Marco
Perché se creo questo script la pagina web non legge i dati PLC ? Documenti.createTextnode(' :="SET '+index+' "::="DB".SET '+index+':')
Henrik
# Henrik
To all of you WHO are asking for an example on how to use Ajax with multiple tags in a JSON structure.
You still need to have two documents, one for your tags and one for the actual code.
I've had it to Work with the following lines of code:

--------------------IOCounter.html-------------------
{
"PalletizerActProductCNT" : ":="DB_Settings".Palletizer.DubINT.ActProductCNT:",
"PalletizerTotalProductCNT" : ":="DB_Settings".Palletizer.DubINT.TotalProductCNT:"
}

---------------ProductCounter.html------------------




Javascript Example














abdul waheed
# abdul waheed
sir,
I am trying to access my TP 700 HMI though web server using the IP address of the HMI same as in the CPU 1200. So that i can control my system through remote location, i have done all the possible configuration so that i can get access to HMI through remote location but due to some error i am not able to do so.
Please guide me with your valuable suggestions

thanks
Nuno
# Nuno
What´s the PLS code that he uses to increment? because he doesn´t say it! If someone could hel me its would be awesome! thx
NachoR
# NachoR
Good morning!

Where could I download the example: "scrollinggraph.htm"?
I can't find that in the proyect folder.
Please contact with me as soon as posible.

Thanks!
Patrick Corcoran
# Patrick Corcoran
Hello All,

In order of responses posted, here are some replies:

#Abdul,
On the PLC, Web Server Properties there is a User Administration configuration screen. Here you can specify access levels, and specific users. For development, you can also modify the Everyone account to provide administrative access without password protection. This is not recommended for deployment, but may be helpful for basic testing.

#Maria,
The reason you are seeing this error is likely because you listed .js files as page with dynamic content. removing .js from this list, still allows JQuery to function as the actual mini-fied script of JQuery does not change, even though JQuery functions support producing dynamic content on the site. In short, do not list .js files as dynamic entities in the Web Server settings, and you should be able to compile. In practice, the only pages we typically manipulate dynamically on the client side are .html/.htm.

#Pascal
This is not necessarily a function of TIA portal, but more a function of the hardware support for the web server. Please make sure that the Web Server is enabled for your PLC (in the 1200/1500 family). Also, verify that the Web Server is active on at least (1) network port [ex. X1 or X2]. The downloadable examples on this site are TIA V12, V13 SP1 support this functionality with proper hardware configuration.

Thank you all for the interest!
pascal
# pascal
on my system(13sp1) it's not enabled the chosing of directory and file index.html Does it works only with a special version?
Maria
# Maria
Hello, can anybody help me?

I made this tutorial step-by-step, but jquery library still doesn't work.

I took the simplest example to check how jquery works. If I check my web page through Notepad, the library performs its functions. but through the Web-Server 1200 Jquery does not work.
If I insert an Extension .js i can not generate blocks in TIA Portal.

I have no idea where i have look for this Problem. Thank you in advance!
abdul
# abdul
dear,

I am not able to login due to invalid password plz provide me password so that i can login
Felipe
# Felipe
Hey guys, how can I link a div with the plc? I have a web page created only for the web server but istead of many pages I just created one page with some divs, can I link one div with a memory on PLC?
Kennedy
# Kennedy
Hi Guys

I am trying to do an HMI-like website for the PLC S7-1200.

I want to be able to know from the PLC side when a button is pressed and how I can activate certain graphics, like indicator lights, for example; a simple Run/stop application:
- when the buttons are not pressed, the circle drawn in HTML is grey.
- when the run button is pressed, the circle drawn in HTML is changes to green.
- when the stop button is pressed, the circle drawn in HTML is changes to red.

I also want to know if there is an easier way to find the values of these items which I want to manipulate through the PLC DB334 according to application.
Eric
Rial Williams, under the advanced settings of User-defined Web pages, try setting "Files with dynamic content" to something like:

.htm;.html;.json

otherwise the PLC will not scan your json files for tagnames.
Rial Williams
# Rial Williams
Trouble w/ JSON

Firstly, thank you for this tutorial. This information may save me from having to put expensive HMI hardware on simple machines my company makes...

I hacked your example code from the "Reading Data Using Javascript" section of this document and put in particulars for my application to return a speed reference from my S7-1200 logic and all worked as expected. Following your suggestion for using JSON instead of $.get to retrieve PLC data I built a JSON file with just one name:value pair in it for the same point that I successfully polled using $.get and I instead of seeing my PLC speed reference, I am seeing the :=<datablock.value>: syntax that tells the server to go grab the data from the PLC. Below is the logic:

HTML:
<span id=PLCData>PLC Data goes here</span>

<div id = "stage">JSON Data</div>

Script:


AJAX.html:
New line speed reference: :="HMI_DATA".HMI_CMDS.LineSpdRef:

PLCData.json:
{
"LineSpeedRef": ":=\"HMI_DATA\".HMI_CMDS.LineSpdRef:"
}

Web browser result:
New line speed reference: 20

:="HMI_DATA".HMI_CMDS.LineSpdRef:

Any help is greatly appreciated!
Simon
# Simon
Sorry, another question at Marco's JSON example below:

How will the $.post() code and Input_Data.html look? An Example would be nice.

Thank you very much.
Simon
# Simon
Hi, thank you for the great tutorial.
I've implemented the ON/OFF switch. It works great. But one question:
I want to have an Feedback, that if the PLC changes the value to true, the On/OFF switch switches to ON.
Here is my Code:

$$("#Handmode").forEach(function(switchControl) {
if (switchControl.className === ("switch on")) {
switchControl.lastElementChild.checked = true;
}
switchControl.addEventListener("click", function toggleSwitch() {
if (switchControl.className === "switch on") {
switchControl.className = 'switch off';
} else {
switchControl.className = ("switch on");
}
checkbox = switchControl.lastElementChild;

checkbox.checked = !checkbox.checked;
var url ="IO/Service.Handmode.htm";
var name='"WEB".SERVICE.Handmode';
var ival = +checkbox.checked;
var sdata = '"' + checkbox.id + '"';
sdata=escape(name)+'='+ival;
// data);

$.post(url,sdata,function(result){});

}, false);
});
Elena
# Elena
Hi!

I was wondering why I am not able to connect to the web server page even if I am directly connected PLC S7-1200 to PC.

Any ideas?

Thanks!!
Sergey
# Sergey
If the ability to perform a get or post request from the controller to an external server ?
Joseph
# Joseph
The javascript for updating the single variable :="webdata.counter: works pretty good... how to use this JavaScript to update multiple variables... say - 20 variables... how to modify the code to update multiple variables. any help.. or any link to good examples....
hossein mirlohi
# hossein mirlohi
thank you for this tutorial
vinoth logaiya
# vinoth logaiya
Hi!,

im working out coding for graph on web server using 1200 CPU, No. of tag 1700 , how to read 1700 tag ,

thanks
S7 L plates
# S7 L plates
Hi,
Great article, really helpful.

I Cannot get the post function to work? PLC FW is 4.1 - any Ideas?

code below

<!­­AWP_In_Variable Name='"Meter Data Totals"."Test"'­­>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PLC</title>



</head>
<body>
<label id="Data_1">0</label>
<p>
:="Meter Data Totals"."Test":



</body>
</html>
Frans
# Frans
Hi Tim,
i have tried your scrolinggraph demo.
everything is working fine except gauge 1 from the triangle wave.

the code:

$.get("IOtriangleWave.htm",function(result){
g1.refresh(parseInt(result));

is not working
after the first value i see NaN or Not a Number.

is this a know error?
Do i something wrong?
How can i solve this?

best regards
Frans
gajendrads
# gajendrads
https://support.industry.siemens.com/tf/gb/en/posts/web-server-on-s7-1200-good-tuto-but-not-working/105925?page=0&pageSize=300
Check this out last comment :)
Mikele
# Mikele
Hi, How I can read and refresh TAG(tang of any sensor) of PLC S7-1200 from Tia Portal and show in to circular bar as example before? thanx
maybe (javascript) this: g2.refresh(:="Tag_13");
Greg
# Greg
Hi,
At first : Very nice tutorial !!!
is there a special way to read strings? As we know S7 strings contain some extra characters and when I try to read a PLC string I get extra characters : &#x27;&#x27;
How do I have to change reading procedure to trim them out. I was playing with string.trim option but I can not get the connection between var. id end displayed text.
Manuel
# Manuel
This example is great, I have my web application already working but I have some problems with the available memory. I found a library called minified that it is supposed to work in the same way as jQuery does, but it is lighter than it *less than 30kB* Some one has already tried it?
gajendrads
# gajendrads
# Subin
Saturday, April 30, 2016 10:56 AM
Sir,

Can you help me to understand HTML code to remove DTL# from DTL#1970-01-01-00:00:00


Hi
If u can elaborate your requirement i try to help
Dave
For anyone else running into the errors trying to use the jquerymin on a plc without an sd card here is an edited version you can download. file breaks were put in to keep the sizes below 64k and [] issues were resolved.

https://github.com/badidea/S7-1200_webserver

Subin
# Subin
Sir,

Can you help me to understand HTML code to remove DTL# from DTL#1970-01-01-00:00:00
irfan khan pathan
Nice tutorial...

can you please give me how much DB can create on web server.
how much pages we can download on over PLC.
Please Explain. is is depended on PLC memory or it have some limits.

thanks
Gajendrads
# Gajendrads
Hi,
I have missed to post my java script itself.I have posted only body without head
I was in hurry actually.
Anyway i got how to do it.


Gajendrads
# Gajendrads
Hi Tim :)
Thanks for this post.
I tried so much to refresh the tags following your instructions(LIKE IO.HTML) but somewhere i am not able to get it.
This is my script . please post a code for this below script to refresh my tag in the graph

:="MB".TotalPlan: (This is one of the DB Tags of my graph. if i ll be able do for this tag rest i will take care )

CODE BELOW:
<!doctype html>
<html>
<head>
<title>Shift Plot</title>
<meta http-equiv="Content-Language" content="en" >
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Content-Script-Type" content="text/javascript" >
<link rel="stylesheet" type="text/css" href="Stylesheet/siemens_StylesheetForGraph.css"/>






</head>


<body onload="loginCheck()">

<div id="page">

<h3>REALTIME PLAN VS ACTUAL TREND CHART-MIDDLE BLOCK ASSEMBLY</h3>

<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div>





</body>
</html>

Niko Spirou
# Niko Spirou
Hi Tim,
what is the default password? i compiled and downloaded this project to my s7-1212c, when i found out, there wasa password for write protection defined. Now i can not download a program to the cpu.

kripit
# kripit
Thanks for your tutorial.
Here is a script for a slider:
<input type="range" min="0" max="100" value="0"
oninput="document.getElementById('SetRange').textContent=value" />
<span id="SetRange">0</span>
How to connect the value with a word in TIA PORTAL to make it interact
in the personnalized Web Server?
Nick
# Nick
Hi everyone,
"When i try to include the "jquery-2.0.2.min.js" file, I get this error when i create the blocks. Any ideas?

WebInt: The character string "[]" is not allowed in dynamic page content. "

I'm having the same problem. Did anyone find a solution?
I read in the comment about splitting the file in half. Not sure what he meant.
Nick
# Nick
Does anyone know how to use multiple tags in the separate htm file? Anyone have a working example I can follow?
Jim Brewer
# Jim Brewer
Tim, I attended your presentation on this at the Siemens User Conference in 2013 and have finally had the opportunity to kick the tires on this. I have noticed that you have added more material on this webpage in addition to your original slides. Your tutorial and examples are well written and presented here. I had a few snags, but mostly operator error. I just downloaded your S7HTML5_1.zip file to my PC running V13. I changed your PLC to match my 1215 PLC. I copied your UserPages and everything works GREAT for my web pages. I changed from Google to Chrome because it refreshes quicker. Thank you for posting your work. Many of us can leverage from this learning and appreciate the time you have spent to share this !!!
Abhilash Thomas
Hi,

This is so cool, i developed a separate application using .NET C# and S7-1200 using snap7.dll. It will help you to save in SQL server or Oracle(Any Database). This will help us to keep the data for reporting and other processing
Astrup
nice work
I try to read multiple variables simultaneously with javascript, but can not get it to work . Can you help ?
in advance thanks
Arut
is it possible to use this web server to read data from de pc and send it to the plc?
dan.v
# dan.v
I really appreciate your works, thank you.

I have one question:
what if i want to update more than one value in the same page?

That is for one signal:
What should i change to load more?

Thank you
Abhilash Thomas
This is really good,

But i am facing main issue is i cant able to login to the Siemens PLC S7-1200 due to the login name password required from my own application. Can you please send me a sample code for customized login session for the same.

Thanks in Advance..

Dr2
# Dr2
Andi, also you need to insert this command not in the middle of functions, so it is hard to find good places in min.js versions of JQuery. Wnen I did it - i checked at computer if it works after each command adding, sometimes it worked from first time, sometimes only from 10 time.
Dr2
# Dr2
Andi, you need cut library file at pieces less than 64kb size. So, if your file is about 128kb, you can cut it in two parts in the middle, if it from 128 to 192 kb - you need cut it in three parts and so on. Name atributes are differenr, of course.
Andi
# Andi
Hello ...

so far i found following suggested solutions :

1- JQuery-Bibliothek : change "[]" to "[ ]" ... insert space.
2- " too large - Ignoring file" - insert a AWP-Command <!-- AWP_Start_Fragment Name="<Name>" --> in middle of the File.

No 1 works fine but No 2 not , as soon i Insert this AWP_Start -Command the JQuery ist working anymore ....

Do someone have a full functional "jquery-2.0.2.min.js" for the S7-1200 PLC ?


Thanx

Andi
# Andi
Hallo

anyone found a solution fpr this ?

"WebInt: The character string "[]" is not allowed in dynamic page content."
Xavi
# Xavi
Dear TIM JAGER

Please answer my question .

You can integrate these types of SLIDER for modifying an integer value .

http://andreruffert.github.io/rangeslider.js/

Please respond.
Xavi
# Xavi
good ,
I wonder if someone ah integrated slider that these types of HTML are (input range)

example :

http://andreruffert.github.io/rangeslider.js/

pay $ 20 if someone helps me to integrate TIA Portal change in a variable of type integer .

atte : xavier.bonifacio@hotmail.com
Stam
# Stam
Hi experts,

I cannot write REAL values on my web pages.

By using the same code (see at the bottom of this post), I was able to write REAL values when I was using PLC firmware V3.0, but I updated the PLC firmware to 4.0 or 4.1.

Also, when I modify a REAL value from the PLC, I can monitor the value. So, there is no problem in reading data.

Moreover, I can write and modify SINT values from my web pages. So, I solved the problem with the negative values.

Hence, the only problem that remains now is that I cannot write decimal values on my web pages.

You can see the code below:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- AWP_In_Variable Name='"Input1"' -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
</head>
<body>
<h2><center>Example for "real" value</center></h2>
<center><table border="0"></center>
<tr>
<p>
<td><center>The input value is:<b> :="Input1": </b></center></td>
<td class="output_field"><center><b></b></center></td>
<tr>
<td>
<center>
<p>

</p>
</center>
</td>
</tr>
</p>
</tr>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thank you in advance.
saleh
# saleh
I want to add more "reading variable" to my program and use update PLC tags without experiencing the post-back. what should i do?
Romas
# Romas
Hello, I have problem with <label id="counter">0</label> formatting. My "counter" is Real number (one decimal place), how to disable suppression of zero after decimal point? If there are not zero after decimal point - all is OK.
pablo
# pablo
loic.2912 - I'd have the same problem. Try to change your js file extension. For example: jquery.x.x.x.min.js to jquery.x.x.x.min. The problem occures when you use files with dynamic content (PLC sees javascript files as files with dynamic content).
Xavi
# Xavi
Reading data not work. please help
RK
# RK
What is the difference between Standard Web pages and User-defined webpages.
Ben
# Ben
Hi
This demo looks awesome and really useful. Have you got anymore information on the graph display that you show in the conclusion?

Thanks
loic.2912
# loic.2912
Thank's for your tuto,

But I have a problem that I will generate db (for reading with javascript)
after to have completed the folder "UserPages" by jquery-02.0.min.js , if I complete "files with dynamic content" with ".htm;.html;.js" , it's not possible to generate blocs.
If I remove ".js" and that I just let ".htm;.html", it's ok for generation but impossible for to read my variable with web page.
Can you me help?
thank's

Sebastian Sanchez
# Sebastian Sanchez
This is amazing man, congratulation and thank for share!
BartP88
# BartP88
Hey nice guide but I have some issues with the javascript/ajax refresh page. It's kinda not... refreshing or anything. It's not responding on the button at all.

Is it possible the TIA Portal v11 is not able to work with JS/ajax?
Mike
# Mike
The Reading Data Using Javascript doesn't work. Can you help me?
Dr2
# Dr2
... you should cut the library files with comand <*!*-*- AWP_Start_Fragment Name="" *-*-*> (delete all "*")...
Stamatis
# Stamatis
Hi, just finished with my web pages for reading PLC data, but are really slow while refreshing.

What should I do in order to refresh only the memory bit that changes and not the whole page?

Thank's in advance.
Dr2
# Dr2
If you can't "generate blocks" cause error "WebInt: Unable to read files for Web application: File size ***** too large - Ignoring file" you should cut the library files with comand . Just put it in any place of your library. You should cut big libraries on enough number of pieces (each < 64 KB).
trentaluca
# trentaluca
Great tutorial....I need Help...

hello I'm trying with this script to display dynamic image based on the state of input plc ... but it does not work ....
I enclose the script ..... Any advice ???

<html>


<title>MWeb Server</title>
</head>


<body>
<label id="i00">0</label>
</body>
Bastian
# Bastian
Hi,

very helpful tutorial, thanks for that!!!

Cut you explain how you writ more Vars than just one with jQuery???


FreezeGhost
Just info for others who would like this great example. I found out how to release jquery can be compilled.
In Setting of the web sites in PLC you have to delete in text field named "Files with dynamic content:" .js
when is this deleted you can easily use java scripts also jquery. Again thank you for this great tutorial
David
# David
Hello Tim,

the code works fine on my PLC, but when I run it 24/7, the webserver crashes after 4-8 hours working. Did someone else have this problem, too?
Marco
# Marco
Here is my JSON-Example relating to "Reading Data Using Javascript / Modifying PLC Tags":

setInterval(function() {
$.getJSON("Output_Data.html",function(data){
if (data.var1 == true) {
//do stuff
}
if (data.var2 == true) {
//do stuff
}
});
},1000);


And the file Output_data.html looks like this:

{
"var1": ":="webdata".ExampleVar1:",
"var2": ":="webdata".ExampleVar2:"
}


I have also separated the AWP_IN-commands, which you need for $.post() into another file, for example Input_Data.html.
Loris
# Loris
Hello from Italy .
Great tutorial , thank you , congratulations.
Eric
# Eric
Brent,

If you can host the login page somewhere other than the PLC (somewhere not requiring you to be authenticated on the PLC already), you can reuse the login and logout code (right-click, view page source on Chrome) from the default PLC webpage. Just change the value of the "Redirection" input to point directly to your application on the PLC.
Brent
# Brent
Great tutorial!
Just like Eric I am stuck on the authentication. I'd like to control the application with a smartphone and logging in via the standard pages is not very user friendly. Does anyone have ideas on how to do authentication via user pages?
Thanks in advance!
Igor
# Igor
it's so understandable. Thank you!
Thongchai
# Thongchai
Can develop by asp.net?
Thongchai
# Thongchai
Hi Tim Jager
Thank. For This.
I have question. If Read 5 values. How can i do?
Thanks.
Marcus
# Marcus
Hi,

cannot get the js refresh to work. I'm using jquery 2.1.1 due to compile error as per previous post.

What CPU FW are you using? I'm using FW 3.0.
Wong
# Wong
The tutorial is awesome! Thank you Tim.

I planned to put several tags in the file and tried to format the text into JSON structure. And the page is renamed to xxx.json
It works perfectly in ordinary webpage but the problem is that it does not work in AWP.

I need your help, please.
RIZMO
# RIZMO
It's ok !
I have got same problem. NEED SD card to use Java. (not enought memory inside PLC)
Thanks chauvinhloi for your help

https://www.youtube.com/watch?v=YjAwaM-8iwo
Tim Jager
# Tim Jager
I added a link to the source code at the end of the blog post. It's also available here:

http://www.dmcinfo.com/Portals/0/Blog%20Files/S7HTML5_1.zip

I hope this helps.

Thanks,
Tim Jager
Chris
# Chris
Really great, probably the best tutorial on the Internet at the moment.
It really helped me so far.

No, that I'm able to create very simple webpages, I would also be, like everyone else, interested in the inner workings of your project.
RIZMO
# RIZMO
Not working on a S7 1200 fw 3.00
Pet
# Pet
Great tutorial!
Could you please also upload the source code of the last picture of the DMC Web Demo? I would like to see how are the ON/OFF buttons connected to the s7-1200 tags. Thank you in advance!
Fla
# Fla
Hi,

great tutorial!!

I still have problem to use javascript though.It keeps complaining that the size is too big.
i am using jsquery-1.11.0.min.js -- 95kb and jsDraw2D -- 67kb.
any idea to solve this?
Marcel
# Marcel
Hey,
first of all thank you!!
Nice tutorial, it helps a lot to understand some significant facts!

At least I got one question...i tried a lot but didn´t "understand" the
$('#triangleWave').text(result);

What does the # mean and where do you write/read it?
You say it´s the variable :="webdata".triangleWave: right?

I just need to refresh my variable, but it doesn´t read the changed variable from the DB I put it in...

Maybe you can help?!

Best regards
Marcel

SKS
# SKS
Dear Mr. Jager,
please send me an example for two or more variables for actualising.

Many greetings from Germany

Wolfgang Schönberger
SKS
nmn
# nmn
Hi,

I am trying to activate outputs, Q0.0 and Q0.1, of S7-1200 on the user defined web page. But, I am failed.

Help pls.
Erik Skou Pedersen
# Erik Skou Pedersen
Hi
Thank you for a very good tutorial :-)

When i try to include the "jquery-2.0.2.min.js" file, I get this error when i create the blocks. Any ideas?

WebInt: The character string "[]" is not allowed in dynamic page content. The file will be ignored. in File: C:\UserPages\jquery-2.0.2.min.js Line: 4 Column: 1923,11/26/2013,8:24:53 AM

/Erik
Valery
# Valery
Ih!

I'm Trying to devloppe an appli for work.
Why did you need to us jQuery?

I dont really know html and prefer developpe with a WYSIWYG html editor. some one know a jquery native wysiwyg edit?

Val
Eric
# Eric
Excellent tutorial.
I'm trying to authenticate automatically (without going through the "Portal"). Any ideas how to do this?
Mar
# Mar
Thanks for the fine work! Have you ever tried to modify TOD (time of day) variables?
Davd
# Davd
Thank you very much! This is exactly what i've been seek for a long time!
rusangel
# rusangel
Good afternoon.
You've downloaded jquery. I could not, issues an error associated with nested structures in java, for example [].
FreezeGhost
# FreezeGhost
thank you for this tutorial, it helps me a lot:-)
Just note what is mean AWP - Automation Web Programming
Tim Jager
# Tim Jager
The gages I used in the example are from here: http://justgage.com/ When I get a free moment, I'll post an example using this library.
Artem
# Artem
This is Cool!
Thanks!
you have examples js-elements HMI? Gauges, Bars etc?
Artem
# Artem
This is Cool!
Thanks!
you have examples js-elements HMI? Gauges, Bars etc?

Post a comment

Name (required)

Email (required)

CAPTCHA image
Enter the code shown above:

Related Blog Posts