Skip to content

Commit a0ddec5

Browse files
nikoschamnikoscham
committed
Update HeatConduction2DFinGmsh.html title and content; add GMSH version to README; create HeatConduction2DFinWorker.html for worker-based implementation
1 parent e036947 commit a0ddec5

File tree

3 files changed

+191
-123
lines changed

3 files changed

+191
-123
lines changed

‎examples/solidHeatTransferScript/HeatConduction2DFin/HeatConduction2DFinGmsh.html‎

Lines changed: 44 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<head>
1515
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1616
<meta name="viewport" content="width=device-width" />
17-
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Example (Experimental)</title>
17+
<title>FEAScript: GMSH File Import Example</title>
1818

1919
<!-- Math.js and Plotly.js libraries -->
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.0/math.min.js"></script>
@@ -26,33 +26,6 @@
2626

2727
<!-- Custom layout styles -->
2828
<style>
29-
.container {
30-
display: flex;
31-
flex-wrap: wrap;
32-
}
33-
34-
.column {
35-
flex: 1 1 100%;
36-
padding: 20px;
37-
box-sizing: border-box;
38-
}
39-
40-
@media (min-width: 768px) {
41-
.column {
42-
flex: 1 1 50%;
43-
}
44-
}
45-
46-
#solutionPlot {
47-
width: 100%;
48-
max-width: 800px;
49-
height: 500px;
50-
}
51-
52-
#inputForm {
53-
margin-top: 20px;
54-
}
55-
5629
#resultOutput {
5730
height: 500px;
5831
margin-top: 10px;
@@ -61,6 +34,7 @@
6134
overflow: auto;
6235
border: 1px solid #ccc;
6336
white-space: pre-wrap;
37+
font-family: monospace;
6438
}
6539

6640
.experimental-badge {
@@ -77,49 +51,50 @@
7751
font-size: 0.5em;
7852
vertical-align: middle;
7953
}
54+
55+
#inputForm {
56+
margin: 20px 0;
57+
}
58+
59+
.file-input-container {
60+
margin: 20px 0;
61+
}
8062
</style>
8163
</head>
8264

8365
<body>
84-
<h1>Heat Conduction in a Two-Dimensional Fin Example <span class="experimental-badge">EXPERIMENTAL</span></h1>
85-
86-
<div class="container">
87-
<!-- Left Column: Simulation Content -->
88-
<div class="column">
89-
<h2>Worker-Based Simulation</h2>
90-
<div id="solutionPlot"></div>
91-
92-
<p>
93-
This is an experimental version using FEAWorkerScript and a larger mesh (36x18).
94-
The worker-based implementation enables better performance for larger simulations.
95-
Please refresh the page to update the results. If you need assistance, you can visit the
96-
<a href="https://feascript.com/" target="_blank">FEAScript website</a>.
97-
</p>
98-
99-
<p>
100-
<a href="HeatConduction2DFin.html">View Standard Example</a>
101-
</p>
66+
<h1>GMSH File Import Tool <span class="experimental-badge">EXPERIMENTAL</span></h1>
10267

103-
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
104-
</div>
68+
<div class="highlight-container">
69+
<p>
70+
This is an experimental example for solving the two-dimensional fin case using mesh generated by <a href="https://gmsh.info/" target="_blank">GMSH</a> (.msh) files. GMSH is a powerful mesh generation tool
71+
that can create complex geometries and meshes for finite element analysis. Upload a GMSH (.msh) file using the form below. The parsed data will be displayed in JSON format.
72+
</p>
73+
</div>
10574

106-
<!-- Right Column: File Upload & Output -->
107-
<div class="column">
108-
<h2>GMSH File Import <span class="experimental-badge">BETA</span></h2>
109-
<form id="inputForm">
110-
<label for="inputFile">Choose a .msh file:</label>
111-
<input
112-
type="file"
113-
id="inputFile"
114-
name="inputFile"
115-
accept=".msh"
116-
required
117-
/>
118-
</form>
119-
<div id="resultOutput">No file uploaded yet. Please select a GMSH (.msh) file.</div>
120-
</div>
75+
<ul id="menu">
76+
<li>
77+
<a href="HeatConduction2DFin.html">Return to Standard Example</a>
78+
</li>
79+
</ul>
80+
81+
<div class="file-input-container">
82+
<form id="inputForm">
83+
<label for="inputFile">Choose a .msh file:</label>
84+
<input
85+
type="file"
86+
id="inputFile"
87+
name="inputFile"
88+
accept=".msh"
89+
required
90+
/>
91+
</form>
12192
</div>
93+
94+
<h3>Parsed GMSH Data:</h3>
95+
<div id="resultOutput">No file uploaded yet. Please select a GMSH (.msh) file.</div>
12296

