haganwalker
Member
Hey guys,
The TL;DR is the last two paragraphs with a web link for you to try yourself. If you don't have anything better to do, look at the attached picture of the website that is being hosted ON A PLC!!
I'm not sure if this will help anyone or not, but perhaps some of you want a mobile HMI that you can pull up on an ipad or some other mobile device to check things on the go. I'm an intern at a brick plant in Columbus, Mississippi installing vision systems on robotics, etc...and this was a task that my boss gave me. This will work for sure with the Siemens 1200/1500 PLCS and Red Lion hardware with Crimson 3.
The requirements from my boss:
Access PLCs remotely to monitor values.
Log PLCs values on a yearly basis to note trends, see repetitive errors, etc.
Wireless capabilities
Authenticated login
iPad Native (for use while walking around the plant)
So I've never done any of this before. I've never written in HTML, PHP, JavaScript, or CSS3...but I can tell you that I learned all I needed to know in a coding extravaganza this weekend.
First things first...get yourself Dreamweaver or something comparable to do your web editing. Also, how I'll be proceeding is detailing the process using a Red Lion ProducTVity Station.
FOR THE SIEMENS PEOPLE...in the Siemens TIA Portal V11+, simply go to "Device Configuration > Web server > General > Activate web server on this module". Under "User-defined Web pages", you'll then point to your HTML directory and the default page you'd like to use. Click "Generate blocks" and finally, enable the web server by creating a new WWW Function Block with the CTRL_DB pointing to 333 (default) and I just made RET_VAL #RET_VAL. Go to a browser, type in the IP of your 1200/1500...and go to user pages. Everything should be working.
Moving forward.
The Crimson 3 software by Red Lion is amazingly simple to use, and we already have some ProducTVity Stations that we use for Marquee style displays around our plants, so I decided that the Red Lion was my weapon of choice.
To start: you need to import data from your PLC(s) into Crimson. This is as easy as making a new tag and giving it the Data Block value as it is assigned in your PLC.
Next, you need to enable the Web Server by clicking "Web Server" on the left side of the screen and clicking "Enable Web Server". Since we're making a custom site, make sure that you also Enable "Custom Site". Then go to the "Security" tab and give your site a username and password. Access Remotely by typing in the IP address while on the plant network. authentication AND remote access...done.
Here's where the fun begins. Red Lion Hardware/Software does not support ANYTHING other than HTML on the device. Period. This isn't the same story with Siemens...feel free to put scripts/etc. on your 1200/1500 until you run out of space. Also, Red Lion uses the "8.3 naming convention"...so HTML needs to be saved as .htm
Embedding data: In Red Lion Crimson 3, you can embed tags directly into HTML by inserting braces around the tag name (you can also do this with Siemens but the syntax is different I believe). In Crimson, tags are broken into folders, so if the folder was hagan and the tag was dayofweek, the tag to insert into your website will be [[hagan.dayofweek]].
Making it fancy: So Red Lion says HTML only. Hagan Walker says no. You can get around this by hosting all other needed files on an external computer/server...I'll show code for this in a minute. I really think I'm pushing the bounds of the ProducTVity Station here, and Red Lion as a company probably hasn't seen their products run a website as intricate as the one I've developed, but I'm a little bit of a perfectionist. My CSS/JavaScript files are being hosted on a random server that I have...but any networked computer will do. So below is code from my "homepage" (on Red Lion hardware, you'll be required to make a WEB folder on the root of the CompactFlash card, and your home page MUST be named "default.htm").
So, in the "head" of the HTML, you can see that all my sources are external, but that scripts can be ran inside of an HTML page on the ProducTVity Station. Also, take note in regards to the meta tags...a couple of them deal specifically with iOS devices and make this web page not only mimic a native app, but work like one as well. If any of you have an iPad, I'll tell you how to preview this correctly later (note...this was built for an iPad...it most likely will not display correctly on other devices, including the iPhone). iPad (sort of) native...done! The script above that you see is a chart that takes HTML data (this was a workaround since that is all that Red Lion supports) and makes something pretty of it.
Logging: I've done this two ways. In Crimson, I've enabled the data logger and this function automatically saves a log "on trigger" with that trigger being when the last brick has been processed for the day. This is nifty, as it saves the files in a CSV format that easily opens in Excel. However, I've also made important tags retentive. For example, if there is a power failure, the Red Lion will hold it's last value in a tag until it is overwritten. This was important as I'm saving data from days/weeks/months.
So, how did it turn out? Extremely well. I still have work to do, but the framework is there...and it runs like it should, from the Red Lion, on our plant network. I've uploaded a sample to my personal server for you to take a look: http://www.haganwalker.com/test/default.htm and I hope that you like what you see. The landing page gives an overview of things going on. If you go to "Setting Machine 1/2", you'll see the raw tags from Crimson...since this isn't being hosted on the Red Lion, those tags aren't corresponding to an actual value (things don't look that way here, but I can't let you into our plant network to look haha).
IF YOU HAVE AN IPAD: Visit http://www.haganwalker.com/test/default.htm and click the Share button (Right in between the Cloud and Address Bar at the top of the screen) and click the Brick Logo..."Add to Home Screen". This will make a web app so that you can see the real look/feel (and it can be removed just like any other app by pressing/holding on the icon on the home screen).
Obviously there were many hurdles that I had to overcome/work around to get this far, but I wanted to share, because sometimes if you sit down and work towards something, maybe something rewarding will come out of it. I hope this helps anyone who has had the idea or needed direction. If you have specific questions, I'll be happy to try and answer them!
Thanks,
Hagan Walker
The TL;DR is the last two paragraphs with a web link for you to try yourself. If you don't have anything better to do, look at the attached picture of the website that is being hosted ON A PLC!!
I'm not sure if this will help anyone or not, but perhaps some of you want a mobile HMI that you can pull up on an ipad or some other mobile device to check things on the go. I'm an intern at a brick plant in Columbus, Mississippi installing vision systems on robotics, etc...and this was a task that my boss gave me. This will work for sure with the Siemens 1200/1500 PLCS and Red Lion hardware with Crimson 3.
The requirements from my boss:
Access PLCs remotely to monitor values.
Log PLCs values on a yearly basis to note trends, see repetitive errors, etc.
Wireless capabilities
Authenticated login
iPad Native (for use while walking around the plant)
So I've never done any of this before. I've never written in HTML, PHP, JavaScript, or CSS3...but I can tell you that I learned all I needed to know in a coding extravaganza this weekend.
First things first...get yourself Dreamweaver or something comparable to do your web editing. Also, how I'll be proceeding is detailing the process using a Red Lion ProducTVity Station.
FOR THE SIEMENS PEOPLE...in the Siemens TIA Portal V11+, simply go to "Device Configuration > Web server > General > Activate web server on this module". Under "User-defined Web pages", you'll then point to your HTML directory and the default page you'd like to use. Click "Generate blocks" and finally, enable the web server by creating a new WWW Function Block with the CTRL_DB pointing to 333 (default) and I just made RET_VAL #RET_VAL. Go to a browser, type in the IP of your 1200/1500...and go to user pages. Everything should be working.
Moving forward.
The Crimson 3 software by Red Lion is amazingly simple to use, and we already have some ProducTVity Stations that we use for Marquee style displays around our plants, so I decided that the Red Lion was my weapon of choice.
To start: you need to import data from your PLC(s) into Crimson. This is as easy as making a new tag and giving it the Data Block value as it is assigned in your PLC.
Next, you need to enable the Web Server by clicking "Web Server" on the left side of the screen and clicking "Enable Web Server". Since we're making a custom site, make sure that you also Enable "Custom Site". Then go to the "Security" tab and give your site a username and password. Access Remotely by typing in the IP address while on the plant network. authentication AND remote access...done.
Here's where the fun begins. Red Lion Hardware/Software does not support ANYTHING other than HTML on the device. Period. This isn't the same story with Siemens...feel free to put scripts/etc. on your 1200/1500 until you run out of space. Also, Red Lion uses the "8.3 naming convention"...so HTML needs to be saved as .htm
Embedding data: In Red Lion Crimson 3, you can embed tags directly into HTML by inserting braces around the tag name (you can also do this with Siemens but the syntax is different I believe). In Crimson, tags are broken into folders, so if the folder was hagan and the tag was dayofweek, the tag to insert into your website will be [[hagan.dayofweek]].
Making it fancy: So Red Lion says HTML only. Hagan Walker says no. You can get around this by hosting all other needed files on an external computer/server...I'll show code for this in a minute. I really think I'm pushing the bounds of the ProducTVity Station here, and Red Lion as a company probably hasn't seen their products run a website as intricate as the one I've developed, but I'm a little bit of a perfectionist. My CSS/JavaScript files are being hosted on a random server that I have...but any networked computer will do. So below is code from my "homepage" (on Red Lion hardware, you'll be required to make a WEB folder on the root of the CompactFlash card, and your home page MUST be named "default.htm").
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Columbus Brick Company</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />
<link rel="apple-touch-icon" href="http://www.haganwalker.com/test/brick.png" sizes="114x114" />
<link rel="apple-touch-startup-image" href="http://www.haganwalker.com/test/cbc.png" sizes="1024x748" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="stylesheet" href="http://www.haganwalker.com/test/assets/stylesheets/master.css" />
<!--[if IE 8]>
<link rel="stylesheet" href="http://www.haganwalker.com/test/assets/stylesheets/ie8.css" />
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript"></script>
<script src="http://www.haganwalker.com/test/js/webapp.js"></script>
<script type="text/javascript"></script>
<!--[if !IE]><!-->
<script src="http://www.haganwalker.com/test/assets/javascripts/iscroll.js"></script>
<!--<![endif]-->
<script src="http://www.haganwalker.com/test/assets/javascripts/jquery.js"></script>
<script src="http://www.haganwalker.com/test/assets/javascripts/master.js"></script>
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: 'Weekly Car Information'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Minutes/Wirebreaks'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.y +' ' +'on'+ ' ' + this.x;
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
}
});
});
</script>
</head>
So, in the "head" of the HTML, you can see that all my sources are external, but that scripts can be ran inside of an HTML page on the ProducTVity Station. Also, take note in regards to the meta tags...a couple of them deal specifically with iOS devices and make this web page not only mimic a native app, but work like one as well. If any of you have an iPad, I'll tell you how to preview this correctly later (note...this was built for an iPad...it most likely will not display correctly on other devices, including the iPhone). iPad (sort of) native...done! The script above that you see is a chart that takes HTML data (this was a workaround since that is all that Red Lion supports) and makes something pretty of it.
Logging: I've done this two ways. In Crimson, I've enabled the data logger and this function automatically saves a log "on trigger" with that trigger being when the last brick has been processed for the day. This is nifty, as it saves the files in a CSV format that easily opens in Excel. However, I've also made important tags retentive. For example, if there is a power failure, the Red Lion will hold it's last value in a tag until it is overwritten. This was important as I'm saving data from days/weeks/months.
So, how did it turn out? Extremely well. I still have work to do, but the framework is there...and it runs like it should, from the Red Lion, on our plant network. I've uploaded a sample to my personal server for you to take a look: http://www.haganwalker.com/test/default.htm and I hope that you like what you see. The landing page gives an overview of things going on. If you go to "Setting Machine 1/2", you'll see the raw tags from Crimson...since this isn't being hosted on the Red Lion, those tags aren't corresponding to an actual value (things don't look that way here, but I can't let you into our plant network to look haha).
IF YOU HAVE AN IPAD: Visit http://www.haganwalker.com/test/default.htm and click the Share button (Right in between the Cloud and Address Bar at the top of the screen) and click the Brick Logo..."Add to Home Screen". This will make a web app so that you can see the real look/feel (and it can be removed just like any other app by pressing/holding on the icon on the home screen).
Obviously there were many hurdles that I had to overcome/work around to get this far, but I wanted to share, because sometimes if you sit down and work towards something, maybe something rewarding will come out of it. I hope this helps anyone who has had the idea or needed direction. If you have specific questions, I'll be happy to try and answer them!
Thanks,
Hagan Walker