Merge pull request #19 from virtual-labs/dev

Dev

experiment/procedure.md

@@ -1,19 +1,33 @@
 
-### Basic Knowledge : 
+### Basic Knowledge :
+- Select the type of load cell from the options at the top. 
 - Answer all the questions and click on "Submit Test" button.
+- Click on next level.
 
 ### Configuration :
 - Select the configuration parameters.
 - Calculate area and enter its value if the value is correct, click on Configure. If the entered value is incorrect then formula followed by correct answer will be displayed after 3 attempts. 
 - Click on Next Level.
 
+### Construction of Wheatstone bridge:-
+- Click on a component from the left panel to select it. The selected component will appear on the right, where you can drag and drop the component to adjust its position.
+- You can select any image or connection and click the delete button to modify it, if needed.
+- Use drag-and-drop to connect the ports and construct the Wheatstone bridge.
+- After making the connections, click the "Validate Connection" button to verify them. If the connections are incorrect three times, a popup message will appear, and on the fourth attempt, a hint will be provided. If the connections are correct, you will be redirected to the next page. 
+
 ### Calculations : 
-- Enter the load between 1000 to 10000 (N).
+- Enter a load between 1000 and 10000 N for the column-type load cell, and for the cantilever-type load cell, the load range is between 10 and 100 N.
 - Calculate Axial Strain and enter it's value if the value is correct further calculations will be enabled and if the value is Incorrect then formula followed by correct answer will be displayed after 3 attempts.
 - Calculate Transverse Strain and enter it's value, if the value is correct further calculations will be enabled and if the value is Incorrect then formula followed by correct answer will be displayed after 3 attempts.
 - Repeat the same process for different loads and calculate axial and tranverse strain. Calculate the load for 5 readings and click on next level.
 - Select one of the load to calculate output voltage and click on submit. 
-- Select supply voltage Eb and click on submit.
+- Select the supply voltage Eb and click "Submit." Note that this selection cannot be changed a second time.
 - Calculate the output voltage and enter it's value if the value is correct further calculations will be enabled and if the value is Incorrect then formula followed by correct answer will be displayed after 3 attempts.
-- At this stage either complete the experiment by 'COMPLETED' button click or 'SELECT ANOTHER LOAD' click and calculate the output voltage for other loads. 
-- After calculating all the readings experiment is completed.
+- Now, calculate the same for the other applied loads.
+- Click on Next Level button.
+
+### Characterization :
+- Select any load for which you want to calculate the error and sensitivity.
+- Calculate the error for the selected load (error = standard reading - actual reading).
+- Calculate the sensitivity (sensitivity = actual output / Input).
+- After submitting the correct value for sensitivity click on Result button for analysis. 

experiment/simulation/css/analysis.css

