Siemens SIMATIC S7 Web HMI
We had a quite old wood heating in our residential building and its controlling unit broke some years ago. Since spare parts are no longer available, we had to improvise and developed a custom controller based on a SIMATIC S7-300. Over the years, we have expanded the system and now it controls, in addition to the the heating also domestic water supply and radiators, switches lights, opens doors and collects weather information.
Nowadays there is an app for almost everything so there should be one for our special home automation. Unfortunately the Siemens stuff is expensive and somewhat limited related to mobile devices but there’s an open source communication suite for Step7 called snap7 and Node.js bindings node-snap7.
S7Web
It’s been about 4 years ago that I’ve written the first draft of S7Web using sails.js and AngularJS. It worked well but AngularJS is outdated and it was more of a quick shot, so it was time to build a more professional version.
The second version of S7Web was build up from scratch. The node-snap7 API is very Step7 like, so at first I’ve created a hi-level library for the communication logic and open sourced it as S7Client. As backend framework, Feathers seems to be the perfect choice. It’s service and aspect orientated, exposes a RESTful API with real-time support, is datastore agnostic and has a nice browser client. The frontend uses Vue.js, of course.
It turned out that we use a few functions very often, mostly on our smart phones. So I’ve tried to achieve the best usability for these use cases. Vue’s excellent support for code-splitting reduces the app loading time to a minimum and by use of progressive-web-app features it results in native like behavior.
The schematic illustrations of the plant leverage the benefits of SVG and makes the view dynamic. The pipes changes its color based on the temperature and the motor signs become a green rotating symbol when they’re running.
Long term data logging
Those who understand the past will dominate the future.
So write down what happened. S7Web pushes every state change to the time series database InfluxDB. Together with tools like Grafana and Chronograf plus Kapacitor from the TICK Stack we can visualize and understand our data over time, moreover we can set up alerts and actions when thresholds are exceeded.
Impressions
Interested?
Do you also have a SIMATIC-S7 powered system and want to improve the usability with a modern, low-cost Web-Application? The visualisation part is specified to our system but the backend implementation is very generic and supports any Step7 variable types as well as multiple PCLs. Please contact me!