Hmi Vue

Posted on  by admin
  • Features

    HMI stands for Human Machine Interface and refers to an interface that allows users to communicate with machines and systems. Therefore, the HMI of an industrial machine is the interface between the technical part of the machine and the user.

    Industrial machines are often complex with multiple sensors, features, and a lot of processed data. Consequently, the HMI of the machine can quickly become complex too. However, many users require even complex HMI’s to be as visually appealing and user-friendly as modern smartphone apps.

    This article describes how this can be achieved without being a limitation when compared to complex industrial machines.

    • The basis for this is modern technologies of software development like Electron, Vue.js, and MQTT.
    • An important requirement for an HMI is that it starts immediately and is visible when the machine is started.
    • Furthermore, nothing from the operating system should be visible except the actual HMI application.
    • The HMI application must therefore have the ability to be started in full-screen mode by the machine’s operating system as soon as it is ready.
    • On the other hand, it is a good approach to take advantage of modern web development technologies and web frameworks to develop a modern HMI with the same visual and user-friendly advantages that the latest smartphone apps offer users.But if we develop a classic web application for the HMI we encounter the first challenge.
    • This is because web applications are actually made for the browser and have to be called manually by the user.
    • They cannot be started automatically by the operating system as soon as the machine is ready.To solve this problem, the Electron framework can be used.
    • Electron is a framework that is a native wrapper around a Chromium web browser, creating a native application.
    • Thus, native applications can be developed for Windows, macOS, and Linux.
    • Basically, any content can be displayed in the Chromium web browser that can be displayed in any other browser.
    • You can find more about Electron here.
    • If you develop a complex web application with HTML5, Javascript, web components, and CSS preprocessors like SASS, it is always advantageous to use a framework like Vue.js, React, or Angular.
    • With frameworks like these, we have the possibility to handle the complexity of the industrial machine, and therefore also in the application of the HMI.
    • Today, I will describe a solution based on Vue.js because it is a very lightweight framework and still offers many advantages to develop complex graphical interfaces for web applications based on JavaScript.
    • All the advantages of Vue.js and more information about it can be found here.
    • So the idea is that we use Electron to implement a native application with a Chromium browser that can be automatically launched in full-screen mode from the machine’s operating system and run a Vue.js application inside the browser of Electron.
    • The next challenge is to combine Vue.js with Electron.
    • Fortunately, there are some projects that simplify this process.
    • For our solution, the following fits best: electron-vue!
    • The electron-vue project creates a boilerplate Electron project which has the Vue.js framework already integrated by default.
    • For this, we just have to execute the following two commands:.
    • npm install -g vue-clivue init simulatedgreg/electron-vue my-hmi.
    • With the second command, we have to define some settings for the project like the name or which Vue.js plugins should already be integrated.
    • Here it is recommended to install the plugins vue-electron, vue-router, vuex, and vuex-electron.The plugin vue-electron adds the Electron APIs to Vue.js.

    Thus, all Electron APIs are accessible within the Vue components. The Vue Router helps us to navigate between all the pages within our HMI. Vuex is a state management package for Vue.js, and with the vuex-electron plugin we have the possibility to use it in our Electron project.

    Ordering code

    After these steps, we can start with the actual implementation of the HMI.

  • Downloads
    Did you find what you wanted? If not submit a support request using our technical support ticketing system.