Updates to error checking and fonts

Added comments for readability.
HPQC-LABS · Aug 15, 2023 · 944949b · 944949b
1 parent f8851b2
commit 944949b
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 85 deletions.
diff --git a/lmmath-regular.otf b/lmmath-regular.otf
diff --git a/tetrahedron.css b/tetrahedron.css
@@ -5,4 +5,43 @@
 }
 table, th, td {
     border:1px solid black;
+}
+
+@font-face {
+    font-family: 'lmmath';
+    src: url('lmmath-regular.otf') format('opentype');
+}
+
+.len_label {
+    font-family: 'lmmath', sans-serif;
+    font-style: italic;
+    font-size: 24.96px;
+}
+
+.len_label1 {
+    font-family: 'lmmath', sans-serif;
+    font-size: 15px;
+}
+
+.ang_label {
+    font-size: 24.96px;
+}
+
+.ang_label1 {
+    font-family: 'lmmath', sans-serif;
+    font-style: italic;
+    font-size: 24.96px;
+}
+
+.ang_label2 {
+    font-family: 'lmmath', sans-serif;
+    font-size: 15px;
+}
+
+table{
+    display: inline-block;
+}
+
+.wrapper{
+    text-align: center;
 }
diff --git a/tetrahedron.html b/tetrahedron.html
@@ -1,26 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tetrahedron Calculator</title>
   <link rel="stylesheet" href="tetrahedron.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Intuitive calculator for tetrahedrons that support combinations of length, angles and dihedral inputs.">
+  <meta name="keywords" content="tetrahedron calculator, tetrahedron properties, geometry, 3D visualization">
+  <meta name="author" content="Sichao Xiong">
 </head>
-
-<script>
-    window.MathJax = {
-      tex: {
-        // inlineMath: [['$', '$'], ['\\(', '\\)']],
-        packages: {'[+]': ['mhchem']}
-      },
-      loader: {load: ['[tex]/mhchem']},
-    };
-</script>
-<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-
 <body>
-  <div style="text-align: center;">
-    <table style="display: inline-block;">
+  <!--Wrapper for the table and SVG element-->
+  <div class="wrapper">
+    <!--Table for inputs-->
+    <table>
+      <!--Splits table into 6 columns to allow for three and two column splits-->
       <colgroup>
         <col style="width: 16.66%" />
         <col style="width: 16.66%" />
@@ -32,6 +26,7 @@
       <tr>
         <th colspan="6">Tetrahedron Type</th>
       </tr>
+      <!--Splits table into 6 columns to allow for three and two column splits-->  
       <form name="formA">
         <tr>
           <td colspan="2"><input type="radio" name="special_tet" value="0" checked="checked"><label>Irregular tetrahedron</label></td>
@@ -109,38 +104,48 @@
         <th colspan="6">Orange: A, Blue: B, Purple: C, Green: D</th>
       </tr>
     </table>
+
+    <!--SVG elements to render visualization-->
     <svg width="36%" id="triangle" style="text-align:justify;display: inline-block;" viewBox="-8 -6.9282032302755105 416 360.26656797432656">
+      <!--Draws a hexagon and triangle to represent the net-->
       <polygon id="svg-line" points="0 0, 400 0, 200 346.4101615137755"/>
       <polygon id="svg-line1" points="200 0, 100 173.205081, 300 173.205081"/>
+
+      <!--Plots points which represents the 4-atoms-->
       <circle id = "p1" cx="0" cy="0" r="1.5%" fill="orange" />
       <circle id = "p2" cx="200" cy="0" r="1.5%" fill="blue" />
       <circle id = "p3" cx="400" cy="0" r="1.5%" fill="orange" />
       <circle id = "p4" cx="300" cy="173.205081" r="1.5%" fill="green" />
       <circle id = "p5" cx="200" cy="346.4101615137755" r="1.5%" fill="orange" />
       <circle id = "p6" cx="100" cy="173.205081" r="1.5%" fill="purple" />
