with R-Z plot

heliosmatics.html

@@ -18,7 +18,7 @@
 
 more todo: add orbital plot,
 
-<h2 id='reactionName'> 24F(d,p)25F@10MeV/u</h2>
+<h1 id='reactionName' style="color: #1363A7"> 24F(d,p)25F@10MeV/u</h1>
 
 <table>
  <tr>
@@ -134,12 +134,51 @@ more todo: add orbital plot,
   <td>mm</td>
   <td><Input type="range" min="-500" max="1000" step="1" value="-100" style="width:600px" id='posArrayRange'/> </td>
  </tr>
+ <tr>
+  <td style="text-align:right"> Recoil Pos:</td>
+  <td><Input type="text" size="3" value="500" id='posRecoil'/></td> 
+  <td>mm</td>
+  <td><Input type="range" min="0" max="2000" step="1" value="500" style="width:600px" id='posRecoilRange'/> </td>
+ </tr>
 </table>
 
 <p></p>
 
-<div id="Plot_EZ" style="width:650px;height:600px;"></div>
+<table>
-
+  <tr>
+   <td></td>
+   <td style="text-align:left"> 
+     <table>
+      <tr> 
+        <td>zRange(Min):</td>
+        <td><Input type="text" size="4" value="0" id='zRange1'/></td>
+        <td>mm</td>
+        <td><Input type="range" min="-2000" max="4000" step="1" value="0" style="width:300px" id='zRange1Slider'/></td>
+      </tr>
+      <tr> 
+        <td>zRange(Max):</td>
+        <td><Input type="text" size="4" value="4000" id='zRange2'/></td>
+        <td>mm</td>
+        <td><Input type="range" min="-2000" max="4000" step="1" value="4000" style="width:300px" id='zRange2Slider'/></td>
+      </tr>
+      <tr> 
+        <td>rRange:</td>
+        <td><Input type="text" size="4" value="50" id='rRange'/></td>
+        <td>mm</td>
+        <td><Input type="range" min="1" max="400" step="1" value="50" style="width:300px" id='rRangeSlider'/></td>
+      </tr>
+     </table
+  </td>
+  
+  <tr>
+    <td>
+      <div id="Plot_EZ" style="width:650px;height:600px;"></div>
+    </td>
+    <td>
+      <div id="Plot_RZ" style="width:650px;height:600px;"></div>
+    </td>
+  </tr>
+</table>
 
 <p id="n0"></p>
 <p id="n1"></p>
