Skip to content

Commit 11b3305

Browse files
nikoschamnikoscham
committed
Update HeatConduction2DFinWorker tutorial
1 parent aca57ac commit 11b3305

File tree

3 files changed

+75
-147
lines changed

3 files changed

+75
-147
lines changed

‎sitemap.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
<loc>https://feascript.com/tutorials/HeatConduction2DFin.html</loc>
99
<priority>0.8</priority>
1010
</url>
11+
<url>
12+
<loc>https://feascript.com/tutorials/HeatConduction2DFinWorker.html</loc>
13+
<priority>0.7</priority>
14+
</url>
1115
<url>
1216
<loc>https://feascript.com/tutorials/HeatConduction1DWall.html</loc>
1317
<priority>0.8</priority>

‎tutorials/HeatConduction2DFin.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,14 @@ <h2 id="results"><a name="Results"></a>Results</h2>
218218
>.
219219
</p>
220220

221+
<!-- Add link to worker-based implementation -->
222+
<div class="highlight-container">
223+
<p>
224+
See also the <a href="HeatConduction2DFinWorker.html">Heat Conduction in a Two-Dimensional Fin (Web Worker version)</a>
225+
for an example using FEAScript in a separate thread for improved responsiveness.
226+
</p>
227+
</div>
228+
221229
<!-- Container element where the solution plot will be rendered -->
222230
<div id="orientation-message">
223231
Cannot draw the results. Please turn your phone to horizontal position to see the results.

‎tutorials/HeatConduction2DFinWorker.html‎

Lines changed: 63 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<html>
1414
<head>
15-
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Tutorial</title>
15+
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Tutorial (Web Worker)</title>
1616
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
1717
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1818
<meta
@@ -52,13 +52,6 @@
5252
font-weight: bold;
5353
}
5454
</style>
55-
<script type="module">
56-
import {
57-
FEAWorkerScript,
58-
plotSolution,
59-
printVersion,
60-
} from "https://feascript.github.io/FEAScript-core/src/index.js";
61-
</script>
6255
</head>
6356

6457
<!-- Google tag (gtag.js) -->
@@ -84,154 +77,81 @@ <h1 class="top">
8477
/>
8578
</a>
8679
</h1>
87-
<h1>Heat Conduction in a Two-Dimensional Fin Tutorial</h1>
80+
<h1>Heat Conduction in a Two-Dimensional Fin (Web Worker)</h1>
8881

8982
<ul id="menu">
90-
<li><a href="#mathematicalformulation">Mathematical Formulation</a></li>
91-
<li><a href="#solvingwithfeascript">Solving with FEAScript</a></li>
92-
<li><a href="#results">Results</a></li>
83+
<li>
84+
<a href="HeatConduction2DFin.html">Back to main tutorial</a>
85+
</li>
9386
</ul>
9487

9588
<div class="highlight-container">
9689
<p>
97-
In this tutorial, we address a stationary heat transfer problem within a two-dimensional rectangular
98-
domain. This is a typical cooling fin problem. Cooling fins are commonly used to increase the area
99-
available for heat transfer between metal walls and poorly conducting fluids such as air.
90+
This page demonstrates solving the 2D heat conduction fin problem using FEAScript in a Web Worker for improved browser responsiveness.
91+
For the mathematical formulation and theory, see the <a href="HeatConduction2DFin.html">main tutorial</a>.
10092
</p>
10193
</div>
10294

