diff --git a/heliosmatics.html b/heliosmatics.html
index fd36c46..3319bd7 100644
--- a/heliosmatics.html
+++ b/heliosmatics.html
@@ -14,24 +14,27 @@
 
 <body>
 
-<h1>HELIOSmatics (experimental...)</h1>
+<h1>HELIOSmatics</h1>
+
+more todo: add orbital plot,
+
 <h2 id='reactionName'> 24F(d,p)25F@10MeV/u</h2>
 
 <table>
  <tr>
   <td style="text-align:right"> Beam (A):</td>
-  <td><Input type="text" size="2" value="24F" id="beam"/></td> 
+  <td><Input type="text" size="3" value="24F" id="beam"/></td> 
   <td style="text-align:right"> Beam Ex:</td>
-  <td><Input type="text" size="2" value="0" id="beamEx"/></td>
+  <td><Input type="text" size="3" value="0" id="beamEx"/></td>
   <td>MeV</td>
  </tr>
  <tr>
   <td style="text-align:right"> Target (a):</td>
-  <td><Input type="text" size="2" value="d" id="target"/></td> 
+  <td><Input type="text" size="3" value="d" id="target"/></td> 
  </tr>
  <tr>
   <td style="text-align:right"> Light (b):</td>
-  <td><Input type="text" size="2" value="p" id="light"/></td> 
+  <td><Input type="text" size="3" value="p" id="light"/></td> 
   <td style="text-align:right"> Q-value:</td>
   <td id='Q-value'>2.057</td>
   <td>MeV</td>
@@ -58,19 +61,18 @@
  </tr>
 </table>
 <p></p>
-<table id="setting">
 
 <table>
  <tr>
   <td style="text-align:right"> B-field:</td>
-  <td><Input type="text" size="1" value="-2" id='BField'/></td> 
+  <td><Input type="text" size="3" value="-2" id='BField'/></td> 
   <td>T</td>
   <td><Input type="range" min="-4" max="4" step="0.05" value="-2" style="width:400px" id='BRange'/> </td>
  </tr>
 
  <tr>
   <td style="text-align:right"> Beam Energy:</td>
-  <td><Input type="text" size="1" value="10" id='KEA'/></td>
+  <td><Input type="text" size="3" value="10" id='KEA'/></td>
   <td>MeV/u</td>
   <td><Input type="range" min="0" max="20" step="0.1" value="10" style="width:400px" id='KEARange'/> </td>
  </tr>
@@ -81,24 +83,26 @@
  </tr>
 </table>
 
-<table id="ExTable", style="border:1px solid">
+<p></p>
+
+<table id="ExTable", style="border:1px solid; text-align:center;">
   <tr>
-    <td> E<sub>x</sub> [MeV]</td>        
-    <td> &theta;<sub>cm</sub>[deg]</td>
-    <td>E<sub>b</sub>[MeV]</td>
-    <td>Z<sub>b0</sub>[mm]</td>
-    <td>Z<sub>b</sub>[mm]</td>
-    <td>2*&rho;<sub>b</sub>[mm]</td>
-    <td>&theta;Lab<sub>b</sub>[deg]</td>
-    <td>T<sub>b</sub>[ns]</td>
-    <td>E<sub>B</sub>[MeV]</td>
-    <td>&theta;Lab<sub>B</sub>[deg]</td>
-    <td>Z<sub>B0</sub>/2[mm]</td>
-    <td>2*&rho;<sub>B</sub>[mm]</td>
+    <th style="width:85px"> E<sub>x</sub> [MeV]</th>        
+    <th style="width:85px"> &theta;<sub>cm</sub>[deg]</th>
+    <th style="width:70px">E<sub>b</sub>[MeV]</th>
+    <th style="width:70px">Z<sub>b0</sub>[mm]</th>
+    <th style="width:70px">Z<sub>b</sub>[mm]</th>
+    <th style="width:70px">2&rho;<sub>b</sub>[mm]</th>
+    <th style="width:70px">&theta;Lab<sub>b</sub>[deg]</th>
+    <th style="width:60px">T<sub>b</sub>[ns]</th>
+    <th style="width:70px">E<sub>B</sub>[MeV]</th>
+    <th style="width:90px">&theta;Lab<sub>B</sub>[deg]</th>
+    <th style="width:80px">Z<sub>B0</sub>/2[mm]</th>
+    <th style="width:70px">2*&rho;<sub>B</sub>[mm]</th>
   </tr>
   </tr>
