Custom Dashboard for Industrial Automation

DOI : 10.17577/IJERTV12IS070070

Download Full-Text PDF Cite this Publication

Text Only Version

Custom Dashboard for Industrial Automation

Akash E Punagin

R V College of Engineering Bangalore, Karnataka

Dr. B. Renuka Prasad

Associate Professor & Associate Dean R V College of Engineering Bangalore, Karnataka

AbstractAs the Internet of Things (IoT) gains popularity, organizations face challenges in effectively connecting their devices and sensors to IoT platforms. Integrating devices into platforms like Thingsboard can be time-consuming and complex, particularly for those unfamiliar with IoT technology. This paper presents a novel approach: a customized IoT dashboard for EAPL. The proposed solution utilizes technologies such as ReactJS, ExpressJS, and Postgresql to develop an interactive web application. The dashboard focuses on displaying real-time energy meter data and employs advanced visualization techniques to enhance data analysis and comprehension. By prioritizing user-friendliness and accessibility, our custom dashboard aims to streamline the integration process, empowering IoT organizations to monitor and manage their data in real time. The application provides valuable insights for informed decision-making, leading to improved efficiency, productivity, and market competitiveness. This paper contributes to the growth and advancement of IoT implementations across various industries

Keywords-IoT, Custom Dashboard, Industrial Automation, Electronic Automation, Data visualization, Real-time data monitoring, MQTT


    As more and more organizations adopt the Internet of Things (IoT), they face challenges in connecting their devices and sensors to IoT platforms. This process can be complicated and time-consuming, especially for those who are not familiar with IoT technology. It involves setting up devices to communicate with the IoT platform, ensuring secure communication, and managing the flow of data. Integrating devices from different manufacturers and keeping everything up to date can also be tricky. Unfortunately, these difficulties prevent many organizations from fully benefiting from their IoT investments.

    To tackle these challenges, we propose the development of a customized IoT dashboard specifically designed for streamlined industrial automation. Our goal is to create a user- friendly interface that shows information in a way that suits individual preferences. By using technologies like ReactJS, ExpressJS, and Postgresql, we will build a web application that is interactive and works well on different devices.

    The main focus of our custom dashboard is to display real- time energy meter data. Advanced visualization techniques has been used to make it easy for users to understand and analyze their energy usage patterns. The aim of this paper is to provide IoT organizations with a simple and accessible tool that allows them to monitor and manage their data in real time.

    By using our custom dashboard, organizations will gain valuable insights and make informed decisions about their operations, products, and services. The visualization tool will enhance the user experience and help them understand their device data better. This will ultimately improve efficiency, productivity, and competitiveness for organizations, while contributing to the overall growth of the IoT industry.

    In the following sections implementation of real-time energy meter data visualization. This paper aims to revolutionize the way organizations interact with their IoT data, providing them with valuable insights and driving their success in a connected world.


    In a research paper focused on addressing rural sustainability challenges, an IoT cloud platform utilizing pub/sub technologies is presented [1]. The platform demonstrates exceptional performance by leveraging two distinct pub/sub characteristics: MQTT for efficient processing of small data and Kafka for reliable processing of large data. By implementing this combination, the platform effectively tackles the unique requirements and complexities associated with sustainable development in rural areas.

    In another research paper [2], the authors aimed to create a user-friendly dashboard for efficient environment monitoring. The project focused on providing live data from sensors to the users in real-time. The dashboard allows users to easily access and monitor the data from their sensors, helping them make informed decisions about environmental management.

    In a research paper [3], the authors present a method for creating a role-based visualization system for industrial IoT. They built a prototype IoT dashboard and tested it in a pilot production line to validate its effectiveness. The paper explains how the system works and discusses the results of the validation process, demonstrating the practical application of role-based visualization in industrial IoT settings.

    In a research paper [4], the authors discuss the use of biometric attendance systems in different organizations like schools, offices, and companies. The paper suggests that developing a portable attendance manager device and a shared online platform for attendance management can greatly simplify the process of recording attendance. By adopting these technologies, the report indicates that the challenges of maintaining physical attendance records can be significantly reduced using IoT solutions. The findings highlight the advantages and feasibility of implementing biometric attendance systems in various organizational contexts.

    In a research paper [5], the authors describe the IVIS platform, a web-based tool that processes and displays data from IoT and CPS systems. The platform includes JavaScript- based visualization components and allows users to define complex visualizations and data processing tasks using scripting languages like Python. This makes it easier to create advanced visualizations and handle data in a more flexible way. The paper provides an introduction to the IVIS platform, highlighting its features for processing and visualizing data from IoT and CPS systems.

    In a research paper focused on the challenges posed by the emergence of Industry IoT (IIoT) and Artificial Intelligence of Things (AIoT) [6], the authors address the communication aspect and compare two suitable protocols: Message Queuing Telemetry Transport (MQTT) and Representational State Transfer (REST). The paper explores the implications of IIoT and AIoT on communication and highlights the significance of selecting appropriate protocols for the new generation of IoT devices. The comparison between MQTT and REST protocols provides insights into their suitability and effectiveness in addressing the communication requirements of these advanced IoT systems.


    The methodology employed in the development of the custom IoT dashboard revolves around placing a strong focus on user needs and preferences. The main objective is to create an intuitive and visually appealing application that offers a seamless and enjoyable user experience. The methodology incorporates industry best practices for front-end development, protocol implementation, API development, database management, and data visualization. By following this approach, the custom IoT dashboard ensures the delivery of a robust and user-friendly interface, efficient device communication, seamless integration with database, reliable data storage, and effective data visualization capabilities.

    In the system architecture represented in figure 1, IoT devices establish communication with a WiFi router using the MQTT (Message Queuing Telemetry Transport) protocol. These devices publish their data to th router, which acts as an intermediary for transferring the data to the MQTT broker. The MQTT broker, implemented as a JavaScript service, subscribes to registered devices and facilitates the storage of device data.

    Figure 1: Architecture Diagram

    To store the device data, the JavaScript service leverages a database. The data is stored in the database for further processing and analysis. In the context of frontend development, a web application is created to access and visualize the data stored in the database. This web application utilizes RESTful APIs developed using Express.js, a server framework.

    The RESTful APIs provide a means for the frontend to retrieve the relevant data from the database. Once retrieved, the data is utilized to generate charts and visualizations in the frontend. These charts and visualizations form the basis of the dashboard, which serves as an interface for users to access and interact with the data generated by the IoT devices.

    By following this architecture, the system enables seamless communication between IoT devices and the MQTT broker. The JavaScript service efficiently handles data storage in the database, while the RESTful APIs facilitate data retrieval from the frontend. The web application and dashboard provide users with an intuitive and visually appealing interface to analyze and interpret the IoT data through interactive charts and visualizations


    1. Front-end Development

      The front-end of the custom IoT dashboard is built using React, a popular JavaScript library known for its flexibility and performance. React enables the creation of a responsive and user-friendly interface that adapts to different devices and screen sizes, enhancing the overall user experience.

    2. Communication Protocol

      For efficient device communication, the custom IoT dashboard implements the MQTT (Message Queuing Telemetry Transport) protocol. MQTT is a lightweight messaging protocol designed for small sensors and mobile

      devices. It facilitates seamless data exchange between devices by enabling them to publish and subscribe to topics, making it ideal for low-bandwidth networks.

    3. MQTT Protocol Implementation

      To enable device communication, the custom IoT dashboard leverages Mosquitto, an open-source MQTT broker implementation. Mosquitto acts as a message broker, facilitating the exchange of messages between devices. It is a lightweight and user-friendly solution that can be easily deployed on various platforms such as Linux, Windows, and macOS.

    4. API Development

      The server-side logic of the custom IoT dashboard is developed using ExpressJS, a widely-used javascript server framework. ExpressJS enables the creation of a RESTful API that allows seamless interaction between the dashboard and other systems like database. It provides a simple and efficient approach for handling API requests and responses

    5. Database

      The custom IoT dashboard utilizes PostgreSQL as the underlying database management system. PostgreSQL is a reliable and scalable open-source object-relational database known for its data integrity. It provides a robust foundation for storing and managing the data generated by the dashboard, ensuring efficient data retrieval and storage operations

    6. Data Visualization

    To enhance data analysis and comprehension, the custom IoT dashboard integrates advanced data visualization tools, including Apex Charts. These tools enable the creation of interactive charts, graphs, and visualizations that help users identify trends and patterns in the IoT data. By presenting data in a visually appealing manner, the dashboard enhances user understanding and supports informed decision-making.


    In addition to the core functionalities of our custom IoT dashboard, user authorization plays a vital role in ensuring secure access and protecting sensitive data. User authorization is implemented as a crucial component of the dashboard, providing authentication and access control mechanisms to safeguard the system. By enforcing user authentication and role-based access controls, we aim to ensure that only authorized users can interact with the dashboard, protecting the privacy and integrity of the IoT data.

    One of the fundamental components of our custom IoT dashboard is the authentication system. This system serves as the bedrock of secure access, ensuring that only authorized individuals can interact with the dashboard. By implementing a robust authentication mechanism, we strive to protect sensitive data and maintain the integrity of the system.

    The authentication process begins with users accessing the login page of the application. Here, they are prompted to enter their unique username and password, which serve as their

    credentials. Once submitted, the application initiates a thorough validation process to verify the correctness of these credentials.

    During the validation phase, the application compares the provided username and password against stored user records. This verification step is essential in preventing unauthorized access and protecting against potential security breaches. If the credentials are found to be valid, the application proceeds to generate a special access token called a JSON Web Token (JWT).

    The JWT serves as a digital credential that authenticates the user for subsequent interactions within the IoT dashboard. This token contains encrypted information, such as the user's identity and permissions, ensuring secure transmission and storage. By utilizing JWTs, we enhance security by eliminating the need to store sensitive user information on the client-side.

    By implementing this robust authentication system, our custom IoT dashboard promotes secure access control. Only users with valid and verified credentials can proceed beyond the login page, safeguarding sensitive data and ensuring the integrity of the system. This authentication mechanism is a vital component of our dashboard, providing a solid foundation for reliable and protected user interactions in the IoT environment.

    The role-based portal feature provides users with personalized access and features based on their designated roles. This functionality ensures that individuals are granted appropriate permissions and tools relevant to their specific responsibilities within the system. The first step in the role- based portal implementation involves checking the access token, which is a JSON Web Token (JWT) generated during the authentication process. This token contains crucial information about the user's authorization and privileges. By examining the access token, the application can determine the role assigned to the user.

    The dashboard encompasses separate portals designed specifically for admins, tenants, and customers. Each portal caters to the distinct needs and requirements of users based on their roles. The segregation of portals allows for a targeted and tailored user experience, enhancing usability and efficiency.

    Upon examining the access token and identifying the user's role, the application seamlessly redirects the user to the appropriate portal. This redirection process ensures that users are directed to the portal that aligns with their assigned role. By directing users to the correct portal, we guarantee that they gain access to the specific tools, functionalities, and data relevant to their role. The role-based portal feature enhances the overall user experience by streamlining access to relevant information and functionality. Administrators can access administrative tools and settings, tenants can manage their respective IoT devices and configurations, while customers can view their personalized data and perform specific actions based on their requirements.

    By tailoring the portal experience to each user's role, our custom IoT dashboard optimizes productivity and ensures that individuals have the necessary access and tools to fulfill their

    responsibilities within the system. The role-based portal functionality serves as a critical element in providing a customized and efficient user experience within the IoT ecosystem.


    The admin portal in the custom IoT dashboard provides administrators with exclusive access to all devices in the system, enabling comprehensive device management capabilities. Administrators can add new devices to the system by specifying details such as device name, type, and ID, facilitating seamless device integration. Additionally, administrators have the authority to add tenants to the system by entering tenant information like name and ID, enabling efficient management of tenant entities within the dashboard.

    The admin portal allows administrators to assign devices to specific tenants through a simple selection process from a curated list, streamlining device organization and allocation. Administrators can also review device reports, providing crucial insights into device usage and performance, aiding in system optimization.

    Furthermore, administrators can manage sensors by adding different types of sensors to the system, ensuring compatibility with various sensor technologies and expanding the capabilities of the IoT dashboard. The admin portal offers visualization tools such as bar graphs, line graphs, and area graphs, enabling effective visualization of device data for enhanced analysis and presentation.

    The tenant portal within the custom IoT dashboard grants tenants access to devices assigned to them by the admin. Tenants can interact with their specific set of devices, ensuring a focused and streamlined user experience. Tenants also have the capability to add customers to the system, providing customer details such as name and ID, facilitating effective customer management within the dashboard.

    Within the tenant portal, tenants can assign devices to their customers by selecting the customer and device from a list, streamlining device allocation and ensuring efficient device management. Additionally, the tenant portal allows tenants to check device reports, providing insights into device usage and performance for effective monitoring and optimization.

    Similar to the admin portal, the tenant portal offers graphical tools such as bar graphs, line graphs, and area graphs. These visualization tools enable tenants to effectively comprehend and analyze their assigned device data, supporting informed decision-making and efficient device management.

    The customer portal, designed for the customer role in the custom IoT dashboard, provides customers with access to devices assigned to them by the tenant. Customers can easily view the data generated by their assigned devices, presented in visually interpretable graphs. This accessibility enables customers to gain insights into their device data, facilitating

    informed decision-making and maximizing the value of their IoT devices.

    Within the customer portal, various graphical tools such as bar graphs, line graphs, and area graphs are available. These tools enhance the visualization of device data, simplifying interpretation and enabling customers to derive valuable insights for device performance and usage.

    The customer portal ensures that customers have a user- friendly and efficient interface to access and interact with their assigned devices, empowering them to leverage the full potential of their IoT devices within the custom IoT dashboard ecosystem.


    In the upcoming section, we will discuss how custom dashboard was built. By breaking down the steps involved, we aim to provide a clear understanding of how the custom dashboard was developed.

    Figure 2: Login

    Figure 2 illustrates a login page design with a user-friendly layout, featuring essential elements for seamless authentication.

    Figure 5: Displaying Devices

    Figure 5 showcases the display of registered devices, presenting a visual representation of the system's ability to efficiently and accurately show a list of devices that have been successfully registered.

    Figure 6: Adding Devices

    Figure 6 illustrates the process of adding a device to the system, providing a visual representation of the steps involved in seamlessly integrating new devices into the system.

    simultaneously during the sensor addition process, providing flexibility and efficiency in system management


    The custom dashboard empowers users with real-time monitoring and management capabilities for their IoT telemetry devices. This includes streamlined device registration, flexible device filtering, efficient device allocation to clients, and comprehensive device data reporting. The custom dashboard prioritizes user-friendliness by offering configurable and customizable features, enabling users to personalize their experience according to their unique requirements. The developed custom dashboard is specifically designed for seamless interaction with energy meters utilized in DG panels, HT/LT panels, distribution panels, and other related applications. By facilitating straightforward device registration and providing visually appealing charts for sensory data monitoring, the custom dashboard effectively addresses the complexities associated with integrating IoT solutions into business operations.