-      <text id="pq1" x="184.4" y="204.40508075688774" placeholder="r1" font-size="24.96px">r1</text>
-      <text id="pq2" x="265.6" y="86.60254037844388" placeholder="r1" font-size="24.96px">r2</text>
-      <text id="pq3" x="118.8" y="86.60254037844388" placeholder="r1" font-size="24.96px">r3</text>
-      <text id="pq4" x="84.4" y="31.2" placeholder="r1" font-size="24.96px">r4</text>
-      <text id="pq5" x="65.59999999999998" y="86.60254037844388" placeholder="r1" font-size="24.96px">r5</text>
-      <text id="pq6" x="284.4" y="31.2" placeholder="r1" font-size="24.96px">r6</text>
-      <text id="pq7" x="318.8" y="86.60254037844388" placeholder="r1" font-size="24.96px">r7</text>
-      <text id="pq8" x="165.59999999999994" y="259.8076211353316" placeholder="r1" font-size="24.96px">r8</text>
-      <text id="pq9" x="218.79999999999998" y="259.8076211353316" placeholder="r1" font-size="24.96px">r9</text>
-      <text class="ang_label" x="190" y="40" font-size="24.96px">θ1</text>
-      <text class="ang_label" x="120" y="165" font-size="24.96px">θ2</text>
-      <text class="ang_label" x="255" y="165" font-size="24.96px">θ3</text>
-      <text class="ang_label" x="150" y="30" font-size="24.96px">θ4</text>
-      <text class="ang_label" x="25" y="30" font-size="24.96px">θ5</text>
-      <text class="ang_label" x="87.5" y="140" font-size="24.96px">θ6</text>
-      <text class="ang_label" x="220" y="30" font-size="24.96px">θ7</text>
-      <text class="ang_label" x="287.5" y="140" font-size="24.96px">θ8</text>
-      <text class="ang_label" x="350" y="30" font-size="24.96px">θ9</text>
-      <text class="ang_label" x="120" y="200" font-size="24.96px">θ10</text>
-      <text class="ang_label" x="180" y="300" font-size="24.96px">θ11</text>
-      <text class="ang_label" x="240" y="200" font-size="24.96px">θ12</text>
+
+      <!--Elements to represent labels-->
+      <text id="pq1" x="184.4" y="204.40508075688774"><tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">1</tspan></text>
+      <text id="pq2" x="265.6" y="86.60254037844388"><tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">2</tspan></text>
+      <text id="pq3" x="118.8" y="86.60254037844388"><tspan class = "len_label">r</tspan><tspan dy="5" class = "len_label1">3</tspan></text>
+      <text id="pq4" x="84.4" y="31.2"><tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">4</tspan></text>
+      <text id="pq5" x="65.59999999999998" y="86.60254037844388"><tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">5</tspan></text>
+      <text id="pq6" x="284.4" y="31.2"><tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">6</tspan></text>
+      <text id="pq7" x="318.8" y="86.60254037844388"><tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">7</tspan></text>
+      <text id="pq8" x="165.59999999999994" y="259.8076211353316"><tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">8</tspan></text>
+      <text id="pq9" x="218.79999999999998" y="259.8076211353316"><tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">9</tspan></text>
+      <text class="ang_label" x="190" y="40"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">1</tspan></text>
+      <text class="ang_label" x="120" y="165"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">2</tspan></text>
+      <text class="ang_label" x="255" y="165"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">3</tspan></text>
+      <text class="ang_label" x="150" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">4</tspan></text>
+      <text class="ang_label" x="25" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">5</tspan></text>
+      <text class="ang_label" x="87.5" y="140"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">6</tspan></text>
+      <text class="ang_label" x="220" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">7</tspan></text>
+      <text class="ang_label" x="287.5" y="140"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">8</tspan></text>
+      <text class="ang_label" x="350" y="30"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">9</tspan></text>
+      <text class="ang_label" x="120" y="200"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">10</tspan></text>
+      <text class="ang_label" x="180" y="300"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">11</tspan></text>
+      <text class="ang_label" x="240" y="200"><tspan class = "ang_label1">θ</tspan><tspan dy="5"  class = "ang_label2">12</tspan></text>
     </svg>
   </div>
+
+  <!--Links to javascript-->
   <script src="tetrahedron.js"></script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </body>
 </html>
diff --git a/tetrahedron.js b/tetrahedron.js
@@ -166,6 +166,7 @@ function setFlags(){
     if(dihedral5.value != ""){flags |= 0b000000000000000000000000010}
     if(dihedral6.value != ""){flags |= 0b000000000000000000000000001}
 }
