Skip to content

Commit 8f071c3

Browse files
sridhar-maniSridharNCI
sridhar-mani
and
SridharNCI
authored
Implemented gmsh reader (#12)
* Made materials seperation for the elements * Refactor HeatConduction2DFin.html layout and enhance gmshQuadReader.js for improved file handling; update plotSolutionScript.js for responsive plotting --------- Co-authored-by: Sridhar.Mani <sridhar.mani@novacastindia.com>
1 parent d4b82f6 commit 8f071c3

File tree

3 files changed

+512
-78
lines changed

3 files changed

+512
-78
lines changed

‎examples/solidHeatTransferScript/HeatConduction2DFin/HeatConduction2DFin.html‎

Lines changed: 119 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,135 @@
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 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" />
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>
2672
</head>
2773

2874
<body>
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();
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+
}
44136
</script>
45137

46-
<!-- Import FEAScript library -->
47138
<script type="module">
48139
import {
49140
FEAScriptModel,
50141
plotSolution,
51142
printVersion,
52143
} from "https://feascript.github.io/FEAScript-core/src/index.js";
53144

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

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

61154
// Set solver configuration
62155
model.setSolverConfig("solidHeatTransferScript");
@@ -65,10 +158,10 @@ <h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
65158
model.setMeshConfig({
66159
meshDimension: "2D",
67160
elementOrder: "quadratic",
68-
numElementsX: 8,
69-
numElementsY: 4,
70-
maxX: 4,
71-
maxY: 2,
161+
numElementsX: 36,
162+
numElementsY: 18,
163+
maxX: 125,
164+
maxY: 50,
72165
});
73166

74167
// Define boundary conditions
@@ -81,14 +174,14 @@ <h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
81174
model.setSolverMethod("lusolve");
82175

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

86179
// Plot the solution as a 2D contour plot
87180
plotSolution(
88181
solutionVector,
89182
nodesCoordinates,
90183
model.solverConfig,
91-
model.meshConfig.meshDimension,
184+
"2D",
92185
"contour",
93186
"solutionPlot"
94187
);

0 commit comments

Comments
 (0)