-   <td><input type="text" id='Ex1' name="Ex" size="7" value="0"/></td>
-   <td><input type="text" id='theta1' name="thetaCM" size="7" value="10"/></td>
+   <td><input type="text" id='Ex1' name="Ex" size="8" value="0"/></td>
+   <td><input type="text" id='theta1' name="thetaCM" size="8" value="10"/></td>
    <td></td>
    <td></td>
    <td></td>
@@ -121,14 +125,14 @@
 <table>
  <tr>
   <td style="text-align:right"> &theta;<sub>CM</sub>:</td>
-  <td><Input type="text" size="1" value="0" id='thetaCM'/></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>
  </tr>
  <td style="text-align:right"> Array Pos:</td>
-  <td><Input type="text" size="1" value="0" id='posArray'/></td> 
+  <td><Input type="text" size="3" value="-100" id='posArray'/></td> 
   <td>mm</td>
-  <td><Input type="range" min="-500" max="1000" step="1" value="0" style="width:600px" id='posArrayRange'/> </td>
+  <td><Input type="range" min="-500" max="1000" step="1" value="-100" style="width:600px" id='posArrayRange'/> </td>
  </tr>
 </table>
 
@@ -142,20 +146,9 @@
 <p id="n2"></p>
 <p id="n3"></p>
 
-<!--
-<p id='beam_k_lab'></p>
-<p id='E_tot_cm'></p>
-<p id='KE_cm'></p>
-<p id='max_Ex'></p>
-<p id='beta'></p>
-<p id='gamma'></p>
-
-<p id='msg'></p>
--->
-
 </body>
 
-
+<!-- ##################################### -->
 
 <script>
   
@@ -204,8 +197,12 @@ var minKEA;
 
 var perpDistant = 11.5; //mm, detector prepdicular distance
 var bore = 462.0; // mm
+var arrayLen = 50 * 10 + 2 * 9 // SOLARIS 
+var detLen = 50; // SOLARIS
+var nDet = 10; // SOLARIS
+var detGap = 2; // SOLARIS
 
-const c = 299.792468;
+const c = 299.792468; // mm/ns
 
 var beam_k_lab;  
 var E_tot_cm ;
@@ -219,7 +216,13 @@ var ez_slope ; // MeV/mm
 var alpha ;
 var alpha_B ;
 
+var xList =[];
+var yList =[];
 var ExList = [];
