Merge pull request #45 from TileDB-Inc/mg/add-point-shift-as-default

Mg/add point shift as default

pybabylonjs/args.py

@@ -15,7 +15,7 @@
     "wheel_precision": -1,
     "move_speed": -1,
     "point_size": 1,
-    "background_color": [0, 0, 0, 1],
+    "color_scheme": "dark",
     "bbox": None,
     "rgb_max": None,
     "time_offset": 0,
@@ -77,8 +77,8 @@ def check_point_cloud_data_dict(mode, data):
         == data["Y"].size
         == data["Z"].size
         == data["Red"].size
-        == data["Blue"].size
         == data["Green"].size
+        == data["Blue"].size
     ):
         raise ValueError("Attributes in data dictionary do not have the same length.")
 
@@ -87,7 +87,7 @@ def check_point_cloud_data_dict(mode, data):
             raise ValueError("Data dictionary does not contain 'GpsTime'")
 
         i = np.argsort(data["GpsTime"])
-        for key in ["X", "Y", "Z", "Red", "Green", "Blue", "GpsTime"]:
+        for key in ["Red", "Green", "Blue", "GpsTime", "X", "Y", "Z"]:
             data[key] = data[key][i]
 
     elif mode == "classes":

pybabylonjs/show.py

@@ -93,10 +93,6 @@ def from_dict(
             raise ValueError(
                 "This mode is not implemented for show.from_dict(), use show.point_cloud() instead"
             )
-        elif topo:
-            raise ValueError(
-                "This mode is not implemented for show.from_dict(), use show.point_cloud() instead"
-            )
         else:
             mode = "default"
 

src/data.ts

@@ -1,6 +1,7 @@
 // Copyright 2022 TileDB Inc.
 // Licensed under the MIT License.
 
+import { Color4 } from '@babylonjs/core';
 import Client from '@tiledb-inc/tiledb-cloud';
 import { Layout } from '@tiledb-inc/tiledb-cloud/lib/v1';
 
@@ -22,6 +23,33 @@ export function setPointCloudSwitches(mode: string) {
   return { isTime, isClass, isTopo, isGltf };
 }
 
+export function setSceneColors(colorScheme: string) {
+
+  let backgroundColor: Color4;
+  let accentColor: string;
+  let secondColor: string;
+  let textColor: string;
+
+  backgroundColor = new Color4(0, 24/255, 92/255, 1);
+  accentColor = '#CC0055';
+  secondColor = '#C7C7C7';
+  textColor = '#F5F7FA';
+  if (colorScheme === 'dark') {
+    backgroundColor = new Color4(28/255, 28/255, 28/255, 1);
+    accentColor = '#C7C7C7';
+    secondColor = '#F5F7FA';
+    textColor = '#F5F7FA';
+  }
+  if (colorScheme === 'light') {
+    backgroundColor = new Color4(245/255, 247/255, 250/255, 1);
+    accentColor = '#352F4D';
+    secondColor = '#C7C7C7';
+    textColor = '#352F4D';
+  }
+  return { backgroundColor, accentColor, secondColor, textColor };
+
+}
+
 export async function getPointCloud(values: any) {
   let dataIn: any;
   let data: any;
@@ -43,16 +71,34 @@ export async function getPointCloud(values: any) {
     data = dataIn;
   }
 
+  let { xmin, xmax, ymin, ymax, zmin, zmax, rgbMax } = getPointCloudLimits(
+    values,
+    data
+  );
+
+  // shift points to new origin of [0,0,0] with [xmin,ymin,zmin]
+  data.X = data.X.map((n: any) => n - xmin);
+  data.Y = data.Y.map((n: any) => n - ymin);
+  data.Z = data.Z.map((n: any) => n - zmin);
+  xmax = xmax - xmin;
+  xmin = 0;
+  ymax = ymax - ymin;
+  ymin = 0;
+  zmax = zmax - zmin;
+  zmin = 0;
+
+  // shift points with user defined values (optional)
   if (values.point_shift[0]) {
     data.X = data.X.map((n: any) => n + values.point_shift[0]);
     data.Y = data.Y.map((n: any) => n + values.point_shift[1]);
     data.Z = data.Z.map((n: any) => n + values.point_shift[2]);
-  }
-
-  const { xmin, xmax, ymin, ymax, zmin, zmax, rgbMax } = getPointCloudLimits(
-    values,
-    data
-  );
+    xmin = xmin + values.point_shift[0];
+    xmax = xmax + values.point_shift[0];
+    ymin = ymin + values.point_shift[1];
+    ymax = ymax + values.point_shift[1];
+    zmin = zmin + values.point_shift[2];
+    zmax = zmax + values.point_shift[2];
+    }
 
   return { data, xmin, xmax, ymin, ymax, zmin, zmax, rgbMax };
 }