103-
<h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathematical Formulation</h2>
95+
<h2>Web Worker Implementation</h2>
10496
<p>
105-
Steady heat conduction is described by the Laplace equation: \(\nabla^{2}T(x,y) = 0\), where \(T\)
106-
signifies the temperature values.
107-
</p>
108-
<img src="../assets/HeatConduction2DFin.png" width="300" />
109-
<p>
110-
The above schematic illustrates the problem domain and outlines the associated boundary conditions. The
111-
constant temperature boundary conditions are implemented as Dirichlet types in the finite element code.
112-
The symmetry boundary condition is implemented as a Neumann zero-flux type \( \left(
113-
\frac{dT}{dx}|_{x=0}=0 \right) \), while the convective cooling boundary condition is of the Robin type.
114-
Specifically, the latter is expressed as \(\frac{dT}{dy}|_{y=4}=-{\frac{h}{k}}(T-T_0)\), where \(h\) is
115-
the heat transfer coefficient, \(k\) the thermal conductivity and \(T_0\) is the external temperature.
116-
We assume here that \({\frac{h}{k}}\) = 1 m<sup>-1</sup> and \(T_0\) = 20 &deg;C.
97+
The code below shows how to use FEAScript with a Web Worker. The solution is plotted as a 2D contour.
11798
</p>
11899