97+
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
12398
<script>
12499
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
125100
</script>
@@ -143,67 +118,14 @@ <h2>GMSH File Import <span class="experimental-badge">BETA</span></h2>
143118
});
144119
</script>
145120

146-
<!-- Worker-Based Simulation Script -->
121+
<!-- Import FEAScript utilities -->
147122
<script type="module">
148-
import {
149-
FEAWorkerScript,
150-
plotSolution,
151-
printVersion
152-
} from "https://core.feascript.com/src/index.js";
123+
import { printVersion } from "https://core.feascript.com/src/index.js";
153124

154-
window.addEventListener("DOMContentLoaded", async () => {
155-
try {
156-
// Print FEAScript version in the console
157-
printVersion();
158-
159-
// Create a new FEAScript model
160-
const model = new FEAWorkerScript();
161-
162-
// Ensure the worker is ready
163-
await model.ping();
164-
165-
// Set solver configuration
166-
await model.setSolverConfig("solidHeatTransferScript");
167-
168-
// Define mesh configuration
169-
await model.setMeshConfig({
170-
meshDimension: "2D",
171-
elementOrder: "quadratic",
172-
numElementsX: 36,
173-
numElementsY: 18,
174-
maxX: 125,
175-
maxY: 50,
176-
});
177-
178-
// Define boundary conditions
179-
await model.addBoundaryCondition("0", ["constantTemp", 200]);
180-
await model.addBoundaryCondition("1", ["symmetry"]);
181-
await model.addBoundaryCondition("2", ["convection", 1, 20]);
182-
await model.addBoundaryCondition("3", ["constantTemp", 200]);
183-
184-
// Set solver method (optional) - 'lusolve' uses LU decomposition
185-
await model.setSolverMethod("lusolve");
186-
187-
// Solve the problem and get the solution
188-
const { solutionVector, nodesCoordinates } = await model.solve();
189-
190-
// Plot the solution as a 2D contour plot
191-
plotSolution(
192-
solutionVector,
193-
nodesCoordinates,
194-
"solidHeatTransferScript",
195-
"2D",
196-
"contour",
197-
"solutionPlot"
198-
);
199-
200-
// Terminate the worker when done
201-
model.terminate();
202-
} catch (error) {
203-
console.error("Error in experimental features:", error);
204-
document.getElementById("solutionPlot").innerHTML =
205-
`<div style="color: red; padding: 20px;">Error running simulation: ${error.message}</div>`;
206-
}
125+
window.addEventListener("DOMContentLoaded", () => {
126+
// Print FEAScript version in the console
127+
printVersion();
128+
console.log("GMSH Import Tool loaded successfully");
207129
});
208130
</script>
209131
</body>

‎examples/solidHeatTransferScript/HeatConduction2DFin/HeatConduction2DFinWorker.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
3+
<!-- ______ ______ _____ _ _ -->
4+
<!-- | ____| ____| /\ / ____| (_) | | -->
5+
<!-- | |__ | |__ / \ | (___ ___ ____ _ ____ | |_ -->
6+
<!-- | __| | __| / /\ \ \___ \ / __| __| | _ \| __| -->
7+
<!-- | | | |____ / ____ \ ____) | (__| | | | |_) | | -->
8+
<!-- |_| |______/_/ \_\_____/ \___|_| |_| __/| | -->
9+
<!-- | | | | -->
10+
<!-- |_| | |_ -->
11+
<!-- Website: https://feascript.com/ \__| -->
12+
13+
<html lang="en">
14+
<head>
15+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
16+
<meta name="viewport" content="width=device-width" />
17+
<title>FEAScript: Heat Conduction in a Two-Dimensional Fin Example (Worker)</title>
18+
19+
<!-- Math.js and Plotly.js libraries -->
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.0/math.min.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.0/plotly.min.js"></script>
22+
23+
<!-- Link to the CSS files -->
24+
<link href="https://feascript.com/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+
27+
<style>
28+
#loading {
29+
display: none;
30+
margin-top: 20px;
31+
text-align: center;
32+
font-weight: bold;
33+
}
34+
.spinner {
35+
display: inline-block;
36+
width: 20px;
37+
height: 20px;
38+
border: 3px solid rgba(0,0,0,.3);
39+
border-radius: 50%;
40+
border-top-color: #000;
41+
animation: spin 1s ease-in-out infinite;
42+
margin-right: 10px;
43+
}
44+
@keyframes spin {
45+
to { transform: rotate(360deg); }
46+
}
47+
</style>
48+
</head>
49+
50+
<body>
51+
<h1>Heat Conduction in a Two-Dimensional Fin Example (Worker)</h1>
52+
<div id="solutionPlot"></div>
53+
<div id="loading"><div class="spinner"></div>Solving...</div>
54+
55+
<p>
56+
This is a worker-based implementation of the heat conduction in a two-dimensional fin example using a larger mesh (18x9). This implementation enables better performance for larger simulations.
57+
The mesh configuration and boundary conditions are defined directly within the JavaScript code. Detailed instructions for this example can be
58+
found in the corresponding
59+
<a href="https://feascript.com/tutorials/HeatConduction2DFinWorker.html" target="_blank">FEAScript tutorial</a>.
60+
If you need further assistance, you can visit the
61+
<a href="https://feascript.com/" target="_blank">FEAScript website</a>.
62+
</p>
63+
64+
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
65+
<script>
66+
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
67+
</script>
68+
69+
<!-- Import FEAScript library -->
70+
<script type="module">
71+
import {
72+
FEAWorkerScript,
73+
plotSolution,
74+
printVersion,
75+
} from "https://core.feascript.com/src/index.js";
76+
77+
window.addEventListener("DOMContentLoaded", async () => {
78+
// Print FEAScript version in the console
79+
printVersion();
80+
81+
// Show loading indicator
82+
document.getElementById("loading").style.display = "block";
83+
84+
try {
85+
// Create a new FEAWorkerScript instance
86+
const model = new FEAWorkerScript();
87+
88+
// Ensure the worker is ready
89+
await model.ping();
90+
91+
// Set solver configuration
92+
await model.setSolverConfig("solidHeatTransferScript");
93+
94+
// Define mesh configuration - using larger mesh
95+
await model.setMeshConfig({
96+
meshDimension: "2D",
97+
elementOrder: "quadratic",
98+
numElementsX: 18,
99+
numElementsY: 9,
100+
maxX: 4,
101+
maxY: 2,
102+
});
103+
104+
// Define boundary conditions
105+
await model.addBoundaryCondition("0", ["constantTemp", 200]);
106+
await model.addBoundaryCondition("1", ["symmetry"]);
107+
await model.addBoundaryCondition("2", ["convection", 1, 20]);
108+
await model.addBoundaryCondition("3", ["constantTemp", 200]);
109+
110+
// Set solver method - 'lusolve' uses LU decomposition
111+
await model.setSolverMethod("lusolve");
112+
113+
// Solve the problem and get the solution
114+
const { solutionVector, nodesCoordinates } = await model.solve();
115+
116+
// Hide loading indicator
117+
document.getElementById("loading").style.display = "none";
118+
119+
// Plot the solution as a 2D contour plot
120+
plotSolution(
121+
solutionVector,
122+
nodesCoordinates,
123+
"solidHeatTransferScript",
124+
"2D",
125+
"contour",
126+
"solutionPlot"
127+
);
128+
129+
// Terminate the worker when done
130+
model.terminate();
131+
} catch (error) {
132+
console.error("Error in FEAScript calculation:", error);
133+
document.getElementById("loading").textContent = "Error: " + error.message;
134+
}
135+
});
136+
</script>
137+
</body>
138+
</html>

‎examples/solidHeatTransferScript/HeatConduction2DFin/README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@
44

55
This example demonstrates solving a steady-state heat transfer problem in a 2D rectangular domain using the FEAScript library. The problem represents a typical cooling fin scenario, where the objective is to model heat conduction and understand temperature distribution under specific boundary conditions.
66

7+
### Available Versions
8+
9+
This example is available in three implementations:
10+
11+
1. **Standard Version** (`HeatConduction2DFin.html`) - Basic implementation using the FEAScriptModel class
12+
2. **Web Worker Version** (`HeatConduction2DFinWorker.html`) - Implementation using Web Workers for better performance with larger models
13+
3. **GMSH Version** (`HeatConduction2DFinGmsh.html`) - Experimental version supporting GMSH mesh file import
14+
715
### Instructions
816

9-
The mesh configuration and boundary conditions are defined directly in the JavaScript section of the HTML file. For a step-by-step guide and additional details, refer to the corresponding [tutorial](https://feascript.com/tutorials/HeatConduction2DFin.html).
17+
The mesh configuration and boundary conditions are defined directly in the JavaScript section of the HTML files. For a step-by-step guide and additional details, refer to the corresponding [tutorial](https://feascript.com/tutorials/HeatConduction2DFin.html) or the [Web Worker tutorial](https://feascript.com/tutorials/HeatConduction2DFinWorker.html).

0 commit comments

Comments
 (0)