+var k_cm_List = [];
+
+var xRange = [-700, 0];
+var yRange = [0, 12];
 
 function GetMassFromSym(AZ, id){
   let str = 'massProxy.py?AZ=' + AZ;  
@@ -318,16 +321,6 @@ function CalConstants(){
   alpha = ez_slope/beta;
   alpha_B = alpha * heavy[1]/light[1];
 
-  
-  /*
-  document.getElementById('beam_k_lab').innerHTML = beam_k_lab;
-  document.getElementById('E_tot_cm').innerHTML = E_tot_cm;
-  document.getElementById('max_Ex').innerHTML = max_Ex;  
-  document.getElementById('KE_cm').innerHTML = KE_cm;
-  document.getElementById('beta').innerHTML = beta;  
-  document.getElementById('gamma').innerHTML = gamma;  
-  */
-
 }
 
 function SetSSType(){
@@ -335,16 +328,29 @@ function SetSSType(){
   let solaris = document.getElementById('SOLARIS').checked;
   let iss = document.getElementById('ISS').checked;
 
-  if ( helios == true ) perpDistant = 11.5;
-  if ( solaris == true ) perpDistant = 11.5;
-  if ( iss == true ) perpDistant = 20;
+  if ( helios == true ) {
+    perpDistant = 11.5;
+    detGap = 5;
+    detLen = 50;
+    nDet = 6;
+  }
+  if ( solaris == true ) {
+    perpDistant = 11.5;
+    detGap = 5;
+    detLen = 50;
+    nDet = 10;
+  }
+  if ( iss == true ) {
+    perpDistant = 20;
+    detGap = 5;
+    detLen = 100;
+    nDet = 4;
+  }
+  arrayLen = detLen * nDet + detGap * (nDet-1);
   
   //document.getElementById('n1').innerHTML = perpDistant;
 }
 
-var xList =[];
-var yList =[];
-
 function Calculation(){
   
   let tableEx = document.getElementById("ExTable");
@@ -353,9 +359,9 @@ function Calculation(){
   xList = [];
   yList = [];
   ExList = [];
+  k_cm_List = [];
   //alert("Calculation called");
   
-  let xmin ;
   
   for( let i = 1; i < nRow-1; i++){
     let Ex = parseFloat(document.getElementById("Ex" + i).value);
@@ -366,8 +372,8 @@ 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.);
@@ -377,9 +383,6 @@ function Calculation(){
     
     let Zb0 = (gamma*beta* qb - gamma * k_cm * cs )/alpha; //mm
     
-    if( i == 1 ) xmin = Zb0;
-    if( i > 1 & Zb0 < xmin) xmin = Zb0;
-    
     let rho = k_cm * ss/c/light[1]/Math.abs(BField) * 1000; // mm
     let Zb = Zb0 * (1- Math.asin(perpDistant/rho)/2/Math.PI);
     
@@ -425,11 +428,40 @@ function Calculation(){
     
   };
   
-  //var xRange = xmin < 0 ? [xmin, 0] : [xmin, xmin + 600]
+  Plot(xRange, yRange);
   
-  let xRange = [-700, 0];
+}
+
+function Plot(rangeX, rangeY){
+
+  SetSSType();
   
-  Plot(xRange, [0, 12]);
+  Plotly.purge("Plot_EZ");
+  
+  let nEx = xList.length;  
+  //document.getElementById('n0').innerHTML = nEx;
+  
+  let data = [
+    { x : xList[0], y : yList[0], mode:"lines", type:"scatter", name:"Ex="+ExList[0]}
+  ];
+
+  let layout = {
+    xaxis: {range: rangeX, title: "Z [mm]", mirror : "allticks", linewidth : "1"},
+    yaxis: {range: rangeY, title: "Energy [MeV]" , mirror : "allticks", linewidth : "1"},  
+    title: reactionName,
+    legend: {yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
+  };
+  
+  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);
   
 }
 
@@ -472,33 +504,6 @@ function PlotBore(){
   Plotly.addTraces("Plot_EZ", {x : zList, y: eList, name:"Bore" }, 0);
 }
 
-function Plot(rangeX, rangeY){
-  
-  let nEx = xList.length;
-  
-  //document.getElementById('n0').innerHTML = nEx;
-  
-  var data = [
-    { x : xList[0], y : yList[0], mode:"lines", type:"scatter", name:"Ex="+ExList[0]}
-  ];
-      
-  var layout = {
-    xaxis: {range: rangeX, title: "Z [mm]", mirror : "allticks", linewidth : "1"},
-    yaxis: {range: rangeY, title: "Energy [MeV]" , mirror : "allticks", linewidth : "1"},  
-    title: reactionName,
-    legend: {yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
-  };
-  
-  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();
-}
-
 document.getElementById('beam').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
@@ -508,6 +513,14 @@ document.getElementById('beam').addEventListener('keypress',
   }, false
 );
 
+document.getElementById('beamEx').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      CalConstants();
+    }
+  }, false
+);
+
 document.getElementById('target').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
@@ -535,13 +548,11 @@ document.getElementById('BField').addEventListener('keypress',
   }, false
 );
 
