Internet service development


Thread Starter

Keith Chessell

Our company is developing an internet based data visualization service. We have a basic modbus interface to exchange data with devices and PLCs. I would be grateful to receive suggestions for enhancements, features and functionality from this forum such that we can incorporate ideas into the service. All new (to us) ideas will be acknowledged and we would be grateful for any feedback.

The service is pre-release but a free beta can be found at
I have been doing web based HMI systems for a while now, although not as part of a remote service like you are selling. I had a look at your web site and from what I can see, you are using Silverlight as your vector format in the client. I think that is going to be a problem for you if you really want to be able to say "any browser capable device can view and control the status of equipment" (from your "what is Whzan?" web page). You are really limiting yourselves by this design choice, especially with respect to mobile devices. Silverlight may work on MS Windows on the desktop, when it happens to be installed (which it isn't in a lot of businesses). Everywhere else however the story is not so good. For what I imagine your major market would be, that's going to be a big problem.

You can do this sort of graphical stuff with SVG (I've done it), and unlike Silverlight it will work anywhere without plug-ins. SVG is part of HTML 5 (and XHTML 4 before that), almost all browsers support it, and as an integral part of the web it has a great future. The future of plug-ins like Flash or Silverlight on the other hand is a bit doubtful.

I have a Free/Open Source Software (FOSS) project which includes a web based HMI as one component in it. I won't interject the name of it here into your topic, but if you are interested I can give you a URL to the project web site where you can see on-line demos to prove that it really does work. It's part of an actual control system rather than a remote service like your product, but the HMI web pages themselves are relevant to what you are doing.

If you want to discuss this any further, let me know and I would be happy to talk about it.

Keith Chessell

Thanks for this reply, its interesting to see how many different application techniques have been used in this area.

I understand your plug-in comments, Silverlight is not everywhere although its base is growing including a few smart phones and in many of the big corporates we work with.

Silverlight does provide access to dynamic effects, layering, user interaction some of which would be difficult with just SVG. So if you look at our widgets and pick say a slider control, the pointer can sweep in relation to a value or the user can drag the pointer to set a value.

Also a Whzan user can use Expression Blend to design their own dynamic graphic, including data related transformations and plug that in to Whzan with very little programming knowledge at all.

However that said I would really like to see a sample of your SVG HMI as it maybe that we could create a Whzan service to drive it.
Here is a link to my web site. The relevant demo is the first one, "HMI Demo".

The art work and CSS styling is not up to date on that, but the basic features are demonstrated. That demo has to simulate the data sources because there isn't a machine controller driving it on the public web site. However, normally the system would be using AJAX polling to fetch new data from the machine control, and the screen updates are driven by the arrival of new data (which is why the widgets move in increments).

The next release (out within the next day or so) will have animations using SVG SMIL animation, but other than making the pump rotate smoothly and providing an interest flashing effect for pilot lights, I can't think of many genuinely useful applications for animations. Of course, I'm not an artist, so that may be due to my lack of imagination.

I will now address your points:

> Silverlight does provide access to dynamic
> effects, layering, user interaction some of
> which would be difficult with just SVG.

Dynamic effects are no problem with SVG. I already mentioned animation. Also If you run your mouse over the push buttons you will see the border change slightly. That's done with a simple CSS rule. There are lots of other things that I could probably do, but have just never bothered or possibly never thought of. By the way I wouldn't recommend going overboard with animation effects in mobile applications. Users won't be happy about what that does to their battery life.

Layering is also no problem. If you click on the "Tank", "Data", "P&P", and "Chart" buttons you will see different "screens" appear. Each screen is simply on a different drawing layer. The buttons are on their own layer. The screen background is on its own layer.

> if you look at our widgets and pick say a
> slider control,

I haven't done a slider control, but I don't see any reason why I couldn't implement one. I have just stuck to traditional industrial control widgets (push buttons, pilot lights, selector switches, etc.). I don't know if you are familiar with the sort of controls which are on the demo page, but they are all traditional industrial types which are instantly recognizable to anyone from a machinery background. If a user asked me for a slider control however, I'm sure I could make one without a lot of difficulty.

> a Whzan user can use Expression Blend to design
> their own dynamic graphic,

I use Inkscape for that, and no doubt other standard drawing editors would work as well. Users have drawn their own art work from scratch (depicting process plants) and then animated them as well.

I use a different work flow than you do. You define everything as you go along, while I prefer to do the drawing first and then define the links to the server later. I think that makes more sense for larger applications, especially as the guy creating the drawing may be different from the guy figuring out how to connect it with the PLC.

This is especially the case if the drawing isn't being created just for the HMI. Unlike Silverlight, SVG is a standard drawing format, and there are many programs which can create it. I started using Inkscape because a user had already drawn his plant using it and wanted to know how to animate it. I now recommend it for that purpose. However, there is no reason that other SVG sources can't be used, provided they allow the user to set the id property.

At present the final stage of the work flow that I use involves assembling it manually. I will be writing a program to handle that automatically, but that isn't really relevant to this discussion. I'm telling you what can be done with SVG; I'm not saying that you should copy the exact way that I've done things.

> I would really like to see a sample of your SVG
> HMI as it maybe that we could create a Whzan
> service to drive it

I'm not suggesting that you simply try to glue the HMI system that I have on the front of your service. My own project is open source and you're welcome to take advantage of it under those terms, but you may find that the design details don't fit your data model. However, you should be able to do anything with SVG that you are currently doing with Silverlight. The MBLogic HMI uses an AJAX protocol called "Cascadas" that I developed in cooperation with some other developers who needed it for their own purposes. There is a link to the protocol document at the bottom of the following page.

That may or may not be of any help to you, but it's not critical to any of the points I have made above. I wanted to create something that could be used for an industrial control HMI to go along with the rest of the industrial control system I was writing. It's a very simple JSON based AJAX protocol, but it might not fit your data model exactly.

What you would probably want to provide is something like the following:

1) Web page templates.

2) CSS files.

3) SVG widgets (some of which may contain embedded Javascript).

4) Javascript libraries to drive the polling and control the widgets.

5) A configuration tool to assemble the web page, CSS, SVG file, and to fill in the boilerplate configurations. This shouldn't be that hard to do, since the relevant information can be pulled out of the SVG file by scanning through the SVG DOM (SVG is XML). The user then just has to pick items off menus such as which pilot light they want connected to which PLC address.

6) Documentation.

This is more or less what I do (although the configuration tool isn't done yet). If you would like to discuss this further, I would be happy to provide more details.

P.S. I've looked at your web site and Youtube videos, but I haven't tried your actual Silverlight demos since I can't seem to get them to run on any of my computers.

Keith Chessell

I have looked at your demo, you clearly have done a lot of work so I am sure you must have found an application space for it.

Whzan is in a different space, using the Whzan editor, our untrained receptionists can make really nice dynamic mimics in a hour or so (they did the ones on our site). You also get a drag and drop online editor, online data storage, history, email alarms, online viewing and control (if you enable it), connection to modbus and many other devices and so on.

Whzan is not in competition with your work, its alongside it.

I see it in the same way as the endless Windows/Linux debate. There will always be a space for those that want free software and another those that are willing to pay.

I wish you well.