Skip to content

Commit

Permalink
Voxel visualizer: Buttons now working.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcrattz
jcrattz committed Oct 29, 2021
1 parent 2fa5ec6 commit 1979c2a
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 192 deletions.
2 changes: 1 addition & 1 deletion data_cube_utilities/dc_fractional_coverage_classifier.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import argparse
import os
import collections
import gdal
from osgeo import gdal
from datetime import datetime

# Author: KMF
Expand Down
2 changes: 1 addition & 1 deletion data_cube_utilities/dc_utilities.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
# License for the specific language governing permissions and limitations
# under the License.

import gdal
from osgeo import gdal
import numpy as np
import xarray as xr
import os
Expand Down
2 changes: 1 addition & 1 deletion data_cube_utilities/dc_water_classifier.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
# Command line tool imports
import argparse
import collections
import gdal
from osgeo import gdal
from datetime import datetime


Expand Down
194 changes: 25 additions & 169 deletions data_cube_utilities/voxel_visualizer/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,23 +91,15 @@
</div>
<div id='button_controls_holder'>
<div id='button_controls_button_holder'>
<div id='top_buttons_div' style='width:100%;'>
<div id='top_buttons_div'>
<button class='control_button' id='zoom_in_button'>
<img src='static_url/imgs/zoom-in-icon.png'/>
</button>
<button class='control_button' id='zoom_out_button'>
<img src='static_url/imgs/zoom-out-icon.png'/>
</button>
</div>
<div id='middle_buttons_div'>
<button class='control_button' id='rotate_left_button'>
<img src='static_url/imgs/rotate-left-icon.png'/>
</button>
<button class='control_button' id='up_button'>
<img src='static_url/imgs/arrow-up-icon.png'/>
</button>
<button class='control_button' id='rotate_right_button'>
<img src='static_url/imgs/rotate-right-icon.png'/>
<button class='control_button' id='zoom_out_button'>
<img src='static_url/imgs/zoom-out-icon.png'/>
</button>
</div>
<div id='bottom_buttons_div'>
Expand Down Expand Up @@ -260,7 +252,6 @@
const x_dims = data_NJ_array.shape[1];
const y_dims = data_NJ_array.shape[2];

console.log('Finding Center Point');
// Find Centerpoint
let xs = [];
let ys = [];
Expand Down Expand Up @@ -334,6 +325,8 @@
var controls = new OrbitControls(camera, renderer.domElement);
controls.damping = 0.2;
controls.addEventListener('change', render);
/* end keyboard controls */

/* button controls */
/** hider button **/
let button_controls_hider = document.getElementById('button_controls_hider');
Expand All @@ -350,127 +343,16 @@
button_controls_hider.innerHTML = 'Hide Camera Controls';
}
}, false);
/** end hider button **/

/** button click handlers **/
/*** zoom handlers ***/
function getFov() {
return Math.floor(
(2 *
Math.atan(camera.getFilmHeight() / 2 /
camera.getFocalLength()) *
180) /
Math.PI
);
}

// function clickZoom(zoomType) {
// window.parent.postMessage({
// 'message': '' + camera.getFov()
// },'*');
// if (value >= 20 && zoomType === "zoomIn") {
// return value - 5;
// } else if (value <= 75 && zoomType === "zoomOut") {
// return value + 5;
// } else {
// return value;
// }
// }

function clickZoom(zoomType) {
// const diff = (zoomType == 'zoomIn' ? 10 : -10);
const diff = (zoomType == 'zoomIn' ? 10 : -10);

// window.parent.postMessage({
// 'message': '' + controls.target
// },'*');
// [tgt_x, tgt_y, tgt_z, ...rest] = controls.target;
// this.center;
window.parent.postMessage({
// 'message': ' ' + tgt_x + ' ' + tgt_y + ' ' + tgt_z
'message': ' ' + controls.position
},'*');

// let old_x = camera.position.x;
// let new_x;
// if (Math.abs(old_x) >= diff) {
// let x_diff = (old_x < 0) ? -diff: diff;
// new_x = old_x - x_diff;
// } else {new_x = old_x;}
// let old_y = camera.position.y;
// let new_y;
// if (Math.abs(old_y) >= diff) {
// let y_diff = (old_y < 0) ? -diff: diff;
// new_y = old_y - y_diff;
// } else {new_y = old_y;}
// let old_z = camera.position.z;
// let new_z;
// if (Math.abs(old_z) >= diff) {
// let z_diff = (old_z < 0) ? -diff: diff;
// new_z = old_z - z_diff;
// } else {new_z = old_z;}
// window.parent.postMessage({
// 'message': '' + old_x + ',' + old_y + ',' + old_z
// },'*');
// window.parent.postMessage({
// 'message': '' + new_x + ',' + new_y + ',' + new_z
// },'*');
// camera.position.set(new_x, new_y, new_z);

// camera.updateProjectionMatrix();
}

