Extend the capabilities of Weintek HMI with JavaScript

Mutual data exchange is essential in any field, especially in industrial systems, medical equipment, energy management, building automation and many other places. Still, the industrial side and the IT side are two different environments in terms of data. HMI data integration and data acquisition tend to be a concern for system developers. Programmers are forced to build various bridges between these worlds. Therefore, in this article, we will explain how JavaScript can be used to increase the capabilities of Weintek HMI, allowing users to quickly create an HMI application that is tailored to individual needs.

• What is JavaScript?
• 4 steps to use JavaScript with Weintek HMI panel?
• Common JavaScript code solutions
• What are the benefits of JavaScript?

What is JavaScript?

JavaScript is also often referred to as JS in the programming world. This is an object-oriented programming language JavaScript OOP (Object-oriented programming), which is used in the development of interactive web pages. In this area, JS is the dominant language, as 98% of existing websites are currently built with the help of JavaScript.

In the beginning, home pages were static, similar to a page opening in a book or magazine. They represented information in a fixed form. Back in the day, websites weren't interactive, which is commonplace today. With JS, it is possible to react to user actions and change both content and visual layout

4 steps how to use JavaScript with Weintek HMI panel?

Weintek's developers have made sure that integrating JavaScript into Weintek's visualization development tool EasyBuilderPro is convenient and understandable for both JS professionals and Weintek visualization developers who are just getting started with JavaScript. 

1. Creating a JavaScript function. In orde to create a JS function, we start by selecting JS-Object from the EasyBuilderPro objects section in the Weintek visualization panel. When you open this object, a new window pops up where the first section is Config.
2. Defining variables. In this section, we define the variables that will be used in the code and indicate which of them are associated with HMI or PLC register addresses. For IT-side JS developers, this step may seem strange, as such a step is not necessary in JS
3. Source Code. This is the most important step in HMI JavaScript. In this window, JS code is written, which realizes the following function. Whether it is a simple print text "Hello World" or getting data for processing from a website, everything is realized in this section.
4. Writing JS function code. Further, it remains to write the code of the desired function. This can be done from scratch or by opening the JS OBJECT SDK link, viewing and obtaining manufacturer-prepared function descriptions and practically ready-made function codes. A working JS function will be ready with minor adaptation. Of course, you can take a JavaScript code sample from any convenient resource. Everything that follows is already a flight of your ideas to be implemented in code with JavaScript HMI.

Common JavaScript code solutions

Since JavaScript is an ancient programming language with very powerful and useful features, code samples are readily available. The best JavaScript examples to try in 2023 can be found in the attached images of this article or by opening this link. Here you can find manufacturer-created downloadable EasyBuilderPro demo projects that already have a working JavaScript object created for instant JS functionality evaluation. In addition, you will also find code samples of the most popular functions, which can be copied to a JS object to run the desired function and the Weintek HMI. It is definitely worth looking at such a function as Web request, which will allow you to get data from a web page with HMI. Of course, also the SOAP client function, which will be useful in innovative data acquisition

What are advanatages of JavaScript?

• Get data with Weintek HMI from websites using requests  - Web API;
• Interactive visualizations in input/output of data and contours thanks to JS Widget capabilities;
• Easier access for IT specialists to the development of HMI visualization

Other articles and video materials about Weintek HMI:

1. New and durable 7'' HMI panel from Weintek
2. ONLINE SESSION: How to use Codesys controller with Weintek HMI panel?
3. Wireless hotspot in Weintek cMT X series HMI's with M02 WiFi module