Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnipun1994
jnipun1994 authored Nov 14, 2024
1 parent 82154eb commit 473717f
Showing 1 changed file with 220 additions and 38 deletions.
258 changes: 220 additions & 38 deletions experiment/simulation/exp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script-->

<script src="js/jquery.knob.min.js"></script>
<script src="js/exp6knobs.js"></script>
<script src="js/exp6axis.js"></script>
Expand All @@ -27,15 +27,15 @@

<body style="width:95em">

<div id="se-pre-con"><div class="load">
<div id="se-pre-con">
<div class="load">
<p>You can read the values of the experiment</p>
<img src="images/load.gif"></img>
<p>Please wait...</p></div>
</div>
<div class="wholebody" id="exp">
<div id="exph">
<h1 id="expm">Measurement of Losses in Plastic Fiber</h1>

</div>
<script>
var t=0;
Expand All @@ -60,24 +60,66 @@ <h2>Instructions</h2>
<center><img src="images/setup.PNG" alt="setup" width="850" height="330"></center>
<p>
<ol type="1" style="font-size:17px;">
<li>Click on <b style="color:red">'Power'</b> button to start the experiment.</li>
<li>Double click on <b style="color:#2B4D9D">'SineWave'</b> button to generate input waveform. </li>
<li>Click on <b style="color:#2B4D9D">'Oscilloscope'</b> button to get the output waveform. </li>
<li>Vary the Amplitude, Frequency, volt/div using the controllers.</li>
<li>Click on <b style="color:#2B4D9D">'Dual'</b> button to observe both the waveforms.</li>
<li>Channel 1 shows the input waveform, Channel 2 shows the output waveform. </li>
<li>Click on <b style="color:#2B4D9D">'Add'</b> button to read input values into table.</li>
<li>Click on <b style="color:#2B4D9D">'PLOT'</b> button to plot the graph from table readings.</li>
<li>Click the <b style="color:red">'Power'</b> button to start the experiment.</li>
<li>Double click the <b style="color:#2B4D9D">'SineWave'</b> button to generate input waveform. </li>
<li>Click the <b style="color:#2B4D9D">'Oscilloscope'</b> button to display the output waveform. </li>
<li>Use the controllers to vary the Amplitude, Frequency, and Volt/Div.</li>
<li>Click the <b style="color:#2B4D9D">'Dual'</b> button to observe both waveforms.</li>
<li>Channel 1 displays the input waveform, and Channel 2 displays the output waveform. </li>
<li>Click the <b style="color:#2B4D9D">'Add'</b> button to read the input values into the table.</li>
<li>Repeat step 7 for ten different input values.</li>
<li>Now, calculate the loss (in dB) for each row and enter the results (up to 4 decimal places) into the table.<br>
Formula used to calculate loss (&alpha;):
<ul>
<br>
<li>
<math style="font-size:20px">
<mi>&alpha;</mi>
<mo>=</mo>
<mo>-</mo>
<mfrac bevelled="true" style="font-size:20px">
<mfrac>
<mrow>
<msub>
<mi>log</mi>
<mn>10</mn>
</msub>
<mfrac>
<mi>V1</mi>
<mi>V2</mi>
</mfrac>
</mrow>
</mfrac>

<mfrac>
<mi>L1</mi>
<mo>+</mo>
<mi>L2</mi>
</mfrac>
</mfrac>
<mo>*</mo>
<mi>8.686</mi>
</math>

</li><br>
<li>where V1 and V2 are the output voltages, and L1(1m) and L2(5m) are the cable lengths.</li><br>
</ul>
</li>
<li>Click on <b style="color:#2B4D9D">'LOSS'</b> button to verify the calculated loss.</li>

</ol> </p>
<br>

<label style="color:red;font-weight: bold;">Note 1: </label><b>You can read only one value for each select option.</b><br>
<label style="color:red;font-weight: bold;">Note 2: </label><b>You cannot change the amplitude in the middle of reading values into table.</b>
<label style="color:red;font-weight: bold;">Note 2: </label><b>You cannot change the amplitude in the middle of reading values into table.</b><br>
<label style="color:red;font-weight: bold;">Note 3: </label><b>1 nepers = 8.686 dB</b><br>
<label style="color:red;font-weight: bold;">Note 4: </label><b>The correct values for loss will be updated in the table after three incorrect attempts.</b>
</div>
<div class="modal-footer">
<br>
</div>
</div>
</div></div>
</div>
</div>