function zoomInFunction() {
// const fov = getFov();
// clickZoom("zoomIn");
cameraMove('forward');
camera.updateProjectionMatrix();
}

function zoomOutFunction() {
// const fov = getFov();
// clickZoom("zoomOut");
cameraMove('backward');
camera.updateProjectionMatrix();
}

// function () {
// window.parent.postMessage({
// 'message': controls.target.distanceTo(controls.object.position)
// }, '*');
// // camera_pos = camera.position.clone();
// // camera
// // camera.position.zoom;
// // x_pos = camera.position.x;
// var zoom = controls.target.distanceTo(controls.object.position)
// zoom
// }
let zoom_in_button = document.getElementById('zoom_in_button');
zoom_in_button.addEventListener('click', zoomInFunction, false);
let zoom_out_button = document.getElementById('zoom_out_button');
zoom_out_button.addEventListener('click', zoomOutFunction, false);
/*** movement handlers ***/
function cameraMove(moveDir) {
controls.enabled = false;
camera.getWorldDirection(cameraLookDir);

// const diff = (direction == 'left' ? 10 : -10);
const mag = 5;
// [x,y,z] = camera.getWorldDirection();

// let lookDirection = camera.LookDirection;
// let lookDirection = camera.getWorldDirection(controls.target);
// let position = camera.position;
// lookDirection = lookDirection.normalize();
// position = position + mag * lookDirection;
// camera.Position = position;

// var lookVector = new THREE.Vector3( 0, 0, - 1 );
// camera.getWorldDirection(lookVector);
const mag = 10;

if (moveDir == 'forward')
// camera.position.addScaledVector(cameraLookDir, mag);
camera.translateZ(-mag);
else if (moveDir == 'backward')
// camera.position.addScaledVector(cameraLookDir, -mag);
camera.translateZ(mag);
else if (moveDir == 'left')
camera.translateX(-mag);
Expand All @@ -481,44 +363,22 @@
else if (moveDir == 'down')
camera.translateY(-mag);

// let smth = camera.position.addScaledVector(cameraLookDir, mag);
// camera.position.set(smth);

// window.parent.postMessage({
// // 'message': '' + lookVector
// 'message': '' + smth
// },'*');
// let old_x = camera.position.x;
// let new_x;
// if (Math.abs(old_x) >= diff) {
// let x_diff = (old_x < 0) ? -diff: diff;
// new_x = old_x - x_diff;
// } else {new_x = old_x;}
// let old_y = camera.position.y;
// let new_y;
// if (Math.abs(old_y) >= diff) {
// let y_diff = (old_y < 0) ? -diff: diff;
// new_y = old_y - y_diff;
// } else {new_y = old_y;}
// let old_z = camera.position.z;
// let new_z;
// if (Math.abs(old_z) >= diff) {
// let z_diff = (old_z < 0) ? -diff: diff;
// new_z = old_z - z_diff;
// } else {new_z = old_z;}
// window.parent.postMessage({
// 'message': '' + old_x + ',' + old_y + ',' + old_z
// },'*');
// window.parent.postMessage({
// 'message': '' + new_x + ',' + new_y + ',' + new_z
// },'*');
// camera.position.set(new_x, new_y, new_z);
// camera.position.set(position);
// controls.update();
camera.lookAt(controls.target);
camera.updateProjectionMatrix();
controls.enabled = true;
}

function zoomInFunction() {
cameraMove('forward');
}
let zoom_in_button = document.getElementById('zoom_in_button');
zoom_in_button.addEventListener('click', zoomInFunction, false);
function zoomOutFunction() {
cameraMove('backward');
}
let zoom_out_button = document.getElementById('zoom_out_button');
zoom_out_button.addEventListener('click', zoomOutFunction, false);