Figure 9: Displaying Customers

Figure 9 shows the display of registered customers, accessible only to administrators. It represents the page where admins can view and manage the list of registered customers in the system.

Figure 10: Adding Sensors

Figure 10 illustrates the "Add Sensors" page, exclusively accessible to administrators for adding sensors into the system. The figure demonstrates the capability to select multiple sensor types

[1] Bhagyashree Dhake, Rahul Mane, Pratik Ghadge, Gaurav Deshmukh, IoT Device Dashboard, IJARIIE-ISSN(O)-2395-4396, Vol-7 Issue-3 2021

[2] Jaekyung Nam, Youngpyo Jun, Min Choi, High Performance IoT Cloud Computing Framework Using Pub/Sub Techniques, Appl. Sci. 2022, 12, 11009.

[3] Mehdi Mahmoodpour, Andrei Lobov, Minna Lanz, Petteri Makela, Niko Rundas, Role-based visualization of industrial IoT-based systems,

Appl. Sci. 2022, 12, 11009.

[4] Lavina Chugh, Nikita Thakur, Vishal Tejwani, IoT based Attendance Management System with Custom Dashboard, International Research Journal of Engineering and Technology (IRJET),Volume: 08 Issue: 10,

Oct 2021, e-ISSN:2395-0056, p-ISSN:2395-0072

