HOW TO: Create a Web-Based HMI (Siemens/RedLion)

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:

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

Event Viewer Logging

Nice work on the web page Hagan. I too am in the process of making a custom web page for remote connectivity at work with a Red Lion G308. I am curious if there is a way to send the contents of the Event Viewer (or Alarm Viewer) to a SQL server database (or just to a CSV etc.). I have successfully setup the data logger to synch various logs to my SQL server, but it would save me a bunch of time if it was possible to just have the Red Lion write any new contents of the Event Viewer to the SQL database every 5 minutes or so. Otherwise it seems like i'll just be re-engineering the functionality of the built-in Event Viewer in order to display it on the custom web page. Any suggestions?

Thanks,
Brett

Hey Brett,

Hmm...lets see what we can come up with. I know the ProducTVity Station makes heavy use of the CF card and I believe automatically saves a .csv file to the CF card as events occur. If the G308 has a CF card, you might want to check it just to make sure.

Next, since you've already made your tags, Why don't you just make a new log under the "Data Logger" tab? You can import the tags you want to view and to access them remotely, I believe you can also set up the "Web Server" to have "Data log access" so that you can reach the CSV files remotely. I know in the data logger that you can have it rewrite or append to a CSV file on a time interval or a trigger.

Maybe I didn't fully understand, but I believe maybe we can figure something out. Crimson is finicky like that. Great for the super easy stuff, but the more you want to do, the more you have to figure out on your own (or figure out that it was never incorporated on Red Lion's end)

Lastly, there is a Security tab on each tag with a "Write Logging" drop down menu that allows you to record any changes.

Maybe with those options, we can ping ideas off of each other and get somewhere. Don't be afraid to look at making a simple program with the built in event/logging/file creation functions.

Hope it helps some.

Hagan

That's a nice looking iPad app you made

Thanks surferb...I appreciate it!

Great work!! Sure would be great to do this on Ipad/Iphone for Allen Bradley!

What I find really clever about his approach the way he externally hosted that CSS style sheet that he created (and the iOS specific HTML tags) to be compatible with the Red Lion output. That and the hybrid data logging approach are an innovative solution to work with heterogeneous devices - that's what systems integration is all about!

@best49erfan - You could create a similar app to what OP did for AB (or Siemens) with Ignition. That's an "easy" way to go, where the app and SQL database is hosted on a PC.

best49erfan said:

Great work!! Sure would be great to do this on Ipad/Iphone for Allen Bradley!

Click to expand...

It seems that the event viewer contents must be stored on the Red Lion somewhere. I am not sure if it is on the CF or not. The .CSV files that are produced from the data logger are nice, but the event viewer has instant access to every alarm (and indicates what time it tripped and what time it cleared). I want to reproduce that event/alarm history on the custom web page.

If the contents of the event viewer(and/or alarm viewer) are not stored in a file on the Red Lion somewhere accessible, that would be annoying, but here is what i'm thinking:

The event viewer on the device displays a time stamped list of all alarms that ever tripped in addition to when the alarms cleared. I am looking at close to 200 safeties to monitor with this process. So I suppose I can create a data log that monitors all 200 safeties and continuously logs the contents every second (this alone sounds like it will be very taxing on the network). Then I am left with a large SQL table that has a bunch of redundant information in it because it is logging continuously while none of the safeties are necessarily tripping. So I will then have to search through the SQL table for all true->false and false->true transitions and create a new table that displays only that data. At that point, I might have something that resembles the event viewer.

I could run the log based off a trigger, but the only way I see to do this would be to create a data log for every single safety, so about 200 data logs. Every safety has a tag, so I would just have every safety tag trigger its corresponding data log trigger tag. I have not tried this yet, but that seems like it could affect the performance of the machine (but maybe it will work).

I have emailed Red Lion support asking whether or not the contents of the event viewer are stored to a file that is accessible. We shall see.

-Brett

Brett,

I'll have a look at work for you tomorrow...typing from a Mac, my work computer is at the office. I haven't actually used the event viewer function...but the guys around the office have started calling me the "Red Lion Hurdle Jumper" because the expandability is there, it just might take some work to get what you're looking for.

I'll tell you, there are Red Lion people all over these forums. I personally would reach out to a user named JeremyH...he works for Red Lion and seems to know his stuff (If you've submitted a ticket to Red Lion, he might be the one to respond).

Yeah, I'm somewhat of a network guy, which was one of the huge reasons that I made the app above...it eliminates most of the bandwidth hogging that we were experiencing with everyone looking at the "Remote View" of our ProducTVity Stations...which seems to continuously load a bitmap file in the background.

I'll see what I can come up with.

Thanks,

Hagan

Support got back to me, turns out it's super easy. Under the Data Tags section, if you click on Data Tags, then it gives you the option under Event Logging to Log to Compact Flash. This stores a CSV file or writes to your SQL database if SQL synch is setup that keeps a running tally of alarms that trip or clear. Hooray!