function leftFunction() {
cameraMove('left');
}
Expand All @@ -542,10 +402,8 @@
}
let down_button = document.getElementById('down_button');
down_button.addEventListener('click', downFunction, false);

// function rotateLeft() { camera.rotation.x += Math.PI / 8; }
// let rotate_left_button = document.getElementById('rotate_left_button');
// rotate_left_button.addEventListener('click', rotateLeft, false);
/** end button click handlers **/
/* end button controls */

///////////////////////////////////////////////////

Expand Down Expand Up @@ -755,11 +613,9 @@
var layer = new THREE.Points(geometry, generate_point_cloud_material());
layer.sizeAttenuation = true;
layer.sortPoints = true;
// layer.material.transparent = true;
// layer.material.opacity = voxel_opacity;
// layer.material.vertexColors = true;
// layer.material.size = voxel_size;
layers[z] = layer;
layer.material.transparent = true;
layer.material.opacity = voxel_opacity;
layer.material.vertexColors = true;
}
add_layers_to_scene();
set_voxels_size();
Expand Down
40 changes: 22 additions & 18 deletions data_cube_utilities/voxel_visualizer/voxel_visualizer.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,23 @@ def voxel_visualize(da: xr.DataArray, **kwargs):
"""
Show a 3D visualization of a boolean xarray `xr`.
It creates an `iframe` DOM element in the cell's output in Jupyter.
The camera can be controlled with either:
1. The mouse and arrow keys OR
2. Buttons on the right side (hideable)
There is a slider on the left side with 2 modes - Range and Select.
* Range: This mode shows layers (time slices) after the selected time
(shown as text above the slider) at opacity `voxel_opacity`.
Layers before the selected time are shown in a lower opacity
(more translucent).
* Select: This mode shows only the selected layer at opacity `voxel_opacity`.
Layers other than the selected time are shown in a lower opacity
(more translucent).
The visualization is created with Three.js.
Parameters
----------
da: xr.DataArray
Expand Down Expand Up @@ -128,27 +145,14 @@ def _launch_server_if_not_running():
filled_template_sngl_lne_esc_fmt = \
" + ".join(filled_template_sngl_lne_esc_split_fmt)

# <div id='wrap' style='position:fixed; width:100%;'>
# overflow:hidden; width:100%; height:100%;
# <!-- <div id='wrap' style=''>
# </div> -->
# style='display:block;'
# width=600, height=350
vox_vis_server_port = os.environ['VOXEL_VISUALIZER_PORT']
iframe = HTML(f"""
<!-- display:table-cell; -->
<div id='wrap', style='width:100%; aspect-ratio:2;'>
<iframe id='voxel_vis_iframe', sandbox='allow-same-origin allow-scripts',
style='display: block;
height:100%; width:99%;' scrolling='no';
transform-origin: top left;
></iframe>
<!-- resize: both;
overflow: hidden; -->
<!-- padding-top: 75%; -->
<!-- transform: scale(0.50); -->
<!-- onload='this.contentWindow.document.body.height=iframe.offsetHeight;'; -->
<!-- frameborder=\"0\"; -->
<iframe id='voxel_vis_iframe', sandbox='allow-same-origin allow-scripts',
style='display: block;
height:100%; width:99%;' scrolling='no';
transform-origin: top left>
</iframe>
</div>
<script>
var hostname = window.location.hostname;
Expand Down
3 changes: 1 addition & 2 deletions dea_tools/dea_tools/datahandling.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@

# Import required packages
import os
import gdal
from osgeo import gdal
import zipfile
import numexpr
import datetime
Expand Down Expand Up @@ -448,7 +448,6 @@ def array_to_geotiff(fname, data, geo_transform, projection,
(in "WKT" format) for the output raster. These are typically
obtained from an existing raster using the following GDAL calls:
import gdal
gdal_dataset = gdal.Open(raster_path)
geotrans = gdal_dataset.GetGeoTransform()
prj = gdal_dataset.GetProjection()
Expand Down

0 comments on commit 1979c2a

Please sign in to comment.