Update solution plotting in tutorials

Author: nikoscham

assets/advection-diffusion-1d-results.png

@@ -323,10 +323,10 @@ <h2 id="howtousefeascript"><a name="Getting Started"></a>How to Use FEAScript</h
     model.addBoundaryCondition("boundaryIndex", ["conditionType", /* parameters */]);
 
     // Solve
-    const { solutionVector, nodesCoordinates } = model.solve();
+    const result = model.solve();
 
     // Plot results
-    plotSolution(solutionVector, nodesCoordinates, model.solverConfig, model.meshConfig.meshDimension, "contour", "resultsCanvas");
+    plotSolution(model, result, "contour", "resultsCanvas");
   });
   &lt;/script&gt;
   &lt;!-- ...rest of body region... --&gt;

assets/heat-conduction-1d-wall-results.png

@@ -223,17 +223,10 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
 
       // Solve
       model.setSolverMethod("lusolve");
-      const { solutionVector, nodesCoordinates } = model.solve();
+      const result = model.solve();
 
       // Plot results
-      plotSolution(
-        solutionVector,
-        nodesCoordinates,
-        model.solverConfig,
-        model.meshConfig.meshDimension,
-        "line",
-        "resultsCanvas"
-      );
+      plotSolution(model, result, "line", "resultsCanvas");
     });
   &lt;/script&gt;
   &lt;!-- ...rest of body region... --&gt;
@@ -324,17 +317,10 @@ <h2 id="results"><a name="Results"></a>Results</h2>
         model.setSolverMethod("lusolve");
 
         // Solve the problem and get the solution
-        const { solutionVector, nodesCoordinates } = model.solve();
+        const result = model.solve();
 
         // Plot the solution as a 1D line plot
-        plotSolution(
-          solutionVector,
-          nodesCoordinates,
-          model.solverConfig,
-          model.meshConfig.meshDimension,
-          "line",
-          "resultsCanvas"
-        );
+        plotSolution(model, result, "line", "resultsCanvas");
       });
     </script>
 

assets/heat-conduction-2d-fin-results.png

@@ -211,17 +211,10 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
 
       // Solve
       model.setSolverMethod("lusolve");
-      const { solutionVector, nodesCoordinates } = model.solve();
+      const result = model.solve();
 
       // Plot results
-      plotSolution(
-        solutionVector,
-        nodesCoordinates,
-        model.solverConfig,
-        model.meshConfig.meshDimension,
-        "line",
-        "resultsCanvas"
-      );
+      plotSolution(model, result, "line", "resultsCanvas");
 
     });
   &lt;/script&gt;
@@ -303,17 +296,10 @@ <h2 id="results"><a name="Results"></a>Results</h2>
         model.setSolverMethod("lusolve");
 
         // Solve the problem and get the solution
-        const { solutionVector, nodesCoordinates } = model.solve();
+        const result = model.solve();
 
         // Plot the solution as a 1D line plot
-        plotSolution(
-          solutionVector,
-          nodesCoordinates,
-          model.solverConfig,
-          model.meshConfig.meshDimension,
-          "line",
-          "resultsCanvas"
-        );
+        plotSolution(model, result, "line", "resultsCanvas");
       });
     </script>
     <footer>

assets/solidification-front-2d-results.png

@@ -162,7 +162,7 @@ <h2 id="gmshfileimport"><a name="gmshfileimport"></a>Gmsh File Import</h2>
   &lt;!-- ...body region... --&gt;
   &lt;script type="module"&gt;
     // Import FEAScript library
-    import { FEAScriptModel, importGmshQuadTri, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
+    import { FEAScriptModel, importGmshQuadTri, plotInterpolatedSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
 
     window.addEventListener("DOMContentLoaded", async () => {
       // Print FEAScript version in the console
@@ -200,17 +200,10 @@ <h2 id="gmshfileimport"><a name="gmshfileimport"></a>Gmsh File Import</h2>
 
       // Solve
       model.setSolverMethod("lusolve");
-      const { solutionVector, nodesCoordinates } = model.solve();
+      const result = model.solve();
 
       // Plot results
-      plotSolution(
-        solutionVector,
-        nodesCoordinates,
-        model.solverConfig,
-        model.meshConfig.meshDimension,
-        "contour",
-        "resultsCanvas"
-      );
+      plotInterpolatedSolution(model, result, "contour", "resultsCanvas");
     });
   &lt;/script&gt;
   &lt;!-- ... rest of body region... --&gt;
@@ -358,14 +351,14 @@ <h2 id="results"><a name="results"></a>Results</h2>
       import {
         FEAScriptModel,
         importGmshQuadTri,
-        plotSolution,
+        plotInterpolatedSolution,
         printVersion,
       } from "https://core.feascript.com/dist/feascript.esm.js";
       // Import FEAScript library from a local directory
       // import {
       //   FEAScriptModel,
       //   importGmshQuadTri,
-      //   plotSolution,
+      //   plotInterpolatedSolution,
       //   printVersion,
       //   logSystem,
       // } from "../../FEAScript-core/src/index.js";
@@ -414,18 +407,10 @@ <h2 id="results"><a name="results"></a>Results</h2>
         gmshModel.setSolverMethod("lusolve");
 
         // Solve the problem and get the solution
-        const { solutionVector: gmshSolutionVector, nodesCoordinates: gmshNodesCoordinates } =
-          gmshModel.solve();
-
-        // Plot the GMSH solution
-        plotSolution(
-          gmshSolutionVector,
-          gmshNodesCoordinates,
-          gmshModel.solverConfig,
-          gmshModel.meshConfig.meshDimension,
-          "contour",
-          "resultsCanvas"
-        );
+        const result = gmshModel.solve();
+
+        // Plot the Gmsh solution
+        plotInterpolatedSolution(gmshModel, result, "contour", "resultsCanvas");
       });
     </script>
 

index.html

@@ -176,21 +176,14 @@ <h2>Run Performance Test</h2>
 
         // Measure the solving time
         const startTime = performance.now();
-        const { solutionVector, nodesCoordinates } = model.solve();
+        const result = 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,
-          nodesCoordinates,
-          "heatConductionScript",
-          "2D",
-          "contour",
-          "resultsCanvas"
-        );
+        plotSolution(model, result, "contour", "resultsCanvas");
       }
 
       runSpeedTest(document.getElementById("solverSelect").value);

tutorials/advection-diffusion-1d.html

@@ -183,17 +183,10 @@ <h2 id="webgpuimplementation">WebGPU Implementation</h2>
     model.setSolverMethod("jacobi-gpu");
 
     // Solve
-    const { solutionVector, nodesCoordinates } = await model.solveAsync();
+    const result = await model.solveAsync();
 
     // Plot results
-    plotSolution(
-      solutionVector,
-      nodesCoordinates,
-      "heatConductionScript",
-      "2D",
-      "contour",
-      "resultsCanvas"
-    );
+    plotSolution(model, result, "contour", "resultsCanvas");
   });
   &lt;/script&gt;
   &lt;!-- ...rest of body region... --&gt;
@@ -249,18 +242,11 @@ <h2 id="results">Results</h2>
 
         model.setSolverMethod("jacobi-gpu");
 
-        const { solutionVector, nodesCoordinates } = await model.solveAsync();
+        const result = await model.solveAsync();
 
         resultDiv.style.display = "none";
 
-        plotSolution(
-          solutionVector,
-          nodesCoordinates,
-          model.solverConfig,
-          model.meshConfig.meshDimension,
-          "contour",
-          "resultsCanvas"
-        );
+        plotSolution(model, result, "contour", "resultsCanvas");
       });
     </script>