add favicon, in heliomatics, added some js for 3D visulization, but did not use

heliosmatics.html

@@ -399,8 +399,16 @@ The calculation only give &theta;<sub>CM</sub> after the bending.
 <!-- ===================================================== -->
 
 <hr>
+<p></p>
 HELIOSmatics was first built by Ben P. Kay in MS Excel around 2010. It was modified by Ryan Tang later. And now it migrated to the web on Dec, 2022.
 
+
+<!--
+<hr>
+Experimental 3D model
+<div id="Plot_3D" class="plotStyle"></div>
+-->
+
 </body>
 
 <!-- ######################################################################################### -->
@@ -789,6 +797,7 @@ function PlotEZ(){
     xaxis: {range: xRange, title: { text : "Z [mm]", standoff : 1}, mirror : "allticks", linewidth : "1"},
     yaxis: {range: yRange, title: "Energy [MeV]" , mirror : "allticks", linewidth : "1"},  
     title: reactionName,
+    dragmode : "pan",
     margin: { l: 40, r: 40, b : 60, t : 40},
     legend: {yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
   };
@@ -928,6 +937,7 @@ function PlotRZ(){
     yaxis: {range: yyy, title: "R [mm]" , mirror : "allticks", linewidth : "1"},  
     title: reactionName,
     showlegend : true,
+    dragmode : "pan",
     margin: { l: 40, r: 40, b : 60, t : 40},
     legend: { yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"}
   };
@@ -1352,6 +1362,142 @@ document.getElementById('XGate').addEventListener('keypress',
   }, false
 );
 
+
+function HalfCylinder(r, y, d, up){
+ let a = [];
+ let b = [];
+ let c = [];
+
+ let nStep = 60;
+ let step = 2*r/nStep;
+
+ for( let i = 0; i <= nStep ; i++){
+  let x = -r + i * step;
+  a.push(x);
+  c.push(Math.sqrt(r*r - x*x) * up);
+  b.push(y);
+ }
+
+
+ for( let i = 0; i <= nStep; i ++){
+  let x = r - i * step;
+  a.push(x);
+  c.push(Math.sqrt(r*r - x*x) * up);
+  b.push(y+d);
+ }
+
+
+ let haha = [];
+ haha.push(a);
+ haha.push(b);
+ haha.push(c);
+
+ return haha;
+}
+
+function detMesh(startPos, phi){
+  let aaa = 110; // prepdist
+  let len = 500; // detLen
+  let www = 100; //det width
+
+  let a =[];
+  let b =[];
+  let c =[];
+
+  let cs = Math.cos(phi * Math.PI / 180);
+  let ss = Math.sin(phi * Math.PI / 180);
+  
+  let A0 = aaa * cs - www / 2 * ss;
+  let A1 = aaa * ss + www / 2 * cs;
+  let B0 = aaa * cs + www / 2 * ss;
+  let B1 = aaa * ss - www / 2 * cs;
+
+  a.push(A0); b.push(A1); c.push(startPos);
+  a.push(B0); b.push(B1); c.push(startPos);
+  a.push(B0); b.push(B1); c.push(startPos + len);
+  a.push(A0); b.push(A1); c.push(startPos + len);
+
+  let haha = [];
+  haha.push(a);
+  haha.push(b);
+  haha.push(c);
+
+  return haha;
+
+}
+
+function Helix(theta, phi, rho, sign, nCyc){
+ // sign = B-field
+ // nCyc < 0 = updatream 
+
+ let a = [];
+ let b = [];
+ let c = [];
+
+ let deg = Math.PI/180;
+ let nStep = 100;
+ let ts = Math.tan(theta * deg);
+ let zRange = nCyc * rho/ts * Math.PI * 2;
+ let zStep = zRange/nStep;
+ 
+ 
+ for( let i = 0; i < nStep; i++){
+   let zzz;
+   zzz = i * zStep;
+   b.push(zzz);
+   a.push( rho * ( Math.sin( ts * zzz / rho - phi * deg ) + Math.sin(phi * deg) ) );
+   c.push( rho * sign * (Math.cos( ts * zzz / rho - phi * deg ) - Math.cos(phi * deg)) );
+ }
+
+ let haha = [];
+ haha.push(a);
+ haha.push(b);
+ haha.push(c);
+ 
+ return haha;
+
+}
+
+
+function Plot3D(){
+ 
+ let u1 = HalfCylinder(bore, -1000, 2500., 1);
+ let d1 = HalfCylinder(bore, -1000, 2500., -1);
+
+ let line1 = Helix(40, 0,  80, -1, -1);
+ let line2 = Helix(2, 180, 10, -1,  0.5);
+ 
+ let data = [
+   {type : 'mesh3d', x : u1[0], y : u1[1], z : u1[2], hoverinfo: 'none', opacity : 0.2, color : "#DDDDDD"}
+   ,{type : 'mesh3d', x : d1[0], y : d1[1], z : d1[2], hoverinfo: 'none', opacity : 0.2, color : "#DDDDDD"}
+   ,{type : 'scatter3d', mode : 'lines', x : line1[0], y : line1[1], z : line1[2], name : "haha"}
+   ,{type : 'scatter3d', mode : 'lines', x : line2[0], y : line2[1], z : line2[2], name : "kaka"}
+ ];
+ 
+
+  /*
+  let data = [];
+
+  for( let i = 0; i < 1; i++){
+    let haha = detMesh(-200, 360/6*i + 90);
+
+    console.log(haha[0], "| ", haha[1], "| ", haha[2]);
+    data.push(
+       {type : 'mesh3d', x : haha[0], y : haha[1], z : haha[2], hoverinfo: 'none', opacity : 1.0, color : "#FF0000"} 
+     );
+  }*/
+
+  let layout = {
+    aspectmode: 'manual',
+    aspectratio:{ x : 0.5, y : 0.5, z : 2.5 },
+    margin: { l: 40, r: 40, b : 60, t : 40},
+  };
+  
+  Plotly.newPlot('Plot_3D', data, layout);
+
+}
+
+
 GetMass();
 CalConstants();
 SetSSType();
@@ -1359,6 +1505,9 @@ CalculateEZ();
 CalculateRZ();
 AdjustRecoilPos();
 CalThetaCM();
+
+//Plot3D();
+
 </script>
 
 

index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>SOLARIS Si-Array Mode Simulation </title>
+  <link rel="icon" type="image/x-icon" href="SOLARIS_favicon.png">
 </head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">