Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/enricofer/wide_sight_frontend


https://github.com/enricofer/wide_sight_frontend

equirectangular equirectangular-panorama frontend threejs viewer vue vuejs widesight

Last synced: 17 days ago
JSON representation

Awesome Lists containing this project

README

        

# 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)