Skip to content

Commit f3e5be7

Browse files
sravanthimodepusravanthimodepu
authored
Merge pull request #16 from virtual-labs/testing
Testing
2 parents a3613a7 + 1d022eb commit f3e5be7

9 files changed

Lines changed: 8337 additions & 255 deletions

File tree

‎experiment/simulation/comparison.html‎

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,28 @@
77
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/virtual-labs/virtual-style@0.0.6-b/css/style.min.css" />
88
<link rel="stylesheet" href="./css/main.css">
99
</head>
10-
11-
<div class="v-tabs ml-4">
12-
<ul>
13-
<li>
14-
<a href="index.html">
15-
<span>ASTM A53</span>
16-
</a>
17-
</li>
18-
<li>
19-
<a href="corten.html">
20-
<span>Corten Steel</span>
21-
</a>
22-
</li>
23-
<li>
24-
<a href="mild.html">
25-
<span>Mild Steel</span>
26-
</a>
27-
</li>
28-
<li class="is-active">
29-
<a href="comparison.html">
30-
<span>Comparison</span>
31-
</a>
32-
</li>
33-
</ul>
34-
</div>
35-
<div class="columns is-centered">
36-
<div class="column has-text-centered is-half">
37-
<div id="chartContainer"></div>
10+
<body>
11+
<div class="v-tabs ml-4">
12+
<ul>
13+
<li><a href="index.html"><span>ASTM A53</span></a></li>
14+
<li><a href="corten.html"><span>Corten Steel</span></a></li>
15+
<li><a href="mild.html"><span>Mild Steel</span></a></li>
16+
<li class="is-active"><a href="comparison.html"><span>Comparison</span></a></li>
17+
</ul>
18+
</div>
19+
<div class="columns is-centered">
20+
<div class="column has-text-centered is-half">
21+
<div class="v-datalist-container ">
22+
<div class="v-datalist-row" id="obs-table">
23+
<div class="v-table-wrap">
24+
<div id="chartContainer"></div>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
3829
</div>
39-
</div>
4030
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
4131
<script src="./js/comparison.js"></script>
4232
</body>
4333

44-
</html>
34+
</html>

‎experiment/simulation/corten.html‎

