Skip to content

Commit 23a3445

Browse files
nikoschamnikoscham
committed
Refactor Heat Conduction 2D Fin example to improve UI elements
1 parent 4532b2b commit 23a3445

File tree

1 file changed

+165
-45
lines changed

1 file changed

+165
-45
lines changed

‎examples/heatConductionScript/heatConduction2DFin/HeatConduction2DFinWebgpu.html‎

Lines changed: 165 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,165 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Heat Conduction 2D Fin - GPU Jacobi Solver</title>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.0/math.min.js"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.0/plotly.min.js"></script>
10-
<style>
11-
body {
12-
font-family: Arial, sans-serif;
13-
max-width: 1200px;
14-
margin: 0 auto;
15-
padding: 20px;
16-
}
17-
18-
.result {
19-
background-color: #f5f5f5;
20-
padding: 10px;
21-
margin: 10px 0;
22-
border-radius: 3px;
23-
}
24-
25-
.success {
26-
color: green;
27-
}
28-
29-
.error {
30-
color: red;
31-
}
32-
</style>
5+
<title>FEAScript: Heat Conduction in a 2D Fin (WebGPU)</title>
6+
<link rel="icon" type="image/x-icon" href="../../../../FEAScript-website/assets/favicon.ico" />
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8+
<meta name="description"
9+
content="This example demonstrates solving a steady-state heat transfer problem using the FEAScript library with WebGPU for accelerated computation." />
10+
<meta name="keywords"
11+
content="finite elements, fem, galerkin, computational mechanics, javascript, webgpu, 2D heat transfer" />
12+
<meta name="viewport" content="width=device-width" />
13+
<!-- Link to the CSS files -->
14+
<link href="../../../../FEAScript-website/feascript-website.css" rel="stylesheet" type="text/css" />
15+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
16+
<!-- Import the Plotly.js library for plotting -->
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
18+
<!-- Import MathJax for writing equations -->
19+
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
20+
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
21+
<!-- Import the run_prettify.js library for JavaScript code coloring -->
22+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
3323
</head>
3424

3525
<body>
36-
<h1>Heat Conduction in 2D Fin - GPU Jacobi Solver</h1>
37-
<div id="solutionPlot"></div>
38-
<div id="result" class="result"></div>
26+
<h1 class="top">
27+
<a href="../../../../FEAScript-website/index.html">
28+
<img src="../../../../FEAScript-website/assets/feascript-logo.png" alt="FEAScript Logo" id="responsive-logo"
29+
style="vertical-align: middle" />
30+
</a>
31+
<div class="social-icons-top-right">
32+
<ul>
33+
<li>
34+
<a href="https://blog.feascript.com/" title="FEAScript blog">
35+
<img src="../../../../FEAScript-website/assets/blog-icon-feascript.png" alt="Blog icon"
36+
style="height: 18px; vertical-align: middle" />
37+
</a>
38+
</li>
39+
<li>
40+
<a href="https://www.youtube.com/@FEAScript" title="FEAScript YouTube">
41+
<img src="../../../../FEAScript-website/assets/youtube-icon-feascript.svg" alt="YouTube icon"
42+
style="height: 18px; vertical-align: middle" />
43+
</a>
44+
</li>
45+
<li>
46+
<a href="https://www.linkedin.com/company/feascript/" title="FEAScript LinkedIn">
47+
<img src="../../../../FEAScript-website/assets/linkedin-icon-feascript.png" alt="LinkedIn icon"
48+
style="height: 18px; vertical-align: middle" />
49+
</a>
50+
</li>
51+
<li>
52+
<a href="https://discord.gg/3DVjNcuW4f" title="FEAScript Discord">
53+
<img src="../../../../FEAScript-website/assets/discord-icon-feascript.png" alt="Discord icon"
54+
style="height: 18px; vertical-align: middle" />
55+
</a>
56+
</li>
57+
<li>
58+
<a href="https://github.com/FEAScript/FEAScript-core" title="FEAScript GitHub">
59+
<img src="../../../../FEAScript-website/assets/github-icon-feascript.png" alt="GitHub icon"
60+
style="height: 20px; vertical-align: middle" />
61+
</a>
62+
</li>
63+
</ul>
64+
</div>
65+
</h1>
66+
<h1>Heat Conduction in a 2D Fin Tutorial (WebGPU)</h1>
67+
68+
<ul id="menu">
69+
<li><a href="#webgpuimplementation">WebGPU Implementation</a></li>
70+
<li><a href="#results">Results</a></li>
71+
</ul>
72+
73+
<div class="highlight-container">
74+
<p>
75+
This page demonstrates solving the 2D heat conduction fin problem using FEAScript with a WebGPU-accelerated
76+
Jacobi solver. For the mathematical formulation and theory, see the
77+
<a href="../../../../FEAScript-website/tutorials/heat-conduction-2d-fin.html">basic tutorial</a>.
78+
</p>
79+
<p>
80+
<strong>⚠️ Important:</strong> This feature is experimental and requires a browser that supports WebGPU.
81+
</p>
82+
</div>
83+
84+
<h2 id="webgpuimplementation">WebGPU Implementation</h2>
85+
<p>
86+
The code below shows how to use FEAScript with the WebGPU-accelerated Jacobi solver. The solution is plotted as
87+
a 2D contour.
88+
</p>
89+
90+
<pre class="prettyprint">
91+
&lt;script type="module"&gt;
92+
// Import FEAScript library
93+
import { FEAScriptModel, plotSolution } from "../../../src/index.js";
94+
95+
window.addEventListener("DOMContentLoaded", async () =&gt; {
96+
97+
// Create and configure model
98+
const model = new FEAScriptModel();
99+
model.setSolverConfig("heatConductionScript");
100+
model.setMeshConfig({
101+
meshDimension: "2D",
102+
elementOrder: "quadratic",
103+
numElementsX: 20,
104+
numElementsY: 10,
105+
maxX: 4,
106+
maxY: 2,
107+
});
108+
109+
// Apply boundary conditions
110+
model.addBoundaryCondition("0", ["constantTemp", 200]);
111+
model.addBoundaryCondition("1", ["symmetry"]);
112+
model.addBoundaryCondition("2", ["convection", 1, 20]);
113+
model.addBoundaryCondition("3", ["constantTemp", 200]);
114+
115+
// Set solver method to use the GPU-accelerated Jacobi solver
116+
model.setSolverMethod("jacobi-gpu");
117+
118+
// Solve
119+
const { solutionVector, nodesCoordinates } = await model.solveAsync({
120+
maxIterations: 10000,
121+
tolerance: 1e-3,
122+
});
123+
124+
// Plot results
125+
plotSolution(
126+
solutionVector,
127+
nodesCoordinates,
128+
"heatConductionScript",
129+
"2D",
130+
"contour",
131+
"resultsCanvas"
132+
);
133+
});
134+
&lt;/script&gt;</pre>
135+
136+
<h2 id="results">Results</h2>
137+
<p>
138+
Below is the 2D contour plot of the computed temperature distribution. This plot is generated in real time using
139+
FEAScript.
140+
</p>
141+
142+
<div id="loading">
143+
<div class="spinner"></div>
144+
Solving...
145+
</div>
146+
<div id="resultsCanvas"></div>
147+
<div id="timeDisplay" style="margin-top: 1em"></div>
148+
149+
<ul id="menu">
150+
<li><a href="../../../../FEAScript-website/index.html">Home</a></li>
151+
<li><a href="../../../../FEAScript-website/tutorials/heat-conduction-2d-fin.html">All Tutorials</a></li>
152+
</ul>
39153