[5] Lubomír Bulej, Tomá Bure, Petr Hntynka, Václav amra, Petr Siegl, Michal Töpfer, IVIS: Highly customizable framework for visualization and processing of IoT data, 2020 46th Euromicro Conference on Software Engineering and Advanced Applications (SEAA)

[6] Eduard Nemlaha, Peter Stelec, Tibor Horák, Szabolcs Ková, and Pavol Tanuka, Suitability of MQTT and REST Communication Protocols for AIoT or IIoT Devices Based on ESP32 S3, Springer Nature Switzerland, R. Silhavy et al. (Eds.): CoMeSySo 2022, LNNS 596, pp. 225233, 2023

[7] Madakam, S., Ramaswamy, R. and Tripathi, S. (2015) Internet of Things (IoT): A Literature Review.Journal of Computer and Communications, 3, 164-173.

[8] Joern, Ploennigs., John, M., Cohn., Andy, J, Stanford-Clark. (2018). The Future of IoT. 1(1):28-33. doi: 10.1109/IOTM.2018.1700021

[9] Sreeja, Rajesh., Varghese, Paul., Varun, G., Menon., Mohammad, Reza, Khosravi. (2019). A Secure and Efficient Lightweight Symmetric Encryption Scheme for Transfer of Text Files between Embedded IoT Devices. Symmetry, 11(2), 293-. Available from: 10.3390/SYM11020293

