Hi,

I have been experimenting with an defunct machine, albeit the control gear is ok ... It has a Siemens S7200 224XP and a CP243-IT that's all in good order. I have Microwin. Whilst the patient is on the test bench, in particular, i'm toying with and utilizing the pre-installed java apps. I would like to hear from anyone that has experience with using or editing the java apps to work nicely in a web page. I have designed and uploaded a website to the CP243-IT, using simple HTML with a couple of pictures etc, and have added the siemens applets that communicate with the PLC to it that work well. but I would like to alter some of the aspects of the java app such as the colour and size of the fonts they use. there doesn't seem to be a way of altering this. If anyone can help or share experiences, it would much appreciated.

Ricii101

 

After much trialing and testing I've done it.

 

Well, don't leave us in suspense; how did you do it? There is nothing in the documentation that I could see.

 

Eventually got my head round Java!

This is how i did it:<pre>
ftp connect to the s7243-it

change directory to the /flash/applets

upload the s7GUI.jar

exit ftp

rename the s7GUI.jar to s7GUI.zip

you can then use windows explorer to access the archive. Inside the archive is a CL_TextOut.class file.

decompile the file with cavaj (free download)

copy the text into a note pad editor.

you can see there are some variables inside such as text size, colour etc.
About 20 lines down, you will see theFont = new Font "sansserif", 0 12);

Change the 12 to something like say 36.

save the file

Then go back to the command prompt and recompile the java using javac

transfer the S7GUI back to the 243CP.

Load the applet in a webpage and the size of the text has increased to 36.</pre>
Only thing with this is that ALL text will be at size 36. I haven't worked out how to get round this as all I wanted to do was have large text. I have played around with the colour, ie. 255,255,255 = black text, 255,0,0 = red and so on.

Hope this helps shed a little light on how i did it. I have done the above out of my memory so excuse me if its not exactly correct, but i hope you get the idea.

Ricii 101

 

I have to say that I'm impressed. That took a lot of digging to work out. If you're de-compiling and re-compiling the applets though, you might be able to make more changes, provided you can figure out how the thing works.

Do you know if the Java applets are using HTTP to communicate to the module, or are they just opening a simple socket? If it was HTTP and you could reverse engineer the actual protocol used, you could dump the Java applets and use straight Javascript + HTML + SVG and then be able to do anything you want.

 

I was impressed also!!! I know absolutely nothing about Java and I managed to get that far!!! To be honest I don't know whether the java uses HTML or a port, I would imagine that it does use HTML as the manual describes other applets that are not supplied ie. Pipes that fill up as the vmem value increases etc, perhaps they are actually SVG's but I really have no clue and I wouldn't know where to start! If I get a bit of spare time I might try to create another CL_text out.class file to see if I can get different sizes of text.

Kind regards,
Ricii101

 

The HMI web pages consists of a mixture of HTML and Javascript. They use the HTML for static text and as a container for the Java applets. The Java applets are small programs which get downloaded and run inside the memory space of the web browser. They draw over top of the browser window, but they're not really part of the web page itself. That's why you can't just use standard styling techniques to change the text, but instead you have to change the source code of the Java applets and re-compile them.

From what I have seen if it, it is basically 10 year old technology. By the way, don't take the the HTML examples Siemens gives in their manual as being good advice because they use some really, really, horrible hacks that look like they're straight out of the 1990s. If you want to design and re-style the HTML parts of the web pages then get a modern book on HTML + CSS, or else use Google to find some standard on-line references. You should be able to do all sorts of nice fonts, colours, and other styling features on the HTML part of the web page (which still leaves you to do your hacking on the compiled Java).

I know for sure by the way that they're not using any SVG. It's just HTML and the Java applets. Other plug-ins like Adobe Flash, MS Activex, and MS Silverlight all work in a similar way to the Java applets. They're little programs that get downloaded with the web page and draw over top of the browser window and occasionally inject components into the page. They're not really part of the actual web page though. The modern trend in web browsers is to stop using plug-ins and to simply integrate the useful features directly into the web browser itself.

 

Thanks for your reply, could you recommend a good book on HTML and CSS. I would be very interested in doing other things with the applets, but as you can see I have very little knowledge of web sites and apps etc.. Thanks again.

 

I don't have a recent book on HTML or CSS. Once I knew the basics I found I could keep up to date by looking up on-line references. Another problem with recommending a specific book is that there are so many with different writing styles that the choice of books will come down to personal preference. What I would suggest is going to a book store and leafing through a few books to see which one you like the best. That book will be a starting point for learning. Once you have the basics you can use on line references to look up tag or attribute names.

There will be a lot of current puff for HTML 5, but I wouldn't worry about that too much. While HTML 5 brings a lot of nice new (and very useful) features, they are on top of HTML 4 which is where you want to start with for the basics. So, if you see a book which focuses exclusively on HTML 5 I would give it a pass, but a book which deals with HTML 5 in a few chapters at the end should be fine.

Here are some web sites that you will probably want to bookmark.

"W3c.org" is the standards organization for HTML and CSS. They have a few things that you might want to look at.

Cascading Style Sheets articles and tutorials
http://www.w3.org/Style/CSS/learning.en.html

CSS tutorial starting with HTML + CSS
http://www.w3.org/Style/Examples/011/firstcss

W3schools have no connection with W3C. However, they have a lot of reference material on line. I find it good for looking up something quickly, but not so good as a learning resource.

w3schools
http://www.w3schools.com/

This is the Mozilla developer web site (Mozilla makes the Firefox web browser). The nice thing about Mozilla's web site is that they usually have good examples for everything. They are also usually a more reliable reference than "W3schools".
https://developer.mozilla.org/en-US/docs

This is a link directly to the HTML reference.
https://developer.mozilla.org/en/HTML/Element

This is the opera developer web site. Opera is a minor web browser vendor, but they have a lot of good documentation on line. However, they tend to focus more on advanced features and so aren't as good as a basic starting point. If you're looking for information on cutting edge features, they're a good place to go however.
http://dev.opera.com/articles/tags/open web/

Here's a link into my own web site. You'll have to dig down a few levels to get to the bits that you're interested in, but I am planning on releasing a new program soon that will result in changes to the site layouts. This isn't basic tutorial information, but it does show how I've been using HTML plus CSS plus SVG to do HMI related things.
http://mblogic.sourceforge.net/mbhmi/mbhmiintro.html

Here are a couple of links directly to the relevant pages on my web site. Just keep in mind that these links may change soon, so you may have to use the link I listed above to find the new versions.
http://mblogic.sourceforge.net/mbhmi/basicconcepts/basicconcepts.html
http://mblogic.sourceforge.net/mbhmi/manualpage/manualpage.html

The sections of my own web site which talk about assembling the HTML, Javascript, and SVG into an HMI web page are about to all be replaced by a new program which does all this automatically. That won't work with a Siemens module however, as the Siemens server doesn't have the same protocol that I use. The sections on "Basic Concepts" and "Manual HMI Web Page Construction" however will remain as a reference to the underlying technology (for anyone who is interested).

My own web site isn't a basic reference, but I am mentioning this because I don't know of another web site that focuses on the issues involved in HMI type applications.