Skip to content

Commit 6104cc8

Browse files
nikoschamnikoscham
committed
Add the experimental GMSH file import functionality in HeatConduction2DFinGmsh.html. Restore the standard example HeatConduction2DFin.html
1 parent c6c8815 commit 6104cc8

File tree

2 files changed

+237
-119
lines changed

2 files changed

+237
-119
lines changed

‎examples/solidHeatTransferScript/HeatConduction2DFin/HeatConduction2DFin.html‎

Lines changed: 26 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -21,135 +21,42 @@
2121
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.0/plotly.min.js"></script>
2222

2323
<!-- Link to the CSS files -->
24-
<link
25-
href="https://feascript.com/FEAScript-website.css"
26-
rel="stylesheet"
27-
type="text/css"
28-
/>
29-
<link
30-
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
31-
rel="stylesheet"
32-
/>
33-
34-
<!-- Custom layout styles -->
35-
<style>
36-
.container {
37-
display: flex;
38-
flex-wrap: wrap;
39-
}
40-
41-
.column {
42-
flex: 1 1 100%;
43-
padding: 20px;
44-
box-sizing: border-box;
45-
}
46-
47-
@media (min-width: 768px) {
48-
.column {
49-
flex: 1 1 50%;
50-
}
51-
}
52-
#solutionPlot {
53-
width: 50%;
54-
max-width: 100%;
55-
min-height: 100px;
56-
box-sizing: border-box;
57-
}
58-
59-
#inputForm {
60-
margin-top: 20px;
61-
}
62-
#resultOutput {
63-
height: 70vh;
64-
margin-top: 10px;
65-
padding: 10px;
66-
background: #f0f0f0;
67-
overflow: auto;
68-
border: 1px solid #ccc;
69-
white-space: pre-wrap;
70-
}
71-
</style>
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" />
7226
</head>
7327

7428
<body>
75-
<div class="container">
76-
<!-- Left Column: Simulation Content -->
77-
<div class="column">
78-
<h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
79-
<div id="solutionPlot"></div>
80-
81-
<p>
82-
The mesh configuration and boundary conditions are defined directly
83-
within the JavaScript code in this example. Please refresh the page to
84-
update the results. Detailed instructions for this example can be
85-
found in the corresponding
86-
<a
87-
href="https://feascript.com/tutorials/HeatConduction2DFin.html"
88-
target="_blank"
89-
>FEAScript tutorial</a
90-
>. If you need further assistance, you can visit the
91-
<a href="https://feascript.com/" target="_blank">FEAScript website</a
92-
>.
93-
</p>
94-
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
95-
</div>
96-
97-
<!-- Right Column: File Upload & Output -->
98-
<div class="column">
99-
<h2>Upload Input File</h2>
100-
<form id="inputForm">
101-
<label for="inputFile">Choose a file:</label>
102-
<input
103-
type="file"
104-
id="inputFile"
105-
name="inputFile"
106-
accept=".msh"
107-
required
108-
/>
109-
</form>
110-
<div id="resultOutput">No file uploaded.</div>
111-
</div>
112-
</div>
113-
114-
<script type="module">
115-
import { importGmshQuadTri } from "../../../src/readers/gmshQuadReader.js";
116-
document.getElementById("currentYear").innerHTML =
117-
new Date().getFullYear();
118-
119-
document
120-
.getElementById("inputFile")
121-
.addEventListener("change", function (e) {
122-
const file = e.target.files[0];
123-
if (!file) return;
124-
handleFileUpload(file);
125-
});
126-
127-
async function handleFileUpload(file) {
128-
const res = await importGmshQuadTri(file);
129-
console.log(res);
130-
document.getElementById("resultOutput").innerHTML = JSON.stringify(
131-
res,
132-
null,
133-
2
134-
);
135-
}
29+
<h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
30+
<div id="solutionPlot"></div>
31+
32+
<p>
33+
The mesh configuration and boundary conditions are defined directly within the JavaScript code in this
34+
example. Please refresh the page to update the results. Detailed instructions for this example can be
35+
found in the corresponding
36+
<a href="https://feascript.com/tutorials/HeatConduction2DFin.html" target="_blank">FEAScript tutorial</a
37+
>. If you need further assistance, you can visit the
38+
<a href="https://feascript.com/" target="_blank">FEAScript website</a>.
39+
</p>
40+
41+
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
42+
<script>
43+
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
13644
</script>
13745

46+
<!-- Import FEAScript library -->
13847
<script type="module">
13948
import {
14049
FEAScriptModel,
14150
plotSolution,
14251
printVersion,
14352
} from "https://feascript.github.io/FEAScript-core/src/index.js";
14453

