Skip to content

Commit bc6a90e

Browse files
enricoferenricofer
committedJan 18, 2019
code cleanup; multiple geometry context
1 parent 495cd76 commit bc6a90e

13 files changed

+382
-296
lines changed
 

‎i.html

-19
This file was deleted.

‎index.html

+23-11
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,21 @@
66
<title>wide_sight_frontend</title>
77
<style>
88

9+
body {
10+
display: flex;
11+
height: 100vh;
12+
margin: 0;
13+
}
14+
915
#ws1{
1016
width:1000px;
1117
height:600px;
1218
background-color: gray;
1319
}
1420

1521
#ws2{
16-
width:200px;
17-
height:200px;
18-
background-color: gray;
22+
flex: 1;
23+
background: tan;
1924
}
2025

2126
wide-sight {
@@ -26,17 +31,24 @@
2631
</style>
2732
</head>
2833
<body onload="connectEvents()">
29-
<div id="ws1">
34+
<div id="ws2">
3035
<wide-sight
31-
backend="https://beato.duckdns.org:8443"
32-
apikey="3788e7c9-ace9-4fb6-95b9-db6170b6286f"
33-
panokey="6d5e2b70-8517-44a8-acd5-e7c12e00272a"
34-
overlay="https://beato.duckdns.org:8443/static/test.geo.json">
36+
backend=http://localhost:8000
37+
apikey="c9164409-570d-4d4c-9bdc-77dcac3b1f06"
38+
panokey="4e193c5f-ddaa-4698-8aa4-e9e3bc35b9ea"
39+
overlay="https://beato.duckdns.org:8443/static/test.geo.json">
3540
</wide-sight>
3641
<!--
37-
backend=http://172.25.193.167:8989
38-
apikey="375368dfd01b9bd9d26e2284ce18398adbd07e93"
39-
panokey="cb75403f-bccc-4792-9a73-c5a2ace36fec">
42+
43+
backend="https://beato.duckdns.org:8443"
44+
apikey="3788e7c9-ace9-4fb6-95b9-db6170b6286f"
45+
panokey="6d5e2b70-8517-44a8-acd5-e7c12e00272a"
46+
overlay="https://beato.duckdns.org:8443/static/test.geo.json">
47+
48+
backend=http://localhost:8000
49+
backend=http://172.25.193.167:8989
50+
apikey="c9164409-570d-4d4c-9bdc-77dcac3b1f06"
51+
panokey="4e193c5f-ddaa-4698-8aa4-e9e3bc35b9ea">
4052
-->
4153
</div>
4254
<!-- built files will be auto injected -->

‎index_ok.html

-25
This file was deleted.

‎package-dev.json

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{
2+
"name": "wide_sight_frontend",
3+
"version": "1.0.0",
4+
"description": "A Vue.js project",
5+
"author": "enrico <enricofer@gmail.com>",
6+
"private": true,
7+
"scripts": {
8+
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
9+
"start": "npm run dev",
10+
"unit": "jest --config test/unit/jest.conf.js --coverage",
11+
"e2e": "node test/e2e/runner.js",
12+
"test": "npm run unit && npm run e2e",
13+
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
14+
"build": "node build/build.js"
15+
},
16+
"dependencies": {
17+
"@babel/core": "^7.2.2",
18+
"@fortawesome/fontawesome-svg-core": "^1.2.12",
19+
"@fortawesome/free-solid-svg-icons": "^5.6.3",
20+
"@fortawesome/vue-fontawesome": "^0.1.3",
21+
"@vue/web-component-wrapper": "^1.2.0",
22+
"buefy": "^0.7.0",
23+
"eslint-plugin-standard": "^3.1.0",
24+
"font-awesome": "^4.7.0",
25+
"jquery": "^3.3.1",
26+
"ol": "^5.2.0",
27+
"proj4": "^2.5.0",
28+
"three": "^0.97.0",
29+
"three-software-renderer": "^1.2.0",
30+
"vue": "^2.5.2",
31+
"vue-custom-element": "^3.2.5",
32+
"vue-router": "^3.0.1",
33+
"vue-simple-context-menu": "^3.0.1"
34+
},
35+
"devDependencies": {
36+
"autoprefixer": "^7.1.2",
37+
"babel-core": "^6.22.1",
38+
"babel-eslint": "^8.2.1",
39+
"babel-helper-vue-jsx-merge-props": "^2.0.3",
40+
"babel-jest": "^21.0.2",
41+
"babel-loader": "^7.1.1",
42+
"babel-plugin-dynamic-import-node": "^1.2.0",
43+
"babel-plugin-syntax-jsx": "^6.18.0",
44+
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
45+
"babel-plugin-transform-runtime": "^6.22.0",
46+
"babel-plugin-transform-vue-jsx": "^3.5.0",
47+
"babel-preset-env": "^1.3.2",
48+
"babel-preset-stage-2": "^6.22.0",
49+
"chalk": "^2.0.1",
50+
"copy-webpack-plugin": "^4.0.1",
51+
"css-loader": "^0.28.0",
52+
"eslint": "^4.19.1",
53+
"eslint-config-airbnb-base": "^11.3.0",
54+
"eslint-config-standard": "^10.2.1",
55+
"eslint-friendly-formatter": "^3.0.0",
56+
"eslint-import-resolver-webpack": "^0.8.3",
57+
"eslint-loader": "^1.7.1",
58+
"eslint-plugin-import": "^2.7.0",
59+
"eslint-plugin-node": "^8.0.1",
60+
"eslint-plugin-promise": "^4.0.1",
61+
"eslint-plugin-vue": "^4.0.0",
62+
"extract-text-webpack-plugin": "^4.0.0-beta.0",
63+
"file-loader": "^1.1.4",
64+
"friendly-errors-webpack-plugin": "^1.6.1",
65+
"html-webpack-plugin": "^3.2.0",
66+
"jest": "^22.0.4",
67+
"jest-serializer-vue": "^0.3.0",
68+
"node-notifier": "^5.1.2",
69+
"optimize-css-assets-webpack-plugin": "^3.2.0",
70+
"ora": "^1.2.0",
71+
"portfinder": "^1.0.13",
72+
"postcss-import": "^11.0.0",
73+
"postcss-loader": "^2.0.8",
74+
"postcss-url": "^7.2.1",
75+
"rimraf": "^2.6.0",
76+
"semver": "^5.3.0",
77+
"shelljs": "^0.7.6",
78+
"uglifyjs-webpack-plugin": "^1.1.1",
79+
"url-loader": "^0.5.8",
80+
"vue-jest": "^1.0.2",
81+
"vue-loader": "^13.3.0",
82+
"vue-style-loader": "^3.0.1",
83+
"vue-template-compiler": "^2.5.2",
84+
"webpack": "^4.28.3",
85+
"webpack-bundle-analyzer": "^2.9.0",
86+
"webpack-cli": "^3.2.0",
87+
"webpack-dev-server": "^3.1.14",
88+
"webpack-merge": "^4.1.0"
89+
},
90+
"engines": {
91+
"node": ">= 6.0.0",
92+
"npm": ">= 3.0.0"
93+
},
94+
"browserslist": [
95+
"> 1%",
96+
"last 2 versions",
97+
"not ie <= 8"
98+
]
99+
}

‎src/App.vue

+57
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,59 @@ export default {
5959
console.log ('ENDPOINT CORRETTO')
6060
this.backendEndpoint = window.location.protocol+"//"+window.location.hostname+':'+window.location.port
6161
}
62+
63+
const getCookie = function (name) {
64+
var cookieValue = null;
65+
if (document.cookie && document.cookie !== '') {
66+
var cookies = document.cookie.split(';');
67+
for (var i = 0; i < cookies.length; i++) {
68+
var cookie = $.trim(cookies[i]);
69+
// Does this cookie string begin with the name we want?
70+
if (cookie.substring(0, name.length + 1) === (name + '=')) {
71+
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
72+
break;
73+
}
74+
}
75+
}
76+
return cookieValue;
77+
}
78+
79+
const csrfSafeMethod = function (method) {
80+
// these HTTP methods do not require CSRF protection
81+
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
82+
}
83+
84+
this.csrftoken = getCookie('csrftoken');
85+
86+
const component = this
87+
88+
$.ajaxSetup({
89+
beforeSend: function(xhr, settings) {
90+
console.log('BEFORE SEND!!', settings.url)
91+
xhr.setRequestHeader ("Authorization", "Basic " + btoa(component.user + ":" + component.password));
92+
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
93+
xhr.setRequestHeader("X-CSRFToken", component.csrftoken);
94+
}
95+
}
96+
});
97+
98+
const userkeys_url = this.backend + "/userkeys/" //"?username=" + this.user + "&apikey=" + this.backendApikey
99+
console.log("userkeys_url",userkeys_url)
100+
101+
$.ajax({
102+
type: 'GET',
103+
url: userkeys_url,
104+
data:{
105+
apikey: this.backendApikey,
106+
username: this.user
107+
},
108+
error: function(errormsg) { console.log("ERROR", errormsg);},
109+
success: function(resultData) {
110+
console.log(resultData)
111+
component.userkey = resultData["results"][0]["key"]
112+
console.log('USERKEY',component.userkey)
113+
},
114+
});
62115
},
63116
64117
mounted: function() {
@@ -73,6 +126,10 @@ export default {
73126
externalOverlay: this.overlay,
74127
operating_mode: this.mode,
75128
current_pano: undefined,
129+
csfrtoken: undefined,
130+
user: 'devel',
131+
password: 'letmein',
132+
userkey: undefined,
76133
// lat: 11,
77134
// lon: 45,
78135
}

‎src/components/HelloWorld.vue

-113
This file was deleted.

‎src/components/mio.vue

-70
This file was deleted.

‎src/components/ws_keymap.vue

+8-2
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import Feature from 'ol/Feature'
7070
import Point from 'ol/geom/Point'
7171
import Style from 'ol/style/Style'
7272
import Icon from 'ol/style/Icon'
73+
import Circle from 'ol/style/Circle'
7374
import Stroke from 'ol/style/Stroke'
7475
import Fill from 'ol/style/Fill'
7576
import Vector from 'ol/layer/Vector'
@@ -96,6 +97,7 @@ export default {
9697
},
9798
9899
mounted: function () {
100+
99101
this.map_panel_render();
100102
},
101103
@@ -178,11 +180,15 @@ export default {
178180
}),
179181
style: new Style({
180182
stroke: new Stroke({
181-
color: '#ff0000',
183+
color: '#0073e6',
182184
width: 1
183185
}),
184186
fill: new Fill({
185187
color: 'rgba(255, 255, 255, 0.3)'
188+
}),
189+
image: new Circle({
190+
radius: 3,
191+
fill: new Fill({color: '#0073e6'}),
186192
})
187193
})
188194
@@ -399,7 +405,7 @@ export default {
399405
data: {
400406
panorama: this.pano.key,
401407
type: 2,
402-
creator_key: this.$parent.apikey,
408+
creator_key: this.$parent.userkey,
403409
img_lon: img_lon,
404410
img_lat: img_lat,
405411
lon: spotLocation_wgs84[0],

‎src/components/ws_opts.vue

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
2+
<template>
3+
<div id="options_form">
4+
<div ref="optsIcon" v-on:click="visible = !visible" class="optsIcon iconOpen" v-bind:class="{ active: visible }">
5+
<font-awesome-icon icon="cog" />
6+
</div>
7+
<div class="optsPanel" v-if="visible">
8+
<section size="is-small">
9+
<b-collapse class="card">
10+
<div slot="trigger" slot-scope="props" class="card-header">
11+
<p class="card-header-title">
12+
viewer options
13+
</p>
14+
<a class="card-header-icon">
15+
<b-icon
16+
:icon="props.open ? 'menu-down' : 'menu-up'">
17+
</b-icon>
18+
</a>
19+
</div>
20+
<div class="card-content">
21+
<!--
22+
<b-field label="Tag type">
23+
<b-select placeholder="Select a tag type">
24+
<option v-for="item in opts" :value="item.value">
25+
{{item.key}}
26+
</option>
27+
</b-select>
28+
</b-field>
29+
-->
30+
<div class="field">
31+
<b-checkbox v-model="options.context" @input="Tchange">
32+
context
33+
</b-checkbox>
34+
</div>
35+
<div class="field">
36+
<b-checkbox v-model="options.tags" @input="Tchange">
37+
tags
38+
</b-checkbox>
39+
</div>
40+
<div class="field" v-on:change="Tchange">
41+
<b-checkbox v-model="options.labels" @input="Tchange">
42+
labels
43+
</b-checkbox>
44+
</div>
45+
<div class="field">
46+
<b-checkbox v-model="options.spots" @input="Tchange">
47+
map spots
48+
</b-checkbox>
49+
</div>
50+
</div>
51+
<footer class="card-footer">
52+
<a class="card-footer-item" v-on:click="Tcancel">Close</a>
53+
</footer>
54+
</b-collapse>
55+
</section>
56+
</div>
57+
</div>
58+
59+
</template>
60+
61+
<style lang="scss" scoped>
62+
/* Style the button that is used to open and close the collapsible content */
63+
.optsPanel {
64+
position: absolute;
65+
bottom:0px;
66+
right:0px;
67+
text-align: left;
68+
width: 200;
69+
height: auto;
70+
z-index: 2003;
71+
padding: 5px;
72+
}
73+
74+
.iconOpen {
75+
right:95px;
76+
}
77+
78+
.optsIcon {
79+
background-color: transparent;
80+
color: white;
81+
cursor: pointer;
82+
padding: 5px;
83+
border: none;
84+
text-align: left;
85+
outline: none;
86+
font-size: 20px;
87+
z-index: 1003;
88+
position: absolute;
89+
top:0px;
90+
width: 30px;
91+
height: 30px;
92+
z-index: 2002;
93+
}
94+
95+
.active, .iconPanel:hover {
96+
color: #000 !important;
97+
}
98+
99+
@import "~bulma/sass/utilities/_all";
100+
101+
</style>
102+
103+
<script>
104+
/* eslint-disable */
105+
106+
export default {
107+
name: 'optionsform',
108+
109+
data: function () {
110+
return {
111+
visible: false,
112+
opts: [
113+
{key: 'UNO', value: 'uno'},
114+
{key: 'DUE', value: 'due'},
115+
{key: 'TRE', value: 'tre'}
116+
],
117+
options: {
118+
context:true,
119+
labels: true,
120+
tags: true,
121+
spots: true,
122+
},
123+
}
124+
},
125+
126+
mounted: function () {
127+
128+
},
129+
130+
created: function () {
131+
this.$on('input', this.editTag)
132+
console.log("CREATED OPTS FORM")
133+
},
134+
135+
computed: {
136+
},
137+
138+
methods: {
139+
Tcancel: function() {
140+
this.visible = false
141+
},
142+
Tchange: function({ type, target }) {
143+
this.$parent.$emit('options_changed', this.options);
144+
},
145+
}
146+
}
147+
</script>

‎src/components/ws_viewer.vue

+47-22
Original file line numberDiff line numberDiff line change
@@ -174,9 +174,12 @@ export default {
174174
175175
this.tagMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 4 } );
176176
this.loadedtagsMaterial = new THREE.LineBasicMaterial( { color: 0xff00ff, linewidth: 4 } );
177-
this.contextMaterial = new THREE.LineBasicMaterial( { color: 0xffff00, linewidth: 2 } );
178177
this.tagObject = new THREE.Line( this.tagGeom, this.tagMaterial );
179-
178+
this.contextPolyMaterial = new THREE.LineBasicMaterial( { color: 0x009933, linewidth: 1 } );
179+
this.contextLineMaterial = new THREE.LineBasicMaterial( { color: 0x009933, linewidth: 3 } );
180+
const contextPointMaterial = new THREE.MeshBasicMaterial({color: 0x009933, opacity: 1});
181+
this.contextPointGeometry = new THREE.Mesh(new THREE.CircleGeometry( 0.2, 12 ), contextPointMaterial)
182+
this.contextPointGeometry.rotation.x = -Math.PI / 2;
180183
181184
const plane_geometry = new THREE.PlaneGeometry( 1000, 1000, 100, 100 );
182185
const plane_material = new THREE.MeshBasicMaterial({
@@ -294,7 +297,6 @@ export default {
294297
295298
296299
if (this.lat && this.lon) {
297-
console.log("EMIT to keymap")
298300
this.render();
299301
this.emitViewChanged();
300302
}
@@ -437,7 +439,6 @@ export default {
437439
);
438440
this.scene.add(control_location_0)
439441
440-
console.log("draw_reference",control_location_270,control_location_90,control_location_0,control_location_180);
441442
},
442443
443444
onDocumentClick: function(event) {
@@ -624,7 +625,7 @@ export default {
624625
data: {
625626
panorama: this.pano_key,
626627
type: 1,
627-
creator_key: this.parent_apikey,
628+
creator_key: this.$parent.userkey,
628629
geom_on_panorama: JSON.stringify(this.tagShape),
629630
630631
},
@@ -757,7 +758,6 @@ export default {
757758
case 2: //type MAP Spots
758759
newTagObject = component.spot_proto.clone()
759760
component.spotGroup.add(newTagObject);
760-
console.log(i,item["utm_y"]-component.utm_y, -component.height_from_ground, item["utm_x"]-component.utm_x)
761761
newTagObject.position.set(item["utm_y"]-component.utm_y, -component.height_from_ground, item["utm_x"]-component.utm_x)
762762
newTagObject.children[0].ws_type = "map spot"
763763
newTagObject.children[0].ws_imgObjKey = item.id
@@ -791,7 +791,6 @@ export default {
791791
textElement.classList.add("overlabel_" + type.toString());
792792
textElement.onclick = function (event) {
793793
event.preventDefault()
794-
console.log("TAG",text)
795794
component.$parent.$emit('editTag', text)
796795
}
797796
textElement.innerHTML = text;
@@ -822,23 +821,49 @@ export default {
822821
if (this.options.context){
823822
for (var i=0; i<context.length; ++i) {
824823
const map_feat = context[i];
825-
let startVertex;
826-
const contextShape = new THREE.Geometry();
827-
for (var k=0; k<map_feat["geometry"]["coordinates"][0][0].length; ++k) {
828-
const vertex = new THREE.Vector3(
829-
map_feat["geometry"]["coordinates"][0][0][k][1]-this.utm_y,
830-
-this.height_from_ground,
831-
map_feat["geometry"]["coordinates"][0][0][k][0]-this.utm_x,
832-
);
833-
834-
if (!startVertex){
835-
startVertex = vertex
824+
if (map_feat["geometry"]["type"]=='MultiPolygon'){
825+
let startVertex;
826+
const contextShape = new THREE.Geometry();
827+
for (var k=0; k<map_feat["geometry"]["coordinates"][0][0].length; ++k) {
828+
const vertex = new THREE.Vector3(
829+
map_feat["geometry"]["coordinates"][0][0][k][1]-this.utm_y,
830+
-this.height_from_ground,
831+
map_feat["geometry"]["coordinates"][0][0][k][0]-this.utm_x,
832+
);
833+
834+
if (!startVertex){
835+
startVertex = vertex
836+
}
837+
contextShape.vertices.push(vertex)
838+
}
839+
contextShape.vertices.push(startVertex);
840+
const newContextObject = new THREE.Line( contextShape, this.contextPolyMaterial );
841+
this.contextGroup.add(newContextObject);
842+
}
843+
if (map_feat["geometry"]["type"]=='MultiLineString'){
844+
const contextShape = new THREE.Geometry();
845+
for (var k=0; k<map_feat["geometry"]["coordinates"][0].length; ++k) {
846+
const vertex = new THREE.Vector3(
847+
map_feat["geometry"]["coordinates"][0][k][1]-this.utm_y,
848+
-this.height_from_ground,
849+
map_feat["geometry"]["coordinates"][0][k][0]-this.utm_x,
850+
);
851+
contextShape.vertices.push(vertex)
852+
}
853+
const newContextObject = new THREE.Line( contextShape, this.contextLineMaterial );
854+
this.contextGroup.add(newContextObject);
855+
}
856+
if (map_feat["geometry"]["type"]=='MultiPoint'){
857+
for (var k=0; k<map_feat["geometry"]["coordinates"].length; ++k) {
858+
const newContextPoint = this.contextPointGeometry.clone()
859+
newContextPoint.position.set(
860+
map_feat["geometry"]["coordinates"][k][1]-this.utm_y,
861+
-this.height_from_ground,
862+
map_feat["geometry"]["coordinates"][k][0]-this.utm_x,
863+
);
864+
this.contextGroup.add(newContextPoint);
836865
}
837-
contextShape.vertices.push(vertex)
838866
}
839-
contextShape.vertices.push(startVertex);
840-
const newContextObject = new THREE.Line( contextShape, this.contextMaterial );
841-
this.contextGroup.add(newContextObject);
842867
}
843868
this.contextGroup.rotation.y = Math.PI * this.pano_track / 180;
844869
this.scene.add(this.contextGroup);

‎src/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import widesight from './App.vue'
55
// import router from './router'
66
import vueCustomElement from 'vue-custom-element'
77
import { library } from '@fortawesome/fontawesome-svg-core'
8-
import { faInfoCircle, faTimesCircle, faMap, faTag, faCog, faEllipsisv } from '@fortawesome/free-solid-svg-icons'
8+
import { faInfoCircle, faTimesCircle, faMap, faTag, faCog } from '@fortawesome/free-solid-svg-icons'
99
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
1010
import Buefy from 'buefy'
1111
import 'buefy/dist/buefy.css'

‎src/main_chrome.js

-12
This file was deleted.

‎src/main_ok.js

-21
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.