Skip to content

Commit 92ee013

Browse files
nikoschamnikoscham
committed
Refactor tutorial code to replace 'solutionPlot' with 'resultsCanvas' for consistency across multiple files and enhance clarity in documentation.
1 parent caa73b3 commit 92ee013

9 files changed

+66
-66
lines changed

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ <h2 id="gettingstarted"><a name="Getting Started"></a>Getting Started</h2>
239239
<strong>Quick Start:</strong> To use FEAScript in your HTML, include it from our hosted build (i.e.,
240240
<code>import { FEAScriptModel } from "https://core.feascript.com/dist/feascript.esm.js";</code>) or
241241
download it from <a href="https://github.com/FEAScript/FEAScript-core">GitHub</a> &#8594; add a canvas
242-
(e.g., <code>&lt;div id="solutionPlot">&lt;/div&gt;</code>) &#8594; add a mesh file (e.g.,
242+
(e.g., <code>&lt;div id="resultsCanvas">&lt;/div&gt;</code>) &#8594; add a mesh file (e.g.,
243243
<code>your.msh</code> from
244244
<a href="https://gmsh.info/">
245245
Gmsh
@@ -282,10 +282,10 @@ <h2 id="gettingstarted"><a name="Getting Started"></a>Getting Started</h2>
282282
const { solutionVector, nodesCoordinates } = model.solve();
283283

284284
// Plot results
285-
plotSolution(solutionVector, nodesCoordinates, model.solverConfig, model.meshConfig.meshDimension, "contour", "solutionPlot", "unstructured");
285+
plotSolution(solutionVector, nodesCoordinates, model.solverConfig, model.meshConfig.meshDimension, "contour", "resultsCanvas", "unstructured");
286286
});
287287
&lt;/script&gt;
288-
&lt;!-- ...continue of body region... --&gt;
288+
&lt;!-- ...rest of body region... --&gt;
289289
&lt;/body&gt;</pre
290290
>
291291
<p>

‎tutorials/HeatConduction1DWall.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
162162
model.solverConfig,
163163
model.meshConfig.meshDimension,
164164
"line",
165-
"solutionPlot"
165+
"resultsCanvas"
166166
);
167167

168168
});
@@ -178,13 +178,13 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
178178
<pre class="prettyprint">
179179
&lt;body&gt;
180180
&lt;!-- ...body region... --&gt;
181-
&lt;div id="solutionPlot">&lt;/div&gt;
181+
&lt;div id="resultsCanvas">&lt;/div&gt;
182182
&lt;!-- ...continue of body region... --&gt;
183183
&lt;/body&gt;</pre
184184
>
185185
<p>
186-
The <code>"solutionPlot"</code> is the id of the div where the plot will be rendered. This id is passed as an
187-
argument to the "plotSolution" function to specify the target div for the plot.
186+
The <code>"resultsCanvas"</code> is the id of the div where the plot will be rendered. This id is passed
187+
as an argument to the <code>plotSolution</code> function to specify the target div for the plot.
188188
</p>
189189

190190
<h2 id="results"><a name="Results"></a>Results</h2>
@@ -203,7 +203,7 @@ <h2 id="results"><a name="Results"></a>Results</h2>
203203
Cannot draw the results. Please rotate your phone to landscape orientation and refresh the page to see
204204
the results.
205205
</div>
206-
<div id="solutionPlot"></div>
206+
<div id="resultsCanvas"></div>
207207

208208
<ul id="menu">
209209
<li><a href="https://feascript.com/index.html">Home</a></li>
@@ -223,10 +223,10 @@ <h2 id="results"><a name="Results"></a>Results</h2>
223223
window.addEventListener("DOMContentLoaded", () => {
224224
if (window.innerHeight > window.innerWidth) {
225225
document.getElementById("orientation-message").style.display = "block";
226-
document.getElementById("solutionPlot").style.display = "none";
226+
document.getElementById("resultsCanvas").style.display = "none";
227227
} else {
228228
document.getElementById("orientation-message").style.display = "none";
229-
document.getElementById("solutionPlot").style.display = "block";
229+
document.getElementById("resultsCanvas").style.display = "block";
230230

231231
// Print FEAScript version
232232
printVersion();
@@ -263,18 +263,18 @@ <h2 id="results"><a name="Results"></a>Results</h2>
263263
model.solverConfig,
264264
model.meshConfig.meshDimension,
265265
"line",
266-
"solutionPlot"
266+
"resultsCanvas"
267267
);
268268
}
269269
});
270270

