Home
considering Industry 4.0 applications in general there are inevitable requirements for them: They should be:
- modular,
- extendable,
- easy to integrate in existing networks and
- interoperable - be easily connected to any other service.
One of the main objectives of such applications for example is the overview of data just in time, independent of the working platform. Furthermore the origin of the data should be of no technical relevance, may it come from other IoT devices like sensors or servers or other connected resources.
This can be achieved using the web-app architecture we provide in this repository. we have built a dynamic dashboard with our recently proposed architecture. It consists of Angular as a framework which has grown into a very mature front-end solution in the last few years. It offers nice standard components of web apps within Angular Material, which can be extended easily to any more complex view or component. For the back-end we stick as always to Python, because it offers all kind of connectivity with very low development overhead and because it is simply a good language. Furthermore it offers a broad range of data processing tools like AI/Deep Learning Tools, Mathematical Tools and last but not least plotting tools like Bokeh, which we are going to use in this presentation.
We are also very happy to extend our typically used web server technology with the asynchronous programming paradigm, that means we use aiohttp as our standard python web server. To connect both parts we decided to make extensive use of websockets, which guarantees a responsive data stream in both directions via standard tcp/ip protocol.
Some typical problems which arise on the way and can be avoided are e.g.
- individual data update event driven (each chart should be a component and the content of the chart is fully back-end driven),
- dynamic data provision within charts or number representation,
- using independent Bokeh charts in the Angular app,
- flexibility - for example - to arrange charts on the board.
If you are running with Angular outside of a cdn (bad internet access, etc.) then you should use npm install to add the bokeh library.
Everything else in this example stays the same with the following exceptions:
-
Add bokeh via npm:
npm i @bokeh/bokehjs --save
-
Update your angular.json file to contain the following in the scripts section:
"scripts": [
...
"node_modules/@bokeh/bokehjs/build/js/bokeh.min.js"
...
]