40154
<script type="module">
41155
import { FEAScriptModel, plotSolution } from "../../../src/index.js";
42156

43157
window.addEventListener("DOMContentLoaded", async () => {
158+
const resultDiv = document.getElementById("loading");
159+
const timeDiv = document.getElementById("timeDisplay");
160+
resultDiv.style.display = "block";
161+
162+
const startTime = performance.now();
163+
44164
const model = new FEAScriptModel();
45165
model.setSolverConfig("heatConductionScript");
46166

@@ -49,44 +169,44 @@ <h1>Heat Conduction in 2D Fin - GPU Jacobi Solver</h1>
49169
elementOrder: "quadratic",
50170
numElementsX: 20,
51171
numElementsY: 10,
52-
maxX: 4000,
53-
maxY: 2000,
172+
maxX: 4,
173+
maxY: 2,
54174
});
55175

56176
model.addBoundaryCondition("0", ["constantTemp", 200]);
57177
model.addBoundaryCondition("1", ["symmetry"]);
58178
model.addBoundaryCondition("2", ["convection", 1, 20]);
59179
model.addBoundaryCondition("3", ["constantTemp", 200]);
60180

61-
const resultDiv = document.getElementById("result");
62-
resultDiv.innerHTML = "Assembling system and solving with GPU Jacobi...";
63-
64-
// GPU Jacobi; worker is managed internally by solveLinearSystemAsync
65181
model.setSolverMethod("jacobi-gpu");
66182

67-
// Keep the first arg undefined: the API still accepts an optional computeEngine
68183
const { solutionVector, nodesCoordinates } = await model.solveAsync({
69184
maxIterations: 10000,
70185
tolerance: 1e-3,
71186
});
72187

73-
const n = solutionVector.length;
74-
resultDiv.innerHTML = `
75-
<div>System size: ${n} x ${n}</div>
76-
<div>Solution computed with WebGPU Jacobi</div>
77-
<div class="success">SOLUTION COMPLETED</div>
78-
`;
188+
const endTime = performance.now();
189+
const solvingTime = ((endTime - startTime) / 1000).toFixed(3);
190+
timeDiv.innerHTML = `Solving time: ${solvingTime} seconds`;
191+
resultDiv.style.display = "none";
79192

80193
plotSolution(
81194
solutionVector,
82195
nodesCoordinates,
83196
model.solverConfig,
84197
model.meshConfig.meshDimension,
85198
"contour",
86-
"solutionPlot"
199+
"resultsCanvas"
87200
);
88201
});
89202
</script>
203+
204+
<footer>
205+
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
206+
</footer>
207+
<script>
208+
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
209+
</script>
90210
</body>
91211

92212
</html>

0 commit comments

Comments
 (0)