Start over the Gmsh heat conduction tutorial (it's still in progress)

Author: nikoscham

tutorials/HeatConduction2DFinGmsh.html

@@ -83,84 +83,74 @@ <h1 class="top">
     <h1>Heat Conduction in a Two-Dimensional Fin (Gmsh Example)</h1>
 
     <ul id="menu">
-      <li><a href="#introduction">Introduction</a></li>
       <li><a href="#gmshfileimport">Gmsh File Import</a></li>
       <li><a href="#results">Results</a></li>
     </ul>
 
     <div class="highlight-container">
       <p>
-        This example demonstrates solving a steady-state heat transfer problem in a 2D rectangular domain
-        using a mesh generated by
-        <a href="https://gmsh.info/" target="_blank">Gmsh</a>. Gmsh is a powerful mesh generation tool that
-        can create complex geometries and meshes for finite element analysis.
+        This page demonstrates solving the 2D heat conduction fin problem using a Gmsh-generated mesh.
+        <a href="https://gmsh.info/" target="_blank">Gmsh</a> is a powerful mesh generation tool that can
+        create complex geometries and meshes for finite element analysis. For the mathematical formulation and
+        theory, see the <a href="HeatConduction2DFin.html" target="_blank">main (standard) tutorial</a>.
       </p>
     </div>
 
-    <h2 id="introduction"><a name="Introduction"></a>Introduction</h2>
-    <p>
-      This example uses a Gmsh-generated mesh to solve a typical cooling fin problem. The objective is to
-      model heat conduction and understand temperature distribution under specific boundary conditions.
-    </p>
-
-    <h2 id="gmshfileimport"><a name="Gmsh File Import"></a>Gmsh File Import</h2>
-    <p>Upload a Gmsh (.msh) file using the form below. The parsed data will be displayed in JSON format.</p>
-    <div class="file-input-container">
-      <form id="inputForm">
-        <label for="inputFile">Choose a .msh file:</label>
-        <input type="file" id="inputFile" name="inputFile" accept=".msh" required />
-      </form>
-    </div>
-
-    <h3>Parsed Gmsh Data:</h3>
-    <div id="resultOutput">No file uploaded yet. Please select a Gmsh (.msh) file.</div>
+    <h2 id="gmshfileimport"><a name="gmshfileimport"></a>Gmsh File Import</h2>
+    <p>The code below shows how to import a Gmsh (.msh) file and set up the problem.</p>
 
-    <h2 id="results"><a name="Results"></a>Results</h2>
-    <p>
-      After uploading the Gmsh file, the parsed data will be displayed above. You can use this data to set up
-      and solve the heat conduction problem.
-    </p>
+    <h2 id="results"><a name="results"></a>Results</h2>
 
     <ul id="menu">
       <li>
-        <a href="HeatConduction2DFin.html" target="_blank">Return to Main Tutorial</a>
+        <a href="https://feascript.com/tutorials/HeatConduction2DFin.html" target="_blank"
+          >Return to Main Tutorial</a
+        >
       </li>
       <li>
         <a href="https://feascript.com/index.html" target="_blank">Return to FEAScript Website</a>
       </li>
     </ul>
 
-    <script>
-      document.getElementById("currentYear").innerHTML = new Date().getFullYear();
-    </script>
-
-    <!-- Gmsh File Import Script -->
     <script type="module">
-      import { importGmshQuadTri } from "../../../FEAScript-core/src/readers/gmshQuadReader.js";
-
-      document.getElementById("inputFile").addEventListener("change", async function (e) {
-        const file = e.target.files[0];
-        if (!file) return;
-
-        try {
-          document.getElementById("resultOutput").innerHTML = "Processing file...";
-          const res = await importGmshQuadTri(file);
-          console.log(res);
-          document.getElementById("resultOutput").innerHTML = JSON.stringify(res, null, 2);
-        } catch (error) {
-          document.getElementById("resultOutput").innerHTML = `Error processing file: ${error.message}`;
-        }
-      });
-    </script>
-
-    <!-- Import FEAScript utilities -->
-    <script type="module">
-      import { printVersion } from "https://core.feascript.com/src/index.js";
+      import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/src/index.js";
 
       window.addEventListener("DOMContentLoaded", () => {
         // Print FEAScript version in the console
         printVersion();
-        console.log("Gmsh Import Tool loaded successfully");
+
+        // Create a new FEAScript model
+        const model = new FEAScriptModel();
+
+        // Set solver configuration
+        model.setSolverConfig("solidHeatTransferScript");
+
+        // Define mesh configuration
+        model.setMeshConfig({
+          meshFile: "rect_quad"
+        });
+
+        // Define boundary conditions
+        model.addBoundaryCondition("0", ["constantTemp", 200]);
+        model.addBoundaryCondition("1", ["symmetry"]);
+        model.addBoundaryCondition("2", ["convection", 1, 20]);
+        model.addBoundaryCondition("3", ["constantTemp", 200]);
+
+        // Set solver method (optional) - 'lusolve' uses LU decomposition
+        model.setSolverMethod("lusolve");
+
+        // Solve the problem and get the solution
+        const { solutionVector, nodesCoordinates } = model.solve();
+
+        // Plot the solution as a 2D contour plot
+        plotSolution(
+          solutionVector,
+          nodesCoordinates,
+          model.solverConfig,
+          model.meshConfig.meshDimension,
+          "contour",
+          "solutionPlot"
+        );
       });
     </script>