separete beamline and simplify draw line marching workload

geo.js

@@ -101,7 +101,7 @@ class beamLine extends basicShape{
     this.clear();
     let ctx = this.layer.getContext('2d');
     if(isDashed){
-      ctx.setLineDash([10,6]);
+      ctx.setLineDash([10,8]);
       ctx.lineDashOffset = -this.offset;
       ctx.strokeStyle = this.color[0];
     }else{
@@ -113,14 +113,58 @@ class beamLine extends basicShape{
   }
 
   march(){
-    this.offset++;
+    this.offset+=1;
-    if( this.offset > 16) this.offset = 0;
+    if( this.offset > 18) this.offset = 0;
     this.draw(true);
     //setTimeout(this.march.bind(this), 20);
   }
 
 }
 
+class multiBeamLine extends basicShape{
+  constructor(posArray){
+    super(beamLineLayer, color.BeamPipe);
+    this.posArray = posArray;
+    this.lineWidth = 10;
+    this.offset = 0;
+
+    this.shape.moveTo(this.posArray[0][0], this.posArray[0][1]);
+    for( let i = 1; i < posArray.length; i++) {
+      this.shape.lineTo(this.posArray[i][0], this.posArray[i][1]);
+    }
+  }
+  draw(isDashed){
+    this.clear();
+    let ctx = this.layer.getContext('2d');
+    if(isDashed){
+      ctx.setLineDash([4,4]);
+      ctx.lineDashOffset = -this.offset;
+      ctx.strokeStyle = this.color[0];
+    }else{
+      ctx.strokeStyle = this.color[1];
+      ctx.setLineDash([]);
+    }
+    ctx.lineWidth = 10;
+    ctx.stroke(this.shape);
+  }
+
+  march(){
+    this.offset+=1;
+    if( this.offset > 8) this.offset = 0;
+    this.draw(true);
+    //setTimeout(this.march.bind(this), 20);
+  }
+
+  clear(){
+    let ctx = this.layer.getContext('2d');
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.stroke(this.shape);
+    ctx.restore();
+  }
+
+}
+
 class beamRectElement extends basicShape{
   constructor(xy, rad, l, w, color){
     super(staticLayer, color);
@@ -278,66 +322,57 @@ function DrawText(xy, text, color, fontSize){
 let windowSize = [3840, 2160]; // 4K
 
 let sourceLine;
-
 {
   let RFSource1a = new beamRectElement([windowSize[0]*0.9, windowSize[1]*0.9], 0, 40, 100, color.RFsourcce);
   let RFSource1b = new beamRectElement(RFSource1a.exitPos, 0, 40, 20, color.RFsourcce);
   let s0 = new beamSpliter(RFSource1b.GetExitPos(120), 50, Math.PI, color.Dipole);
-  let b0a = new beamLine(RFSource1b.exitPos, 0, 200);
 
-  let tandem = new tandemClass(b0a.exitPos, 300, 100, color.Tandem);
+  let tandem = new tandemClass(RFSource1b.GetExitPos(200), 300, 100, color.Tandem);
-  let b0b = new beamLine(tandem.exitPos, 0, 300); b0b.offset = 8;
 
   let q0 = new beamRectElement(tandem.GetExitPos(50), 0, 60, 60, color.Qpole);
   let df0a = new beamRectElement(q0.GetExitPos(50), 0, 30, 40, color.Deflector);
   let df0b = new beamRectElement(df0a.GetExitPos(20), 0, 30, 40, color.Deflector);
 
-  sourceLine = {RFSource1a, RFSource1b, b0a,  s0, tandem, b0b, q0, df0a, df0b};
+  sourceLine = {RFSource1a, RFSource1b, s0, tandem, q0, df0a, df0b};
 }
 
 //============ beam line for target room 1
 let targetRoom1;
 {
-  let dipole = new beamDipole(sourceLine.b0b.exitPos, 80, Math.PI/2, 0, color.Dipole);
+  let dipole = new beamDipole(sourceLine.tandem.GetExitPos(300), 80, Math.PI/2, 0, color.Dipole);
-  let beampipe = new beamLine(dipole.exitPos, -Math.PI/2, 100, color.BeamPipe);
+  let fan = new beamSpliter(dipole.GetExitPos(100), 50, -100 * deg, color.Deflector);
-  let fan = new beamSpliter(beampipe.exitPos, 50, -100 * deg, color.Deflector);
 
   let upperLine;
   {
     //---------- upper beam line
-    let b1a_0 = new beamLine(fan.GetExitPos(0.8, 0), fan.exitAng , 400); b1a_0.offset = 8;
     let q1a = new beamRectElement(fan.GetExitPos(0.8, 100), fan.exitAng, 60, 60, color.Qpole);
     let df1a = new beamRectElement(q1a.GetExitPos(30), fan.exitAng, 30, 40, color.Dipole);
-    let b1a_1 = new beamLine(b1a_0.exitPos, fan.exitAng, 300);
+    let GammaStation = new detectorStation(fan.GetExitPos(0.8, 400), "Gamma");
-    let GammaStation = new detectorStation(b1a_0.exitPos, "Gamma");
+    let Catrina = new detectorStation(fan.GetExitPos(0.8, 700), "Carina");
-    let Catrina = new detectorStation(b1a_1.exitPos, "Carina");
 
-    upperLine = {b1a_0, q1a, df1a, b1a_1, GammaStation, Catrina};
+    upperLine = {q1a, df1a, GammaStation, Catrina};
   }
   //----------- middle beam line
   let middleLine;
   {
-    let b1b = new beamLine(fan.GetExitPos(0.55, 0), fan.GetExitAng(0.55) , 300); b1b.offset = 8;
+    middleLine = {};
-    middleLine = {b1b};
   }
   //----------- lower beam line
   let lowerLine;
   {
-    let b1c = new beamLine(fan.GetExitPos(0.35, 0), fan.GetExitAng(0.35) , 300);
     let q1c = new beamRectElement( fan.GetExitPos(0.35, 100), fan.GetExitAng(0.35), 60, 60, color.Qpole);
     let df1c = new beamRectElement( q1c.GetExitPos(50), fan.GetExitAng(0.35), 30, 40, color.Deflector);
-    
+    lowerLine = {q1c, df1c};
-    lowerLine = {b1c, q1c, df1c};
   }
 
-  targetRoom1 = {dipole, beampipe, fan, upperLine, middleLine, lowerLine};
+  targetRoom1 = {dipole, fan, upperLine, middleLine, lowerLine};
 }
 
 //================= beam line to target room 2
 let targetRoom2;
 {
-  let b2 = new beamLine(sourceLine.b0b.exitPos, 0, 600); b2.offset = 11;
+  let b2 = new beamLine(sourceLine.tandem.GetExitPos(300), 0, 600); b2.offset = 11;
-  let q2 = new beamRectElement( sourceLine.b0b.GetExitPos(150), 0, 60, 60, color.Qpole);
+  let q2 = new beamRectElement( sourceLine.tandem.GetExitPos(450), 0, 60, 60, color.Qpole);
   let df2 = new beamRectElement( q2.GetExitPos(50), 0, 40, 40, color.Deflector);
   let q3 = new beamRectElement( df2.GetExitPos(50), 0, 60, 60, color.Qpole);
   let d2 = new beamDipole(b2.GetExitPos(0), 80, 90 * deg, 0, color.Dipole);
@@ -426,6 +461,59 @@ let targetRoom2;
                  ResolutLine, AnasenLine, lowerLine};
 }
 
+//============================= beam lines
+
+let posArray; // thsi is a collection of the position of beamlines
+{
+  let Gamma = [
+    sourceLine.RFSource1b.GetExitPos(0),
+    targetRoom1.dipole.entracePos,
+    targetRoom1.dipole.GetExitPos(0),
+    targetRoom1.dipole.GetExitPos(100),
+    targetRoom1.fan.GetExitPos(0.8,0),
+    targetRoom1.fan.GetExitPos(0.8,400)    
+  ];
+
+  let Catrina = [
+    sourceLine.RFSource1b.GetExitPos(0),
+    targetRoom1.dipole.entracePos,
+    targetRoom1.dipole.GetExitPos(0),
+    targetRoom1.dipole.GetExitPos(100),
+    targetRoom1.fan.GetExitPos(0.8,0),
+    targetRoom1.fan.GetExitPos(0.8,700)    
+  ];
+
+  let Middle = [
+    sourceLine.RFSource1b.GetExitPos(0),
+    targetRoom1.dipole.entracePos,
+    targetRoom1.dipole.GetExitPos(0),
+    targetRoom1.dipole.GetExitPos(100),
+    targetRoom1.fan.GetExitPos(0.55,0),
+    targetRoom1.fan.GetExitPos(0.55,300)    
+  ];
+  
+  let Bottom = [
+    sourceLine.RFSource1b.GetExitPos(0),
+    targetRoom1.dipole.entracePos,
+    targetRoom1.dipole.GetExitPos(0),
+    targetRoom1.dipole.GetExitPos(100),
+    targetRoom1.fan.GetExitPos(0.35,0),
+    targetRoom1.fan.GetExitPos(0.35,300)    
+  ];
+
+  posArray = {Gamma, Catrina, Middle, Bottom};
+}
+
+let beamLineGamma = new multiBeamLine(posArray.Gamma);
+let beamLineCatrina = new multiBeamLine(posArray.Catrina);
+let beamLineMiddle = new multiBeamLine(posArray.Middle);
+let beamLineBottom = new multiBeamLine(posArray.Bottom);
+
+beamLineGamma.draw(false);
+beamLineCatrina.draw(false);
+beamLineMiddle.draw(false);
+beamLineBottom.draw(false);
+
 //============================== Draw
 
 for( const ele in sourceLine){
@@ -433,19 +521,11 @@ for( const ele in sourceLine){
 }
 
 targetRoom1.dipole.draw(true);
-targetRoom1.beampipe.draw(false);
 targetRoom1.fan.draw(true);
-
-targetRoom1.upperLine.b1a_0.draw(false);
 targetRoom1.upperLine.q1a.draw(true);
 targetRoom1.upperLine.df1a.draw(true);
-targetRoom1.upperLine.b1a_1.draw(false);
 targetRoom1.upperLine.GammaStation.draw(false);
 targetRoom1.upperLine.Catrina.draw(false);
-
-targetRoom1.middleLine.b1b.draw( false);
-
-targetRoom1.lowerLine.b1c.draw( false);
 targetRoom1.lowerLine.q1c.draw(false);
 targetRoom1.lowerLine.df1c.draw(false);
 
@@ -467,20 +547,14 @@ for( const ele in targetRoom2){
 
 let destination = 'Gamma';
 
+function EnableDetector(){
+  if( destination == 'Gamma' ) targetRoom1.upperLine.GammaStation.draw(true);
+  if( destination == 'Catrina') targetRoom1.upperLine.Catrina.draw(true);
+}
+
 function lineMotion(){
-  sourceLine.b0a.march();
+  if( destination == 'Gamma' ) beamLineGamma.march();
-  sourceLine.b0b.march();
+  if( destination == 'Catrina') beamLineCatrina.march();
-  if( destination == 'Gamma' ){
-    targetRoom1.beampipe.march();
-    targetRoom1.upperLine.b1a_0.march();
-    targetRoom1.GammaStation.draw(true);
-  }
-  if( destination == 'Catrina'){
-    targetRoom1.beampipe.march();
-    targetRoom1.upperLine.b1a_0.march();  
-    targetRoom1.upperLine.b1a_1.march();
-    targetRoom1.Catrina.draw(true);
-  }
   if( destination == 'Resolut'){
     targetRoom2.b2.march();
     targetRoom2.b3.march();
@@ -509,9 +583,10 @@ function lineMotion(){
     targetRoom2.lowerLine.ClarionLine.Clarion2.draw(true);
   }
 
-  setTimeout(lineMotion, 20);
+  setTimeout(lineMotion, 50);
 }
 
-destination = 'Clarion2';
+destination = 'Catrina';
 
+EnableDetector();
 lineMotion();

index.html

@@ -60,8 +60,10 @@
 
 <div id='clock'></div>
 
-<iframe src="http://localhost:3000/d-solo/MFym59G4k/new-dashboard?orgId=1&from=1672071127881&to=1672092727881&theme=dark&panelId=2" id="iframe1"></iframe>
+<!--<iframe src="http://localhost:3000/d-solo/MFym59G4k/new-dashboard?orgId=1&from=1672071127881&to=1672092727881&theme=dark&panelId=2" id="iframe1"></iframe>-->
-<iframe src="http://localhost:3000/d-solo/MFym59G4k/new-dashboard?orgId=1&from=1672071308654&to=1672092908654&panelId=4"  id="iframe2"></iframe>
+<!--<iframe src="http://localhost:3000/d-solo/MFym59G4k/new-dashboard?orgId=1&from=1672071308654&to=1672092908654&panelId=4"  id="iframe2"></iframe>-->
+
+<iframe src="http://localhost:3000/d/MFym59G4k/new-dashboard?orgId=1&from=1672835547268&to=1672857147269" id="iframe1"></iframe>
 
 <canvas width="3840" height="2160" id='beamLine' > Your browser doe snot support HTML canvas</canvas>
 <canvas width="3840" height="2160" id='static' > Your browser doe snot support HTML canvas</canvas>
@@ -107,7 +109,8 @@ setInterval(time, 1000);
 
 </script>
 
-<script src="geo.js"></script>
+<!--
+  <script src="geo.js"></script>
+-->
 <script src="FoxLabDashBoard/geo.js"></script>
-
 </html>