@@ -0,0 +1,177 @@
+#body{
+	background-color: #e9ecef;
+}
+.row{
+	margin:0px;
+
+}
+table{
+
+    background-color: gainsboro;
+    font-size: 16px;
+}
+.NotAttained{
+	background-color: #e23939;
+    padding: 5px;
+    color: #fff;
+    border-redius: 10px;
+
+}
+ .tableData{
+ font-size: 16px;
+    font-weight: 200;
+ }  
+.attained{
+background-color: green;
+    padding: 5px;
+    color: #fff;
+    border-redius: 10px;
+
+}
+.table-bordered {
+    border: 4px solid #ddd;
+}
+.panel-danger{
+	    box-shadow: 0px px 6px 6px #8c9bb9;
+   background-color: #072323;
+    border-radius: 17px;
+
+}
+#panelbody{
+	    background-color: #243535;
+	    color: #fff;
+/* 	     border-radius: 26px; */
+}
+/* #mainDiv { */
+/*     height: 1000px; */
+/* /*    overflow-y: none; */ */
+/*     } */
+.heading1{
+	padding: 12px;
+    width: 100%;
+    font-weight: bold;
+    color: #fff;
+    font-size: 15px;
+    border-radius: 10px 2px 10px 2px;
+    background: #000;
+    text-shadow: 2px 2px #000;
+}
+.remark{
+	padding: 5px;
+    width: 100%;
+    font-weight: bold;
+    color: #fff;
+    font-size: 15px;
+    border-radius: 46px;
+    background: rgb(42, 51, 60);
+/*     background-color: #3ba353; */
+    font-size: 14px;
+    margin:4px;
+
+}
+.tableStyle{
+	background-color: brown;
+}
+.tableTitle{
+background-color: brown;
+    padding: 7px;
+
+}
+.remarkBground
+{
+	    background-color: #bff0a8;
+    border-color: #d5cecf;
+    border-width: 1px;
+    padding: 10px;
+}
+.headingPanel{
+background-color: #b4bbc1;
+margin-bottom: 30px;
+}
+.headingPanelRowGreen
+{
+	background-color: #b4bbc1;
+margin-bottom: 30px;
+}
+.headingPanelRowRed
+{
+	background-color: #cd3e3e;
+margin-bottom: 30px;
+}
+.counterPanelGreen{
+	margin-bottom: 20px;
+    margin-top: 26px;
+    background-color: #34ae50;
+}
+.counterPanelRed{
+	margin-bottom: 20px;
+    margin-top: 26px;
+    background-color: #ec4848;
+}
+.valueBox
+{
+text-align: center;
+    width: 100%;
+    background: #fff;
+   padding: 14px;
+    margin: 5% 0;
+/*     -webkit-box-shadow: 0 6px 6px 6px #d7d8da; */
+    -moz-box-shadow: 0 6px 6px 6px #d7d8da;
+/*     box-shadow: 0 6px 6px 6px #8c9bb9; */
+    border-radius: 10px;
+}
+.panel{
+	margin:0px;
+}
+/* .panelGreen */
+/* { */
+/* 	 background-color: green; */
+/* } */
+/* .panelRed */
+/* { */
+/* 	 background-color: red; */
+/* } */
+.highcharts-figure,
+.highcharts-data-table table {
+    min-width: 320px;
+    max-width: 660px;
+    margin: 1em auto;
+}
+
+.highcharts-data-table table {
+    font-family: Verdana, sans-serif;
+    border-collapse: collapse;
+    border: 1px solid #ebebeb;
+    margin: 10px auto;
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+}
+
+.highcharts-data-table caption {
+    padding: 1em 0;
+    font-size: 1.2em;
+    color: #555;
+}
+
+.highcharts-data-table th {
+    font-weight: 600;
+    padding: 0.5em;
+}
+
+.highcharts-data-table td,
+.highcharts-data-table th,
+.highcharts-data-table caption {
+    padding: 0.5em;
+}
+
+.highcharts-data-table thead tr,
+.highcharts-data-table tr:nth-child(even) {
+    background: #f8f8f8;
+}
+
+.highcharts-data-table tr:hover {
+    background: #f1f7ff;
+}
+
+

experiment/simulation/css/loadCellType.css

@@ -34,7 +34,7 @@ hr.new3 {
 			margin: 5px;
 }
 
-#calVoltage,#ebVal,#outVal,#guageFact{
+#calVoltage,#ebVal,#outVal,#guageFact,#errCal,#selLoadErr,#senCheck{
 	background-color: #2c3c4c;
 			color:#fff;
 			padding:5px 20px 5px 5px;

experiment/simulation/css/style.css

@@ -1,3 +1,44 @@
+/*  #delete-btn { */
+/*             display: block; */
+/*             margin: 10px auto; */
+/*             padding: 10px; */
+/*             background-color: red; */
+/*             color: white; */
+/*             border: none; */
+/*             cursor: pointer; */
+
+/*         } */
+
+
+
+ .draggable {
+            cursor: pointer;
+        }
+        .selected {
+            stroke: blue !important;
+            stroke-width: 4 !important;
+
+        }
+        .selected-connection {
+            stroke: red !important;
+            stroke-width: 4 !important;
+        }
+        #delete-btn {
+            display: block;
+            margin: 10px auto;
+            padding: 10px;
+            background-color: red;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+        .dot {
+            fill: blue;
+            stroke: none;
+        }
+
+
+
 #div1 {
   width: 600px;
   height: 670px;

experiment/simulation/index.html