119-
<h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with FEAScript</h2>
120-
<p>
121-
Below is a demonstration of how to use the FEAScript library to solve this stationary heat transfer
122-
problem in your web browser. You only need a simple HTML page to run this example where the following
123-
code snippets should be included. First, we should load the required external libraries:
124-
</p>
125100
<pre class="prettyprint">
126-
&lt;head&gt;
127-
. . .
128-
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.0/math.min.js">&lt;/script&gt;
129-
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.0/plotly.min.js">&lt;/script&gt;
130-
. . .
131-
&lt;/head&gt;</pre
132-
>
133-
<p>
134-
We should then define the problem parameters, such as the solver type, the geometry configuration, and
135-
the boundary conditions. This is performed using JavaScript objects directly in the HTML file:
136-
</p>
137-
<pre class="prettyprint">
138-
&lt;body&gt;
139-
. . .
140-
&lt;script type="module"&gt;
141-
// Import the FEAScript library
142-
import { FEAWorkerScript, plotSolution, printVersion } from "https://feascript.github.io/FEAScript-core/src/index.js";
143-
window.addEventListener("DOMContentLoaded", async (event) => {
144-
145-
// Print FEAScript version
146-
printVersion();
147-
148-
// Create a new FEAWorkerScript instance
149-
const model = new FEAWorkerScript();
150-
151-
// Ensure the worker is ready
152-
await model.ping();
153-
154-
// Set solver configuration
155-
await model.setSolverConfig("solidHeatTransferScript");
156-
157-
// Define mesh configuration
158-
await model.setMeshConfig({
159-
meshDimension: "2D",
160-
elementOrder: "quadratic",
161-
numElementsX: 8,
162-
numElementsY: 4,
163-
maxX: 4,
164-
maxY: 2,
165-
});
166-
167-
// Define boundary conditions
168-
await model.addBoundaryCondition("0", ["constantTemp", 200]);
169-
await model.addBoundaryCondition("1", ["symmetry"]);
170-
await model.addBoundaryCondition("2", ["convection", 1, 20]);
171-
await model.addBoundaryCondition("3", ["constantTemp", 200]);
172-
173-
// Set solver method
174-
await model.setSolverMethod("lusolve");
175-
176-
// Solve the problem and get the solution
177-
const { solutionVector, nodesCoordinates } = await model.solve();
178-
179-
// Plot the solution as a 2D contour plot
180-
plotSolution(
181-
solutionVector,
182-
nodesCoordinates,
183-
"solidHeatTransferScript",
184-
"2D",
185-
"contour",
186-
"solutionPlot"
187-
);
188-
189-
// Terminate the worker
190-
model.terminate();
191-
192-
});
193-
&lt;/script&gt;
194-
. . .
195-
&lt;/body&gt;</pre
196-
>
197-
<p>
198-
In the boundary condition definition, the numbers at the left side (from 0 to 3) indicate the boundaries
199-
of the geometry (the mesh generator of FEAScript has assigned numbers to the boundaries, starting from
200-
the bottom boundary and proceeding clockwise). The `constantTemp` condition sets a constant temperature
201-
value. The `symmetry` boundary condition represents a zero-flux type. Finally, the `convection`
202-
condition describes a convective heat transfer scenario. In addition, the second argument of the
203-
`constantTemp` boundary condition corresponds to the constant temperature value. For a `convection`
204-
boundary condition, the second argument represents the \({\frac{h}{k}}\) value, and the third argument
205-
indicates the external temperature \(T_0\).
206-
</p>
207-
<p>
208-
After solving the case, the results are demonstrated in a 2D contour plot. To visualize it, include an
209-
HTML container where the plot will render:
210-
</p>
211-
<pre class="prettyprint">
212-
&lt;body&gt;
213-
. . .
214-
&lt;div id="solutionPlot">&lt;/div&gt;
215-
. . .
216-
&lt;/body&gt;</pre
217-
>
218-
<p>
219-
The `solutionPlot` is the id of the div where the plot will be rendered. This id is passed as an
220-
argument to the plotSolution function to specify the target div for the plot.
221-
</p>
222-
223-
<h2 id="results"><a name="Results"></a>Results</h2>
224-
<p>
225-
Below is the 2D contour plot of the computed temperature distribution. This plot is generated in real
226-
time using FEAScript. You can find a minimal example of this tutorial in the
227-
<a
228-
href="https://github.com/FEAScript/FEAScript-core/tree/main/examples/solidHeatTransferScript/HeatConduction2DFin"
229-
target="_blank"
230-
>example directory</a
231-
>.
232-
</p>
233-
234-
<!-- Container element where the solution plot will be rendered -->
101+
&lt;script type="module"&gt;
102+
import { FEAWorkerScript, plotSolution, printVersion } from "https://feascript.github.io/FEAScript-core/src/index.js";
103+
window.addEventListener("DOMContentLoaded", async () =&gt; {
104+
// Print FEAScript version
105+
printVersion();
106+
107+
// Create a new FEAWorkerScript instance
108+
const model = new FEAWorkerScript();
109+
110+
// Ensure the worker is ready
111+
await model.ping();
112+
113+
// Set solver configuration
114+
await model.setSolverConfig("solidHeatTransferScript");
115+
116+
// Define mesh configuration
117+
await model.setMeshConfig({
118+
meshDimension: "2D",
119+
elementOrder: "quadratic",
120+
numElementsX: 8,
121+
numElementsY: 4,
122+
maxX: 4,
123+
maxY: 2,
124+
});
125+
126+
// Define boundary conditions
127+
await model.addBoundaryCondition("0", ["constantTemp", 200]);
128+
await model.addBoundaryCondition("1", ["symmetry"]);
129+
await model.addBoundaryCondition("2", ["convection", 1, 20]);
130+
await model.addBoundaryCondition("3", ["constantTemp", 200]);
131+
132+
// Set solver method
133+
await model.setSolverMethod("lusolve");
134+
135+
// Solve the problem and get the solution
136+
const { solutionVector, nodesCoordinates } = await model.solve();
137+
138+
// Plot the solution as a 2D contour plot
139+
plotSolution(
140+
solutionVector,
141+
nodesCoordinates,
142+
"solidHeatTransferScript",
143+
"2D",
144+
"contour",
145+
"solutionPlot"
146+
);
147+
148+
// Terminate the worker
149+
model.terminate();
150+
});
151+
&lt;/script&gt;
152+
</pre>
153+
154+
<h2>Results</h2>
235155
<div id="orientation-message">
236156
Cannot draw the results. Please turn your phone to horizontal position to see the results.
237157
</div>
@@ -244,15 +164,11 @@ <h2 id="results"><a name="Results"></a>Results</h2>
244164
</ul>
245165

246166
<script type="module">
247-
//Import FEAScript library from GitHub
248167
import {
249168
FEAWorkerScript,
250169
plotSolution,
251170
printVersion,
252171
} from "https://feascript.github.io/FEAScript-core/src/index.js";
253-
//Import FEAScript library from a local directory
254-
//import { FEAWorkerScript, plotSolution, printVersion } from "../../FEAScript-core/src/index.js";
255-
256172
window.addEventListener("DOMContentLoaded", async () => {
257173
if (window.innerHeight > window.innerWidth) {
258174
document.getElementById("orientation-message").style.display = "block";

0 commit comments

Comments
 (0)