added missing files and new thunmnails

public/circData.js

@@ -335,7 +335,8 @@ var pos=[];
 var cols = [];
 var streamID = [];
 
-d3.dsv(",", "results/polylines_circularData.csv").then(function(text) {  
+// d3.dsv(",", "results/polylines_circularData.csv").then(function(text) {  
+d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {  
 //	console.log(text); // Hello, world!
 	// var temp = text.split(',');
 	

public/polylines_with_particles.js

@@ -39,11 +39,11 @@ $(function () {
     animation: true,
     infoBox: true,
     baseLayerPicker: true,
-    fullscreenButton: true,
-    timeline: true,
+    fullscreenButton: false,
+    timeline: false,
     navigationHelpButton: true,
     navigationInstructionsInitiallyVisible: false,
-    homeButton: true,
+    homeButton: false,
     selectionIndicator: true,
     geocoder: true,
     // imageryProviderViewModels: imageryViewModels
@@ -138,7 +138,7 @@ $(function () {
   var Velocity = [];
   var pt_to_pt_dist = [];
   var avgVelocity = [];
-  
+  var czmlArray = [];
 
   function get_date_time_dt(deltaTime) {
     // deltaTime should be given in SECONDS and is then converted to milliseconds
@@ -151,31 +151,23 @@ $(function () {
   }
 
   d3.dsv(",", "results/polylines_with_velocity.csv").then(function (text) {
-    const particleDuration = 120; // units in seconds the particle / point should take to move from start to finish
+    const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish
     //define the czml structure
     var particle_czml = [
       {
         id: "document",
         name: "CZML Point - Time Dynamic",
         version: "1.0",
-        clock: {
-          interval: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),         // This is the time range of our simulation
-          currentTime: '',    // This is the time associated with the start view
-          currentTime: get_date_time_dt(0),
-          multiplier: 5,
-          // range: 'LOOP_STOP',
-        }
       },
       {
         id: "point",
-        availability: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
+        availability:
+          get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
         position: {
           epoch: get_date_time_dt(0),
           cartographicDegrees: [
             // use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
           ],
-          //"interpolationAlgorithm": "LAGRANGE",
-          //"interpolationDegree": 1
         },
         point: {
           color: {
@@ -189,18 +181,6 @@ $(function () {
         },
       },
     ];
-   //////////////////////////////////////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////
-    let package_time_faktor = 6.0;
-
-    // create an array of deep copies of the original czml data structure, to be modified below.
-    let czmlArr = [];
-    for (c=0; c < package_time_faktor; c++){
-      czmlArr.push(JSON.parse(JSON.stringify(particle_czml)));    
-      czmlArr[c][1].id = "point_arr_" + String(c);  
-    }
-
-    
 
     var temp = text;
     for (var i = 0; i < temp.length; i++) {
@@ -243,7 +223,6 @@ $(function () {
     // Create and draw a polyline with per vertex colors
     /////////////////////////////////////////////////
     const heightOffset = 120;
-    
     for (var line = 0; line < uniqueStreamID.length; line++) {
       let positions = [];
       let positionsInDegrees = [];
@@ -252,29 +231,25 @@ $(function () {
       let individual_particle_pt_distance = [];
       let individual_particle_avg_velo = [];
 
-      curr_pos = sIDidx[line];      
-
-      for (i = curr_pos; i < streamID.length; ++i) {
-        if (line === streamID[i]){
-          positions.push(
-            Cesium.Cartesian3.fromDegrees(
-              pos[i][0],
-              pos[i][1],
-              pos[i][2] + heightOffset
-            )
-          );
-          positionsInDegrees.push([
+      for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
+        positions.push(
+          Cesium.Cartesian3.fromDegrees(
             pos[i][0],
             pos[i][1],
-            pos[i][2] + heightOffset,
-          ]);
-          colors.push(
-            Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
-          );
-          individual_particle_avg_velo.push(avgVelocity[i]);
-          individual_particle_pt_distance.push(pt_to_pt_dist[i]);
-          individual_particle_velo.push(Velocity[i]);
-        } // if end brace
+            pos[i][2] + heightOffset
+          )
+        );
+        positionsInDegrees.push([
+          pos[i][0],
+          pos[i][1],
+          pos[i][2] + heightOffset,
+        ]);
+        colors.push(
+          Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
+        );
+        individual_particle_avg_velo.push(avgVelocity[i]);
+        individual_particle_pt_distance.push(pt_to_pt_dist[i]);
+        individual_particle_velo.push(Velocity[i]);
       }
       // For per segment coloring, supply the colors option with
       // an array of colors for each vertex.  Also set the
@@ -299,15 +274,14 @@ $(function () {
       /////////////////////////////////////////////////
       let streamDist = individual_particle_pt_distance.reduce(function (a, b) {
         return a + b;
-	   }, 0);
-	   //   console.log(streamDist);
+	  }, 0);
+	//   console.log(streamDist);
 
       let t = 0;
-      let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20;
-      //   let dt = streamDist / individual_particle_avg_velo[0] / 500;
-    
-      /////////////////////////////////////
-      var temp_pos = [];
+      let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 500;
+    //   let dt = streamDist / individual_particle_avg_velo[0] / 500;
+      let temp_pos = [];
+
       for (i = 0; i < positionsInDegrees.length; i++) {
         if (i === 0) {
           temp_pos.push(
@@ -315,62 +289,34 @@ $(function () {
             positionsInDegrees[i][0],
             positionsInDegrees[i][1],
             positionsInDegrees[i][2]
-          );          
+          );
         } else {
           temp_pos.push(
             t,
             positionsInDegrees[i][0],
             positionsInDegrees[i][1],
             positionsInDegrees[i][2]
-          );          
-          dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; // avg_velo is always the same per streamline
+          );
+          dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 500;
           // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
           // console.log(dt);
         }
+
         t += dt;
       }
       particle_czml[1].id = "point" + String(line);
-      particle_czml[1].position.cartographicDegrees = temp_pos; 
+	  particle_czml[1].position.cartographicDegrees = temp_pos; 
+	  
+	//   czmlArray.push(particle_czml);
       viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml));
-
-        ////////////////////////////////////////////////      
-        dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20;
-        for (c=0; c < czmlArr.length ; c++){
-
-          temp_pos = [];
-          for (i = 0; i < positionsInDegrees.length; i++) {
-            if (i === 0) {
-              temp_pos.push(
-                t,
-                positionsInDegrees[i][0],
-                positionsInDegrees[i][1],
-                positionsInDegrees[i][2]
-              );          
-            } else {
-              temp_pos.push(
-                t,
-                positionsInDegrees[i][0],
-                positionsInDegrees[i][1],
-                positionsInDegrees[i][2]
-              );          
-              dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20;
-              // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
-              // console.log(dt);
-            }
-
-            t += dt;
-          }
-          czmlArr[c][1].position.cartographicDegrees = temp_pos;       
-          czmlArr[c][1].id = "point_set_" + String(c) + "_" + String(line);  
-          czmlArr[c][1].position.epoch = get_date_time_dt(0);
-          viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlArr[c])); 
-        }
-     
-      
-	  }   // end bracket for:  for (var line = 0; line < uniqueStreamID.length; line++) {
+	}
 	
+	// for (p = 0; p < czmlArray.length; p++) {
+	// 	let temp = czmlArray[p];
+	// 	viewer.dataSources.add(Cesium.CzmlDataSource.load(temp));
+	//   }
 
-  });  // end bracket for: d3.dsv(...).then(...
+  });