Architecture for applications built using the 3D Measure Up OEM Widget

December 22, 2020

3dmup

Tutorial Blogs

0

Architectural View of 3D Measure Up-OEM Integration

The suggested client architecture is similar to Micro Frontend Architecture. It can be assembled using UI components built using Angular/React/Vue or even simple jquery. The presentation layer will be implemented using HTML 5 and Bootstrap CSS.

The 3D Measure Up widget will be embedded in the OEM Application Frontend. The 3D Measure Up Visualizer will communicate with the 3D Measure Up Cloud service to retrieve measurements and landmarks of the human body. The interaction between the OEM Application UI components and 3D Measure Up Visualizer will be via client API calls and events. 

The above diagram illustrates the different components or subsystems of the application client.

  • An OEM HTML5 based application addressing a use case like Tailoring or Fitness tracking. This application contains the OEM Application components and the 3D Measure Up OEM Widget. 
  • The OEM Application components are suggested here to represent a typical use case. These illustrate the functions that may be required to enable the functionality in the application. These present the measurements and landmarks in the context of the use case. For example, if it is an application for Tailors it shows only the measurements relevant to the tailoring. For a fitness tracking application, it may store the information of the previous measurements in a database and show the differences in a table.
  • The 3D Measure Up OEM widget contains the controls and UI elements to load, measure, and render the model with measurements. It provides access to the measurements and UI using APIs and callback functions.
  • This is the Graphic UI of the Widget. The 3D Model is rendered along with the measurements and controls to manipulate measurements. The user can use the mouse to interact with the elements of the view.
  • The 3D Measure Up widget can be initialized using configurations to control the look and feel of the UI. The configuration also enables limiting or hiding certain features that are not relevant to the user. The configuration is passed to the application at initialization in a JSON form. It can also be accessed and modified using the set and get methods exposed by the widget.
  • The developer can register callback functions to process different events that occur in the widget. For example, the developer can pass a callback function to get a notification when the measurements are automatically generated.
  • The 3D Measure Up widget also exposes API to set and get measurements. The application can retrieve automatically detected measurements along with measurements that are generated using custom landmarks of the human body .
  • The 3D Measure Up widget exposes API to manipulate the widget’s view elements such as the zoom, show hide controls, show hide measurements, or refresh the view.
  • The OEM Application retrieves the measurements from the 3D Measure Up widget and builds a component to display the relevant metrics in a tabular form or a grid form whichever is suits the usability.
  • The measurement and landmark controller components are part of the OEM application. It allows the application to extend or override the metrics generated by 3D Measure Up. The OEM application can maintain proprietary algorithms for custom measurement ie. measurement whose definition is the intellectual property of the OEM business.
  • The OEM Application may choose to represent the view manipulation controls differently than as defined in the 3D Measure Up widget. The controls can be displayed in HTML components and rendered anywhere on the page (even above the 3D Measure Up widget UI). The controls interact with the functionality of the widget using API. 
  • These are controls similar to those in the above, except they may more gross functions like load model, clear the scene, etc.

The communication between the OEM application and the 3D Measure Up service is handled by the 3D Measure Up widget. The OEM application handles communication with its backend. This keeps the two systems loosely coupled and allows independent evolution of the subsystems.

The 3D Measure Up OEM makes it easy to develop applications for Tailoring workflows, Fitness Monitoring, Size Recommendations Widgets even Orthotics and Prosthetics. The 3D Measure Up widget has also enabled customers to build on the measurements extracted from the scan and extend them to derive custom measurements unique to their application.

Post by 3dmup