Integrated Calculator
Relevant source files
The following files were used as context for generating this wiki page:The Integrated Calculator is a specialized tool within the ELMEC application designed to perform complex machining calculations for milling (fresado) and drilling (barrenado). It provides a reactive user interface where modifying one parameter automatically recalculates all dependent values in real-time. This feature is built to be intuitive for industrial use, featuring a custom numeric keyboard and clear separation between input parameters and calculated results.
The system is architected around a centralized state management slice, a reusable view component, and a dedicated utility module for calculation logic, ensuring maintainability and consistency across different calculator types.
Sources: README.md, VALIDACION-COMPLETA.md, components/calculator/CalculatorView.tsx:482-484
System Architecture
The calculator's architecture is modular, separating state, view, and logic. A Redux Toolkit slice (calculatorSlice) manages the state for all calculator parameters. The CalculatorView component provides the entire user interface, including input fields and a custom keyboard. This view is utilized by specific screens like FresadoScreen and BarrenadoScreen. All mathematical computations are handled by a set of pure functions in calculatorUtils.ts.
This diagram illustrates the high-level architecture and data flow of the calculator module.
State Management
State is managed globally using a Redux Toolkit slice defined in store/calculatorSlice.ts. This approach centralizes all calculator data and logic for updating it, making the state predictable and easy to debug.
Sources: store/calculatorSlice.ts
Calculator State
The CalculatorState interface defines the shape of the calculator's data, including all input parameters, calculated results, and UI state.
| Property | Type | Description |
|---|---|---|
D, Z, N, Vc, fz, fn, vf, ap, ae, np, lm | string | Input parameters for machining calculations (e.g., Diameter, Speed). |
tc, Q | string | Calculated results (e.g., Time, Removal Rate). |
editable | number | Index of the currently selected input field (0-11). |
medida | 'mt' | 'im' | The system of measurement ('mt' for Metric, 'im' for Imperial). |
textoCa | 'C' | 'CA' | The text for the clear button ('C' for Clear, 'CA' for Clear All). |
scrollHeight, keyboardHeight | string | Dynamic heights for the scroll view and keyboard. |
Sources: store/calculatorSlice.ts:10-26
The following diagram shows the structure of the CalculatorState.
Sources: store/calculatorSlice.ts:10-26
Reducers
The slice defines several reducers to manipulate the state. These are the only way to change the calculator's state.
| Reducer | Payload | Description |
|---|---|---|
setField | { field: keyof CalculatorState, value: string } | Updates the value of a single field in the state. |
setEditable | number | Sets the index of the field that is currently being edited. |
clearAll | void | Resets all numeric fields to their initial state ('0'). |
updateTextoCa | 'C' | 'CA' | Changes the label of the clear button. |
Sources: store/calculatorSlice.ts:42-59
Core Calculation Logic
All mathematical formulas are encapsulated in utils/calculatorUtils.ts. This file exports pure functions for each calculation, ensuring that the logic is decoupled from the UI and easy to test.
Sources: utils/calculatorUtils.ts
Calculation Functions
The primary functions for machining calculations are listed below.
| Function | Formula / Purpose |
|---|---|
calcVc(D, N) | Calculates Cutting Speed (Vc) from Diameter and Rotational Speed. |
calcN(D, Vc) | Calculates Rotational Speed (N) from Diameter and Cutting Speed. |
calcfz(fn, Z) | Calculates Feed per Tooth (fz) from Feed per Revolution and Number of Teeth. |
calcfn1(vf, N) | Calculates Feed per Revolution (fn) from Feed Rate and Rotational Speed. |
calcfn2(fz, Z) | Calculates Feed per Revolution (fn) from Feed per Tooth and Number of Teeth. |
calcvf(fn, N) | Calculates Feed Rate (vf) from Feed per Revolution and Rotational Speed. |
calctc(lm, vf, np) | Calculates Machining Time (tc) from Length, Feed Rate, and Number of Passes. |
calcQ(ap, ae, vf) | Calculates Material Removal Rate (Q) from Axial/Radial Depth and Feed Rate. |
Sources: utils/calculatorUtils.ts:18-33
Reactive Calculation Flow
The performCalculations function in CalculatorView.tsx orchestrates the reactive updates. When a user modifies an input field, this function is called, which then triggers a chain of calculations to update all dependent fields.
The diagram below shows the dependency graph for the calculations. An arrow from A to B means that a change in A triggers a recalculation of B.
User Interface & Interaction
The UI is implemented in the CalculatorView.tsx component. It features a scrollable list of input fields and a custom numeric keyboard that appears when a field is selected.
Sources: components/calculator/CalculatorView.tsx
Interaction Flow
The user interaction follows a clear sequence managed by component state and Redux actions.
- Select Field: The user taps on an editable input field.
- Activate Edit Mode: The
textClickfunction is called, which dispatches thesetEditableaction to update the Redux store with the index of the selected field. The custom keyboard becomes visible. - Enter Value: The user presses keys on the custom keyboard.
- Update Field: The
editarCampofunction processes the key press. It updates the field's string value and dispatches thesetFieldaction. - Trigger Calculations: After the field is updated,
editarCampocallsperformCalculations. - Update Results:
performCalculationscomputes new values for all dependent fields and dispatches multiplesetFieldactions to update the results in the Redux store. - Re-render: The
CalculatorViewcomponent, subscribed to the Redux store, re-renders to display the new input and calculated values.
This sequence diagram details the flow from user input to UI update.
Custom Keyboard
The calculator includes a custom keyboard with numeric inputs (0-9), a decimal point, and special function keys:
- C/CA: Clears the current field ('C') or all fields ('CA') if the current field is already zero.
- S (Subir/Up): Navigates to the previous input field.
- B (Bajar/Down): Navigates to the next input field.
This keyboard is designed to provide a consistent, touch-friendly experience for numeric entry without relying on the native OS keyboard.
Sources: components/calculator/CalculatorView.tsx:100-128, components/calculator/CalculatorView.tsx:401-470