271271
window.addEventListener("resize", () => {
272272
if (window.innerHeight > window.innerWidth) {
273273
document.getElementById("orientation-message").style.display = "block";
274-
document.getElementById("solutionPlot").style.display = "none";
274+
document.getElementById("resultsCanvas").style.display = "none";
275275
} else {
276276
document.getElementById("orientation-message").style.display = "none";
277-
document.getElementById("solutionPlot").style.display = "block";
277+
document.getElementById("resultsCanvas").style.display = "block";
278278
}
279279
});
280280
</script>

‎tutorials/HeatConduction1DWallPlatform.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h2 id="introduction"><a name="Introduction"></a>Introduction</h2>
8989
code.
9090
</p>
9191

92-
<h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
92+
<h2 id="tutorial"><a name="Tutorial"></a>Tutorial</h2>
9393
<p>Follow these steps to load and run the Heat Conduction in a 1D Wall simulation:</p>
9494

9595
<ol>

‎tutorials/HeatConduction2DFin.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
162162
model.solverConfig,
163163
model.meshConfig.meshDimension,
164164
"contour",
165-
"solutionPlot"
165+
"resultsCanvas"
166166
);
167167

168168
});
@@ -187,13 +187,13 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
187187
<pre class="prettyprint">
188188
&lt;body&gt;
189189
&lt;!-- ...body region... --&gt;
190-
&lt;div id="solutionPlot">&lt;/div&gt;
190+
&lt;div id="resultsCanvas">&lt;/div&gt;
191191
&lt;!-- ...continue of body region... --&gt;
192192
&lt;/body&gt;</pre
193193
>
194194
<p>
195-
The <code>"solutionPlot"</code> is the id of the div where the plot will be rendered. This id is passed as an
196-
argument to the "plotSolution" function to specify the target div for the plot.
195+
The <code>"resultsCanvas"</code> is the id of the div where the plot will be rendered. This id is passed
196+
as an argument to the <code>plotSolution</code> function to specify the target div for the plot.
197197
</p>
198198

199199
<h2 id="results"><a name="Results"></a>Results</h2>
@@ -211,7 +211,7 @@ <h2 id="results"><a name="Results"></a>Results</h2>
211211
Cannot draw the results. Please rotate your phone to landscape orientation and refresh the page to see
212212
the results.
213213
</div>
214-
<div id="solutionPlot"></div>
214+
<div id="resultsCanvas"></div>
215215

216216
<br />
217217

@@ -242,10 +242,10 @@ <h2 id="results"><a name="Results"></a>Results</h2>
242242
window.addEventListener("DOMContentLoaded", () => {
243243
if (window.innerHeight > window.innerWidth) {
244244
document.getElementById("orientation-message").style.display = "block";
245-
document.getElementById("solutionPlot").style.display = "none";
245+
document.getElementById("resultsCanvas").style.display = "none";
246246
} else {
247247
document.getElementById("orientation-message").style.display = "none";
248-
document.getElementById("solutionPlot").style.display = "block";
248+
document.getElementById("resultsCanvas").style.display = "block";
249249

250250
// Print FEAScript version
251251
printVersion();
@@ -286,18 +286,18 @@ <h2 id="results"><a name="Results"></a>Results</h2>
286286
model.solverConfig,
287287
model.meshConfig.meshDimension,
288288
"contour",
289-
"solutionPlot"
289+
"resultsCanvas"
290290
);
291291
}
292292
});
293293

294294
window.addEventListener("resize", () => {
295295
if (window.innerHeight > window.innerWidth) {
296296
document.getElementById("orientation-message").style.display = "block";
297-
document.getElementById("solutionPlot").style.display = "none";
297+
document.getElementById("resultsCanvas").style.display = "none";
298298
} else {
299299
document.getElementById("orientation-message").style.display = "none";
300-
document.getElementById("solutionPlot").style.display = "block";
300+
document.getElementById("resultsCanvas").style.display = "block";
301301
}
302302
});
303303
</script>

‎tutorials/HeatConduction2DFinGmsh.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ <h2 id="gmshfileimport"><a name="gmshfileimport"></a>Gmsh File Import</h2>
157157
model.solverConfig,
158158
model.meshConfig.meshDimension,
159159
"contour",
160-
"solutionPlot",
160+
"resultsCanvas",
161161
"unstructured" // Important: specify unstructured mesh type for Gmsh meshes
162162
);
163163
});
@@ -184,7 +184,7 @@ <h2 id="gmshfileimport"><a name="gmshfileimport"></a>Gmsh File Import</h2>
184184
<li>
185185
<strong>Unstructured Plotting:</strong> When plotting results from a Gmsh mesh, add the
186186
<code>"unstructured"</code>
187-
parameter to the plotSolution function to ensure correct visualization.
187+
parameter to the <code>plotSolution</code> function to ensure correct visualization.
188188
</li>
189189
</ul>
190190

