Enhancing Native Windows Application’s User Interface with Web Technologies
Rauhala, Anssi (2025)
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202501281995
https://urn.fi/URN:NBN:fi:amk-202501281995
Tiivistelmä
ROHM Semiconductor’s ROHM EVK GUI SW is a Windows-based GUI application designed to evaluate various ROHM products. Some products require specific functionalities on the frontend for evaluation purposes and others do not. These specific functionalities could be ADC / GPIO polling and register writing / reading to integrated circuits for example. To address the need for more specific use cases, this thesis aims to enhance the software by utilizing modern web technologies. By utilizing Vite, React and Material UI for frontend development and JSON schemas for a systematic and consistent data structure, a new “Value Editor” frontend application will be made and integrated into ROHM EVK GUI SW using WebView2. This new application should be able to communicate with the main desktop application using REST API provided by said application and be able to bidirectionally convert values received from the REST API into human-readable values and back to machine-readable formats.
The applications GUI was designed by prototyping various incomplete versions so that feedback could be gathered and then be improved upon. To maintain good code readability, MDN web docs code conventions for JavaScript were followed, AI tools were used sparingly for repetitive parts of code and for refactoring during production to prevent their overuse. Over usage of AI tools hinders learning and sometimes does not produce quality code.
The project’s development started by researching for a third-party library that is compatible with the chosen development environment and would be able to generate the GUI of the application based on the given JSON schema. After the chosen library was deemed suitable and the design was decided on could development of actual functionality be started. The two main functionalities were successfully implemented, and an additional feature for downloading current settings and importing them back.
The new frontend application easily allows for more specific use cases to be added to the main software with a systematic and consistent structure thanks to the JSON schema. This piece of software will be expanded upon in the future but the main functionalities that were required are now implemented.
The applications GUI was designed by prototyping various incomplete versions so that feedback could be gathered and then be improved upon. To maintain good code readability, MDN web docs code conventions for JavaScript were followed, AI tools were used sparingly for repetitive parts of code and for refactoring during production to prevent their overuse. Over usage of AI tools hinders learning and sometimes does not produce quality code.
The project’s development started by researching for a third-party library that is compatible with the chosen development environment and would be able to generate the GUI of the application based on the given JSON schema. After the chosen library was deemed suitable and the design was decided on could development of actual functionality be started. The two main functionalities were successfully implemented, and an additional feature for downloading current settings and importing them back.
The new frontend application easily allows for more specific use cases to be added to the main software with a systematic and consistent structure thanks to the JSON schema. This piece of software will be expanded upon in the future but the main functionalities that were required are now implemented.