Expand Down Expand Up @@ -122,7 +164,7 @@ <h2>Instructions</h2>
<option value=8>Optical cable(850nm)</option>
</select></div>

<input type="button" id="add" onclick="insert()" value="Add"/>
<input type="button" id="add" onclick="insert()" value="Add"/ disabled>
</div> <!--------------- end of .knob-container-fng----------------------->

</div><!--------------- end of .lowerleftsection----------------------->
Expand All @@ -134,17 +176,17 @@ <h2>Instructions</h2>

<div id="circuit">
<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>
<figcaption id="figcap">Setup for Measurement of losses in Plastic Fiber</figcaption>
<input type="button" id="sinecrv" value="SineWave" disabled onclick="chnlo()" />
<input type="button" id="rectifiedop" value="Oscilloscope" onclick="drawhlfrectifier()" disabled=true />

</div><!--------------- end of .circuit----------------------->
</div> <!--------------- end of .circuitSection----------------------->

<div class="but">
<button class="button" onclick="plot()">PLOT</button>
<button class="button" id='loss' onclick="loss()" disabled>LOSS</button>
<button class="button" onclick="window.location.reload()">RESET</button>
<button class="button" id="button1" onclick="printf()">PRINT</button><br>
<button class="button" id="print" onclick="printf()" disabled>PRINT</button><br>
</div>

<div id="controller" >
Expand Down Expand Up @@ -190,24 +232,28 @@ <h2>Instructions</h2>
<!--------------- end of .calcln----------------------->
<div class="calc">
<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 style="color:white;background-color:#19318F;height:25px"><th colspan=7>EXPERIMENTAL READINGS</th></tr>
<tr bgcolor="#ffffff" class="font">
<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>
<th align=center rowspan=2>&alpha; (in dB)</th>

</tr>
<tr bgcolor="#ffffff" class="font">
<th align=center>for 1m length</th>
<th align=center>for 5m length</th>
<th align=center>for 1m length (V1)</th>
<th align=center>for 5m length (V2)</th>
</tr>

</table>

</div>
</div>

<!--------------- end of .wholebody----------------------->

<script>
<script>

function alert1(icon,title,text)
{
Expand Down Expand Up @@ -235,6 +281,9 @@ <h2>Instructions</h2>
function updateTable() {
if(i>2) for(var q=3;q<i;q++) document.getElementById(q).remove();
i=3;count=1;l3=[];
document.getElementById('loss').disabled=true
document.getElementById('add').disabled=false
wrongCount=0;
}
function insert() {
var bttn=document.getElementById('onff').value;
Expand All @@ -244,12 +293,7 @@ <h2>Instructions</h2>
else{
var x=parseFloat(document.getElementById("amp-knob-fng").value).toFixed(2);
var y=document.getElementById('length-knob-container').value;
if(count>5){
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);}*/

var l=document.getElementById("amp-knob-fng").value;
flag=0;
for(var d=0;d<l3.length;d++) if(l==l3[d]){flag=1;break;}
Expand All @@ -268,15 +312,35 @@ <h2>Instructions</h2>
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);

cell1.innerHTML=count++;
if(y==6) {x1=(x-0.22).toFixed(2);x2=(x-0.27).toFixed(2);y=650;}
if(y==8) {x1=(x-0.16).toFixed(2);x2=(x-0.24).toFixed(1);y=850;}
if(y==6) {x1=Number((x-0.22).toFixed(2));x2=Number((x-0.27).toFixed(2));y=650;}
if(y==8) {x1=Number((x-0.16).toFixed(2));x2=Number((x-0.24).toFixed(1));y=850;}
cell2.innerHTML=y;
cell3.innerHTML=x;
cell4.innerHTML=x1;
cell5.innerHTML=x2;

if(count==11)
{
alert1('info','','The values you read are enough.<br>Please calculate the loss and enter the values into the table.');
document.getElementById("loss").disabled=false;
document.getElementById("add").disabled = true;
// blink the table cells
const PTable = document.querySelector('#table');
const PRows = PTable.rows;
for (let i = 3; i < PRows.length; i++) {
const row = PRows[i];
const cells = row.cells;
const cell = cells[5];
cell.classList.add('blink')
cell.contentEditable = 'true';
}
}

}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.');
}

}
}

