Merge pull request #4 from virtual-labs/dev

Dev

README.md

@@ -11,8 +11,6 @@
 
 Measurement of Propagation or Attenuation Loss in the optical fiber.
 
-Objectives:-  Measurement of Propagation or Attenuation Loss in the optical fiber.
-
 <b>Name of Developer | <b> Prof. RS Anand
 :--|:--|
 <b> Institute | <b> IIT Roorkee

experiment/references.md

@@ -1,10 +1,10 @@
 
 #### Text Books:
 
-*   Optical Fiber Communication – Gerd Keiser, 4th Edition, MGH, 2008
-*   Optical Fiber Communications– – John M. Senior, Pearson Education, 3rd Edition, Impression, 2007.
+*   Optical Fiber Communication – Gerd Keiser, 4<sup>th</sup> Edition, MGH, 2008
+*   Optical Fiber Communications - John M. Senior, Pearson Education, 3<sup>rd</sup> Edition, Impression, 2007.
 *   Saxena, A. N., and H. F. Wolf; "Optical Detectors", Handbool of Fiber Optics, H. F. Wolf, ed., Garland STPM Press, New York, 1979, p. 225.
-*   Applications Engineering Staff of the Hewlett-Packard Optoelctronics Division, Optoelectronics/Fiber-Optics Applications Manual, 2nd Edition, McGraw-Hill, New York, 1981. p. 4.3.
+*   Applications Engineering Staff of the Hewlett-Packard Optoelctronics Division, Optoelectronics/Fiber-Optics Applications Manual, 2<sup>nd</sup> Edition, McGraw-Hill, New York, 1981. p. 4.3.
 
 #### Web Links:
 

experiment/simulation/css/expstyle.css

@@ -85,11 +85,11 @@ body,html {margin:0; height:71.5em;padding:0;}
 
              #circuit{
 
-                 position:absolute; top:10px;height:300px; width:760px;
+                 position:absolute; top:30px;height:300px; width:760px;
              }
 
              #figcap{
-                text-align: center;font-size: 16px;font-weight: bold;position:absolute;top:290px;width:760;color:red;
+                text-align: center;font-size: 16px;font-weight: bold;position:absolute;top:270px;width:760;color:red;
           }
 .calc{
 		position:absolute;

experiment/simulation/exp.html

@@ -133,7 +133,7 @@ <h2>Instructions</h2>
                         <div id="crtsec"><p style="padding-right:390px;color:white;display: contents"> <b> CIRCUIT </b></p></div>
 
                 <div id="circuit">
-                       <img  src ="images/setup.PNG" style="width:90%;height:98%;position:absolute;margin:auto;display: block;" />   
+                       <img  src ="images/setup.PNG" style="width:90%;height:95%;position:absolute;margin:auto;display: block;" />   
                        <figcaption id="figcap">Setup for Measurement of Data Rate for Digital Optical Link</figcaption> 
                         <input type="button" id="sinecrv" value="SineWave" disabled onclick="chnlo()"  />
                         <input type="button" id="rectifiedop" value="Oscilloscope" onclick="drawhlfrectifier()" disabled=true  />
@@ -192,7 +192,7 @@ <h2>Instructions</h2>
 			<table  cellpadding="5" border="2 solid black" id="table">
 				<tr style="color:white;background-color:#19318F;height:25px"><th colspan=6>EXPERIMENTAL READINGS</th></tr>
 				<tr bgcolor="#ffffff" class="font">
-					<th align=center rowspan=2>Sl.No</th>
+					<th align=center rowspan=2>S.No</th>
 					<th align=center rowspan=2>Wavelength</th>
 					<th align=center rowspan=2>Input Voltage (V)</th>
 					<th align=center colspan=2>Output Voltage (V)</th>
@@ -209,6 +209,21 @@ <h2>Instructions</h2>
 
        <script>
 
+    function alert1(icon,title,text)
+    {
+        Swal.fire({
+            backdrop:false,
+           target: '#exp',
+           position:'center',
+            customClass: {
+              container: 'position-absolute',
+              popup:"swal2-popup"
+            },
+            title:title,
+            html: text,
+           icon:icon,
+            });
+    }
            $('canvas').data('readonly', false);
 
 			var temp=0;
@@ -224,13 +239,14 @@ <h2>Instructions</h2>
 			function insert() {
 				var bttn=document.getElementById('onff').value;
 				if(bttn == "Power:Off"){
-					alert("Could not plot if power is off\nTo add please turn on the system");
+					alert1('error','Oops..POWER OFF','Could not plot if power is off.<br>To add please turn on the system.');
 				}
 				else{
 					var x=parseFloat(document.getElementById("amp-knob-fng").value).toFixed(2);
 					var y=document.getElementById('length-knob-container').value;
 					if(count>5){
-						alert("The values you read are enough.\nPlease calculate the result.");
+                        alert1('warning','','The values you read are enough.<br>Please calculate the result.');
+
 					}
 					else {
 					  /*if(f==1) if(x!=w) {alert("You can't change amplitude in the middle of the experiment");exit(0);}*/
@@ -259,7 +275,7 @@ <h2>Instructions</h2>
 							cell3.innerHTML=x;
 							cell4.innerHTML=x1;
 							cell5.innerHTML=x2;
-						}else alert("You can't read the same value more than once\nPlease change the input readings and add again.");
+						}else alert1('error','Oops..Duplicate Value','You can\'t read the same value more than once.<br>Please change the input readings and add again.');
 					}
 				}
 			}	
@@ -307,7 +323,7 @@ <h2>Instructions</h2>
         </script>
 
         <footer class="main-footer">