Lines changed: 80 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -7,82 +7,92 @@
77
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/virtual-labs/virtual-style@0.0.6-b/css/style.min.css" />
88
<link rel="stylesheet" href="./css/main.css">
99
</head>
10-
11-
<div class="v-tabs ml-4">
12-
<ul>
13-
<li>
14-
<a href="index.html">
15-
<span>ASTM A53</span>
16-
</a>
17-
</li>
18-
<li class="is-active">
19-
<a href="corten.html">
20-
<span>Corten Steel</span>
21-
</a>
22-
</li>
23-
<li>
24-
<a href="mild.html">
25-
<span>Mild Steel</span>
26-
</a>
27-
</li>
28-
<li>
29-
<a href="comparison.html">
30-
<span>Comparison</span>
31-
</a>
32-
</li>
33-
</ul>
34-
</div>
35-
<div class="box">
36-
<div class="columns is-centered">
37-
<div class="column has-text-centered is-two-fifths mt-0">
38-
<canvas class="main" id="main"></canvas>
39-
<br>
40-
<button id="play" class="v-button">Play</button>
41-
<button id="pause" class="v-button" disabled>Pause</button>
42-
<button id="restart" class="v-button" disabled>Restart</button>
43-
<br>
44-
<div class="slidecontainer">
45-
<p>Simulation speed: <span id="demo_speed"></span>x</p>
46-
<input type="range" min="1" max="8" value="4" class="slider" id="speed">
10+
<body>
11+
12+
<div class="v-tabs ml-4">
13+
<ul>
14+
<li><a href="index.html"><span>ASTM A53</span></a></li>
15+
<li class="is-active"><a href="corten.html"><span>Corten Steel</span></a></li>
16+
<li><a href="mild.html"><span>Mild Steel</span></a></li>
17+
<li><a href="comparison.html"><span>Comparison</span></a></li>
18+
</ul>
19+
</div>
20+
<div class="columns is-centered is-flex">
21+
<div class="column mt-2 is-10-desktop is-10-tablet is-10-mobile has-text-centered">
22+
<div class="columns is-mobile is-centered is-flex">
23+
<div id="anime-demo" class="column has-text-centered controls">
24+
<button id="play" class="v-button">Play</button>
25+
<button id="pause" class="v-button" disabled>Pause</button>
26+
<button id="restart" class="v-button" disabled>Restart</button>
27+
</div>
4728
</div>
48-
</div>
49-
<div class="column has-text-centered">
50-
<div class="v-table-wrap">
51-
<table class="table is-bordered is-fullwidth v-table-primary mb-2">
52-
<thead>
53-
<tr>
54-
<th>Length <br> (mm)</th>
55-
<th>Diameter <br> (mm)</th>
56-
<th>Stress <br> (Mpa)</th>
57-
<th>Strain </th>
58-
<th>Load <br> (N)</th>
59-
<th>Elongation <br> (mm)</th>
60-
<th>Youngs Modulus <br> (Mpa)</th>
61-
</tr>
62-
</thead>
63-
<tbody>
64-
<tr>
65-
<td>50.8</td>
66-
<td>12.725</td>
67-
<td><span id="stress">0.0</span></td>
68-
<td><span id="strain">0.0</span></td>
69-
<td><span id="load">0.0</span></td>
70-
<td><span id="elongation">0.0</span> </td>
71-
<td><span id="young">0.0</span></td>
72-
</tr>
73-
</tbody>
74-
</table>
29+
</div>
30+
</div>
31+
<div id="box">
32+
<div class="columns is-centered is-variable is-flex is-flex-wrap-wrap workspace">
33+
<div id="apparatus" class="column has-text-centered is-2-desktop is-5-tablet is-5-mobile apparatus">
34+
<div class="v-datalist-container">
35+
<div class="v-datalist-title" >Input Parameters</div>
36+
<br/>
37+
<p>Simulation Speed: <span id="demo_speed"></span>x</p>
38+
<input type="range" min="1" max="8" value="4" class="slider" id="speed">
39+
<br/>
40+
<p class="v-bold">Length = 50.8 mm</p><br/>
41+
<p class="v-bold">Diameter = 12.725 mm</p>
42+
</div>
7543
</div>
76-
<div>
77-
<div id="chartContainer"></div>
44+
45+
<div class="column has-text-centered is-5-desktop is-5-tablet is-5-mobile observations">
46+
<div class="v-datalist-container ">
47+
<div class="v-datalist-title">Observations</div>
48+
<div class="v-datalist-row" id="obs-table">
49+
<div class="v-table-wrap">
50+
<table class="table is-bordered is-fullwidth">
51+
<thead>
52+
<tr>
53+
<th>Stress <br> (Mpa)</th>
54+
<th>Strain </th>
55+
<th>Load <br> (N)</th>
56+
<th>Elongation <br> (mm)</th>
57+
<th>Youngs Modulus <br> (Mpa)</th>
58+
</tr>
59+
</thead>
60+
<tbody>
61+
<tr>
62+
<td><span id="stress">0.0</span></td>
63+
<td><span id="strain">0.0</span></td>
64+
<td><span id="load">0.0</span></td>
65+
<td><span id="elongation">0.0</span> </td>
66+
<td><span id="young">0.0</span></td>
67+
</tr>
68+
</tbody>
69+
</table>
70+
</div>
71+
<div id="result"></div>
72+
</div>
73+
74+
<div id="chartContainer"></div>
75+
</div>
76+
</div>
77+
<div class="column has-text-centered is-4-desktop is-10-tablet is-10-mobile simulation" id="container">
78+
<div class="v-datalist-container">
79+
<div class="columns">
80+
<div class="column is-fullwidth">
81+
<canvas class="main" id="main"></canvas>
82+
</div>
83+
</div>
84+
</div>
7885
</div>
7986
</div>
80-
</div>
81-
</div>
87+
</div>
88+
8289
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
8390
<script src="./js/data.json"></script>
8491
<script src="./js/corten.js"></script>
85-
8692
</body>
8793

88-
</html>
94+
</html>
95+
96+
97+
98+

‎experiment/simulation/css/main.css‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,49 @@
1+
.v-datalist-container {
2+
min-height: 38.25rem;
3+
height: 70vh;
4+
width: 100%;
5+
margin-left: 0.5rem;
6+
margin-right: 0.5rem;
7+
background-color: white;
8+
}
9+
10+
.v-table-wrap{
11+
overflow-y: auto !important;
12+
}
13+
114
.main {
215
width: 85%;
316
height: 85%;
4-
background-color: white;
5-
}
17+
/*background-color: white;*/
18+
}
19+
20+
#chartContainer{
21+
height: 53vh;
22+
width: 90% ;
23+
}
24+
25+
.apparatus {
26+
order: 1;
27+
}
28+
29+
.simulation {
30+
order: 2;
31+
}
32+
33+
.observations {
34+
order: 3;
35+
}
36+
37+
@media screen and (max-width: 1023px) {
38+
.apparatus {
39+
order: 1;
40+
}
41+
42+
.simulation {
43+
order: 3;
44+
}
45+
46+
.observations {
47+
order: 2;
48+
}
49+
}

0 commit comments

Comments
 (0)