[10] Jimmy, Fjällid. (2019). A Comparative Study of Databases for Storing Sensor Data.

[11] Galip, Aydin., Ibrahim, Riza, Hallac., Betul, Ay, Karakus. (2015). Architecture and Implemenation of a Scalable Sensor Data Storage and Analysis System Using Cloud Computing and Big Data Technologies.

Journal of Sensors, 2015(2015):1-11. doi: 10.1155/2015/834217

[12] Bhagyashree Dhake, Rahul Mane, Pratik Ghadge, Prof. Gaurav Deshmukh,Terna Engineering College, Computer Engineering Department. (2021). IoT Device Dashboard. Vol-7 Issue-3 2021, IJARIIE-ISSN(O)-2395-4396

[13] Inès, Dabbebi., Jean-Marie, Gilliot., Sébastien, Iksal. (2019). User Centered Approach for Learning analytics Dashboard Generation. 2(1):260-267. doi: 10.5220/0007693102600267

[14] Nakhuva, Bhumi & Champaneria, Tushar. (2015). Study of Various Internet of Things Platforms. International Journal of Computer Science

& Engineering Survey. 6. 61-74. 10.5121/ijcses.2015.6605.

[15] devices/#

[16] Hassan, Zozo & Ali, Hesham & Badawy, Mahmoud. (2015). Internet of Things (IoT): Definitions, Challenges, and Recent Research Directions. International Journal of Computer Applications. 128. 975-8887.