-document.getElementById('beamEx').addEventListener('keypress', 
-  function(e){
-    if(e.keyCode == 13){
-      CalConstants();
-    }
-  }, false
-);
+document.getElementById('BRange').oninput = function(){
+  document.getElementById('BField').value = this.value;
+  CalConstants();
+  Calculation();
+}
 
 document.getElementById('KEA').addEventListener('keypress', 
   function(e){
@@ -552,6 +563,12 @@ document.getElementById('KEA').addEventListener('keypress',
   }, false
 );
 
+document.getElementById('KEARange').oninput = function(){
+  document.getElementById('KEA').value = this.value;
+  CalConstants();
+  Calculation();
+}
+
 document.getElementById('thetaCM').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
@@ -560,14 +577,76 @@ document.getElementById('thetaCM').addEventListener('keypress',
   }, false
 );
 
+document.getElementById('thetaCMRange').oninput = function(){
+  document.getElementById('thetaCM').value = this.value;
+  CalConstants();
+  Calculation();
+}
+
+function AdjustRange(value){
+  let haha = parseFloat(value);
+  
+  let xStart = (haha < 0 ? haha - arrayLen - 100 : haha - 100);
+  let xEnd = (haha < 0 ? haha + 100: haha + arrayLen + 100);
+  
+  xRange = [xStart, xEnd];
+  
+  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);
+  }
+  
+  //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 = { 
+      type: 'rect', 
+      xref: 'x', 
+      yref: 'paper', 
+      x0 : pos[i][0], 
+      x1 : pos[i][1], 
+      y0 : 0,
+      y1 : 1,
+      fillcolor : '#9999FF',
+      opacity : 0.1,
+      line : { width : 0} }
+    shapeArray.push(newBlock);
+  }
+  
+  
+  var update = {
+    'xaxis.range' : xRange,
+    'yaxis.range' : yRange,
+    'shapes' : shapeArray
+  }
+  Plotly.relayout("Plot_EZ", update);
+}
+
 document.getElementById('posArray').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
       document.getElementById('posArrayRange').value = this.value;
+      AdjustRange(this.value);
     }
   }, false
 );
 
+document.getElementById('posArrayRange').oninput = function(){
+  document.getElementById('posArray').value = this.value;
+  AdjustRange(this.value);
+}
+
 window.logMeThis = function(){
   SetSSType();
   Calculation();
@@ -588,27 +667,6 @@ document.getElementById('HELIOS').addEventListener('click', FuncCheckSSType);
 document.getElementById('SOLARIS').addEventListener('click', FuncCheckSSType);
 document.getElementById('ISS').addEventListener('click', FuncCheckSSType);
 
-document.getElementById('BRange').oninput = function(){
-  document.getElementById('BField').value = this.value;
-  CalConstants();
-  Calculation();
-}
-
-document.getElementById('KEARange').oninput = function(){
-  document.getElementById('KEA').value = this.value;
-  CalConstants();
-  Calculation();
-}
-
-document.getElementById('thetaCMRange').oninput = function(){
-  document.getElementById('thetaCM').value = this.value;
-  CalConstants();
-  Calculation();
-}
-
-document.getElementById('posArrayRange').oninput = function(){
-  document.getElementById('posArray').value = this.value;
-}
 
 GetMass();
 CalConstants();

E_x [MeV]	θ_cm[deg]	E_b[MeV]	Z_b0[mm]	Z_b[mm]	2*ρ_b[mm]	θLab_b[deg]	T_b[ns]	E_B[MeV]	θLab_B[deg]	Z_B0/2[mm]	2*ρ_B[mm]	E_x [MeV]	θ_cm[deg]	E_b[MeV]	Z_b0[mm]	Z_b[mm]	2ρ_b[mm]	θLab_b[deg]	T_b[ns]	E_B[MeV]	θLab_B[deg]	Z_B0/2[mm]	2*ρ_B[mm]