Expand All @@ -285,16 +349,134 @@ <h2>Instructions</h2>
t=0;
window.print();
}
/* document.querySelector('#button1').addEventListener('click', function() {
html2canvas(document.querySelector('.calc'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);

var wrongCount=0;
function loss()
{
let isValid = true;
let isEmptyField = false;
const PTable = document.querySelector('#table');
const PRows = PTable.rows;
for (let i = 3; i < PRows.length; i++) {
const row = PRows[i];
const cells = row.cells;
const x1 = Number(cells[3].innerText);
const x2 = Number(cells[4].innerText);

loss1 = - (Math.log10(x1/x2)/6); // in nepers
loss2 = Number((loss1 * 8.686).toFixed(4)); //in dB

console.log(loss2)

const cell5 = cells[5];



if(cell5.innerText=='')
{
isEmptyField = true;
isValid = false;
}
else if(Number(cell5.innerText) !== loss2)
{
cell5.classList.remove('blink');
cell5.style.border='2px solid red';
isValid = false;
}
else if(Number(cell5.innerText) == loss2)
{
cell5.classList.remove('blink');
cell5.style.border='1px solid black';
cell5.contentEditable = 'false';
}
}

if (isEmptyField) {
alert1('error','Missing Loss Value!!','Please ensure all values are entered into the table before checking.');
}
else if (isValid) {
alert1('success','Table is Completed!!!','Now, click on PRINT button.');
for (let i = 3; i < PRows.length; i++) {
const row = PRows[i];
const cells = row.cells;
cells[5].classList.remove('blink');
cells[5].contentEditable = 'false';
cells[5].style.border='2px solid green';
}
document.getElementById('loss').disabled=true;
document.getElementById('print').disabled=false;

}

else {
wrongCount++;
if(wrongCount==3)
{
alert1('error','Wrong Value(s)!!',`Once again, incorrect value(s) were entered, but this time, the correct values have been updated into the table.\
<br>
<span style='text-align:left'>For e.g.,</span>
<math style="font-size:20px;color:blue">
<mi>&alpha;</mi>
<mo>=</mo>
<mo>-</mo>
<mfrac bevelled="true" style="font-size:20px">
<mfrac>
<mrow>
<msub>
<mi>log</mi>
<mn>10</mn>
</msub>
<mfrac>
<mi>${x1}</mi>
<mi>${x2}</mi>
</mfrac>
</mrow>
</mfrac>
<mfrac>
<mi>1</mi>
<mo>+</mo>
<mi>5</mi>
</mfrac>
</mfrac>
<mo>*</mo>
<mi>8.686</mi>
<mo>=</mo>
<mi>${loss2}</mi>
</math>
`);

for (let i = 3; i < PRows.length; i++) {
const row = PRows[i];
const cells = row.cells;
const x1 = Number(cells[3].innerText);
const x2 = Number(cells[4].innerText);

loss1 = - (Math.log10(x1/x2)/6); // in nepers
loss2 = Number((loss1 * 8.686).toFixed(4)); //in dB

const cell5 = cells[5];
cell5.innerHTML=loss2;
cell5.classList.remove('blink');
cell5.style.border='2px solid green';
cell5.contentEditable = 'false';
}
});
});*/
document.getElementById('loss').disabled=true;
document.getElementById('print').disabled=false;

}
else{
alert1('error','Wrong Value!!','Please enter the correct value (up to 4 decimal places) into the highlighted cell.');
}
}

}


</script>

<script>
var modal = document.getElementById("myModal");

Expand Down

0 comments on commit 473717f

Please sign in to comment.