+var fail = false;
 
 function lock1(){
     label1.disabled = true;
@@ -174,6 +175,27 @@ function lock1(){
     angle1.disabled = true;
     angle2.disabled = true;
     angle3.disabled = true;
+    let check_len = true
+    if(label1.value <=0 || label1.value == ""){check_len = false;}
+    if(label2.value <=0 || label2.value == ""){check_len = false;}
+    if(label3.value <=0 || label3.value == ""){check_len = false;}
+    if(!check_len){
+        alert("Lengths can't be negative")
+        erase();
+        fail = true
+        location.reload();
+    }
+
+    let check_angle = true
+    if(angle1.value <=0 || angle1.value >=180 || angle1.value == ""){check_angle= false;}
+    if(angle2.value <=0 || angle2.value >=180 || angle2.value == ""){check_angle= false;}
+    if(angle3.value <=0 || angle3.value >=180 || angle3.value == ""){check_angle= false;}
+    if(!check_angle){
+        alert("Angles not in range")
+        erase();
+        fail = true
+        location.reload();
+    }
 }
 
 function lock2(){
@@ -183,6 +205,27 @@ function lock2(){
     angle4.disabled = true;
     angle5.disabled = true;
     angle6.disabled = true;
+    let check_len = true
+    if(label3.value <=0 || label3.value == ""){check_len = false;}
+    if(label4.value <=0 || label4.value == ""){check_len = false;}
+    if(label5.value <=0 || label5.value == ""){check_len = false;}
+    if(!check_len){
+        alert("Lengths can't be negative")
+        erase();
+        fail = true
+        location.reload();
+    }
+
+    let check_angle = true
+    if(angle4.value <=0 || angle4.value >=180 || angle4.value == ""){check_angle= false;}
+    if(angle5.value <=0 || angle5.value >=180 || angle5.value == ""){check_angle= false;}
+    if(angle6.value <=0 || angle6.value >=180 || angle6.value == ""){check_angle= false;}
+    if(!check_angle){
+        alert("Angles not in range")
+        erase();
+        fail = true
+        location.reload();
+    }
 }
 
 function lock3(){
@@ -192,6 +235,27 @@ function lock3(){
     angle7.disabled = true;
     angle8.disabled = true;
     angle9.disabled = true;
+    let check_len = true
+    if(label2.value <=0 || label2.value == ""){check_len = false;}
+    if(label6.value <=0 || label6.value == ""){check_len = false;}
+    if(label7.value <=0 || label7.value == ""){check_len = false;}
+    if(!check_len){
+        alert("Lengths can't be negative")
+        erase();
+        fail = true
+        location.reload();
+    }
+
+    let check_angle = true
+    if(angle7.value <=0 || angle7.value >=180 || angle7.value == ""){check_angle= false;}
+    if(angle8.value <=0 || angle8.value >=180 || angle8.value == ""){check_angle= false;}
+    if(angle9.value <=0 || angle9.value >=180 || angle9.value == ""){check_angle= false;}
+    if(!check_angle){
+        alert("Angles not in range")
+        erase();
+        fail = true
+        location.reload();
+    }
 }
 
 function lock4(){
@@ -201,13 +265,35 @@ function lock4(){
     angle10.disabled = true;
     angle11.disabled = true;
     angle12.disabled = true;
+    let check_len = true
+    if(label1.value <=0 || label1.value == ""){check_len = false;}
+    if(label8.value <=0 || label8.value == ""){check_len = false;}
+    if(label9.value <=0 || label9.value == ""){check_len = false;}
+    if(!check_len){
+        alert("Lengths can't be negative")
+        erase();
+        fail = true
+        location.reload();
+    }
+
+    let check_angle = true
+    if(angle10.value <=0 || angle10.value >=180 || angle10.value == ""){check_angle= false;}
+    if(angle11.value <=0 || angle11.value >=180 || angle11.value == ""){check_angle= false;}
+    if(angle12.value <=0 || angle12.value >=180 || angle12.value == ""){check_angle= false;}
+    if(!check_angle){
+        alert("Angles not in range")
+        erase();
+        fail = true
+        location.reload();
+    }
 }
 
+
 function validate(){
     let changed = true;
     let count = 0;
     setFlags();
-    while(changed && count<100){
+    while(changed && count<27 && !fail){
         count += 1;
         update();
         //unlock();
@@ -942,7 +1028,7 @@ function validate(){
     if(angle11.value == ""){done = false;}
     if(angle12.value == ""){done = false;}
     if(done){
-        if(count == 100){
+        if(count == 27){
             alert("Some lengths, angles or dihedrals isNaN")
             location.reload();
         }else{
@@ -951,42 +1037,6 @@ function validate(){
     }else{
         unrender();
     }
-
-    let check_len = true
-    if(label1.value <=0 && label1.value != ""){check_len = false;}
-    if(label2.value <=0 && label2.value != ""){check_len = false;}
-    if(label3.value <=0 && label3.value != ""){check_len = false;}
-    if(label4.value <=0 && label4.value != ""){check_len = false;}
-    if(label5.value <=0 && label5.value != ""){check_len = false;}
-    if(label6.value <=0 && label6.value != ""){check_len = false;}
-    if(label7.value <=0 && label7.value != ""){check_len = false;}
-    if(label8.value <=0 && label8.value != ""){check_len = false;}
-    if(label9.value <=0 && label9.value != ""){check_len = false;}
-    if(!check_len){
-        alert("Lengths can't be negative")
-        erase();
-        location.reload();
-    }
-
-    let check_angle = true
-    if((angle1.value <=0 || angle1.value >=180) && angle1.value != ""){check_angle= false;}
-    if((angle2.value <=0 || angle2.value >=180) && angle2.value != ""){check_angle= false;}
-    if((angle3.value <=0 || angle3.value >=180) && angle3.value != ""){check_angle= false;}
-    if((angle4.value <=0 || angle4.value >=180) && angle4.value != ""){check_angle= false;}
-    if((angle5.value <=0 || angle5.value >=180) && angle5.value != ""){check_angle= false;}
-    if((angle6.value <=0 || angle6.value >=180) && angle6.value != ""){check_angle= false;}
-    if((angle7.value <=0 || angle7.value >=180) && angle7.value != ""){check_angle= false;}
-    if((angle8.value <=0 || angle8.value >=180) && angle8.value != ""){check_angle= false;}
-    if((angle9.value <=0 || angle9.value >=180) && angle9.value != ""){check_angle= false;}
-    if((angle10.value <=0 || angle10.value >=180) && angle10.value != ""){check_angle= false;}
-    if((angle11.value <=0 || angle11.value >=180) && angle11.value != ""){check_angle= false;}
-    if((angle12.value <=0 || angle12.value >=180) && angle12.value != ""){check_angle= false;}
-    if(!check_angle){
-        alert("Angles not in range")
-        erase();
-        location.reload();
-    }
-
 }
 
 function inverse_dihedral(a, b, c){
@@ -1173,15 +1223,22 @@ handlers2[11][7] = () => {angle1.value = "60";angle2.value = "60";angle3.value =
 
 //Tests to see if all fields have been filled. If so then it will render the image else it will unrender.
 function refresh(){
-    if(label1.value != ""){pq1.textContent = label1.value;}else{pq1.textContent = "r1";}
-    if(label2.value != ""){pq2.textContent = label2.value;}else{pq2.textContent = "r2";}
-    if(label3.value != ""){pq3.textContent = label3.value;}else{pq3.textContent = "r3";}
-    if(label4.value != ""){pq4.textContent = label4.value;}else{pq4.textContent = "r4";}
-    if(label5.value != ""){pq5.textContent = label5.value;}else{pq5.textContent = "r5";}
-    if(label6.value != ""){pq6.textContent = label6.value;}else{pq6.textContent = "r6";}
-    if(label7.value != ""){pq7.textContent = label7.value;}else{pq7.textContent = "r7";}
-    if(label8.value != ""){pq8.textContent = label8.value;}else{pq8.textContent = "r8";}
-    if(label9.value != ""){pq9.textContent = label9.value;}else{pq9.textContent = "r9";}
+    let lock = false
+    if(label1.value != ""){pq1.innerHTML = label1.value; lock = true;}else{pq1.innerHTML = '<tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">1</tspan>';}
+    if(label2.value != ""){pq2.innerHTML = label2.value; lock = true;}else{pq2.innerHTML = '<tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">2</tspan>';}
+    if(label3.value != ""){pq3.innerHTML = label3.value; lock = true;}else{pq3.innerHTML = '<tspan class = "len_label">r</tspan><tspan dy="5" class = "len_label1">3</tspan>';}
+    if(label4.value != ""){pq4.innerHTML = label4.value; lock = true;}else{pq4.innerHTML = '<tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">4</tspan>';}
+    if(label5.value != ""){pq5.innerHTML = label5.value; lock = true;}else{pq5.innerHTML = '<tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">5</tspan>';}
+    if(label6.value != ""){pq6.innerHTML = label6.value; lock = true;}else{pq6.innerHTML = '<tspan dy="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">6</tspan>';}
+    if(label7.value != ""){pq7.innerHTML = label7.value; lock = true;}else{pq7.innerHTML = '<tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">7</tspan>';}
+    if(label8.value != ""){pq8.innerHTML = label8.value; lock = true;}else{pq8.innerHTML = '<tspan dy="-10" dx="-10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">8</tspan>';}
+    if(label9.value != ""){pq9.innerHTML = label9.value; lock = true;}else{pq9.innerHTML = '<tspan dy="-10" dx="10" class = "len_label">r</tspan><tspan dy="5" class = "len_label1">9</tspan>';}
+    if (lock){
+        radios.forEach(x => x.disabled = true);
+    }else{
+        radios.forEach(x => x.disabled = false);        
+    }
+
 }
 
 //Resets the objects to the original states
@@ -1485,4 +1542,12 @@ function erase(){
     dihedral4.disabled = false;
     dihedral5.disabled = false;
     dihedral6.disabled = false;
-}
+}
+
+window.MathJax = {
+    tex: {
+      // inlineMath: [['$', '$'], ['\\(', '\\)']],
+      packages: {'[+]': ['mhchem']}
+    },
+    loader: {load: ['[tex]/mhchem']},
+};