Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
X
x3domlet
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
3
Issues
3
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Elphel
x3domlet
Commits
777e1748
Commit
777e1748
authored
Jun 08, 2017
by
Oleg Dzhimiev
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1. forgot a few files 2. change markers colors and size
parent
8fdfda69
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
652 additions
and
299 deletions
+652
-299
index.css
js/index.css
+11
-272
index.js
js/index.js
+51
-0
leaflet_init.js
js/leaflet_init.js
+73
-1
ui.css
js/ui.css
+278
-0
ui_init.js
js/ui_init.js
+91
-21
ui_menu.js
js/ui_menu.js
+53
-0
x3dom_functions.js
js/x3dom_functions.js
+41
-1
x3dom_init.js
js/x3dom_init.js
+46
-4
test.html
test.html
+8
-0
No files found.
js/index.css
View file @
777e1748
body
{
padding
:
0px
;
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
margin
:
0px
;
overflow
:
hidden
;
table
{
border-collapse
:
collapse
;
}
#x3d_i
d
{
border
:
0px
;
tr
,
th
,
t
d
{
border
:
1px
solid
rgba
(
220
,
220
,
220
,
1
)
;
}
#x3dom_logdiv
{
position
:
absolute
;
left
:
0px
;
bottom
:
0px
;
width
:
99%
;
}
.x3dom-canvas
{
cursor
:
pointer
;
}
body
{
padding
:
0
;
margin
:
0
;
}
html
,
body
,
#x3d_wrapper
{
height
:
100vh
;
width
:
100vw
;
}
#map_wrapper
{
position
:
absolute
;
right
:
2px
;
bottom
:
2px
;
width
:
500px
;
height
:
400px
;
border
:
2px
solid
white
;
border-radius
:
2px
;
z-index
:
10000
;
}
#leaflet_map
{
width
:
500px
;
height
:
400px
;
}
.measurementtooltip
{
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
padding
:
0px
3px
;
/* margin:20px 0px 0px 7px; */
font-weight
:
normal
;
border-radius
:
1px
;
font-size
:
16px
;
display
:
block
;
position
:
absolute
;
top
:
16px
;
left
:
3px
;
}
.leaflet-tooltip-left.measurementtooltip
::before
{
border
:
0px
;
border-left-color
:
cyan
;
}
.leaflet-tooltip-right.measurementtooltip
::before
{
border
:
0px
;
border-right-color
:
cyan
;
}
#infowindow
,
#infowindow
div
{
z-index
:
10
;
background
:
rgba
(
220
,
220
,
220
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
2px
;
color
:
black
;
font-size
:
20px
;
}
#window-info
,
#window-info
div
{
z-index
:
10
;
background
:
rgba
(
220
,
220
,
220
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
2px
;
color
:
black
;
/* font-size:20px; */
}
#map_resizer_handle
{
position
:
absolute
;
top
:
-8px
;
left
:
-8px
;
width
:
16px
;
height
:
16px
;
border-radius
:
8px
;
background-color
:
white
;
z-index
:
1000
;
cursor
:
move
;
}
.leaflet-tooltip-pane
{
z-index
:
350
;
}
.leaflet-control-zoom-in
,
.leaflet-control-zoom-out
{
user-select
:
none
;
}
.leaflet-control-zoom
{
user-select
:
none
;
}
.leaflet-interactive
img
{
user-select
:
none
;
pointer-events
:
none
;
}
.leaflet-interactive
path
{
user-select
:
none
;
pointer-events
:
none
;
}
#help_wrapper
{
position
:
absolute
;
top
:
2px
;
right
:
2px
;
/* width:30%;
height:100%;*/
/* background: rgba(200,100,100,0.5); */
z-index
:
1000
;
}
#help_button
{
background
:
white
;
border
:
0px
solid
white
;
border-radius
:
2px
;
font-size
:
20px
;
font-weight
:
bold
;
padding
:
5px
10px
;
margin-bottom
:
2px
;
}
#help_button
:focus
{
outline
:
0
;}
#help_button
:hover
{
background
:
rgba
(
240
,
240
,
240
,
1
);
}
#help-content
,
#menu-content
{
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
position
:
absolute
;
top
:
0px
;
left
:
0px
;
width
:
100%
;
height
:
100%
;
border-radius
:
2px
;
border
:
0px
solid
gray
;
color
:
white
;
font-size
:
16px
;
padding
:
20px
100px
;
background
:
rgba
(
50
,
50
,
50
,
0.9
);
overflow
:
auto
;
display
:
none
;
z-index
:
10000
;
}
#menu_button
{
background-image
:
url('images/settings.png')
;
background-size
:
32px
32px
;
background-repeat
:
no-repeat
;
background-color
:
white
;
width
:
32px
;
height
:
32px
;
border
:
0px
solid
white
;
border-radius
:
2px
;
margin-bottom
:
2px
;
}
#menu_button
:hover
{
/* background-image:url('images/settings.png'); */
background-color
:
rgba
(
240
,
240
,
240
,
1
);
}
.my-check-box
{
width
:
25px
;
height
:
25px
;
}
#align_button
{
background-image
:
url('images/align.png')
;
background-size
:
32px
32px
;
background-repeat
:
no-repeat
;
background-color
:
white
;
width
:
32px
;
height
:
32px
;
border
:
0px
solid
white
;
border-radius
:
2px
;
margin-bottom
:
2px
;
}
#align_button
:hover
{
/* background-image:url('images/align.png'); */
background-color
:
rgba
(
240
,
240
,
240
,
1
);
}
.crosshair
{
background
:
rgba
(
50
,
200
,
50
,
0.5
);
display
:
none
;
}
#crosshair_h
{
position
:
absolute
;
width
:
512px
;
height
:
2px
;
}
#crosshair_v
{
position
:
absolute
;
height
:
512px
;
width
:
2px
;
}
#window-info
{
display
:
block
;
font-size
:
16px
;
}
#window-viewinfo
{
z-index
:
10
;
background
:
rgba
(
220
,
220
,
220
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
1px
;
color
:
black
;
font-size
:
16px
;
margin-top
:
2px
;
}
#window-viewinfo
td
{
text-align
:
center
;
}
#window-markinfo
{
z-index
:
10
;
background
:
rgba
(
256
,
256
,
256
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
1px
;
color
:
black
;
font-size
:
16px
;
margin-top
:
2px
;
}
#window-markinfo
td
{
text-align
:
center
;
}
.input
{
text-align
:
right
;
width
:
100px
;
height
:
20px
;
font-size
:
16px
;
border-radius
:
2px
;
}
.hcontrol-button
{
background-color
:
red
;
}
.hcontrol-button
:hover
{
background-color
:
red
;
}
#info-wrapper
{
position
:
absolute
;
left
:
2px
;
bottom
:
2px
;
#model_table
td
{
padding
:
5px
;
}
ul
{
margin
:
0px
;
-webkit-padding-start
:
20px
;
}
\ No newline at end of file
js/index.js
0 → 100644
View file @
777e1748
$
(
function
(){
//init();
$
.
ajax
({
url
:
"list.php"
,
success
:
function
(
response
){
parse_list
(
response
);
}
});
});
function
parse_list
(
res
){
$
(
res
).
find
(
"model"
).
each
(
function
(){
var
row
=
$
(
"<tr>"
);
var
name
=
$
(
this
).
attr
(
"name"
);
row
.
append
(
"<td valign='top'>"
+
name
+
"</td>"
);
var
vlist
=
""
;
var
rlist
=
""
;
$
(
this
).
find
(
"version"
).
each
(
function
(){
var
link_url
=
"test.html?path="
+
name
+
"&ver="
+
$
(
this
).
attr
(
"name"
);
var
link
=
"<a href='"
+
link_url
+
"'>"
+
$
(
this
).
attr
(
"name"
)
+
"</a>"
;
vlist
+=
"<div>"
+
link
+
"</div>"
;
link_url
=
"models/"
+
name
+
"/"
+
$
(
this
).
attr
(
"name"
)
+
"/README.txt"
;
link
=
"<a href='"
+
link_url
+
"'>readme.txt</a>"
;
rlist
+=
"<div>"
+
link
+
"</div>"
;
});
row
.
append
(
"<td valign='top'>"
+
vlist
+
"</td>"
);
row
.
append
(
"<td valign='top'>"
+
rlist
+
"</td>"
);
$
(
"#model_table"
).
append
(
row
);
});
}
js/leaflet_init.js
View file @
777e1748
/*
Copyright (C) 2017 Elphel Inc.
License: GPLv3
https://www.elphel.com
*/
/**
* @file -
* @brief -
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*/
// http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
// http://leafletjs.com/examples/extending/extending-1-classes.html
...
...
@@ -99,7 +136,10 @@ LeafletObject.prototype.highlightMarker = function(index){
LeafletObject
.
prototype
.
dehighlightMarker
=
function
(
index
){
var
style
=
{
color
:
'#1f1'
,
fillColor
:
"#0f3"
};
var
color
=
$
(
"#my-sph-"
+
index
).
find
(
"material"
).
attr
(
"myColor"
);
color
=
convert_color_x2l
(
color
);
var
style
=
{
color
:
color
,
fillColor
:
color
};
this
.
marker
.
_measureMarkers
[
index
].
setStyle
(
style
);
this
.
marker
.
_measureLines
[
index
].
setStyle
(
style
);
...
...
@@ -125,3 +165,35 @@ LeafletObject.prototype.deleteMarker = function(index){
this
.
marker
.
removeMeasureMarker
(
index
);
}
function
convert_color_x2l
(
color
){
var
rgb
=
color
.
split
(
" "
);
var
r
=
parseInt
(
rgb
[
0
]
*
15
);
var
g
=
parseInt
(
rgb
[
1
]
*
15
);
var
b
=
parseInt
(
rgb
[
2
]
*
15
);
r
=
r
.
toString
(
16
);
g
=
g
.
toString
(
16
);
b
=
b
.
toString
(
16
);
return
"#"
+
r
+
g
+
b
;
}
function
convert_color_l2x
(
color
){
var
r
=
parseInt
(
color
[
1
],
16
);
var
g
=
parseInt
(
color
[
2
],
16
);
var
b
=
parseInt
(
color
[
3
],
16
);
r
=
r
/
15
;
g
=
g
/
15
;
b
=
b
/
15
;
return
r
+
" "
+
g
+
" "
+
b
;
}
js/ui.css
0 → 100644
View file @
777e1748
body
{
padding
:
0px
;
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
margin
:
0px
;
overflow
:
hidden
;
}
#x3d_id
{
border
:
0px
;
}
#x3dom_logdiv
{
position
:
absolute
;
left
:
0px
;
bottom
:
0px
;
width
:
99%
;
}
.x3dom-canvas
{
cursor
:
pointer
;
}
body
{
padding
:
0
;
margin
:
0
;
}
html
,
body
,
#x3d_wrapper
{
height
:
100vh
;
width
:
100vw
;
}
#map_wrapper
{
position
:
absolute
;
right
:
2px
;
bottom
:
2px
;
width
:
500px
;
height
:
400px
;
border
:
2px
solid
white
;
border-radius
:
2px
;
z-index
:
10000
;
}
#leaflet_map
{
width
:
500px
;
height
:
400px
;
}
.measurementtooltip
{
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
padding
:
0px
3px
;
/* margin:20px 0px 0px 7px; */
font-weight
:
normal
;
border-radius
:
1px
;
font-size
:
16px
;
display
:
block
;
position
:
absolute
;
top
:
16px
;
left
:
3px
;
}
.leaflet-tooltip-left.measurementtooltip
::before
{
border
:
0px
;
border-left-color
:
cyan
;
}
.leaflet-tooltip-right.measurementtooltip
::before
{
border
:
0px
;
border-right-color
:
cyan
;
}
#infowindow
,
#infowindow
div
{
z-index
:
10
;
background
:
rgba
(
220
,
220
,
220
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
2px
;
color
:
black
;
font-size
:
20px
;
}
#window-info
,
#window-info
div
{
z-index
:
10
;
background
:
rgba
(
220
,
220
,
220
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
2px
;
color
:
black
;
/* font-size:20px; */
}
#map_resizer_handle
{
position
:
absolute
;
top
:
-8px
;
left
:
-8px
;
width
:
16px
;
height
:
16px
;
border-radius
:
8px
;
background-color
:
white
;
z-index
:
1000
;
cursor
:
move
;
}
.leaflet-tooltip-pane
{
z-index
:
350
;
}
.leaflet-control-zoom-in
,
.leaflet-control-zoom-out
{
user-select
:
none
;
}
.leaflet-control-zoom
{
user-select
:
none
;
}
.leaflet-interactive
img
{
user-select
:
none
;
pointer-events
:
none
;
}
.leaflet-interactive
path
{
user-select
:
none
;
pointer-events
:
none
;
}
#help_wrapper
{
position
:
absolute
;
top
:
2px
;
right
:
2px
;
/* width:30%;
height:100%;*/
/* background: rgba(200,100,100,0.5); */
z-index
:
1000
;
}
#help_button
{
background
:
white
;
border
:
0px
solid
white
;
border-radius
:
2px
;
font-size
:
20px
;
font-weight
:
bold
;
padding
:
5px
10px
;
margin-bottom
:
2px
;
}
#help_button
:focus
{
outline
:
0
;}
#help_button
:hover
{
background
:
rgba
(
240
,
240
,
240
,
1
);
}
#help-content
,
#menu-content
{
font-family
:
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
position
:
absolute
;
top
:
0px
;
left
:
0px
;
width
:
100%
;
height
:
100%
;
border-radius
:
2px
;
border
:
0px
solid
gray
;
color
:
white
;
font-size
:
16px
;
padding
:
20px
100px
;
background
:
rgba
(
50
,
50
,
50
,
0.9
);
overflow
:
auto
;
display
:
none
;
z-index
:
10000
;
}
#menu_button
{
background-image
:
url('images/settings.png')
;
background-size
:
32px
32px
;
background-repeat
:
no-repeat
;
background-color
:
white
;
width
:
32px
;
height
:
32px
;
border
:
0px
solid
white
;
border-radius
:
2px
;
margin-bottom
:
2px
;
}
#menu_button
:hover
{
/* background-image:url('images/settings.png'); */
background-color
:
rgba
(
240
,
240
,
240
,
1
);
}
.my-check-box
{
width
:
25px
;
height
:
25px
;
}
#align_button
{
background-image
:
url('images/align.png')
;
background-size
:
32px
32px
;
background-repeat
:
no-repeat
;
background-color
:
white
;
width
:
32px
;
height
:
32px
;
border
:
0px
solid
white
;
border-radius
:
2px
;
margin-bottom
:
2px
;
}
#align_button
:hover
{
/* background-image:url('images/align.png'); */
background-color
:
rgba
(
240
,
240
,
240
,
1
);
}
.crosshair
{
background
:
rgba
(
50
,
200
,
50
,
0.5
);
display
:
none
;
}
#crosshair_h
{
position
:
absolute
;
width
:
512px
;
height
:
2px
;
}
#crosshair_v
{
position
:
absolute
;
height
:
512px
;
width
:
2px
;
}
#window-info
{
display
:
block
;
font-size
:
16px
;
}
#window-viewinfo
{
z-index
:
10
;
background
:
rgba
(
220
,
220
,
220
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
1px
;
color
:
black
;
font-size
:
16px
;
margin-top
:
2px
;
}
#window-viewinfo
td
{
text-align
:
center
;
}
#window-markinfo
{
z-index
:
10
;
background
:
rgba
(
256
,
256
,
256
,
1
);
border
:
0px
solid
rgba
(
100
,
100
,
100
,
0.5
);
border-radius
:
1px
;
color
:
black
;
font-size
:
16px
;
margin-top
:
2px
;
}
#window-markinfo
td
{
text-align
:
center
;
}
.input
{
text-align
:
right
;
width
:
100px
;
height
:
20px
;
font-size
:
16px
;
border-radius
:
2px
;
}
.hcontrol-button
{
background-color
:
red
;
}
.hcontrol-button
:hover
{
background-color
:
red
;
}
#info-wrapper
{
position
:
absolute
;
left
:
2px
;
bottom
:
2px
;
}
js/ui_init.js
View file @
777e1748
/*
Copyright (C) 2017 Elphel Inc.
License: GPLv3
https://www.elphel.com
*/
/**
* @file -
* @brief -
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*/
var
Data
=
{
camera
:{},
...
...
@@ -17,8 +53,14 @@ var SETTINGS = {
'viewinfo'
:
true
,
'moreinfo'
:
true
,
'crosshair'
:
false
,
'shiftspeed'
:
0.01
,
'slidingdrag'
:
true
'shiftspeed'
:
0.01
,
'markersize'
:
2
,
'markercolor'
:
"#1f1"
,
'slidingdrag'
:
true
,
'basepath'
:
"models"
,
'path'
:
"1487451413_967079"
,
'version'
:
"v1"
,
// 'kml' : "scene.kml"
}
// no comments
...
...
@@ -35,6 +77,10 @@ function parseURL(){
case
"crosshair"
:
SETTINGS
.
crosshair
=
true
;
break
;
case
"slidingdrag"
:
SETTINGS
.
slidingdrag
=
true
;
break
;
case
"shiftspeed"
:
SETTINGS
.
shiftspeed
=
parseFloat
(
parameters
[
i
][
1
]);
break
;
case
"markersize"
:
SETTINGS
.
markersize
=
parseFloat
(
parameters
[
i
][
1
]);
break
;
case
"path"
:
SETTINGS
.
path
=
parameters
[
i
][
1
];
break
;
case
"ver"
:
SETTINGS
.
version
=
parameters
[
i
][
1
];
break
;
// case "kml": SETTINGS.kml = parameters[i][1]; break;
}
}
}
...
...
@@ -72,8 +118,19 @@ function title_init(){
function
light_init
(){
var
x3delement
=
$
(
"#x3d_id"
).
find
(
"scene"
);
var
model_url
=
SETTINGS
.
basepath
+
"/"
+
SETTINGS
.
path
+
"/"
+
SETTINGS
.
version
+
"/"
+
SETTINGS
.
path
+
".x3d"
;
var
model
=
$
(
`
<group>
<inline name='mymodel' namespacename='mymodel' url='`
+
model_url
+
`'></inline>
</group>`
);
x3delement
.
append
(
model
);
$
.
ajax
({
url
:
"kml/test
.kml"
,
url
:
SETTINGS
.
basepath
+
"/"
+
SETTINGS
.
path
+
"/"
+
SETTINGS
.
path
+
"
.kml"
,
success
:
function
(
response
){
var
longitude
=
parseFloat
(
$
(
response
).
find
(
"Camera"
).
find
(
"longitude"
).
text
());
...
...
@@ -114,7 +171,7 @@ function light_init(){
map_resize_init
();
deep_init
();
align_init
();
//
x3d_initial_camera_placement();
x3d_initial_camera_placement
();
};
});
...
...
@@ -200,7 +257,6 @@ function deep_init(){
}
// inactive
function
x3d_initial_camera_placement
(){
// Roll compensation
...
...
@@ -211,33 +267,47 @@ function x3d_initial_camera_placement(){
// Altitude is relative. Do not care.
// Roll
var
z
=
new
x3dom
.
fields
.
SFVec3f
(
0
,
0
,
1
);
var
qr
=
x3dom
.
fields
.
Quaternion
.
axisAngle
(
z
,
-
roll
);
var
M
_roll
=
qr
.
toMatrix
();
var
x
=
new
x3dom
.
fields
.
SFVec3f
(
1
,
0
,
0
);
var
qr
=
x3dom
.
fields
.
Quaternion
.
axisAngle
(
x
,
roll
);
var
M
r
=
qr
.
toMatrix
();
// Tilt
var
x
=
new
x3dom
.
fields
.
SFVec3f
(
1
,
0
,
0
);
var
qt
=
x3dom
.
fields
.
Quaternion
.
axisAngle
(
x
,
-
tilt
);
var
M
_til
t
=
qt
.
toMatrix
();
var
y
=
new
x3dom
.
fields
.
SFVec3f
(
0
,
1
,
0
);
var
qt
=
x3dom
.
fields
.
Quaternion
.
axisAngle
(
y
,
tilt
);
var
Mt
=
qt
.
toMatrix
();
// Heading
var
y
=
new
x3dom
.
fields
.
SFVec3f
(
0
,
1
,
0
);
var
qh
=
x3dom
.
fields
.
Quaternion
.
axisAngle
(
y
,
-
heading
);
var
M_heading
=
qh
.
toMatrix
();
var
z
=
new
x3dom
.
fields
.
SFVec3f
(
0
,
0
,
1
);
var
qh
=
x3dom
.
fields
.
Quaternion
.
axisAngle
(
z
,
heading
);
var
Mh
=
qh
.
toMatrix
();
var
R
=
Mh
.
mult
(
Mt
).
mult
(
Mr
);
var
T
=
x3dom_C2E
();
// rw = real world with North
// w = virtual world = x3dom frame reference
var
R_rw2w
=
T
.
inverse
().
mult
(
R
).
mult
(
T
);
var
M
=
M_heading
.
mult
(
M_tilt
).
mult
(
M_roll
);
var
M_rw2w
=
R_rw2w
.
inverse
();
var
Rmap_rw
=
T
.
inverse
().
mult
(
Mh
).
mult
(
T
);
var
Rc_w
=
M_rw2w
.
mult
(
T
.
inverse
()).
mult
(
Mh
).
mult
(
T
);
// store matrices
Data
.
camera
.
Matrices
=
{
Head
:
M_heading
,
Tilt
:
M_tilt
,
Roll
:
M_roll
,
R
:
M
R_h_eul
:
Mh
,
R_t_eul
:
Mt
,
R_r_eul
:
Mr
,
R_rw2w
:
R_rw2w
,
M_rw2w
:
M_rw2w
,
V_trueUp_w
:
Rc_w
.
e1
()
};
// set view
var
Q
=
new
x3dom
.
fields
.
Quaternion
(
0
,
0
,
1
,
0
);
Q
.
setValue
(
M
.
inverse
()
);
Q
.
setValue
(
Rc_w
);
var
AA
=
Q
.
toAxisAngle
();
var
viewpoint
=
$
(
Scene
.
element
).
find
(
"Viewpoint"
);
...
...
js/ui_menu.js
View file @
777e1748
/*
Copyright (C) 2017 Elphel Inc.
License: GPLv3
https://www.elphel.com
*/
/**
* @file -
* @brief -
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*/
function
menu_init
(){
...
...
@@ -48,6 +84,8 @@ function menu_init(){
crosshair_init
();
shiftspeed_init
();
marker_size_color_init
();
}
function
crosshair_init
(){
...
...
@@ -75,3 +113,18 @@ function shiftspeed_init(){
$
(
'#shiftspeed'
).
change
();
}
function
marker_size_color_init
(){
$
(
'#markersize'
).
on
(
'change'
,
function
(
e
){
SETTINGS
.
markersize
=
$
(
this
).
val
();
});
$
(
'#markersize'
).
change
();
$
(
'#markercolor'
).
on
(
'change'
,
function
(
e
){
SETTINGS
.
markercolor
=
$
(
this
).
val
();
});
$
(
'#markercolor'
).
change
();
}
js/x3dom_functions.js
View file @
777e1748
/*
Copyright (C) 2017 Elphel Inc.
License: GPLv3
https://www.elphel.com
*/
/**
* @file -
* @brief -
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*/
/**
* output in units (meters)
*/
...
...
@@ -167,6 +204,8 @@ function x3dom_getCameraPosOr(round){
}
// this upright is for world coordinates, not the camera's
// the up vector should be taken from the initial camera orientation in kml.
function
x3dom_setUpRight
(){
var
mat
=
Scene
.
element
.
runtime
.
viewMatrix
().
inverse
();
...
...
@@ -174,7 +213,8 @@ function x3dom_setUpRight(){
var
from
=
mat
.
e3
();
var
at
=
from
.
subtract
(
mat
.
e2
());
var
up
=
new
x3dom
.
fields
.
SFVec3f
(
0
,
1
,
0
);
//var up = new x3dom.fields.SFVec3f(0, 1, 0);
var
up
=
Data
.
camera
.
Matrices
.
V_trueUp_w
;
var
s
=
mat
.
e2
().
cross
(
up
).
normalize
();
...
...
js/x3dom_init.js
View file @
777e1748
/*
Copyright (C) 2017 Elphel Inc.
License: GPLv3
https://www.elphel.com
*/
/**
* @file -
* @brief -
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* JavaScript code in this page.
*
* The JavaScript code in this page is free software: you can
* redistribute it and/or modify it under the terms of the GNU
* General Public License (GNU GPL) as published by the Free Software
* Foundation, either version 3 of the License, or (at your option)
* any later version. The code is distributed WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
*
* As additional permission under GNU GPL version 3 section 7, you
* may distribute non-source (e.g., minimized or compacted) forms of
* that code without the copy of the GNU GPL normally required by
* section 4, provided you include this license notice and a URL
* through which recipients can access the Corresponding Source.
*
* @licend The above is the entire license notice
* for the JavaScript code in this page.
*/
var
X3DOMObject
=
function
(
element
,
data
,
options
){
...
...
@@ -390,20 +426,25 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
id
=
"my-sph-"
+
index
;
}
var
color
=
convert_color_l2x
(
SETTINGS
.
markercolor
);
var
html
=
`
<group id='`
+
id
+
`' class='`
+
sph_class
+
`'>
<switch whichChoice='0'>
<transform translation='`
+
x
+
` `
+
y
+
` `
+
z
+
`' rotation='0 0 0 0'>
<shape class='shapemarker'>
<appearance>
<material diffuseColor='
0.07 1 0.07' transparency='0.0'></material>
<material diffuseColor='
`
+
color
+
`' transparency='0.0' myColor='`
+
color
+
`'></material>
</appearance>
<Sphere DEF="sphere" radius="
1
" />
<Sphere DEF="sphere" radius="
`
+
(
SETTINGS
.
markersize
/
2
)
+
`
" />
</shape>
</transform>
</switch>
</group>
`
;
var
test
=
convert_color_x2l
(
SETTINGS
.
markercolor
);
console
.
log
(
test
);
var
sphere_element
=
$
(
html
);
...
...
@@ -860,7 +901,8 @@ X3DOMObject.Marker.highlight = function(elem){
X3DOMObject
.
Marker
.
dehighlight
=
function
(
elem
){
var
color
=
"0.07 1 0.07"
;
//var color = "0.07 1 0.07";
var
color
=
elem
.
find
(
'material'
).
attr
(
"myColor"
);
elem
.
find
(
'material'
).
attr
(
"diffuseColor"
,
color
);
}
...
...
@@ -885,7 +927,7 @@ X3DOMObject.PointerMarker = function(){
X3DOMObject
.
PointerMarker
.
prototype
.
_init
=
function
(){
this
.
_elem
=
Scene
.
createMarker
(
0
,
0
,
0
,
"sliding_sphere"
);
;
this
.
_elem
=
Scene
.
createMarker
(
0
,
0
,
0
,
"sliding_sphere"
);
this
.
_shape
=
this
.
_elem
.
find
(
"shape"
);
this
.
_registerEvents
();
...
...
test.html
View file @
777e1748
...
...
@@ -89,6 +89,14 @@
<td>
View's parallel shift speed
</td>
<td><input
id=
'shiftspeed'
type=
'text'
class=
'input'
/></td>
</tr>
<tr>
<td>
3D marker diameter, m
</td>
<td><input
id=
'markersize'
type=
'text'
class=
'input'
/></td>
</tr>
<tr>
<td>
3D marker color
</td>
<td><input
id=
'markercolor'
type=
'text'
class=
'input'
/></td>
</tr>
<tr>
<td><button>
Close
</button></td>
</tr>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment