Skip to content

Implemented gmsh reader #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 8, 2025
Merged

Implemented gmsh reader #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51e8400
Made materials seperation for the elements
sridhar-mani Apr 6, 2025
e6bd950
Merge branch 'main' of https://github.com/FEAScript/FEAScript-core in…
SridharNCI Apr 7, 2025
5c38d0e
Refactor HeatConduction2DFin.html layout and enhance gmshQuadReader.j…
SridharNCI Apr 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 119 additions & 26 deletions examples/solidHeatTransferScript/HeatConduction2DFin/HeatConduction2DFin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,42 +21,135 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.0/plotly.min.js"></script>

<!-- Link to the CSS files -->
<link href="https://feascript.com/FEAScript-website.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link
href="https://feascript.com/FEAScript-website.css"
rel="stylesheet"
type="text/css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>

<!-- Custom layout styles -->
<style>
.container {
display: flex;
flex-wrap: wrap;
}

.column {
flex: 1 1 100%;
padding: 20px;
box-sizing: border-box;
}

@media (min-width: 768px) {
.column {
flex: 1 1 50%;
}
}
#solutionPlot {
width: 50%;
max-width: 100%;
min-height: 100px;
box-sizing: border-box;
}

#inputForm {
margin-top: 20px;
}
#resultOutput {
height: 70vh;
margin-top: 10px;
padding: 10px;
background: #f0f0f0;
overflow: auto;
border: 1px solid #ccc;
white-space: pre-wrap;
}
</style>
</head>

<body>
<h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
<div id="solutionPlot"></div>

<p>
The mesh configuration and boundary conditions are defined directly within the JavaScript code in this
example. Please refresh the page to update the results. Detailed instructions for this example can be
found in the corresponding
<a href="https://feascript.com/tutorials/HeatConduction2DFin.html" target="_blank">FEAScript tutorial</a
>. If you need further assistance, you can visit the
<a href="https://feascript.com/" target="_blank">FEAScript website</a>.
</p>

<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
<script>
document.getElementById("currentYear").innerHTML = new Date().getFullYear();
<div class="container">
<!-- Left Column: Simulation Content -->
<div class="column">
<h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
<div id="solutionPlot"></div>

<p>
The mesh configuration and boundary conditions are defined directly
within the JavaScript code in this example. Please refresh the page to
update the results. Detailed instructions for this example can be
found in the corresponding
<a
href="https://feascript.com/tutorials/HeatConduction2DFin.html"
target="_blank"
>FEAScript tutorial</a
>. If you need further assistance, you can visit the
<a href="https://feascript.com/" target="_blank">FEAScript website</a
>.
</p>
<p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
</div>

<!-- Right Column: File Upload & Output -->
<div class="column">
<h2>Upload Input File</h2>
<form id="inputForm">
<label for="inputFile">Choose a file:</label>
<input
type="file"
id="inputFile"
name="inputFile"
accept=".msh"
required
/>
</form>
<div id="resultOutput">No file uploaded.</div>
</div>
</div>

<script type="module">
import { importGmshQuadTri } from "../../../src/readers/gmshQuadReader.js";
document.getElementById("currentYear").innerHTML =
new Date().getFullYear();

document
.getElementById("inputFile")
.addEventListener("change", function (e) {
const file = e.target.files[0];
if (!file) return;
handleFileUpload(file);
});

async function handleFileUpload(file) {
const res = await importGmshQuadTri(file);
console.log(res);
document.getElementById("resultOutput").innerHTML = JSON.stringify(
res,
null,
2
);
}
</script>

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

window.addEventListener("DOMContentLoaded", () => {
import { FEAWorkerScript } from "../../../src/FEAWorkerScript.js";

window.addEventListener("DOMContentLoaded", async () => {
// Print FEAScript version in the console
printVersion();

// Create a new FEAScript model
const model = new FEAScriptModel();
const model = new FEAWorkerScript();

// Set solver configuration
model.setSolverConfig("solidHeatTransferScript");
Expand All @@ -65,10 +158,10 @@ <h1>Heat Conduction in a Two-Dimensional Fin Example</h1>
model.setMeshConfig({
meshDimension: "2D",
elementOrder: "quadratic",
numElementsX: 8,
numElementsY: 4,
maxX: 4,
maxY: 2,
numElementsX: 36,
numElementsY: 18,
maxX: 125,
maxY: 50,
});

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

// Solve the problem and get the solution
const { solutionVector, nodesCoordinates } = model.solve();
const { solutionVector, nodesCoordinates } = await model.solve();

// Plot the solution as a 2D contour plot
plotSolution(
solutionVector,
nodesCoordinates,
model.solverConfig,
model.meshConfig.meshDimension,
"2D",
"contour",
"solutionPlot"
);
Expand Down
Loading