-            <div align="center" style="font-size: 16px;color:white;margin:auto">&copy; 2023 Virtual Labs, IIT Roorkee<!-- Institute Name --> </div>
+            <div align="center" style="font-size: 16px;color:white;margin:auto;font-weight: bold;">&copy; 2023 Virtual Labs, IIT Roorkee<!-- Institute Name --> </div>
           </footer>
 
          <!--------------------------------- calculator --------------------------------------------->

experiment/simulation/index.html

@@ -59,11 +59,11 @@ <h1 id="expm">Measurement of Losses in Plastic Fiber</h1>
 		<!-- Division for buttons-->
 
 		<div class="top">
-			<form action="exp.html" method="post" style="width:100%;text-align:right">
+			<div style="width:100%;text-align:right">
 				<div class="button"><input class="b1" type="button" id="check"  value="CHECK" ></input></div>
-				<div class="button"><input class="b3" type="submit" id="start"  style="cursor:not-allowed" value="START" disabled></input></div>
+				<div class="button"><input class="b3" type="submit" id="start"  style="cursor:not-allowed" value="START" disabled onclick="location.href='exp.html';"></input></div>
 				<div class="button"><input class="b2" type="button" onclick="location.reload()" value="RESET"></input></div>
-			</form>
+			</div>
 		</div>
 
 	</div>
@@ -79,7 +79,7 @@ <h2>Instructions</h2>
 							<center><img src="images/setup.PNG" alt="setup" width=750 height=300></img></center>
 							<p>
 								<ol type="1" style="font-size:20px;">
-									<li>Connect the components as mentioned below:<br>(1-3)(2-4)(5-6)(7-9)(8-10)</li>
+									<li>Connect the components as mentioned below:<br>(1-3)(2-4)(5-6)(7-10)(8-9)</li>
 									<li>Click on <img src="images/check.png" width=53 height=20></img> button to check the connections.</li>
 									<li>If connected wrong, click on the wrong connection and drag the connection and connect it in right position.<br>Else if connections are right please click <img src="images/start.PNG" width=53 height=20></img> button to read the values for experiment.</li></ol></p>
 							<label style="color:red;font-weight: bold;">Note: </label><b>Do not start before properly connecting the wires.</b>
@@ -119,6 +119,6 @@ <h2>Instructions</h2>
 	<script src="js/jsplumb.js"></script>
 	<script src="js/demo.js"></script>
 	<footer class="main-footer">
-		<div align="center" style="font-size: 16px;color:white;margin:auto">© 2023 Virtual Labs, IIT Roorkee<!-- Institute Name --> </div>
+		<div align="center" style="font-size: 16px;color:white;margin:auto;font-weight: bold;">© 2023 Virtual Labs, IIT Roorkee<!-- Institute Name --> </div>
 	  </footer>
 </body>	

experiment/simulation/js/demo.js

@@ -1,3 +1,4 @@
+var Point=[];
 ;
 (function () {
 
@@ -73,7 +74,10 @@
 			document.getElementById("check").remove();
 			document.getElementById("start").disabled=false;
 			document.getElementById("start").style.cursor='pointer';
-
+            for(i=0;i<Point.length;i++)
+            {
+             Point[i].setEnabled(false);
+            }
 			return true;
 		 }
     }
@@ -187,16 +191,16 @@
             };
 
 
-			instance.addEndpoint("dragDropWindow1", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2);
-            instance.addEndpoint("dragDropWindow2", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2);
-            instance.addEndpoint("dragDropWindow3", { anchor: [0.75,0 , 0, -1] }, exampleEndpoint3);
-            instance.addEndpoint("dragDropWindow4", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint3);
-            instance.addEndpoint("dragDropWindow5", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint4);
-            instance.addEndpoint("dragDropWindow6", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint4);
-			instance.addEndpoint("dragDropWindow7", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint5);
-			instance.addEndpoint("dragDropWindow8", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint5);
-			instance.addEndpoint("dragDropWindow9", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2);
-			instance.addEndpoint("dragDropWindow10", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2);
+			Point.push(instance.addEndpoint("dragDropWindow1", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2));
+            Point.push(instance.addEndpoint("dragDropWindow2", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2));
+            Point.push(instance.addEndpoint("dragDropWindow3", { anchor: [0.75,0 , 0, -1] }, exampleEndpoint3));
+            Point.push(instance.addEndpoint("dragDropWindow4", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint3));
+            Point.push(instance.addEndpoint("dragDropWindow5", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint4));
+            Point.push(instance.addEndpoint("dragDropWindow6", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint4));
+			Point.push(instance.addEndpoint("dragDropWindow7", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint5));
+			Point.push(instance.addEndpoint("dragDropWindow8", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint5));
+			Point.push(instance.addEndpoint("dragDropWindow9", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2));
+			Point.push(instance.addEndpoint("dragDropWindow10", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2));
 
             instance.draggable(jsPlumb.getSelector(".drag-drop-demo .window"));
 

experiment/simulation/js/exp6.js

@@ -70,7 +70,20 @@ if(flag==3){
 //----------------------------------------code for drawing rectify output--------------------------------------------------//
 function drawhlfrectifier() {
 	var bttn = document.getElementById('onff').value;
-    if (bttn == "Power:Off") {alert("Please turn on to draw graph");}
+    if (bttn == "Power:Off") {
+        Swal.fire({
+            backdrop:false,
+           target: '#exp',
+           position:'center',
+            customClass: {
+              container: 'position-absolute',
+              popup:"swal2-popup"
+            },
+            title:'POWER OFF',
+            html: 'Please turn on to draw graph',
+           icon:'info',
+            });
+          }
 	else{
     canvas = document.getElementById("mycanvas");
     if (null == canvas || !canvas.getContext)