Coder Social home page Coder Social logo

bathymetric_visualizer's Introduction

Bathymetric Visualizer

Python Django

Node NPX

Python Tests Python Lint - Flake8

A webapp the dynamically visualizes bathymetry as sample points are being collected. Code documentation can be found here (note it is still incomplete). Currently, the visualizer only tracks one global sample mesh, which is lost when the app restarts. Future efforts will include containerization and database backing for easier portability and data persistence. This application's API is compatible with the endpoint upload of this simulator.

Running the App

There are two provided scripts to prepare your environment to run the application. Running ./install.sh will install both Python and Node dependencies and running ./run.sh will start the app. For convenience that commands are:

# install dependencies
pip install -r requirements.txt
npm install

# build webpack
npx webpack --mode=development

# run db relations (currently doesn't do anything)
python manage.py migrate

# Run django
python manage.py runserver

About the App

The purpose of this app is to expose interaction techniques for inferring the quality of remote sensing data. This specific implementation focuses around Bathymetric data, and is themed as such. There are 3 primary use cases that I attempted to tackle and implemented interaction techniques that corresponded to them.

  1. How do users know if they have sufficient data?
  2. How can users tell if errors exist in their data?
  3. Can we guide users to intuitively to correct those errors (through re-sampling)?

The vessel is to scale of a nine-meter research vessel and the blue plane signifies the plane at $z=0$ (i.e. sea-level). All of hte mesh objects (other than the vessel) have opacity controls.

start up opacity

How do users know if they have sufficient data?

There are certain structures that require more data than others to represent appropriately. For example, a large, flat, sandy bottom does not require as much data to represent than a rocky shoal or underwater cliff. By rendering a 3D model of the collected data, users can tell whether parts of their search space require more attention.

initial pass

How can users tell if errors exist in their data?

As we can see from the screenshots, it is very easy to see where data is erroneous. To assist in confining suspicions and to make the mesh easier to interpret, users can take advantage of variable smoothing to help eliminate the erroneous outliers.

no smooth 3.5 smoothing 6 smoothing

An example of using data smoothing, looking at the differences between more persistent false-bottom errors and transient sensor dropout errors can be seen in this video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/8xbTVBKvgxs?si=Xl4jVkS2M_E3IJji" title="Dynamic Smoothing" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe>

Can we guide users to intuitively to correct those errors (through re-sampling)?

Because the webapp accepts data from an API endpoint and dynamically updates, users can continually refine their dataset. Some examples can be seen in these two videos:

<iframe width="560" height="315" src="https://www.youtube.com/embed/s1nFZ7iywR4?si=8NghwWJo0Pfrw6ei" title="Interaction Technique Overview" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/GHK6BTLukxI?si=2M2H6Mo6_vavR_Kf" title="Resampling the Search Space" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe>

Known Shortcomings

  • Only one global mesh is tracked at any one time. Furthermore, the app is not database backed, so that mesh is lost when the app restarts.
  • The app assumes coordinates are provided as x,y,z coordinates in meters.
  • The app cannot accept GPS coordinates
  • There is no centering applied to the data, so 0-centered coordinates need to be supplied to the app.

bathymetric_visualizer's People

Contributors

matthew-buglass avatar dependabot[bot] avatar

Watchers

 avatar

bathymetric_visualizer's Issues

Add smoothed mesh

Add and option to the control panel to show the raw and smoothed mesh

Create CI pipeline

Build a CI pipeline for the visualizer with:

  • Code linting
  • tests
  • test coverage
  • smoke testing

Add a side panel with controls and density map

  • Density map with dots of where we have readings.
    • this could also be shown in the map by placing objects on the vertices with a slider for density vs actual map
  • Add a "clear mesh" button

Integrate sockets

Integrate django-channels to enable websockets to eliminate need to refresh page to get the updated mesh

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.