@@ -156,8 +195,8 @@ function addRow() {
   var table = document.getElementById("ExTable"); 
   var nRow = table.rows.length;
   var row = table.insertRow(nRow-1);
-  row.innerHTML = '<td><input type="text" name="Ex" size="7" value=\"' + (nRow-2) + '\" id=\"Ex' + (nRow-1) + '\"/></td> \
+  row.innerHTML = '<td><input type="text" name="Ex" size="8" value=\"' + (nRow-2) + '\" id=\"Ex' + (nRow-1) + '\"/></td> \
-                   <td><input type="text" name="thetaCM" size="7" value=\"10\" id=\"theta' + (nRow-1) + '\"/></td> \
+                   <td><input type="text" name="thetaCM" size="8" value=\"10\" id=\"theta' + (nRow-1) + '\"/></td> \
                    <td></td> \
                    <td></td> \
                    <td></td> \
@@ -168,7 +207,8 @@ function addRow() {
                    <td></td> \
                    <td></td> \
                    <td></td>';
-  Calculation();
+  CalculateEZ();
+  CalculateRZ();
 }
 
 function deleteRow(){
@@ -177,7 +217,8 @@ function deleteRow(){
   if ( nRow > 3){
      table.deleteRow(nRow-2);
   }
-  Calculation();
+  CalculateEZ();
+  CalculateRZ();
 }
   
 var beam = []; //A, Z, Mass, Name
@@ -216,14 +257,21 @@ var ez_slope ; // MeV/mm
 var alpha ;
 var alpha_B ;
 
-var xList =[];
+var xList =[]; // for E-Z plot
-var yList =[];
+var yList =[]; // for E-Z plot
 var ExList = [];
-var k_cm_List = [];
+var Zb0List = [];
+var rhoList = [];
+
+var ZB0List = [];
+var rhoBList = [];
 
 var xRange = [-700, 0];
 var yRange = [0, 12];
 
+var zList = []; // for R-Z plot
+var rList = []; // for R-Z plot
+
 function GetMassFromSym(AZ, id){
   let str = 'massProxy.py?AZ=' + AZ;  
   
@@ -351,7 +399,7 @@ function SetSSType(){
   //document.getElementById('n1').innerHTML = perpDistant;
 }
 
-function Calculation(){
+function CalculateEZ(){
   
   let tableEx = document.getElementById("ExTable");
   let nRow = tableEx.rows.length;
@@ -359,8 +407,12 @@ function Calculation(){
   xList = [];
   yList = [];
   ExList = [];
-  k_cm_List = [];
+  Zb0List = [];
-  //alert("Calculation called");
+  rhoList = [];
+  ZB0List = [];
+  rhoBList = [];
+  
+  //alert("CalculateEZ called");
   
   
   for( let i = 1; i < nRow-1; i++){
@@ -373,7 +425,6 @@ function Calculation(){
     let haha1 = E_tot_cm*E_tot_cm - Math.pow(heavy[2] + Ex + light[2],2);
     let haha2 = E_tot_cm*E_tot_cm - Math.pow(heavy[2] + Ex - light[2],2);
     let k_cm = Math.sqrt(haha1*haha2)/2/E_tot_cm;
-    k_cm_List.push(k_cm);
     
     let cs = Math.cos(theta*Math.PI/180.);
     let ss = Math.sin(theta*Math.PI/180.);
@@ -382,8 +433,10 @@ function Calculation(){
     let Eb = gamma * qb - gamma * beta * k_cm * cs - light[2]; 
     
     let Zb0 = (gamma*beta* qb - gamma * k_cm * cs )/alpha; //mm
+    Zb0List.push(Zb0);
     
     let rho = k_cm * ss/c/light[1]/Math.abs(BField) * 1000; // mm
+    rhoList.push(rho);
     let Zb = Zb0 * (1- Math.asin(perpDistant/rho)/2/Math.PI);
     
     let thetaLab = 180 - Math.atan2(k_cm * ss, gamma * (beta * qb - k_cm * cs)) * 180/Math.PI;
@@ -402,6 +455,8 @@ function Calculation(){
     let thetaLab_B = Math.atan2(-k_cm * ss, gamma * (beta * qB + k_cm * cs)) * 180/Math.PI;
     let ZB0 = (gamma*beta* qB + gamma * k_cm * cs )/alpha_B; //mm
     let rhoB = k_cm * ss/c/heavy[1]/Math.abs(BField) * 1000; // mm
+    ZB0List.push(ZB0);
+    rhoBList.push(rhoB);
     
     tableEx.rows[i].cells[8].innerHTML = EB.toFixed(3);
     tableEx.rows[i].cells[9].innerHTML = thetaLab_B.toFixed(2);
@@ -428,22 +483,26 @@ function Calculation(){
     
   };
   
-  Plot(xRange, yRange);
+  PlotEZ(xRange, yRange);
   
 }
 
-function Plot(rangeX, rangeY){
+function PlotEZ(rangeX, rangeY){
 
   SetSSType();
   
   Plotly.purge("Plot_EZ");
   
   let nEx = xList.length;  
-  //document.getElementById('n0').innerHTML = nEx;
   
-  let data = [
+  let data = [];
-    { x : xList[0], y : yList[0], mode:"lines", type:"scatter", name:"Ex="+ExList[0]}
+  
-  ];
+  for( let i = 0; i < nEx; i++){    
+    let newData = {
+      x : xList[i], y : yList[i], mode:"lines", type:"scatter", name:"Ex="+ExList[i]
+    }
+    data.push(newData);
+  }
 
   let layout = {
     xaxis: {range: rangeX, title: "Z [mm]", mirror : "allticks", linewidth : "1"},
@@ -453,55 +512,109 @@ function Plot(rangeX, rangeY){
   };
   
   Plotly.newPlot( "Plot_EZ", data, layout );
-  
+
-  for( let i = 1; i < nEx; i++){    
-    Plotly.addTraces("Plot_EZ", {x : xList[i], y: yList[i], name:"Ex="+ExList[i]});
-  }
   
   PlotThetaCMLine(document.getElementById('thetaCM').value);
   PlotBore();
   
-  AdjustRange(-100);
+  AdjustRangeEZ(-100);
-  
+  PlotRZ();
 }
 
 function PlotThetaCMLine(thetaCM){
   let cs = Math.cos(thetaCM * Math.PI /180);
   let ss = Math.sin(thetaCM * Math.PI /180);
   
-  let zList = [];
+  let zzList = [];
   let eList = [];
   
   for( let z = -2000; z < 2000; z+=30){
-    zList.push(z);
+    zzList.push(z);
     
     let kaka = Math.pow(gamma * ss,2);
     let a1 = light[2]*light[2]*(1-kaka);
-    
     let haha = (cs*Math.sqrt(alpha*alpha*z*z + a1) - kaka * ez_slope * z)/(1-kaka)- light[2];
-    
     eList.push(haha);
-    
   }
   
-  Plotly.addTraces("Plot_EZ", {x : zList, y: eList, name:"thetaCM=" + thetaCM }, 0);
+  Plotly.addTraces("Plot_EZ", {x : zzList, y: eList, name:"thetaCM=" + thetaCM }, 0);
-  
 }
 
 function PlotBore(){
-  let zList = [];
+  let zzList = [];
   let eList = [];
   
   for( let z = -2000; z < 2000; z+=30){
-    zList.push(z);
+    zzList.push(z);
     
     let haha = Math.sqrt((z*z+Math.PI*Math.PI*bore*bore)*alpha*alpha + light[2]*light[2]) - light[2];
-    
     eList.push(haha);
+  }
+  
+  Plotly.addTraces("Plot_EZ", {x : zzList, y: eList, name:"Bore" }, 0);
+}
+
+function CalculateRZ(){
+  // this rquire ZB0List and rhoBList from CalculateEZ();
+  
+  document.getElementById('n0').innerHTML = ZB0List.length;
+  
+  zList = [];
+  rList = [];
+  
+  for( let z = -2000; z < 4000; z += 2 ) zList.push(z);
+  
+  // cal the heavy recoil first
+  for( let i = 0; i < ZB0List.length; i++){
+    
+    let rrr = []
+    
+    for( let j = 0; j < zList.length; j++){
+      if( zList[j] < 0 ){
+        rrr.push(NaN);
+      }else{
+        rrr.push(2*rhoBList[i] *Math.abs( Math.sin(zList[j] * Math.PI / ZB0List[i])));
+      }
+    }
+    
+    rList.push(rrr);
     
   }
   
-  Plotly.addTraces("Plot_EZ", {x : zList, y: eList, name:"Bore" }, 0);
+  PlotRZ();
+  AdjustRecoilPos();
+}
+
+function PlotRZ(){
+  Plotly.purge("Plot_RZ");
+  
+  let data = [];
+  let nEx = rList.length;
+  
+  for(let i = 0 ; i < nEx; i++ ){
+    let newData = {
+      x : zList,
+      y : rList[i], 
+      mode : "lines",
+      type : "scatter", 
+      name : "Ex="+ExList[i] + ",theta=" + document.getElementById('theta'+(i+1)).value,
+    }
+    data.push(newData);
+  }
+  
+  let xxx = [parseInt(document.getElementById('zRange1').value), parseInt(document.getElementById('zRange2').value)];
+  let yyy = [0, parseInt(document.getElementById('rRange').value)];
+  
+  let layout = {
+    xaxis: {range: xxx, title: "Z [mm]", mirror : "allticks", linewidth : "1"},
+    yaxis: {range: yyy, title: "R [mm]" , mirror : "allticks", linewidth : "1"},  
+    title: reactionName,
+    showlegend : true,
+    legend: { yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
+  };
+  
+  Plotly.newPlot( "Plot_RZ", data, layout);
+  
 }
 
 document.getElementById('beam').addEventListener('keypress', 
@@ -543,7 +656,9 @@ document.getElementById('BField').addEventListener('keypress',
   function(e){
     if(e.keyCode == 13){
       document.getElementById('BRange').value = this.value;
-      //CalConstants();
+      CalConstants();
+      CalculateEZ();
+      CalculateRZ();
     }
   }, false
 );
@@ -551,14 +666,17 @@ document.getElementById('BField').addEventListener('keypress',
 document.getElementById('BRange').oninput = function(){
   document.getElementById('BField').value = this.value;
   CalConstants();
-  Calculation();
+  CalculateEZ();
+  CalculateRZ();
 }
 
 document.getElementById('KEA').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
       document.getElementById('KEARange').value = this.value;
-      //CalConstants();
+      CalConstants();
+      CalculateEZ();
+      CalculateRZ();
     }
   }, false
 );
@@ -566,13 +684,17 @@ document.getElementById('KEA').addEventListener('keypress',
 document.getElementById('KEARange').oninput = function(){
   document.getElementById('KEA').value = this.value;
   CalConstants();
-  Calculation();
+  CalculateEZ();
+  CalculateRZ();
 }
 
 document.getElementById('thetaCM').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
       document.getElementById('thetaCMRange').value = this.value;
+      CalConstants();
+      CalculateEZ();
+      CalculateRZ()
     }
   }, false
 );
@@ -580,10 +702,11 @@ document.getElementById('thetaCM').addEventListener('keypress',
 document.getElementById('thetaCMRange').oninput = function(){
   document.getElementById('thetaCM').value = this.value;
   CalConstants();
-  Calculation();
+  CalculateEZ();
+  CalculateRZ()
 }
 
-function AdjustRange(value){
+function AdjustRangeEZ(value){
   let haha = parseFloat(value);
   
   let xStart = (haha < 0 ? haha - arrayLen - 100 : haha - 100);
@@ -607,7 +730,7 @@ function AdjustRange(value){
   //document.getElementById('n0').innerHTML = pos;
   //document.getElementById('n2').innerHTML = arrayLen;
   //document.getElementById('n1').innerHTML = xRange;
-  
+
   let shapeArray = [];
   for( let i = 0; i < nDet; i++){
     let newBlock = { 
@@ -624,7 +747,6 @@ function AdjustRange(value){
     shapeArray.push(newBlock);
   }
   
-  
   var update = {
     'xaxis.range' : xRange,
     'yaxis.range' : yRange,
@@ -637,19 +759,156 @@ document.getElementById('posArray').addEventListener('keypress',
   function(e){
     if(e.keyCode == 13){
       document.getElementById('posArrayRange').value = this.value;
-      AdjustRange(this.value);
+      AdjustRangeEZ(this.value);
+      AdjustRecoilPos();
     }
   }, false
 );
 
 document.getElementById('posArrayRange').oninput = function(){
   document.getElementById('posArray').value = this.value;
-  AdjustRange(this.value);
+  AdjustRangeEZ(this.value);
+  AdjustRecoilPos();
 }
 
+function AdjustRecoilPos(){
+  let pos1 = parseInt(document.getElementById('posRecoil').value);
+  let pos2 = pos1+10;
+  
+  //document.getElementById('n0').innerHTML = pos1;
+  
+  let shapeRecoil = {
+    type: 'rect', 
+      xref: 'x', 
+      yref: 'y', 
+      x0 : pos1, 
+      x1 : pos2, 
+      y0 : 10,
+      y1 : 45,
+      fillcolor : '#FF0000',
+      opacity : 0.4,
+      line : { width : 0} 
+  };
+  
+  let haha = parseFloat(document.getElementById('posArray').value);
+  
+  let pos = [];
+  for( let i = 0; i < nDet; i++){
+    let kaka = [];
+    if( haha < 0 ){
+      kaka.push(haha - (i+1) * detLen - i * detGap);
+      kaka.push(haha - (i) * detLen - i * detGap);
+    }else{
+      kaka.push(haha + (i+1) * detLen + i * detGap);
+      kaka.push(haha + (i) * detLen + i * detGap);
+    }
+    pos.push(kaka);
+  }
+  let totalShape = [];
+  for( let i = 0; i < nDet; i++){
+    let newhaha = {
+      type: 'rect', 
+      xref: 'x', 
+      yref: 'y', 
+      x0 : pos[i][0], 
+      x1 : pos[i][1], 
+      y0 : 0,
+      y1 : perpDistant,
+      fillcolor : '#9999FF',
+      opacity : 0.1,
+      line : { width : 0} };
+    totalShape.push(newhaha);
+  }
+  totalShape.push(shapeRecoil);
+  
+  var update = {
+    'shapes' : totalShape
+  }
+  Plotly.relayout("Plot_RZ", update);
+  
+}
+
+document.getElementById('posRecoil').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      document.getElementById('posRecoilRange').value = this.value;
+      AdjustRecoilPos();
+    }
+  }, false
+);
+
+document.getElementById('posRecoilRange').oninput = function(){
+  document.getElementById('posRecoil').value = this.value;
+  AdjustRecoilPos();
+}
+
+function AdjustRangeRZ(){
+  
+  let zmin = parseInt(document.getElementById('zRange1').value);
+  let zmax = parseInt(document.getElementById('zRange2').value);
+  let rmax = parseInt(document.getElementById('rRange').value);
+  
+  let update = {
+    'xaxis.range' : [zmin, zmax],
+    'yaxis.range' : [0, rmax]
+  }
+  Plotly.relayout("Plot_RZ", update);
+}
+
+document.getElementById('zRange1').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      document.getElementById('zRange1Slider').value = this.value;
+      AdjustRangeRZ();
+    }
+  }, false
+);
+
+document.getElementById('zRange1Slider').oninput = function(){
+  document.getElementById('zRange1').value = this.value;
+  AdjustRangeRZ();
+}
+
+document.getElementById('zRange2').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      document.getElementById('zRange2Slider').value = this.value;
+      AdjustRangeRZ();
+    }
+  }, false
+);
+
+document.getElementById('zRange2Slider').oninput = function(){
+  document.getElementById('zRange2').value = this.value;
+  AdjustRangeRZ();
+}
+
+document.getElementById('rRange').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      let rrrr = parseInt(this.value);
+      if ( rrrr < 1 ){
+        document.getElementById('rRange').value = 1;
+        rrrr = 1;
+      }
+      document.getElementById('rRangeSlider').value = rrrr;
+      AdjustRangeRZ();
+      
+    }
+  }, false
+);
+
+document.getElementById('rRangeSlider').oninput = function(){
+  document.getElementById('rRange').value = this.value;
+  AdjustRangeRZ();
+}
+
+
+
 window.logMeThis = function(){
   SetSSType();
-  Calculation();
+  CalculateEZ();
+  CalculateRZ();
 }
 var FuncEx = window.logMeThis.bind(null, "Ex");
 window.addEventListener('keypress', FuncEx);
@@ -659,7 +918,7 @@ window.addEventListener('keypress', FuncThetaCM);
 
 window.checkSSType = function(){
   SetSSType();
-  Calculation();
+  CalculateEZ();
 }
 
 var FuncCheckSSType = window.checkSSType.bind(null, "SSType");
@@ -671,7 +930,9 @@ document.getElementById('ISS').addEventListener('click', FuncCheckSSType);
 GetMass();
 CalConstants();
 SetSSType();
-Calculation();
+CalculateEZ();
+CalculateRZ();
+AdjustRecoilPos();
 </script>