Merge pull request #11 from TerribleCoding/dev_1.4

Expression editor feature

Author: TerribleCoding

README.md

@@ -10,14 +10,16 @@ This product is intended for digital use only. It is prohibited to copy or distr
 
 ## Usage
 
+#### The basics
+
 Choose the shape you want to calculate features by clicking the corresponding image or name.
 You'll be redirected to the dedicated page where you can insert available data on the *_Dimensional data_* and *_Material data_* tables (blue tables).
 
 Wether results will be available while inserting data, they will show in the bottom tables (orange tables).
-e.g.: If you're looking for the area of a rectangle as the base **and** the height will be filled in you'll have the result otherwise the field will be null.
+e.g.: If you're looking for the area of a rectangle as the base **and** the height will be filled in you'll have the result otherwise the field will be empty.
 
 You can use the arrows on the right side of any input field to raise or decrease it by 1 unit, for your convenience.
-For a quicker input process, is suggested to use the _Tab_ key to jump on the next input field.
+For a quicker input process, it is suggested to use the _Tab_ key to jump on the next input field.
 
 Results updates trigger whenever **one** of these events occur:
 
@@ -32,23 +34,60 @@ All texts and numbers on the pages are able to be copied and pasted anywhere you
 
 A button for getting back to the main page is provided on every profile page, directly below its title.
 
+#### Equation page
+
 The equations page is intuitive to use: clicking the shape from the list on the left makes the math for that shape visible.
 Some other extra features from MathJax library are also available when right-clicking on a equation, like the ability of zooming the expression or copying the LaTex string for further use.
 
+#### Expression Editor
+
+The core new feature from version 1.4 is the Expression Editor.
+This editor allows the user to quickly calculate the result of a mathematical expression and use it as a data input for the shape calculation process.
+
+Any numerical input field from the *_Dimensional data_* and *_Material data_* tables (blue ones) can be used as targets for the expression calculation, in any of the shape pages.
+The Editor can be opened by pressing the "=" key on the keyboard while the related numerical input is selected.
+
+A popup with the Editor itself will appear over the content, showing:
+- the variable selected to be the target for the result,
+- an empty text field for the expression,
+- the result preview of the expression,
+- an icon indicating if any errors are detected in the expression
+
+Start typing the math expression in the text field and the preview will be updated in real time. Characters allowed for a correct calculation are digits from 0 to 9 and _. + - * / ( )_. Use the dot _"."_ as the decimal separator.
+
+The editor can be left anytime by clicking the top-right X icon or pressing "Esc" on the keyboard and no action will be performed.
+
+If the result of the typed expression is valid (green check icon after the result preview) it can be pasted in the related data input of the shape page. To use it, click the _"Use result"_ button on the bottom of the popup, or type "Enter" on the keyboard when the expression field is selected.
+
+The result will be pasted into the table and the popup disappears. This can be used multiple times in any page.
+
 ## Known bugs and issues
 
 #### Ellipse perimeter not exact
 
 The formula used to get the perimeter is not an exact calculation, however is roughly the best approximation available.
 Notice that the more "squished" the ellipse, the more imprecise the result.
-The formula has been updated to a better one - this one - in version 1.2 and the approximation is totally suitable for the intended use of this tool.
+The formula has been updated to a better one - the actual one - in version 1.2 and the approximation is totally suitable for the intended use of this tool.
 This might mean that it won't be upgraded to an even more precise calculation (infinite series are not infinite in programming).
 
 #### Truncated material names
 
 When a material is selected from the dropdown menu, often the name overflows the space available.
 The issue will be solved in a future release.
 
+#### Expression Editor
+
+When the Editor is opened trough the "=" key, the expression text input is meant to be focused automatically.
+This should avoid moving hands to get back to the mouse and to the keyboard again, but something didn't work as expected.
+
+If something is typed in the expression input field, if all characters in it are deleted, the result will be marked as "undefined".
+This result can also be pasted into the related data input, but nothing will happen as they're numerical inputs.
+
+When confirming the result of the editor to be pasted in the data, results are not calculated with the new number.
+The page starts calculating again when another data is entered by directly typing the number, the ìn pressing Enter, Tab or clicking away.
+
+All these issues will be fixed in a future patch.
+
 ## Next improvements to be added
 
 Note: _The order of this list might not match the order these features will be added through next versions._
@@ -62,6 +101,15 @@ Note: _The order of this list might not match the order these features will be a
 
 ## Versions log
 
+#### v1.4
+
+_Release date: October 22, 2021_
+
+_Work Time: 8h_
+
+- Added the Expression Editor, where math expressions can be calculated and the result can be pasted as a data input
+- Some bugs related to the development of the Editor are still unfixed, but anyway it can be used correctly
+
 #### v1.3
 
 _Release date: July 25, 2021_

assets/vid/exp-editor.mp4

@@ -18,6 +18,18 @@ <h1>
         </h1>
         <img src="assets/ico/tool-logo.png" alt="AnySection" class="tool-logo">
         <h3>Select a profile shape</h3>
+        <button class="new-feature">New in v1.4!</button>
+        <div class="new-feature">
+            <p style="font-weight: bold;">Calculate simple math with the new editor</p>
+            <video src="assets/vid/exp-editor.mp4" autoplay loop controls></video>
+            <ol>
+                <li>Select any of the data inputs (blue)</li>
+                <li>Press the "=" key</li>
+                <li>Digit your expression</li>
+                <li>Confirm by clicking the button or "Enter" on your keyboard</li>
+                <li>The result will be pasted into the input field</li>
+            </ol>
+        </div>
     </div>
 
     <div id="main">
@@ -33,13 +45,13 @@ <h3>Select a profile shape</h3>
         </div>
     </div>
 
-    <div id="credits" style="display: none;" class="popup">
+    <div id="credits" style="display: none;" class="popup blur">
         <div class="outer">
             <div class="content">
                 <close onclick="closeCredits()"><i class="fi-rr-cross"></i></close>
                 <img src="assets/ico/tool-logo.png" alt="AnySection" height="50">
                 <a href="https://github.com/TerribleCoding/AnySection/releases" target="_blank"
-                    style="position: relative; left: 0.5em; bottom: 12px;">v1.3</a>
+                    style="position: relative; left: 0.5em; bottom: 12px;">v1.4</a>
                 <br>
                 <span>This project is developed by</span>
                 <a href="https://terriblecoding.github.io" target="_blank">

index.html

@@ -4,9 +4,11 @@
 <head>
     <title>C - U Profile</title>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>
-    <script src="common.js"></script>
+    <script src="common.js" defer></script>
     <script src="c-profile.js"></script>
     <link rel="stylesheet" type="text/css" href="../style.css">
+    <link rel="stylesheet" type="text/css" href="../popup.css">
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
     <link rel="icon" type="image/x-icon" href="../assets/ico/favicon.ico">
 </head>
 
@@ -145,6 +147,35 @@ <h3 class="back">Back to index</h3>
     </div>
 
     <div class="right" id="image"></div>
+
+    <div id="calc" style="display: none;" class="popup auto-width shadow">
+        <div class="outer">
+            <div class="content">
+                <close onclick="closeEditor()"><i class="fi-rr-cross"></i></close>
+                <h4>Expression editor</h4>
+                <p>Enter a valid expression for the variable:</p>
+                <p class="big">
+                    <span id="var">D</span>
+                    <span>=</span>
+                    <input type="text" name="expression" id="expression" placeholder="0">
+                    <span>=</span>
+                    <span id="result">
+                        <num>0</num>
+                        <icon>
+                            <i class="fi-rr-check">
+                                <span>Expression OK</span>
+                            </i>
+                            <i class="fi-rr-exclamation invisible">
+                                <span></span>
+                            </i>
+                        </icon>
+                    </span>
+                </p>
+                <button style="display: block; margin: auto;"><i class="fi-rr-check"></i>Use result</button>
+            </div>
+        </div>
+    </div>
+
 </body>
 
 </html>

pages/c-profile.html

@@ -5,7 +5,7 @@ var combo, selector;
 var imageSpace;
 var pageName;
 
-// dimensions = list of all dimensions called in all pages, update while coding pages
+// dimensions = list of all dimensions called in all pages
 var dimensions = ['L', 'D', 't', 'B', 'b', 'H', 'R', 'A', 'h'];
 var dim = {};
 var matProp = ['density', 'brake', 'yeld'];
