Enhance performance testing features and update styles in FEAScript website

nikoscham · nikoscham · commit d49805ca46ba · 2025-10-08T22:19:51.000+03:00
- Adjusted margin-top for mjx-container to improve layout.
- Added new badge for performance test in tutorials list.
- Styled tutorials list for better presentation.
- Increased priority for HeatConduction2DFinWorker in sitemap.
- Added new performance test tutorial page for 2D heat conduction.
- Removed obsolete HeatConduction2DSpeedTest.html file.
diff --git a/FEAScript-website.css b/FEAScript-website.css
@@ -216,7 +216,7 @@ mjx-container {
   padding: 0.2em 0.8em;
   border-radius: 8px;
   margin-right: 0.5em;
-  margin-top: 0.3em;
+  margin-top: 0;
   vertical-align: middle;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-weight: 500;
@@ -249,13 +249,28 @@ mjx-container {
   color: #f7e7b7;
 }
 
+.tutorials-list .badge-performance {
+  background-color: #c62828;
+  color: white;
+}
+
 .tutorial-name {
   display: inline-block;
   vertical-align: middle;
   font-weight: 550;
   margin-right: 10px;
 }
 
+.tutorials-list li {
+  margin-bottom: 1em;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.5em;
+}
+
+.tutorials-list {
+  list-style: none; /* Remove bullets */
+}
+
 /* Footer styles */
 footer {
   position: relative;
diff --git a/index.html b/index.html
@@ -485,6 +485,11 @@ <h2 id="tutorials"><a name="Tutorials"></a>Tutorials</h2>
         <a href="https://feascript.com/tutorials/HeatConduction2DFinGmsh.html" class="badge badge-gmsh"
           >Gmsh mesh</a
         >
+        <a
+          href="https://feascript.com/tutorials/HeatConduction2DPerfomanceTest.html"
+          class="badge badge-performance"
+          >Performance Test</a
+        >
         <a href="https://feascript.com/tutorials/HeatConduction2DFinPlatform.html" class="badge badge-visual"
           >Visual Editor</a
         >
@@ -549,4 +554,3 @@ <h2 id="licensing"><a name="Licensing"></a>Licensing</h2>
     </script>
   </body>
 </html>
-
diff --git a/sitemap.xml b/sitemap.xml
@@ -10,7 +10,7 @@
   </url>
   <url>
     <loc>https://feascript.com/tutorials/HeatConduction2DFinWorker.html</loc>
-    <priority>0.7</priority>
+    <priority>0.8</priority>
   </url>
   <url>
     <loc>https://feascript.com/tutorials/HeatConduction1DWall.html</loc>
@@ -24,16 +24,20 @@
     <loc>https://feascript.com/tutorials/HeatConduction2DFinGmsh.html</loc>
     <priority>0.8</priority>
   </url>
+  <url>
+    <loc>https://feascript.com/tutorials/HeatConduction2DPerfomanceTest.html</loc>
+    <priority>0.8</priority>
+  </url>
   <url>
     <loc>https://feascript.com/tutorials/SolidificationFront2D.html</loc>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://feascript.com/tutorials/SolidificationFront2DWorker.html</loc>
-    <priority>0.7</priority>
+    <priority>0.8</priority>
   </url>
   <url>
     <loc>https://feascript.com/tutorials/AdvectionDiffusion1D.html</loc>
-    <priority>0.7</priority>
+    <priority>0.8</priority>
   </url>
 </urlset>
diff --git a/tutorials/HeatConduction2DPerfomanceTest.html b/tutorials/HeatConduction2DPerfomanceTest.html
@@ -12,7 +12,7 @@
 
 <html>
   <head>
-    <title>FEAScript Speed Test</title>
+    <title>FEAScript Performance Test</title>
     <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta
@@ -43,23 +43,23 @@ <h1 class="top">
         />
       </a>
     </h1>
-    <h1>FEAScript Speed Test</h1>
+    <h1>FEAScript Performance Test</h1>
 
     <div class="highlight-container">
       <p>
-        This page demonstrates a speed test for the FEAScript using a 2D heat conduction problem. You can
-        select the solver and mesh size to benchmark performance. For the mathematical formulation and theory,
-        see the
+        This page presents a performance test of FEAScript using the Heat Conduction in a 2D Fin problem. You
+        can choose the solver and mesh size to benchmark performance. For simplicity and speed, this test uses
+        linear elements. For the mathematical formulation and theoretical background, refer to the
         <a href="HeatConduction2DFin.html">basic tutorial</a>.
       </p>
     </div>
 
-    <h2>Run Speed Test</h2>
+    <h2>Run Performance Test</h2>
     <p>
       <label for="solverSelect">Select solver:</label>
       <select id="solverSelect">
         <option value="lusolve">LU Solve</option>
-        <option value="jacobi">Jacobi</option>
+        <!-- <option value="jacobi">Jacobi</option> -->
         <option value="frontal">Frontal</option>
       </select>
       <label for="numElementsX" style="margin-left: 1em">Elements X:</label>
@@ -69,6 +69,8 @@ <h2>Run Speed Test</h2>
       <button id="runBtn">Run</button>
     </p>
     <div id="resultsCanvas"></div>
+    <!-- div to display the solving time -->
+    <div id="timeDisplay" style="margin-top: 1em"></div>
 
     <ul id="menu">
       <li><a href="https://feascript.com/index.html">Home</a></li>
@@ -107,7 +109,14 @@ <h2>Run Speed Test</h2>
 
         model.setSolverMethod(selectedSolver);
 
+        // Measure the solving time
+        const startTime = performance.now();
         const { solutionVector, nodesCoordinates } = model.solve();
+        const endTime = performance.now();
+        const solvingTime = ((endTime - startTime) / 1000).toFixed(3); // Convert to seconds and round to 3 decimal places
+
+        // Display the time in the HTML
+        document.getElementById("timeDisplay").innerHTML = `Solving time: ${solvingTime} seconds`;
 
         plotSolution(
           solutionVector,