@@ -299,7 +299,7 @@ <h2 id="results"><a name="results"></a>Results</h2>
299299
applications, but may be noticeable in regions with steep temperature gradients.
300300
</p>
301301

302-
<div id="solutionPlot"></div>
302+
<div id="resultsCanvas"></div>
303303

304304
<ul id="menu">
305305
<li><a href="https://feascript.com/index.html">Home</a></li>
@@ -377,7 +377,7 @@ <h2 id="results"><a name="results"></a>Results</h2>
377377
gmshModel.solverConfig,
378378
gmshModel.meshConfig.meshDimension,
379379
"contour",
380-
"solutionPlot",
380+
"resultsCanvas",
381381
"unstructured"
382382
);
383383
});

‎tutorials/HeatConduction2DFinPlatform.html‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ <h1 class="top">
6464
<h1>Heat Conduction in a Two-Dimensional Fin Tutorial (Visual Editor)</h1>
6565

6666
<ul id="menu">
67-
<li><a href="https://feascript.com/index.html">Home</a></li>
68-
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
67+
<li><a href="#introduction">Introduction</a></li>
68+
<li><a href="#tutorial">Tutorial</a></li>
6969
</ul>
7070

7171
<div class="highlight-container">
@@ -86,7 +86,7 @@ <h2 id="introduction"><a name="Introduction"></a>Introduction</h2>
8686
implementation but allows you to set up and solve the problem without writing any code.
8787
</p>
8888

89-
<h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
89+
<h2 id="tutorial"><a name="Tutorial"></a>Tutorial</h2>
9090
<p>Follow these steps to load and run the Heat Conduction in 2D Fin simulation:</p>
9191

9292
<ol>
@@ -149,12 +149,8 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
149149
</ol>
150150

151151
<ul id="menu">
152-
<li>
153-
<a href="https://feascript.com/index.html">Return to FEAScript Website</a>
154-
</li>
155-
<li>
156-
<a href="https://platform.feascript.com/help.html">Return to FEAScript Platform Help</a>
157-
</li>
152+
<li><a href="https://feascript.com/index.html">Home</a></li>
153+
<li><a href="https://feascript.com/#tutorials">All Tutorials</a></li>
158154
</ul>
159155

160156
<footer>

‎tutorials/HeatConduction2DFinWorker.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ <h2 id="webworkerimplementation"><a name="Web Worker Implementation"></a>Web Wor
150150
"solidHeatTransferScript",
151151
"2D",
152152
"contour",
153-
"solutionPlot"
153+
"resultsCanvas"
154154
);
155155

156156
// Terminate the worker
@@ -168,14 +168,14 @@ <h2 id="results"><a name="Results"></a>Results</h2>
168168
</p>
169169

170170
<div id="orientation-message">
171-
Cannot draw the results. Please rotate your phone to landscape orientation and refresh the page to see the
172-
results.
171+
Cannot draw the results. Please rotate your phone to landscape orientation and refresh the page to see
172+
the results.
173173
</div>
174174
<div id="loading">
175175
<div class="spinner"></div>
176176
Solving...
177177
</div>
178-
<div id="solutionPlot"></div>
178+
<div id="resultsCanvas"></div>
179179

180180
<ul id="menu">
181181
<li><a href="https://feascript.com/index.html">Home</a></li>
@@ -196,11 +196,11 @@ <h2 id="results"><a name="Results"></a>Results</h2>
196196
window.addEventListener("DOMContentLoaded", async () => {
197197
if (window.innerHeight > window.innerWidth) {
198198
document.getElementById("orientation-message").style.display = "block";
199-
document.getElementById("solutionPlot").style.display = "none";
199+
document.getElementById("resultsCanvas").style.display = "none";
200200
document.getElementById("loading").style.display = "none";
201201
} else {
202202
document.getElementById("orientation-message").style.display = "none";
203-
document.getElementById("solutionPlot").style.display = "block";
203+
document.getElementById("resultsCanvas").style.display = "block";
204204

205205
// Show loading indicator
206206
document.getElementById("loading").style.display = "block";
@@ -249,7 +249,7 @@ <h2 id="results"><a name="Results"></a>Results</h2>
249249
"solidHeatTransferScript",
250250
"2D",
251251
"contour",
252-
"solutionPlot"
252+
"resultsCanvas"
253253
);
254254

255255
// Terminate the worker

‎tutorials/SolidificationFront2D.html‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,11 @@ <h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathemat
102102
equation and its mathematical properties, please see our
103103
<a href="https://blog.feascript.com/tutorial/2025/06/15/eikonal-equation.html">blog post</a>.
104104
</p>
105-
<img src="../assets/SolidificationFront2D.png" width="300" />
105+
<img
106+
src="../assets/SolidificationFront2D.png"
107+
width="300"
108+
alt="Schematic of 2D solidification front domain"
109+
/>
106110
<p>
107111
The above schematic illustrates the problem domain and outlines the associated boundary conditions. In
108112
this model, we consider a square domain where solidification begins simultaneously from three sides
@@ -165,8 +169,8 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
165169
// Apply boundary conditions
166170
model.addBoundaryCondition("0", ["constantValue", 0]); // Βottom
167171
model.addBoundaryCondition("1", ["constantValue", 0]); // Left
168-
model.addBoundaryCondition("2", ["zeroGradient"]); // Top
169-
model.addBoundaryCondition("3", ["constantValue", 0])); // Right
172+
model.addBoundaryCondition("2", ["zeroGradient"]); // Top
173+
model.addBoundaryCondition("3", ["constantValue", 0]); // Right
170174

171175
// Solve
172176
model.setSolverMethod("lusolve");
@@ -179,7 +183,7 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
179183
model.solverConfig,
180184
model.meshConfig.meshDimension,
181185
"contour",
182-
"solutionPlot"
186+
"resultsCanvas"
183187
);
184188