[17] Abdul-Qawy, Antar & Magesh, E & Tadisetty, Srinivasulu. (2015). The Internet of Things (IoT): An Overview. 5. 71-82.

[18] In Lee, Kyoochun Lee,The Internet of Things (IoT): Applications, investments, and challenges for enterprises, Business Horizons,Volume 58, Issue 4,2015

[19] Hittu Garg, Mayank Dave, Securing IoT Devices and Securely Connecting the Dots Using REST API and Middleware, 978-1-7281- 1253-4/19/$31.00 © 2019 IEEE

[20] Fathan Abdul Shodiq, Rizka Reza Pahlevi, Parman Sukarno, Secure MQTT Authentication and Message Exchange Methods for IoT Constrained Device, 2021 International Conference on Intelligent Cybernetics Technology & Applications (ICICyTA)

[21] Tejveer Anand, Sourabh Upare, Siddhant Jain et. al., Deployment of Real-Time Energy Monitoring System Using IoT, 2022 3rd International Conference for Emerging Technology (INCET) Belgaum,

India. May 27-29, 2022

[22] Muhammad Zulhamizan Ahmad, Alisa Rafiqah Adenan, Mohd Saufy Rohmad, Performance Analysis of Secure MQTT Communication Protocol, 2023 19th IEEE International Colloquium on Signal Processing & Its Applications (CSPA), 3-4 March 2023, Langkawi, Kedah, Malaysia