Skip to content

Commit 03d95c3

Browse files
nikoschamnikoscham
committed
Add new tutorial for Heat Flow Through a Wall and improve description in HeatConduction2DFin.html
1 parent 8d90476 commit 03d95c3

File tree

2 files changed

+238
-3
lines changed

2 files changed

+238
-3
lines changed

‎tutorials/HeatConduction2DFin.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ <h1>Heat Conduction in a Two-Dimensional Fin Tutorial</h1>
8383

8484
<div class="highlight-container">
8585
<p>
86-
In this tutorial, we address a stationary heat transfer problem within a 2D rectangular domain. This
87-
is a typical cooling fin problem. Cooling fins are commonly used to increase the area available for
88-
heat transfer between metal walls and poorly conducting fluids such as air.
86+
In this tutorial, we address a stationary heat transfer problem within a two-dimensional rectangular
87+
domain. This is a typical cooling fin problem. Cooling fins are commonly used to increase the area
88+
available for heat transfer between metal walls and poorly conducting fluids such as air.
8989
</p>
9090
</div>
9191

‎tutorials/HeatFlowThroughWall.html‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<!DOCTYPE html>
2+
3+
<!-- ______ ______ _____ _ _ -->
4+
<!-- | ____| ____| /\ / ____| (_) | | -->
5+
<!-- | |__ | |__ / \ | (___ ___ ____ _ ____ | |_ -->
6+
<!-- | __| | __| / /\ \ \___ \ / __| __| | _ \| __| -->
7+
<!-- | | | |____ / ____ \ ____) | (__| | | | |_) | | -->
8+
<!-- |_| |______/_/ \_\_____/ \___|_| |_| __/| | -->
9+
<!-- | | | | -->
10+
<!-- |_| | |_ -->
11+
<!-- Website: https://feascript.com/ \__| -->
12+
13+
<html>
14+
<head>
15+
<title>Heat Flow Through a Wall</title>
16+
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
17+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
18+
<meta
19+
name="keywords"
20+
content="finite elements, fem, galerkin, cfd, computational mechanics, javascript"
21+
/>
22+
<meta name="viewport" content="width=device-width" />
23+
<!-- Link to the CSS files -->
24+
<link href="../FEAScript-website.css" rel="stylesheet" type="text/css" />
25+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
26+
<!-- Import the Math.js library for mathematical operations -->
27+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.0/math.min.js"></script>
28+
<!-- Import the Plotly.js library for plotting -->
29+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.0/plotly.min.js"></script>
30+
<!-- Import MathJax for writing equations -->
31+
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
32+
<script
33+
id="MathJax-script"
34+
async
35+
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
36+
></script>
37+
<!-- Import the run_prettify.js library for JavaScript code coloring *** Deprecated library *** -->
38+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
39+
<style>
40+
#plot {
41+
width: 100%;
42+
max-width: 700px;
43+
margin: 0;
44+
}
45+
#orientation-message {
46+
display: none;
47+
color: red;
48+
font-weight: bold;
49+
}
50+
</style>
51+
</head>
52+
53+
<!-- Google tag (gtag.js) -->
54+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JPK0KLEC9"></script>
55+
<script>
56+
window.dataLayer = window.dataLayer || [];
57+
function gtag() {
58+
dataLayer.push(arguments);
59+
}
60+
gtag("js", new Date());
61+
62+
gtag("config", "G-1JPK0KLEC9");
63+
</script>
64+
65+
<body>
66+
<h1 class="top">
67+
<a href="../index.html">
68+
<img
69+
src="../assets/FEAScriptLogo.png"
70+
alt="FEAScript Logo"
71+
id="responsive-logo"
72+
style="vertical-align: middle"
73+
/>
74+
</a>
75+
</h1>
76+
<h1>Heat Flow Through a Wall</h1>
77+
78+
<ul id="menu">
79+
<li><a href="#mathematicalformulation">Mathematical Formulation</a></li>
80+
<li><a href="#solvingwithfeascript">Solving with FEAScript</a></li>
81+
<li><a href="#results">Results</a></li>
82+
</ul>
83+
84+
<div class="highlight-container">
85+
<p>
86+
In this tutorial, we study steady-state heat flow through a wall. We can simplify this problem to one
87+
dimension considering that the wall's width and height are much larger than its thickness, and the
88+
temperature varies only across the thickness direction.
89+
</p>
90+
</div>
91+
92+
<h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathematical Formulation</h2>
93+
<p>
94+
<!-- ... -->
95+
</p>
96+
97+
<h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with FEAScript</h2>
98+
<p>
99+
<!-- ... -->
100+
</p>
101+
102+
<h2 id="results"><a name="Results"></a>Results</h2>
103+
<p>
104+
<!-- ... -->
105+
</p>
106+
107+
<!-- Container element where the solution plot will be rendered -->
108+
<div id="orientation-message">
109+
Cannot draw the results. Please turn your phone to horizontal position to see the results.
110+
</div>
111+
<div id="solutionPlot"></div>
112+
113+
<ul id="menu">
114+
<li>
115+
<a href="https://feascript.com/index.html" target="_blank">Return</a>
116+
</li>
117+
</ul>
118+
119+
<script type="module">
120+
//Import FEAScript library from GitHub
121+
import {
122+
FEAScriptModel,
123+
plotSolution,
124+
printVersion,
125+
} from "https://feascript.github.io/FEAScript-core/src/index.js";
126+
//Import FEAScript library from a local directory
127+
//import { FEAScriptModel, plotSolution, printVersion } from "../../FEAScript-core/src/index.js";
128+
129+
window.addEventListener("DOMContentLoaded", () => {
130+
if (window.innerHeight > window.innerWidth) {
131+
document.getElementById("orientation-message").style.display = "block";
132+
document.getElementById("solutionPlot").style.display = "none";
133+
} else {
134+
document.getElementById("orientation-message").style.display = "none";
135+
document.getElementById("solutionPlot").style.display = "block";
136+
137+
// Print FEAScript version
138+
printVersion();
139+
140+
// Create a new FEAScript model
141+
const model = new FEAScriptModel();
142+
143+
// Set solver configuration
144+
model.setSolverConfig("solidHeatTransferScript");
145+
146+
// Set solver method
147+
model.setSolverMethod("lusolve");
148+
149+
// Define mesh configuration
150+
model.setMeshConfig({
151+
meshDimension: "1D",
152+
elementOrder: "linear",
153+
numElementsX: 10,
154+
maxX: 1,
155+
});
156+
157+
// Define boundary conditions
158+
model.addBoundaryCondition("0", ["constantTemp", 100]);
159+
model.addBoundaryCondition("1", ["constantTemp", 50]);
160+
161+
// Set solver method (optional) - 'lusolve' uses LU decomposition
162+
model.setSolverMethod("lusolve");
163+
164+
// Solve the problem and get the solution
165+
const { solutionVector, nodesCoordinates } = model.solve();
166+
167+
// Plot the solution as a 1D line plot
168+
plotSolution(
169+
solutionVector,
170+
nodesCoordinates,
171+
model.solverConfig,
172+
model.meshConfig.meshDimension,
173+
"line",
174+
"solutionPlot"
175+
);
176+
}
177+
});
178+
179+
window.addEventListener("resize", () => {
180+
if (window.innerHeight > window.innerWidth) {
181+
document.getElementById("orientation-message").style.display = "block";
182+
document.getElementById("solutionPlot").style.display = "none";
183+
} else {
184+
document.getElementById("orientation-message").style.display = "none";
185+
document.getElementById("solutionPlot").style.display = "block";
186+
187+
// Print FEAScript version
188+
printVersion();
189+
190+
// Create a new FEAScript model
191+
const model = new FEAScriptModel();
192+
193+
// Set solver configuration
194+
model.setSolverConfig("solidHeatTransferScript");
195+
196+
// Set solver method
197+
model.setSolverMethod("lusolve");
198+
199+
// Define mesh configuration
200+
model.setMeshConfig({
201+
meshDimension: "1D",
202+
elementOrder: "linear",
203+
numElementsX: 10,
204+
maxX: 1,
205+
});
206+
207+
// Define boundary conditions
208+
model.addBoundaryCondition("0", ["constantTemp", 100]);
209+
model.addBoundaryCondition("1", ["constantTemp", 50]);
210+
211+
// Set solver method (optional) - 'lusolve' uses LU decomposition
212+
model.setSolverMethod("lusolve");
213+
214+
// Solve the problem and get the solution
215+
const { solutionVector, nodesCoordinates } = model.solve();
216+
217+
// Plot the solution as a 1D line plot
218+
plotSolution(
219+
solutionVector,
220+
nodesCoordinates,
221+
model.solverConfig,
222+
model.meshConfig.meshDimension,
223+
"line",
224+
"solutionPlot"
225+
);
226+
}
227+
});
228+
</script>
229+
230+
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
231+
<script>
232+
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
233+
</script>
234+
</body>
235+
</html>

0 commit comments

Comments
 (0)