src/widget.ts

@@ -29,7 +29,8 @@ import {
   UtilityLayerRenderer,
   FreeCamera,
   KeyboardEventTypes,
-  PointerEventTypes
+  PointerEventTypes,
+  HemisphericLight
 } from '@babylonjs/core';
 import {
   AdvancedDynamicTexture,
@@ -43,7 +44,7 @@ import '@babylonjs/core/Debug/debugLayer';
 import '@babylonjs/inspector';
 import '../css/widget.css';
 
-import { setPointCloudSwitches, getPointCloud } from './data';
+import { setPointCloudSwitches, setSceneColors, getPointCloud } from './data';
 import { DragGizmos } from './drag_gizmos';
 
 export class BabylonBaseModel extends DOMWidgetModel {
@@ -151,23 +152,12 @@ export class BabylonPointCloudView extends BabylonBaseView {
       const main = this;
       main._scene = scene;
 
-      // add button for fullscreen switching
-      const fullDiv = document.createElement('div');
-      fullDiv.style.cssText =
-        'position:absolute; bottom:32px; right:32px; color:#FFFF00';
-      const fullButton = document.createElement('button');
-      fullButton.onclick = function () {
-        main.canvas?.requestFullscreen();
-      };
-      fullButton.innerText = '[ ]';
-      fullButton.className = 'button';
-      fullDiv.appendChild(fullButton);
-      document.body.appendChild(fullDiv);
-
       const { isTime, isClass, isTopo, isGltf } = setPointCloudSwitches(
         this.values.mode
       );
 
+      const { backgroundColor, accentColor, secondColor, textColor } = setSceneColors(this.values.color_scheme);
+
       const { data, xmin, xmax, ymin, ymax, zmin, zmax, rgbMax } =
         await getPointCloud(this.values).then(results => {
           return results;
@@ -186,20 +176,14 @@ export class BabylonPointCloudView extends BabylonBaseView {
 
       const gltfData = this.values.gltf_data;
       const pointSize = this.values.point_size;
-      const backgroundColor = this.values.background_color;
       const offset = this.values.time_offset;
       const classes = this.values.classes;
       const topo_offset = this.values.topo_offset;
       const scale = this.zScale;
 
       let doClear = false;
 
-      scene.clearColor = new Color4(
-        backgroundColor[0],
-        backgroundColor[1],
-        backgroundColor[2],
-        backgroundColor[3]
-      );
+      scene.clearColor = backgroundColor;
       let pcs: PointsCloudSystem;
 
       if (isClass) {
@@ -221,6 +205,7 @@ export class BabylonPointCloudView extends BabylonBaseView {
         );
         if (isTime) {
           particle.color = scene.clearColor;
+          particle.position.y = ((data.Z[i] - topo_offset) * scale)-100;
         } else {
           particle.color = new Color3(
             data.Red[i] / rgbMax,
@@ -253,11 +238,6 @@ export class BabylonPointCloudView extends BabylonBaseView {
               }
             }
           }
-
-          // color based on distance
-          //particle.color.r /= minDist;
-          //particle.color.g /= minDist;
-          //particle.color.b /= minDist;
         }
       };
 
@@ -349,48 +329,51 @@ export class BabylonPointCloudView extends BabylonBaseView {
 
         const header = new TextBlock();
         header.height = '30px';
-        header.color = 'white';
+        header.color = textColor;
 
         const slider = new Slider('Slider');
         slider.minimum = 0;
         slider.step = 1;
         slider.height = '20px';
         slider.width = '200px';
+        slider.color = accentColor;
+        slider.background = secondColor;
 
         if (isTime) {
-          header.text = 'Time: ' + (offset + times[0]).toFixed(2);
+          header.text = 'Time: ' + (offset + times[0]).toFixed(0);
 
           slider.maximum = times.length - 1;
           slider.value = 0;
         }
         let slider_classes: number[];
         if (isClass) {
-          header.text = 'All';
+          header.text = classes.names[0];
 
           slider_classes = Array.from(new Set(classification));
-          slider.maximum = slider_classes.length;
-          slider.value = slider_classes[0];
+          slider.maximum = slider_classes.length-1;
+          slider.value = 0;
         }
 
         panel.addControl(header);
 
         pcs.updateParticle = function (particle_3: any) {
           if (doClear) {
             particle_3.color = scene.clearColor;
+            particle_3.position.y = ((data.Z[particle_3.idx] - topo_offset) * scale)-100;
           } else {
             particle_3.color = new Color3(
               data.Red[particle_3.idx] / rgbMax,
               data.Green[particle_3.idx] / rgbMax,
               data.Blue[particle_3.idx] / rgbMax
             );
+            particle_3.position.y = (data.Z[particle_3.idx] - topo_offset) * scale;
           }
-
           return particle_3;
         };
-
+        
         slider.onValueChangedObservable.add((value: any) => {
           if (isTime) {
-            header.text = 'Time: ' + (offset + times[value]).toFixed(2);
+            header.text = 'Time: ' + (offset + times[value]).toFixed(0);
 
             if (value > pcs.counter) {
               doClear = false;
@@ -428,9 +411,13 @@ export class BabylonPointCloudView extends BabylonBaseView {
         const url_1 = URL.createObjectURL(blob_1);
 
         const mat = new StandardMaterial('mat', scene);
-        mat.emissiveColor = Color3.Random();
+        //mat.emissiveColor = Color3.Random();
         mat.diffuseTexture = new Texture(url_1, scene);
-        mat.ambientTexture = new Texture(url_1, scene);
+        mat.diffuseTexture.wrapU = Texture.CLAMP_ADDRESSMODE;
+        mat.diffuseTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
+        mat.specularColor = new Color3(0, 0, 0);
+        mat.backFaceCulling = false;
+        //mat.ambientTexture = new Texture(url_1, scene);
 
         const options = { xmin: xmin, zmin: ymin, xmax: xmax, zmax: ymax };
         const ground = MeshBuilder.CreateTiledGround(
@@ -481,15 +468,6 @@ export class BabylonPointCloudView extends BabylonBaseView {
               main._cameras[main._curr_camera].attachControl(true);
               const cam_name = main._cameras[main._curr_camera].name;
               main._scene.setActiveCameraByName(cam_name);
-              console.log(
-                'Current camera: [' + main._curr_camera + '] ' + cam_name
-              );
-              console.log(main._cameras[main._curr_camera].position);
-              console.log(
-                main._cameras[main._curr_camera].minZ +
-                  ' .. ' +
-                  main._cameras[main._curr_camera].maxZ
-              );
             }
 
             // perform clash detection
@@ -544,6 +522,9 @@ export class BabylonPointCloudView extends BabylonBaseView {
 
       scene.createDefaultCameraOrLight(true, true, true);
 
+      var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
+      light.intensity = 0.8;
+
       const camera = scene.activeCamera as ArcRotateCamera;
       camera.alpha += Math.PI;
       camera.upperBetaLimit = Math.PI / 2;
@@ -839,7 +820,6 @@ export class BabylonMBRSView extends BabylonBaseView {
     });
   }
 }
-
 export class BabylonImageModel extends BabylonBaseModel {
   defaults(): any {
     return {