User Interface Design Archives | DMC, Inc. https://www.dmcinfo.com/our-work/category/service/application-development/user-interface-design/ Fri, 05 Sep 2025 17:27:37 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://cdn.dmcinfo.com/wp-content/uploads/2025/04/17193803/site-icon-150x150.png User Interface Design Archives | DMC, Inc. https://www.dmcinfo.com/our-work/category/service/application-development/user-interface-design/ 32 32 Distributed Safety System for Pilot Plant https://www.dmcinfo.com/our-work/distributed-safety-system-for-pilot-plant/ Mon, 07 Apr 2025 00:00:00 +0000 https://www.dmcinfo.com/our-work/distributed-safety-system-for-pilot-plant/ DMC was hired as part of a multi-company team that designed a standalone air-gapped network to host all the automated equipment for the client’s facility. Our engineers created a control architecture with a standard hardware set. We utilized a standard library of process objects for PLC software and HMI controls. To allow operators to safely de-energize any piece […]

The post Distributed Safety System for Pilot Plant appeared first on DMC, Inc..

]]>
DMC was hired as part of a multi-company team that designed a standalone air-gapped network to host all the automated equipment for the client’s facility.

Our engineers created a control architecture with a standard hardware set. We utilized a standard library of process objects for PLC software and HMI controls. To allow operators to safely de-energize any piece of equipment from any of 11 remote control stations, DMC also designed a network of safety PLCs and other SIL 3 components.

Our team designed 30+ control panels to meet the UL508A standard. To meet hazardous location requirements, we utilized a combination of explosion-proof and intrinsically safe components. Collectively, we focused on the complete software development lifecycle, from requirements gathering to detailed design and programming, as well as the development and execution of test plans.

Finally, we coordinated with the construction team for power and telecommunication infrastructure.

Learn more about DMC’s PLC Programming Expertise and contact us for your next project.

The post Distributed Safety System for Pilot Plant appeared first on DMC, Inc..

]]>
Location Monitoring Using React and .NET https://www.dmcinfo.com/our-work/location-monitoring-using-react-and-net/ Thu, 27 Mar 2025 00:00:00 +0000 https://www.dmcinfo.com/our-work/location-monitoring-using-react-and-net/ DMC engineers worked with a client in the energy industry to develop a tool capable of monitoring and controlling solar panel sites and wind farms across the globe. The team began with UI design. The client requested a variety of pages, which DMC engineers created using React TypeScript and Material UI. Back-end programming was completed […]

The post Location Monitoring Using React and .NET appeared first on DMC, Inc..

]]>
DMC engineers worked with a client in the energy industry to develop a tool capable of monitoring and controlling solar panel sites and wind farms across the globe.

The team began with UI design. The client requested a variety of pages, which DMC engineers created using React TypeScript and Material UI. Back-end programming was completed using C#, Microsoft Azure, and .NET Core. The resulting solution consolidated previous processes and streamlined the monitoring process. Staff watching the app to monitor alerts now have a cleaner interface, faster reporting, and more control over machines.

Comet tool interface

 

 

 

Comet tool interface scheduled stop

 

 

 

 

The post Location Monitoring Using React and .NET appeared first on DMC, Inc..

]]>
Automated Label Application with Beckhoff TwinCAT3 https://www.dmcinfo.com/our-work/automated-label-application-with-beckhoff-twincat3/ Tue, 28 Mar 2023 00:00:00 +0000 https://www.dmcinfo.com/our-work/automated-label-application-with-beckhoff-twincat3/ For this solution, DMC recommended Beckhoff hardware. Engineers began the process by specifying the system settings on the recipe management system. Next, they developed source code for the PLC and HMI technologies. DMC’s UX/UI team then designed mockups and official screens for the interface to match the client’s style guides. Lastly, engineers commissioned the system […]

The post Automated Label Application with Beckhoff TwinCAT3 appeared first on DMC, Inc..

]]>
For this solution, DMC recommended Beckhoff hardware. Engineers began the process by specifying the system settings on the recipe management system. Next, they developed source code for the PLC and HMI technologies. DMC’s UX/UI team then designed mockups and official screens for the interface to match the client’s style guides. Lastly, engineers commissioned the system at the manufacturer facility and provided remote support upon completion.

Using the TwinCAT 3 HMI Recipe Manager, the solution was configurable to a variety of printing applications and production lines. It supported modes for high-speed and low-speed application and allowed operators to easily configure and support a variety of product geometries. Additionally, it allowed for the application of labels without stopping conveyor motion.