145-
import { FEAWorkerScript } from "../../../src/FEAWorkerScript.js";
146-
147-
window.addEventListener("DOMContentLoaded", async () => {
54+
window.addEventListener("DOMContentLoaded", () => {
14855
// Print FEAScript version in the console
14956
printVersion();
15057

15158
// Create a new FEAScript model
152-
const model = new FEAWorkerScript();
59+
const model = new FEAScriptModel();
15360

15461
// Set solver configuration
15562
model.setSolverConfig("solidHeatTransferScript");
@@ -158,10 +65,10 @@ <h2>Upload Input File</h2>
15865
model.setMeshConfig({
15966
meshDimension: "2D",
16067
elementOrder: "quadratic",
161-
numElementsX: 36,
162-
numElementsY: 18,
163-
maxX: 125,
164-
maxY: 50,
68+
numElementsX: 8,
69+
numElementsY: 4,
70+
maxX: 4,
71+
maxY: 2,
16572
});
16673

16774
// Define boundary conditions
@@ -174,14 +81,14 @@ <h2>Upload Input File</h2>
17481
model.setSolverMethod("lusolve");
17582

17683
// Solve the problem and get the solution
177-
const { solutionVector, nodesCoordinates } = await model.solve();
84+
const { solutionVector, nodesCoordinates } = model.solve();
17885

17986
// Plot the solution as a 2D contour plot
18087
plotSolution(
18188
solutionVector,
18289
nodesCoordinates,
18390
model.solverConfig,
184-
"2D",
91+
model.meshConfig.meshDimension,
18592
"contour",
18693
"solutionPlot"
18794
);

‎examples/solidHeatTransferScript/HeatConduction2DFin/HeatConduction2DFinGmsh.html‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
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 (Experimental)</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+
<!-- Custom layout styles -->
28+
<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+
56+
#resultOutput {
57+
height: 500px;
58+
margin-top: 10px;
59+
padding: 10px;
60+
background: #f0f0f0;
61+
overflow: auto;
62+
border: 1px solid #ccc;
63+
white-space: pre-wrap;
64+
}
65+
66+
.experimental-badge {
67+
background-color: #ff4500;
68+
color: white;
69+
padding: 3px 8px;
70+
border-radius: 3px;
71+
font-size: 0.8em;
72+
margin-left: 10px;
73+
vertical-align: middle;
74+
}
75+
76+
h1 .experimental-badge {
77+
font-size: 0.5em;
78+
vertical-align: middle;
79+
}
80+
</style>
81+
</head>
82+
83+
<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>
102+
103+
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
104+
</div>
105+
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>
121+
</div>
122+
123+
<script>
124+
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
125+
</script>
126+
127+
<!-- GMSH File Import Script -->
128+
<script type="module">
129+
import { importGmshQuadTri } from "../../../src/readers/gmshQuadReader.js";
130+
131+
document.getElementById("inputFile").addEventListener("change", async function (e) {
132+
const file = e.target.files[0];
133+
if (!file) return;
134+
135+
try {
136+
document.getElementById("resultOutput").innerHTML = "Processing file...";
137+
const res = await importGmshQuadTri(file);
138+
console.log(res);
139+
document.getElementById("resultOutput").innerHTML = JSON.stringify(res, null, 2);
140+
} catch (error) {
141+
document.getElementById("resultOutput").innerHTML = `Error processing file: ${error.message}`;
142+
}
143+
});
144+
</script>
145+
146+
<!-- Worker-Based Simulation Script -->
147+
<script type="module">
148+
import {
149+
plotSolution,
150+
printVersion
151+
} from "https://feascript.github.io/FEAScript-core/src/index.js";
152+
153+
import { FEAWorkerScript } from "../../../src/FEAWorkerScript.js";
154+
155+
window.addEventListener("DOMContentLoaded", async () => {
156+
try {
157+
// Print FEAScript version in the console
158+
printVersion();
159+
160+
// Create a new FEAScript model
161+
const model = new FEAWorkerScript();
162+
163+
// Ensure the worker is ready
164+
await model.ping();
165+
166+
// Set solver configuration
167+
await model.setSolverConfig("solidHeatTransferScript");
168+
169+
// Define mesh configuration
170+
await model.setMeshConfig({
171+
meshDimension: "2D",
172+
elementOrder: "quadratic",
173+
numElementsX: 36,
174+
numElementsY: 18,
175+
maxX: 125,
176+
maxY: 50,
177+
});
178+
179+
// Define boundary conditions
180+
await model.addBoundaryCondition("0", ["constantTemp", 200]);
181+
await model.addBoundaryCondition("1", ["symmetry"]);
182+
await model.addBoundaryCondition("2", ["convection", 1, 20]);
183+
await model.addBoundaryCondition("3", ["constantTemp", 200]);
184+
185+
// Set solver method (optional) - 'lusolve' uses LU decomposition
186+
await model.setSolverMethod("lusolve");
187+
188+
// Solve the problem and get the solution
189+
const { solutionVector, nodesCoordinates } = await model.solve();
190+
191+
// Plot the solution as a 2D contour plot
192+
plotSolution(
193+
solutionVector,
194+
nodesCoordinates,
195+
"solidHeatTransferScript",
196+
"2D",
197+
"contour",
198+
"solutionPlot"
199+
);
200+
201+
// Terminate the worker when done
202+
model.terminate();
203+
} catch (error) {
204+
console.error("Error in experimental features:", error);
205+
document.getElementById("solutionPlot").innerHTML =
206+
`<div style="color: red; padding: 20px;">Error running simulation: ${error.message}</div>`;
207+
}
208+
});
209+
</script>
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)