3D Warehouse Monitor

Introduction

In today’s dynamic environment, the challenges in warehouse management are constantly shifting. To remain at the forefront, innovative solutions backed by modern technologies are essential. This piece highlights the advantages of employing a 3D Warehouse Monitor in tandem with SAP S/4HANA Cloud Warehouse Management. If Cloud WM is new to you, consider it similar to S/4HANA Extended Warehouse Management, as detailed here: “https://blogs.sap.com/2022/09/09/sap-extended-warehouse-management-for-sap-s-4hana-cloud-private-edition-functional-comparison-and-deployment-options/“

The Prototype

I delved into the fundamental principles of Data Visualization and 3D Interaction to develop a practical 3D Warehouse Monitor, effectively bridging the chasm between raw warehouse data and physical warehouse operations. This innovation empowers users to immerse themselves in data, offering interactive options for various perspectives. Users can seamlessly shift their focus between different views to focus on a single viewpoint or to compare the different views to seek potential for optimization. This virtual warehouse representation not only enhances the spatial awareness of Warehouse Managers but also introduces a pioneering approach to warehouse management, seamlessly connecting raw warehouse data with real-world warehouse operations. All bins visualized in the prototype correspond directly to the actual bin master data within the SAP WM System. As a result, the prototype seamlessly incorporates information about the dimensions and positioning of each bin in the X, Y, and Z coordinates, merging this data with the contents of each bin to create a comprehensive visualization. Now, let’s dive into the 3D Monitor.

The Technology behind:

Even on standard business notebooks, the prototype enables smooth rendering without the need for a dedicated GPU. Furthermore, this prototype runs all inside the browser without the need to install additional plugins. Which leads me to explaining the technology of the warehouse monitor.

software architecture

The architecture follows a three-tier structure, separating the system into a presentation, application, and data tier. This will allow flexibility for future enhancements if the requirements change to improve the user experience. The selection of technologies is informed by the expertise of the Platform & Integration Labs department, guaranteeing a smooth transition from prototype to product. It highlights SAP’s capabilities and demonstrates how third-party frameworks enhance them. On the backend, Node.js facilitates communication between SAP WM and the Redis Database, serving as integral components of the project. In detail, the bin Master data is fetched from the Warehouse Management Cloud API and carefully filtered to provide only the information needed for the frontend. Therefore, the following documentation was used: https://api.sap.com/api/WAREHOUSESTORAGEBIN_0001/overview. With JavaScript on the NodeJS Server, the used then URI looked like this :Keep in mind to the replace the baseURL with your own SAP system address and please obscure the user and password for your SAP system access via a dot.env file.

Edit Storage Bins SAP WM

The data fetched from the API are based on the storage bin Master Data as shown in the screenshot above. This includes bin position, dimensions, maximum weight and maximum volume data for each bin. Subsequently, this data is stored in the Redis database. Redis was chosen for its ability to efficiently handle substantial volumes of WM data, making it an ideal choice to address the demands posed by the ever-expanding and increasingly complex data warehouses that SAP’s customers are encountering.

Bin from WM now in the 3D Monitor

For frontend development, React-Three-Fiber is the chosen library, enabling the creation of realistic 3D data visuals. It operates within a web browser environment, eliminating the need for additional plugins. Built on the foundation of three.js, React-Three-Fiber serves as a wrapper that offers standard development workflows familiar to React developers. This means that 3D objects can be seamlessly integrated with logical code, reused as JSX components, or manipulated using React’s state management, facilitating real-time visual changes. In addition, a 2D layer is integrated using HTML and CSS to provide a unified user interaction point, simplifying the selection of different views, as demonstrated in the demo. Handling React’s state management hooks makes it possible to initiate UI changes in the 3D environment when users engage with 2D elements, and vice versa. This foundational feature emphasizes data visualization and interaction, allowing users to pinpoint relevant information as needed. As illustrated in the above image, the previously mentioned master data is represented as a bin in aisle 001, stack 06, and level 03. The position, derived from backend data, is also presented as x, y, and z coordinates in the 2D layout on the left.

It’s noteworthy that the deployment of these components, whether on the frontend or backend, is executed with meticulous care on SAP’s Kyma and Business Technology Platform as container images. This strategic decision underscores the robustness and capabilities of these platforms, exemplifying their instrumental role in delivering state-of-the-art solutions. Kyma also handles to replace your dot.env files with so called “secrets” to manage the access into the SAP system with care.

Summary and Outlook

In our exploration, we’ve uncovered the transformative potential of a 3D Warehouse Monitor seamlessly integrated with SAP S/4HANA Cloud Warehouse Management. This journey has unveiled its profound impact on spatial awareness and operational efficiency, fundamentally revolutionizing the warehouse management landscape. We’ve harnessed cutting-edge technology, leveraging the synergy between SAP’s capabilities and third-party frameworks, to architect this innovative solution. Yet, our vision extends far beyond the horizon. Redis, with its low-latency capabilities, opens the door to real-time enhancements, such as tracking bin movements and individual item transfers within the warehouse. This real-time functionality could be implemented using the “SAP Event Mesh” technology, enabling dynamic visualization of critical warehouse tasks like inbound and outbound deliveries.

Looking forward, the 3D Warehouse Monitor could not only empower businesses to navigate the evolving warehouse landscape but also allows the transformations to be anticipated in real-time. Furthermore, the integration of AI-enhanced visuals, such as AMD’s FSR3 technology, could potentially enhance the performance of our solution making it possible to visualize much more bin with more complex data warehouse and additional views, specified on certain business needs.

References

Storage bin Master Data:
https://help.sap.com/docs/SAP_S4HANA_ON-PREMISE/b2dee5e83e2446149294f9860a7c08f0/fa8abd534f22b44ce10000000a174cb4.html

Storage Bin API:
https://api.sap.com/api/WAREHOUSESTORAGEBIN_0001/overview

React-Three-Fiber:
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

For Vite users:
https://vitejs.dev/guide/static-deploy.html

Overview of Docker usages:
https://www.youtube.com/watch?v=gAkwW2tuIqE