diff --git a/heliosmatics.html b/heliosmatics.html
index 5463415..8731377 100644
--- a/heliosmatics.html
+++ b/heliosmatics.html
@@ -16,8 +16,6 @@
 
 <h1>HELIOSmatics</h1>
 
-more todo: add orbital plot,
-
 <h1 id='reactionName' style="color: #1363A7"> 24F(d,p)25F@10MeV/u</h1>
 
 <table>
@@ -114,6 +112,20 @@ more todo: add orbital plot,
    <td></td>
    <td></td>
   </tr>
+  </tr>
+   <td><input type="text" id='Ex2' name="Ex" size="8" value="0"/></td>
+   <td><input type="text" id='theta2' name="thetaCM" size="8" value="40"/></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
   <tr>
     <td><button type="button" onclick="addRow()" style="width:85px">Add E<sub>x</sub></button></td>
     <td><button type="button" onclick="deleteRow()">Remove E<sub>x</sub></button></td>
@@ -127,7 +139,7 @@ more todo: add orbital plot,
   <td style="text-align:right"> &theta;<sub>CM</sub>:</td>
   <td><Input type="text" size="3" value="0" id='thetaCM'/></td> 
   <td>deg</td>
-  <td><Input type="range" min="0" max="40" step="0.1" value="0" style="width:600px" id='thetaCMRange'/> </td>
+  <td><Input type="range" min="0" max="50" step="0.1" value="0" style="width:600px" id='thetaCMRange'/> </td>
  </tr>
  <td style="text-align:right"> Array Pos:</td>
   <td><Input type="text" size="3" value="-100" id='posArray'/></td> 
@@ -136,9 +148,9 @@ more todo: add orbital plot,
  </tr>
  <tr>
   <td style="text-align:right"> Recoil Pos:</td>
-  <td><Input type="text" size="3" value="500" id='posRecoil'/></td> 
+  <td><Input type="text" size="3" value="1500" id='posRecoil'/></td> 
   <td>mm</td>
-  <td><Input type="range" min="0" max="2000" step="1" value="500" style="width:600px" id='posRecoilRange'/> </td>
+  <td><Input type="range" min="0" max="2000" step="1" value="1500" style="width:600px" id='posRecoilRange'/> </td>
  </tr>
 </table>
 
@@ -151,15 +163,15 @@ more todo: add orbital plot,
      <table>
       <tr> 
         <td>zRange(Min):</td>
-        <td><Input type="text" size="4" value="0" id='zRange1'/></td>
+        <td><Input type="text" size="4" value="-200" id='zRange1'/></td>
         <td>mm</td>
-        <td><Input type="range" min="-2000" max="4000" step="1" value="0" style="width:300px" id='zRange1Slider'/></td>
+        <td><Input type="range" min="-2000" max="4000" step="1" value="-200" style="width:300px" id='zRange1Slider'/></td>
       </tr>
       <tr> 
         <td>zRange(Max):</td>
-        <td><Input type="text" size="4" value="4000" id='zRange2'/></td>
+        <td><Input type="text" size="4" value="2000" id='zRange2'/></td>
         <td>mm</td>
-        <td><Input type="range" min="-2000" max="4000" step="1" value="4000" style="width:300px" id='zRange2Slider'/></td>
+        <td><Input type="range" min="-2000" max="4000" step="1" value="2000" style="width:300px" id='zRange2Slider'/></td>
       </tr>
       <tr> 
         <td>rRange:</td>