@@ -84,6 +84,9 @@ function setup() {
 
     // set values when selecting a material
     selector.changed(updateMatProp);
+
+    // add event listeners to open equation editor
+    addEquationKeyListeners();
 }
 
 function updateMatProp() {
@@ -177,4 +180,106 @@ function Traction() {
         k = 4;
     }
     return R / k * a;
-}
+}
+
+
+
+// EXPRESSION EDITOR FUNCTIONS
+
+var editor = document.querySelector('#calc');
+var property = document.querySelector('#var');
+var dataInput;
+var textfield = document.querySelector('#expression');
+var result = document.querySelector('#result num');
+var icons = document.querySelectorAll('#result icon > *');
+var button = document.querySelector('#calc button');
+var errors = {
+    char: 'Only numbers or +-*/(). characters are allowed.',
+    par: 'Some parentheses are missing.',
+    syntax: 'Syntax error detected.'
+}
+
+function openEditor() {
+    editor.style.display = 'grid';
+}
+
+function closeEditor() {
+    editor.style.display = 'none';
+}
+
+function addEquationKeyListeners() {
+    var target = document.querySelectorAll('table input[type=number]');
+    target.forEach(item => item.addEventListener('keyup', openEditorForVariable));
+}
+
+function openEditorForVariable(event) {
+    // press '=' to open editor when closed and focus on textfield
+    if (event.key == '=' && editor.style.display == 'none') {
+        dataInput = event.target;
+        property.innerHTML = event.target.parentNode.previousElementSibling.innerHTML;
+        textfield.value = dataInput.value;
+        textfield.focus();
+        result.innerText = '0';
+        openEditor();
+    }
+}
+
+editor.addEventListener('keyup', function (event) {
+    // do something only if the editor is open
+    if (editor.style.display !== 'none') {
+        // press 'Esc' to close editor
+        if (event.key == 'Escape') closeEditor();
+        // press 'Enter' to act as pressing the button
+        if (event.key == 'Enter') button.click();
+    }
+});
+
+// check for errors while typing
+textfield.addEventListener('input', checkErrors);
+
+function checkErrors(event) {
+    // convert the input to string, split in an array, remove spaces
+    var inp = event.target.value.toString().split('').filter(x => x != " ");
+    // check if every character is allowed => 0123456789.+-*/()
+    var charTest = inp.every(char => char.match(/[0-9|\+|\-|\*|\/|(|)|\.]/));
+    // check if parentheses match
+    var parTest = inp.filter(char => char == '(').length == inp.filter(char => char == ')').length;
+
+    // preview result
+    var validExpression = true;
+    try {
+        eval(inp.join(''));
+    } catch (e) {
+        if (e instanceof SyntaxError) validExpression = false;
+    } finally {
+        if (validExpression && charTest && parTest) result.innerText = eval(inp.join(''));
+    }
+
+    // update warning tooltip
+    var tooltip = [];
+    if (!charTest) tooltip.push(errors.char);
+    if (!parTest) tooltip.push(errors.par);
+    if (!validExpression) tooltip.push(errors.syntax);
+    icons[1].querySelector('span').innerText = tooltip.join('\n');
+
+    // update icon and button
+    if (charTest && parTest && validExpression) {
+        button.disabled = false;
+        showIcon(0);
+    } else {
+        button.disabled = true;
+        showIcon(1);
+    }
+
+    function showIcon(index) {
+        icons.forEach(e => e.classList.add('invisible'));
+        icons[index].classList.remove('invisible');
+    }
+}
+
+// paste result in the field if confirmed
+button.addEventListener('click', function() {
+    dataInput.value = result.innerText;
+    closeEditor();
+    dataInput.focus();
+});

pages/common.js

@@ -4,9 +4,11 @@
 <head>
     <title>Cylinder / Round bar</title>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>
-    <script src="common.js"></script>
+    <script src="common.js" defer></script>
     <script src="cylinder.js"></script>
     <link rel="stylesheet" type="text/css" href="../style.css">
+    <link rel="stylesheet" type="text/css" href="../popup.css">
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
     <link rel="icon" type="image/x-icon" href="../assets/ico/favicon.ico">
 </head>
 
@@ -117,6 +119,35 @@ <h3 class="back">Back to index</h3>
     </div>
 
     <div class="right" id="image"></div>
+
+    <div id="calc" style="display: none;" class="popup auto-width shadow">
+        <div class="outer">
+            <div class="content">
+                <close onclick="closeEditor()"><i class="fi-rr-cross"></i></close>
+                <h4>Expression editor</h4>
+                <p>Enter a valid expression for the variable:</p>
+                <p class="big">
+                    <span id="var">D</span>
+                    <span>=</span>
+                    <input type="text" name="expression" id="expression" placeholder="0">
+                    <span>=</span>
+                    <span id="result">
+                        <num>0</num>
+                        <icon>
+                            <i class="fi-rr-check">
+                                <span>Expression OK</span>
+                            </i>
+                            <i class="fi-rr-exclamation invisible">
+                                <span></span>
+                            </i>
+                        </icon>
+                    </span>
+                </p>
+                <button style="display: block; margin: auto;"><i class="fi-rr-check"></i>Use result</button>
+            </div>
+        </div>
+    </div>
+
 </body>
 
 </html>