DMC provided software for several identical programs. The client sent DMC engineers the necessary hardware. DMC engineers then loaded the software and shipped the hardware directly to the end customer with no commissioning required.

A User IInterface Designed by DMC
A User interface designed by DMC

DMC engineers have created a blog series detailing this process.

Learn more about DMC’s TwinCAT3 programming experience and contact us for your next project.

The post Automated Label Application with Beckhoff TwinCAT3 appeared first on DMC, Inc..

]]>
Location Monitoring Using React and .NET Core https://www.dmcinfo.com/our-work/location-monitoring-using-react-and-net-core/ Tue, 23 Aug 2022 00:00:00 +0000 https://www.dmcinfo.com/our-work/location-monitoring-using-react-and-net-core/ DMC engineers worked with RES to develop a tool capable of monitoring solar sites and wind farms across the globe. The team began with UI design. DMC used React TypeScript and Material UI to create a variety of pages for viewing and interacting with events and live data from RES’ sites. We completed back-end programming […]

The post Location Monitoring Using React and .NET Core appeared first on DMC, Inc..

]]>
DMC engineers worked with RES to develop a tool capable of monitoring solar sites and wind farms across the globe.

The team began with UI design. DMC used React TypeScript and Material UI to create a variety of pages for viewing and interacting with events and live data from RES’ sites. We completed back-end programming using C#, Microsoft Azure, and .Net Core. The resulting solution consolidated previous processes and streamlined the monitoring process. Staff who use the app to monitor alerts now have a cleaner interface and faster reporting.

Edit Alert condition window

List of events in React library
Full list of events in React library

Full page of react and .net Core location monitoring interface
Live Status display in react interface
Add Stop window in react interface
scheduled stops
Settings window in react interface

Learn more about DMC’s Application Development expertise. 

The post Location Monitoring Using React and .NET Core appeared first on DMC, Inc..

]]>
Smart Energy AMP Solution https://www.dmcinfo.com/our-work/smart-energy-amp-solution/ Tue, 03 May 2022 00:00:00 +0000 https://www.dmcinfo.com/our-work/smart-energy-amp-solution/ DMC assisted a client in the energy industry with the architecture and implementation of a web-based solution for managing globally distributed energy storage assets. The client required a system capable of continuously collecting data over Modbus TCP from various OEM equipment and storing the data in a uniform way to support retrieval for both live […]

The post Smart Energy AMP Solution appeared first on DMC, Inc..

]]>
DMC assisted a client in the energy industry with the architecture and implementation of a web-based solution for managing globally distributed energy storage assets. The client required a system capable of continuously collecting data over Modbus TCP from various OEM equipment and storing the data in a uniform way to support retrieval for both live trending and bulk historical data query. Additionally, they needed a web-based interface that both the team and their clients could use to view asset activity and send asset commands.

DMC first collaborated with the client to understand their networking and user interface requirements. From there, DMC engineers architected the cloud-based solution and DMC’s UI/UX team developed front-end mockups. This initial specification phase established a solid solution roadmap for DMC to follow, and the resulting system allowed clients to manage energy assets, send commands, view live data at customizable intervals, and request historical data exports. The system has been live since 2018 and is used for monitoring and performing data analytics to improve energy management and load balancing.

The post Smart Energy AMP Solution appeared first on DMC, Inc..

]]>
AWS Cloud Hosted Battery Management System https://www.dmcinfo.com/our-work/aws-cloud-hosted-battery-management-system/ Tue, 18 Aug 2020 00:00:00 +0000 https://www.dmcinfo.com/our-work/aws-cloud-hosted-battery-management-system/ BHS is a leading total solution provider of move power and material handling solutions. They approached DMC requesting a custom web application to optimize their battery management system. BHS had a battery management system that was bar code driven, which was originally on a local portable PC. The system was not connected to the internet […]

The post AWS Cloud Hosted Battery Management System appeared first on DMC, Inc..

]]>
BHS is a leading total solution provider of move power and material handling solutions. They approached DMC requesting a custom web application to optimize their battery management system.

BHS had a battery management system that was bar code driven, which was originally on a local portable PC. The system was not connected to the internet which meant that the client was unable to retrieve any of the operating statistics from each end-client. Instead of having an instance of the application on a local PC, DMC created an AWS hosted web application that would allow BHS to provision any device to connect to the application.

Web Application Development

The backend of the application was written using ASP.NET, while the UI was written with HMTL, CSS, and React. The application stores all the information in a PostgreSQL database, and the entire application was containerized using Docker.

aws cloud hosted web app for bhs