@@ -16,9 +16,15 @@
 	<link rel="stylesheet" href="css/mainPage.css">
 	<link rel="stylesheet" href="css/style.css">
 	<link rel="stylesheet" href="css/loadCellType.css">
-
+    <link rel="stylesheet" href="css/analysis.css">
 </head>
 
+<style>
+@font-face{
+ font-family:'digital-clock-font';
+ src: url('font/digital-7.ttf');
+}
+</style>
 
 <body >
 
@@ -31,24 +37,30 @@
 
 
 	</header>
-	<div  class="row container" style="margin-top:20px;">
-	<div  class="col-sm-2">
+	<div  class="row container" id = "rowHide" style="margin-top:20px;">
+	<div  class="col-sm-1">
 <!-- 	 <label for="sel1">Select list (select one):</label> -->
 	 </div>
 	<div  class="col-sm-3">
-	 <label for="sel1">Select type of load cell</label>
+	 <label for="sel1">Select type of load cell : </label>
 	 </div>
 
-     <div  class="col-sm-7"> 
+     <div  class="col-sm-4"> 
       <select class="form-control" id="typeCell" name="sellist1">
         <option value="0">--- Select type of load cell --- </option>
 	   <option value="15">Column type load cell</option>
 	  <option value="25" >Cantilever beam type load cell</option>
 	   <option value="40" hidden>Ring type load cell</option>
       </select>
       </div>
-
-
+
+   <div  class="col-sm-2"> 
+      <button type="button" id="delete-btn" class="btn" data-dismiss="modal" style="margin-top:-1px;" hidden>Delete Selected</button>
+     </div>
+
+     <div  class="col-sm-2"> 
+      <button type="button" id="validateCon" class="btn-info" data-dismiss="modal" data-toggle="modal" data-target="#myModal" style="margin-top:-1px;" hidden>Validate Connection</button>
+     </div>
 
       </div>
 <div  class="row container-fluid" id="main-div" >
@@ -58,9 +70,15 @@
 	      			</div>
 	      			<label  id="counter"></label>
 	      			<div class="panel-body" id="canvas-div" >
+
 	      			<img src="images/loadCellMerge.png " width = 90% class="img-fluid" >
+
+	      			</div>
+					<div class="panel-body" id="canvas-div-sub" >
+
+
+
 	      			</div>
-
 
 	   			</div>
 	       </div>
@@ -70,7 +88,7 @@
 	      			</div>
 	     			<div class="panel-body" id="main-div-conf" >
 
-	     			<label>Select Type of load sell </label>
+	     			<center><label> Select Type of load sell </label></center>
 	     			</div>
 
 	     		</div>
@@ -108,7 +126,7 @@ <h4 class="modal-title" style="font-weight: 600;"></h4>
 Copyrights &copy; COEP - Virtual Lab
 </footer>
 </body>
-
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script> -->
 <!-- https://code.jquery.com/jquery-3.5.1.js -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
@@ -126,10 +144,34 @@ <h4 class="modal-title" style="font-weight: 600;"></h4>
 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script type="text/javascript" src="src/questionJson.js"></script>
 <script type="text/javascript" src="src/questions.js"></script>
+<script type="text/javascript" src="src/wheatStoneBuild.js"></script>
+
 <script type="text/javascript" src="src/configLoadCell.js"></script>
+<script type="text/javascript" src="src/canteleverConfig.js"></script>
+<script type="text/javascript" src="src/columnTypeConfig.js"></script>
+
 <script type="text/javascript" src="src/calculation.js"></script>
 <script type="text/javascript" src="src/table.js"></script>
 <script type="text/javascript" src="src/wheatStoneCalculation.js"></script>
+<script type="text/javascript" src="src/graphPage.js"></script>
+<script type="text/javascript" src="src/result.js"></script>
+
+<script>
+function resetDivSize() {  
+    const div = document.getElementById('canvas-div');  
+
+    // Resetting width and height to auto  
+    div.style.width = 'auto';  
+    div.style.height = 'auto'; 
+
+ const div1 = document.getElementById('main-div-conf');  
+
+    // Resetting width and height to auto  
+    div1.style.width = 'auto';  
+    div1.style.height = 'auto';  
+
+}  
+</script>
 
 
 </html>