Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/enricofer/wide_sight_frontend

equirectangular equirectangular-panorama frontend threejs viewer vue vuejs widesight

Last synced: 4 months ago
JSON representation

Host: GitHub
URL: https://github.com/enricofer/wide_sight_frontend
Owner: enricofer
License: bsd-4-clause
Created: 2018-10-17T11:54:47.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-08-24T14:44:48.000Z (over 1 year ago)
Last Synced: 2024-10-12T07:36:25.859Z (4 months ago)
Topics: equirectangular, equirectangular-panorama, frontend, threejs, viewer, vue, vuejs, widesight
Language: Vue
Homepage: wide-sight-frontend.vercel.app
Size: 30.8 MB
Stars: 5
Watchers: 3
Forks: 7
Open Issues: 5
Metadata Files:
- Readme: README.md

# wide_sight_frontend

Widesight frontend for browsing and extracting informations from a [widesight panorama service](https://github.com/enricofer/wide_sight)

![nn](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/Peek_browse.gif)

## Build setup

```bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

## Configure

The VUEjs app define a new wide-sight html tag as a widesight panorama viewer within the html page.

The viewer needs to be configured with the following parameters:

- backend: a widesight backend server url endpoint: https://github.com/enricofer/wide_sight

- apikey: a valid api key: https://app.swaggerhub.com/apis-docs/enricofer/Widesight/1.0.0#/apikeys/apikeys_list

- panokey: a valid start panorama image to view: https://app.swaggerhub.com/apis-docs/enricofer/Widesight/1.0.0#/panoramas/panoramas_list

- overlay (options): a geojson overlay to render over the panorama image

```http

wide_sight_frontend

wide-sight {
width:600px;
height:400px;
}

```

## Viewer features

![](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/widesight_frontend_features.png)

### Browse panoramas

Click on yellow spots to browse panoramas

![](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/Peek_browse.gif)

### Viewer options

click on settings button to configure viewer elements visibility

![](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/Peek_settings.gif)

### Tag image

Click on tag button to enable polygon tagging on panorama

![](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/Peek_tag.gif)

### Geolocate map spots on image

Double click on image to insert a geolocated map spot

![](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/Peek_spot.gif)

### Tune panorama visual parameters

Click on tuning icon to rule panorama visual parameters (location, height from ground, pitch, roll)for improving geolocation accurancy

![](https://raw.githubusercontent.com/enricofer/wide_sight_frontend/docs/Peek_tune.gif)