Skip to content

Commit aa7dc0f

Browse files
nikoschamnikoscham
committed
- Implemented functions for plotting solutions using VTK and Plotly.
- Added support for contour lines and color scales in visualizations. - Introduced interpolation methods for 2D solutions. - Enhanced data transformation functions for VTK compatibility. - Included utility functions for mesh preparation and scalar extraction. `plotSolutionScript.js` filename is kept for backward continuity
1 parent aad3620 commit aa7dc0f

8 files changed

Lines changed: 171 additions & 174 deletions

File tree

‎examples/creepingFlowScript/lidDrivenCavity2DCreepingFlow/lidDrivenCavity2DCreepingFlow.html‎

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
1919
<!-- Import the Math.js library for mathematical operations -->
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21-
<!-- Import the Plotly.js library for plotting -->
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
21+
<!-- Import map for VTK.js modules -->
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"@kitware/vtk.js/": "https://esm.sh/@kitware/vtk.js@32.12.0/"
26+
}
27+
}
28+
</script>
2329
</head>
2430

2531
<body>
@@ -36,10 +42,10 @@ <h3>v-Velocity Component</h3>
3642

3743
<script type="module">
3844
// Import FEAScript library
39-
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
40-
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
45+
import { FEAScriptModel, plotInterpolatedSolutionVtk, createColorScale, createContourLineOptions, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
46+
// import { FEAScriptModel, plotInterpolatedSolutionVtk, createColorScale, createContourLineOptions, printVersion } from "../../../src/index.js";
4147

42-
window.addEventListener("DOMContentLoaded", () => {
48+
window.addEventListener("DOMContentLoaded", async () => {
4349
console.log("FEAScript Version:", printVersion);
4450

4551
// Create a new FEAScript model
@@ -82,28 +88,58 @@ <h3>v-Velocity Component</h3>
8288
const vVelocity = solutionVector.slice(totalNodesVelocity, 2 * totalNodesVelocity);
8389
const velocityMagnitude = uVelocity.map((u, i) => Math.sqrt(u * u + vVelocity[i] * vVelocity[i]));
8490

91+
// Define render options for VTK.js contour plots
92+
const renderOptions = {
93+
contourLines: createContourLineOptions({
94+
enabled: true,
95+
numberOfContours: 14,
96+
lineWidth: 1.25,
97+
}),
98+
};
99+
85100
// Plot velocity magnitude as a 2D contour plot
86-
plotSolution(
101+
await plotInterpolatedSolutionVtk(
87102
model,
88103
{ solutionVector: velocityMagnitude, nodesCoordinates: result.nodesCoordinates },
89104
"contour",
90-
"velocityMagnitudeCanvas"
105+
"velocityMagnitudeCanvas",
106+
{
107+
...renderOptions,
108+
colorScale: createColorScale({
109+
presetName: "Cool to Warm",
110+
scalarBarTitle: "Velocity Magnitude",
111+
}),
112+
}
91113
);
92114

93115
// Plot u-velocity component as a 2D contour plot
94-
plotSolution(
116+
await plotInterpolatedSolutionVtk(
95117
model,
96118
{ solutionVector: uVelocity, nodesCoordinates: result.nodesCoordinates },
97119
"contour",
98-
"uVelocityCanvas"
120+
"uVelocityCanvas",
121+
{
122+
...renderOptions,
123+
colorScale: createColorScale({
124+
presetName: "Cool to Warm",
125+
scalarBarTitle: "u-Velocity",
126+
}),
127+
}
99128
);
100129

101130
// Plot v-velocity component as a 2D contour plot
102-
plotSolution(
131+
await plotInterpolatedSolutionVtk(
103132
model,
104133
{ solutionVector: vVelocity, nodesCoordinates: result.nodesCoordinates },
105134
"contour",
106-
"vVelocityCanvas"
135+
"vVelocityCanvas",
136+
{
137+
...renderOptions,
138+
colorScale: createColorScale({
139+
presetName: "Cool to Warm",
140+
scalarBarTitle: "v-Velocity",
141+
}),
142+
}
107143
);
108144
});
109145
</script>

‎examples/frontPropagationScript/solidificationFront2D/solidificationFront2D.html‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
1919
<!-- Import the Math.js library for mathematical operations -->
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21-
<!-- Import the Plotly.js library for plotting -->
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
21+
<!-- Import map for VTK.js modules -->
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"@kitware/vtk.js/": "https://esm.sh/@kitware/vtk.js@32.12.0/"
26+
}
27+
}
28+
</script>
2329
</head>
2430

2531
<body>
@@ -30,10 +36,10 @@ <h2>Solidification Front 2D</h2>
3036

3137
<script type="module">
3238
// Import FEAScript library
33-
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34-
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
39+
import { FEAScriptModel, plotInterpolatedSolutionVtk, createColorScale, createContourLineOptions, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
40+
// import { FEAScriptModel, plotInterpolatedSolutionVtk, createColorScale, createContourLineOptions, printVersion } from "../../../src/index.js";
3541

36-
window.addEventListener("DOMContentLoaded", () => {
42+
window.addEventListener("DOMContentLoaded", async () => {
3743
console.log("FEAScript Version:", printVersion);
3844

3945
// Create a new FEAScript model
@@ -69,7 +75,17 @@ <h2>Solidification Front 2D</h2>
6975
console.log("Solution vector:", result.solutionVector);
7076

7177
// Plot the solution as a 2D contour plot
72-
plotSolution(model, result, "contour", "resultsCanvas");
78+
await plotInterpolatedSolutionVtk(model, result, "contour", "resultsCanvas", {
79+
colorScale: createColorScale({
80+
presetName: "Cool to Warm",
81+
scalarBarTitle: "Solution",
82+
}),
83+
contourLines: createContourLineOptions({
84+
enabled: true,
85+
numberOfContours: 14,
86+
lineWidth: 1.25,
87+
}),
88+
});
7389
});
7490
</script>
7591
</body>

‎examples/generalFormPDEScript/advectionDiffusion1D/advectionDiffusion1D.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
1919
<!-- Import the Math.js library for mathematical operations -->
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21-
<!-- Import the Plotly.js library for plotting -->
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
21+
<!-- Import map for VTK.js modules -->
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"@kitware/vtk.js/": "https://esm.sh/@kitware/vtk.js@32.12.0/"
26+
}
27+
}
28+
</script>
2329
</head>
2430

2531
<body>
@@ -30,10 +36,10 @@ <h2>Advection-Diffusion 1D</h2>
3036

3137
<script type="module">
3238
// Import FEAScript library
33-
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34-
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
39+
import { FEAScriptModel, plotSolutionVtk, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
40+
// import { FEAScriptModel, plotSolutionVtk, printVersion } from "../../../src/index.js";
3541

36-
window.addEventListener("DOMContentLoaded", () => {
42+
window.addEventListener("DOMContentLoaded", async () => {
3743
console.log("FEAScript Version:", printVersion);
3844

3945
// Create a new FEAScript model
@@ -73,7 +79,7 @@ <h2>Advection-Diffusion 1D</h2>
7379
console.log("Solution vector:", result.solutionVector);
7480

7581
// Plot the solution as a 1D line plot
76-
plotSolution(model, result, "line", "resultsCanvas");
82+
await plotSolutionVtk(model, result, "line", "resultsCanvas");
7783
});
7884
</script>
7985
</body>

‎examples/heatConductionScript/heatConduction1DWall/heatConduction1DWall.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
1919
<!-- Import the Math.js library for mathematical operations -->
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21-
<!-- Import the Plotly.js library for plotting -->
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
21+
<!-- Import map for VTK.js modules -->
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"@kitware/vtk.js/": "https://esm.sh/@kitware/vtk.js@32.12.0/"
26+
}
27+
}
28+
</script>
2329
</head>
2430

2531
<body>
@@ -30,10 +36,10 @@ <h2>Heat Conduction 1D Wall</h2>
3036

3137
<script type="module">
3238
// Import FEAScript library
33-
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34-
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
39+
import { FEAScriptModel, plotSolutionVtk, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
40+
// import { FEAScriptModel, plotSolutionVtk, printVersion } from "../../../src/index.js";
3541

36-
window.addEventListener("DOMContentLoaded", () => {
42+
window.addEventListener("DOMContentLoaded", async () => {
3743
console.log("FEAScript Version:", printVersion);
3844

3945
// Create a new FEAScript model
@@ -65,7 +71,7 @@ <h2>Heat Conduction 1D Wall</h2>
6571
console.log("Solution vector:", result.solutionVector);
6672

6773
// Plot the solution as a 1D line plot
68-
plotSolution(model, result, "line", "resultsCanvas");
74+
await plotSolutionVtk(model, result, "line", "resultsCanvas");
6975
});
7076
</script>
7177
</body>

‎examples/heatConductionScript/heatConduction2DFin/heatConduction2DFin.html‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@
1818
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
1919
<!-- Import the Math.js library for mathematical operations -->
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.12.0/math.min.js"></script>
21-
<!-- Import the Plotly.js library for plotting -->
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
21+
<!-- Import map for VTK.js modules -->
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"@kitware/vtk.js/": "https://esm.sh/@kitware/vtk.js@32.12.0/"
26+
}
27+
}
28+
</script>
2329
</head>
2430

2531
<body>
@@ -30,10 +36,10 @@ <h2>Heat Conduction 2D Fin</h2>
3036

3137
<script type="module">
3238
// Import FEAScript library
33-
import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
34-
// import { FEAScriptModel, plotSolution, printVersion } from "../../../src/index.js";
39+
import { FEAScriptModel, plotInterpolatedSolutionVtk, createColorScale, createContourLineOptions, printVersion } from "https://core.feascript.com/dist/feascript.esm.js";
40+
// import { FEAScriptModel, plotInterpolatedSolutionVtk, createColorScale, createContourLineOptions, printVersion } from "../../../src/index.js";
3541

36-
window.addEventListener("DOMContentLoaded", () => {
42+
window.addEventListener("DOMContentLoaded", async () => {
3743
console.log("FEAScript Version:", printVersion);
3844

3945
// Create a new FEAScript model
@@ -69,7 +75,17 @@ <h2>Heat Conduction 2D Fin</h2>
6975
console.log("Solution vector:", result.solutionVector);
7076

7177
// Plot the solution as a 2D contour plot
72-
plotSolution(model, result, "contour", "resultsCanvas");
78+
await plotInterpolatedSolutionVtk(model, result, "contour", "resultsCanvas", {
79+
colorScale: createColorScale({
80+
presetName: "Cool to Warm",
81+
scalarBarTitle: "Temperature",
82+
}),
83+
contourLines: createContourLineOptions({
84+
enabled: true,
85+
numberOfContours: 14,
86+
lineWidth: 1.25,
87+
}),
88+
});
7389
});
7490
</script>
7591
</body>

0 commit comments

Comments
 (0)