185189
});
@@ -194,13 +198,13 @@ <h2 id="solvingwithfeascript"><a name="Solving with FEAScript"></a>Solving with
194198
<pre class="prettyprint">
195199
&lt;body&gt;
196200
&lt;!-- ...body region... --&gt;
197-
&lt;div id="solutionPlot">&lt;/div&gt;
201+
&lt;div id="resultsCanvas">&lt;/div&gt;
198202
&lt;!-- ...continue of body region... --&gt;
199203
&lt;/body&gt;</pre
200204
>
201205
<p>
202-
The <code>"solutionPlot"</code> is the id of the div where the plot will be rendered. This id is passed as an
203-
argument to the "plotSolution" function to specify the target div for the plot.
206+
The <code>"resultsCanvas"</code> is the id of the div where the plot will be rendered. This id is passed
207+
as an argument to the <code>plotSolution</code> function to specify the target div for the plot.
204208
</p>
205209

206210
<h2 id="results"><a name="Results"></a>Results</h2>
@@ -223,7 +227,7 @@ <h2 id="results"><a name="Results"></a>Results</h2>
223227
<div id="orientation-message">
224228
Cannot draw the results. Please turn your phone to horizontal position to see the results.
225229
</div>
226-
<div id="solutionPlot"></div>
230+
<div id="resultsCanvas"></div>
227231

228232
<br />
229233

@@ -245,19 +249,19 @@ <h2 id="results"><a name="Results"></a>Results</h2>
245249
FEAScriptModel,
246250
plotSolution,
247251
printVersion,
248-
// } from "https://core.feascript.com/dist/feascript.esm.js";
252+
} from "https://core.feascript.com/dist/feascript.esm.js";
249253
// } from "https://core.feascript.com/src/index.js";
250254
// Import FEAScript library from a local directory
251255
// } from "../../FEAScript-core/dist/feascript.esm.js";
252-
} from "../../FEAScript-core/src/index.js";
256+
// } from "../../FEAScript-core/src/index.js";
253257

254258
window.addEventListener("DOMContentLoaded", () => {
255259
if (window.innerHeight > window.innerWidth) {
256260
document.getElementById("orientation-message").style.display = "block";
257-
document.getElementById("solutionPlot").style.display = "none";
261+
document.getElementById("resultsCanvas").style.display = "none";
258262
} else {
259263
document.getElementById("orientation-message").style.display = "none";
260-
document.getElementById("solutionPlot").style.display = "block";
264+
document.getElementById("resultsCanvas").style.display = "block";
261265

262266
// Enable debug logging mode
263267
// logSystem("debug");
@@ -300,18 +304,18 @@ <h2 id="results"><a name="Results"></a>Results</h2>
300304
model.solverConfig,
301305
model.meshConfig.meshDimension,
302306
"contour",
303-
"solutionPlot"
307+
"resultsCanvas"
304308
);
305309
}
306310
});
307311

308312
window.addEventListener("resize", () => {
309313
if (window.innerHeight > window.innerWidth) {
310314
document.getElementById("orientation-message").style.display = "block";
311-
document.getElementById("solutionPlot").style.display = "none";
315+
document.getElementById("resultsCanvas").style.display = "none";
312316
} else {
313317
document.getElementById("orientation-message").style.display = "none";
314-
document.getElementById("solutionPlot").style.display = "block";
318+
document.getElementById("resultsCanvas").style.display = "block";
315319
}
316320
});
317321
</script>

0 commit comments

Comments
 (0)