Added MRR calculator

Author: mikecentola

src/webviews/apps/calc/calc.html

@@ -7,6 +7,7 @@
         <vscode-panels aria-label="with Complex Content">
             <vscode-panel-tab id="tab-1">SPEEDS</vscode-panel-tab>
             <vscode-panel-tab id="tab-2">FEEDS</vscode-panel-tab>
+            <vscode-panel-tab id="tab-3">MRR</vscode-panel-tab>
 
             <vscode-panel-view id="view-1">
                 <section class="row">
@@ -66,8 +67,18 @@ <h3>Chip Load</h3>
                     <span class="units"></span>
                 </section>
             </vscode-panel-view>
+            <vscode-panel-view id="view-3">
+                <section class="row">
+                    <section id="mrr" class="calculator">                        
+                        <vscode-text-field id="mrr-ap" placeholder="Axial Depth of Cut" size="15">A<sub>p</sub> - Axial Depth of Cut</vscode-text-field>
+                        <vscode-text-field id="mrr-ae" placeholder="Radial Depth of Cut" size="15">A<sub>e</sub> - Radial Depth of Cut</vscode-text-field>
+                        <vscode-text-field id="mrr-fr" placeholder="Feedrate" size="15">Feedrate</vscode-text-field>
+                        <label class="results">Metal Removal Rate</label><span id="mrr-results" class="results"></span>
+                        <vscode-button id="mrr-calc-btn">Calculate</vscode-button>
+                    </section>
+                </section>
+            </vscode-panel-view>
         </vscode-panels>
-
     </div>
     {bootstrap}
 </body>

src/webviews/apps/calc/calc.scss

@@ -68,6 +68,10 @@ span.results {
     padding: 5px;
 }
 
+#mrr-results {
+    width: 130px;
+}
+
 section.calculator > vscode-button {
     margin-top: 1rem;
 }

src/webviews/apps/calc/calc.ts

@@ -61,15 +61,25 @@ export class CalcApp extends GWebviewApp {
             results: document.getElementById('fr-results') as HTMLSpanElement,
         };
 
+        // Populate Chipload Calculator
         this._calcDom.chipLoad = {
             btn: document.getElementById('cl-calc-btn') as HTMLElement,
-            ipm: document.getElementById('cl-ipm')?.shadowRoot?.getElementById('control') as HTMLInputElement,
+            feedRate: document.getElementById('cl-ipm')?.shadowRoot?.getElementById('control') as HTMLInputElement,
             rpm: document.getElementById('cl-rpm')?.shadowRoot?.getElementById('control') as HTMLInputElement,
             numFlutes: document
                 .getElementById('cl-num-flutes')
                 ?.shadowRoot?.getElementById('control') as HTMLInputElement,
             results: document.getElementById('cl-results') as HTMLSpanElement,
         };
+
+        // Populate MRR Calculator
+        this._calcDom.mrr = {
+            btn: document.getElementById('mrr-calc-btn') as HTMLElement,
+            axialDepth: document.getElementById('mrr-ap')?.shadowRoot?.getElementById('control') as HTMLInputElement,
+            radialDepth: document.getElementById('mrr-ae')?.shadowRoot?.getElementById('control') as HTMLInputElement,
+            feedRate: document.getElementById('mrr-fr')?.shadowRoot?.getElementById('control') as HTMLInputElement,
+            results: document.getElementById('mrr-results') as HTMLSpanElement,
+        };
     }
 
     protected onMsgReceived(e: MessageEvent<WebviewMsg>): void {
@@ -165,20 +175,36 @@ export class CalcApp extends GWebviewApp {
 
                 case 'cl-calc-btn': {
                     if (this._calcDom.chipLoad) {
-                        const ipm = Math.abs(Number(this._calcDom.chipLoad.ipm.value));
+                        const feedRate = Math.abs(Number(this._calcDom.chipLoad.feedRate.value));
                         const rpm = Math.abs(Number(this._calcDom.chipLoad.rpm.value));
                         const numFlutes = Math.abs(Number(this._calcDom.chipLoad.numFlutes.value));
 
-                        this._calcDom.chipLoad.ipm.value = ipm ? ipm.toString() : '';
+                        this._calcDom.chipLoad.feedRate.value = feedRate ? feedRate.toString() : '';
                         this._calcDom.chipLoad.rpm.value = rpm ? rpm.toString() : '';
                         this._calcDom.chipLoad.numFlutes.value = numFlutes ? numFlutes.toString() : '';
 
-                        result = this._calcChipLoad(ipm, rpm, numFlutes);
+                        result = this._calcChipLoad(feedRate, rpm, numFlutes);
 
                         this._displayResults(result, this._calcDom.chipLoad);
                     }
                     break;
                 }
+
+                case 'mrr-calc-btn': {
+                    if (this._calcDom.mrr) {
+                        const axialDepth = Math.abs(Number(this._calcDom.mrr.axialDepth.value));
+                        const radialDepth = Math.abs(Number(this._calcDom.mrr.radialDepth.value));
+                        const feedRate = Math.abs(Number(this._calcDom.mrr.feedRate.value));
+
+                        this._calcDom.mrr.axialDepth.value = axialDepth ? axialDepth.toString() : '';
+                        this._calcDom.mrr.radialDepth.value = radialDepth ? radialDepth.toString() : '';
+                        this._calcDom.mrr.feedRate.value = feedRate ? feedRate.toString() : '';
+
+                        result = this._calcMRR(axialDepth, radialDepth, feedRate);
+
+                        this._displayResults(result, this._calcDom.mrr);
+                    }
+                }
             }
         }
     }
@@ -245,6 +271,10 @@ export class CalcApp extends GWebviewApp {
     private _calcChipLoad(feedRate: number, rpm: number, numFlutes: number): number | undefined {
         return feedRate / rpm / numFlutes;
     }
+
+    private _calcMRR(axialDepth: number, radialDepth: number, feedRate: number): number | undefined {
+        return feedRate * radialDepth * axialDepth;
+    }
 }
 
 new CalcApp();

src/webviews/apps/calc/calc.types.ts

@@ -29,11 +29,19 @@ export interface ICalcDom {
 
     chipLoad?: {
         btn: HTMLElement;
-        ipm: HTMLInputElement;
+        feedRate: HTMLInputElement;
         rpm: HTMLInputElement;
         numFlutes: HTMLInputElement;
         results: HTMLSpanElement;
     };
+
+    mrr?: {
+        btn: HTMLElement;
+        axialDepth: HTMLInputElement;
+        radialDepth: HTMLInputElement;
+        feedRate: HTMLInputElement;
+        results: HTMLSpanElement;
+    };
 }
 
 export type TCalcDom = ICalcDom[keyof ICalcDom];