Before starting development, DMC created a simulation to assist in identifying and solving edge cases that the previous system could not handle. This provided our team with a full understanding of how BHS’s existing system worked. The simulation proved to be cost-effective, as many issues were debugged before the commissioning stage of the project. 

Application and UI Improvements

With the previous application, an operator would navigate through multiple screens to find and input the proper information. DMC reorganized BHS’s operator portal to streamline the UI. Pairing this reorganization with a sleek interface design made the application more efficient and user friendly.

aws cloud hosted web app for bhs

With the application now being hosted on AWS instead of on a non-network connected computer, DMC was able to create a new web user portal that allowed managers to view and modify any of the assets within their facility. In addition, the application has a dashboard that allows managers to get critical real-time statistics that offer insight into their facility. This statistical information was critical of BHS’s sale to end customers.

aws cloud hosted web app for bhs

DMC was chosen for this project because of our expertise with IIoT, battery management systems, and application development. Contact our experts with project inquiries. 

The post AWS Cloud Hosted Battery Management System appeared first on DMC, Inc..

]]>
LED Therapy Medical Device https://www.dmcinfo.com/our-work/led-therapy-medical-device/ Tue, 31 Mar 2020 00:00:00 +0000 https://www.dmcinfo.com/our-work/led-therapy-medical-device/ DMC developed a high-power LED therapy device from the ground up meant to treat a variety of medical conditions. We worked closely with the client to adhere to device requirements and developed the electronics and firmware based on a detailed design specification document designed by DMC. DMC customized the divers for the custom-designed pads to […]

The post LED Therapy Medical Device appeared first on DMC, Inc..

]]>
DMC developed a high-power LED therapy device from the ground up meant to treat a variety of medical conditions. We worked closely with the client to adhere to device requirements and developed the electronics and firmware based on a detailed design specification document designed by DMC.

DMC customized the divers for the custom-designed pads to drive the LED at high frequencies without dissipating extra heat. The pads can support multiple wavelengths and there are ten pads available configured with different wavelength combinations. Different colors of light, at varying intensities, are sent from the pads to the targeted area.

The pads require precisely regulated current to be applied to each LED group/channel that is modulated with high-frequency pulses. To allow a user to schedule the supplied pulse lengths and frequencies, DMC integrated a 7-inch touch screen with an emWin powered graphical interface into the design.

The portable high-powered device is equipped with two batteries that are attached and can be recharged for a full day of use. The device includes a USB port with the ability to transfer therapeutic recipes with light configurations by way of a thumb drive.

Read more about DMC’s Embedded Development and Programming and Contact Us for any project inquiries.

The post LED Therapy Medical Device appeared first on DMC, Inc..

]]>
IIoT Interface for Agricultural Irrigation Injection System https://www.dmcinfo.com/our-work/iiot-interface-for-agricultural-irrigation-injection-system/ Sun, 01 Dec 2019 00:00:00 +0000 https://www.dmcinfo.com/our-work/iiot-interface-for-agricultural-irrigation-injection-system/ DMC created an MQTT driver that bi-directionally connected the PLC to a cloud based broker. MQTT is the industry standard for most IIoT applications and works on a simple TCP connection. For security and connection robustness the connection from the PLC to the cloud was established within an OpenVPN. The MQTT driver sends and receives data between […]

The post IIoT Interface for Agricultural Irrigation Injection System appeared first on DMC, Inc..

]]>
DMC created an MQTT driver that bi-directionally connected the PLC to a cloud based broker. MQTT is the industry standard for most IIoT applications and works on a simple TCP connection. For security and connection robustness the connection from the PLC to the cloud was established within an OpenVPN. The MQTT driver sends and receives data between the PLC and our application on Azure and gives the framework for controlling the system in the field. The broker in the cloud receives the data from the plcs and directs the data to the correct application, and also receives commands from the website and transmits the information down to the PLC.

We then made a protocol gateway that communicated the relevant information from the MQTT service to the correct location in the cloud through an Azure IoT Hub. The MQTT messages were received in the cloud by the broker service, which parsed the data through the gateway for storage in to our SQL cloud database. The gateway is also capable of receiving commands from the website via the API and passing the commands to the PLC.

Finally, DMC built a custom REACT webpage with all the same functionality as the system’s HMI screen on site, as well as a few additional features. The webpage provides a complete user experience with all controls and functionality for the PLC. The website includes access to user administration, additional units of measurement, and the ability to see historical data including flow rates, pressures, alarm logs, setpoints, and usage. The webpage interacts with the API to send and receive data from the cloud database.

DMC also created a mobile version of the application.

Mobile friendly application
 
Mobile application

Additional Information