@@ -192,9 +204,9 @@ more todo: add orbital plot,
 <script>
   
 function addRow() {
-  var table = document.getElementById("ExTable"); 
-  var nRow = table.rows.length;
-  var row = table.insertRow(nRow-1);
+  let table = document.getElementById("ExTable"); 
+  let nRow = table.rows.length;
+  let row = table.insertRow(nRow-1);
   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="8" value=\"10\" id=\"theta' + (nRow-1) + '\"/></td> \
                    <td></td> \
@@ -209,11 +221,12 @@ function addRow() {
                    <td></td>';
   CalculateEZ();
   CalculateRZ();
+  AdjustRangeEZ(document.getElementById('posArray').value);
 }
 
 function deleteRow(){
-  var table = document.getElementById("ExTable");
-  var nRow = table.rows.length;
+  let table = document.getElementById("ExTable");
+  let nRow = table.rows.length;
   if ( nRow > 3){
      table.deleteRow(nRow-2);
   }
@@ -266,11 +279,12 @@ var rhoList = [];
 var ZB0List = [];
 var rhoBList = [];
 
-var xRange = [-700, 0];
+var xRange ;
 var yRange = [0, 12];
 
 var zList = []; // for R-Z plot
-var rList = []; // for R-Z plot
+var rbList = []; // for R-Z plot
+var rBList = []; // for R-Z plot
 
 function GetMassFromSym(AZ, id){
   let str = 'massProxy.py?AZ=' + AZ;  
@@ -412,8 +426,7 @@ function CalculateEZ(){
   ZB0List = [];
   rhoBList = [];
   
-  //alert("CalculateEZ called");
-  
+  //alert("CalculateEZ called, nRow = " + nRow);
   
   for( let i = 1; i < nRow-1; i++){
     let Ex = parseFloat(document.getElementById("Ex" + i).value);
@@ -483,6 +496,13 @@ function CalculateEZ(){
     
   };
   
+  let haha = parseFloat(document.getElementById('posArrayRange').value);
+  let xStart = (haha < 0 ? haha - arrayLen - 100 : haha - 100);
+  let xEnd = (haha < 0 ? haha + 100: haha + arrayLen + 100);
+  
+  xRange = [xStart, xEnd];
+  //document.getElementById('n0').innerHTML = xRange;
+  
   PlotEZ(xRange, yRange);
   
 }
@@ -490,11 +510,9 @@ function CalculateEZ(){
 function PlotEZ(rangeX, rangeY){
 
   SetSSType();
-  
   Plotly.purge("Plot_EZ");
-  
+
   let nEx = xList.length;  
-  
   let data = [];
   
   for( let i = 0; i < nEx; i++){    
@@ -557,18 +575,15 @@ function PlotBore(){
 function CalculateRZ(){
   // this rquire ZB0List and rhoBList from CalculateEZ();
   
-  document.getElementById('n0').innerHTML = ZB0List.length;
-  
   zList = [];
-  rList = [];
+  rbList = [];
+  rBList = [];
   
   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);
@@ -576,9 +591,28 @@ function CalculateRZ(){
         rrr.push(2*rhoBList[i] *Math.abs( Math.sin(zList[j] * Math.PI / ZB0List[i])));
       }
     }
-    
-    rList.push(rrr);
-    
+    rBList.push(rrr);
+  }
+  
+  // cal the light recoil first
+  for( let i = 0; i < Zb0List.length; i++){
+    let rrr = []
+    for( let j = 0; j < zList.length; j++){
+      if( target[0] > light[0] ){
+        if( zList[j] > 0 ){
+          rrr.push(NaN);
+        }else{
+          rrr.push(2*rhoList[i] *Math.abs( Math.sin(zList[j] * Math.PI / Zb0List[i])));
+        }
+      }else{
+        if( zList[j] < 0 ){
+          rrr.push(NaN);
+        }else{
+          rrr.push(2*rhoList[i] *Math.abs( Math.sin(zList[j] * Math.PI / Zb0List[i])));
+        }
+      }
+    }
+    rbList.push(rrr);
   }
   
   PlotRZ();
@@ -589,18 +623,29 @@ function PlotRZ(){
   Plotly.purge("Plot_RZ");
   
   let data = [];
-  let nEx = rList.length;
+  let nEx = ExList.length;
   
   for(let i = 0 ; i < nEx; i++ ){
     let newData = {
       x : zList,
-      y : rList[i], 
+      y : rBList[i], 
       mode : "lines",
       type : "scatter", 
       name : "Ex="+ExList[i] + ",theta=" + document.getElementById('theta'+(i+1)).value,
     }
     data.push(newData);
   }
+  for(let i = 0 ; i < nEx; i++ ){
+    let newData = {
+      x : zList,
+      y : rbList[i], 
+      mode : "lines",
+      line : {dash : 'dashdot', width : 1 },
+      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)];