DMC trained the client on emerging technologies that are available and guided them toward a more high-tech yet cost effective solution. Additionally, we trained the client on using the custom REACT website we built, the capabilities of the technologies used, and on debugging and troubleshooting.

The customer was also working with multiple other vendors and clients, and DMC navigated communication challenges to manage and complete the project. Finally, we accommodated scope changes and completed additional programming to add features relevant to the client.

Learn more about DMC’s PLC Programming Services and Application Development expertise. 

The post IIoT Interface for Agricultural Irrigation Injection System appeared first on DMC, Inc..

]]>
Package Delivery Kiosk System https://www.dmcinfo.com/our-work/package-delivery-kiosk-system/ Mon, 28 Oct 2019 00:00:00 +0000 https://www.dmcinfo.com/our-work/package-delivery-kiosk-system/ Kiosk Controller Software The Kiosk Controller Software provides a touch screen user interface for interaction with the kiosk. Different on-screen workflows are initiated based on the type of user logging in. Additionally, transaction flows are supported, which rely on single-use codes instead of user accounts. The software sends and receives data over a WebSocket using […]

The post Package Delivery Kiosk System appeared first on DMC, Inc..

]]>
Kiosk Controller Software

The Kiosk Controller Software provides a touch screen user interface for interaction with the kiosk. Different on-screen workflows are initiated based on the type of user logging in. Additionally, transaction flows are supported, which rely on single-use codes instead of user accounts.

The software sends and receives data over a WebSocket using MQTT. Data is also persisted locally in an SQLite database allowing for offline functionality.

Furthermore, the software manages multiple hardware devices, including a camera for security, a barcode scanner for easy login capability, and locker modules for storing packages.

select locker

Administrative Portal

DMC developed a front-end portal for managing clients and kiosks. The portal makes it simple to assign newly created kiosks to clients, manage user access for both the portal and kiosks and provision API Keys and webhooks to allow clients to integrate with the system programmatically. It also provides the ability to group sets of users and kiosks for easy bulk-management and to view a combined dashboard summarizing kiosk activity.

administrative portal

Locker Controller Firmware

DMC developed the firmware for custom PCBs designed to control the locker modules. The firmware communicates with the kiosk controller software using the Modbus protocol over TCP and allows it to command lockers to open on demand. The status of each door is also reported back as doors are physically opened and closed.

Learn more about DMC’s Application Development and Embedded Development solutions.

The post Package Delivery Kiosk System appeared first on DMC, Inc..

]]>
Data Collection Through IoT Using Siemens, MQTT, AWS, and REACT https://www.dmcinfo.com/our-work/data-collection-through-iot-using-siemens-mqtt-aws-and-react/ Tue, 13 Aug 2019 00:00:00 +0000 https://www.dmcinfo.com/our-work/data-collection-through-iot-using-siemens-mqtt-aws-and-react/ DMC utilized our MQTT driver to connect the customer’s PLC to a broker running on the AWS server. The driver sends and receives data directly between the PLC and AWS servers, giving the framework for monitoring and control of systems in the field. We then developed a broker and API that communicated the relevant information […]

The post Data Collection Through IoT Using Siemens, MQTT, AWS, and REACT appeared first on DMC, Inc..

]]>
DMC utilized our MQTT driver to connect the customer’s PLC to a broker running on the AWS server. The driver sends and receives data directly between the PLC and AWS servers, giving the framework for monitoring and control of systems in the field.

data collection

We then developed a broker and API that communicated the relevant information from the MQTT driver to the correct location in the cloud database. The MQTT messages were received in the cloud by the broker service, which parsed data and sent it on to the API. The API connected with our SQL cloud database to communicate information in and out of the database. 

red arrow manufacturing customers dashboard

DMC built a custom REACT website to display the data and add vehicles and drivers, as well as control the wash system. End-users can see tables that contain wash event data, vehicles, users, and drivers. Red Arrow can also use the website to manage the end-users, wash systems, and view global data. All data can be added and edited in the tables, except for the wash event data. Users can also edit their personal data.

red arrow manufacturing drivers

DMC is continuing to work with Red Arrow to add additional functionality for end-user convenience and increased overall productivity and automation, including RFID scanning and more advanced control. Red Arrow continues to come back to DMC for work due to the complexity and success of the system. The upcoming wash system control page allows the user to enable and disable the wash system, schedule times when the wash can be on, and provide feedback of tank levels, connectivity status, and connection information.

Contact DMC for more information regarding our PLC Programming services or Web Application Development expertise.

 

The post Data Collection Through IoT Using Siemens, MQTT, AWS, and REACT appeared first on DMC, Inc..

]]>