Skip to content

X
x3domlet
Commit 777e1748 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

1. forgot a few files 2. change markers colors and size

parent 8fdfda69
Show whitespace changes
Inline Side-by-side
Showing with 652 additions and 299 deletions
js/index.css
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{ table{
position:absolute; border-collapse:collapse;
height: 512px;
width: 2px;
} }
#window-info{ tr, th, td{
display:block; border: 1px solid rgba(220,220,220,1);
font-size: 16px;
} }
#window-viewinfo{ #model_table td{
z-index: 10; padding: 5px;
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{ ul {
text-align:center; margin: 0px;
} -webkit-padding-start: 20px;
#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;
} }
\ 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://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
// http://leafletjs.com/examples/extending/extending-1-classes.html // http://leafletjs.com/examples/extending/extending-1-classes.html
...@@ -99,7 +136,10 @@ LeafletObject.prototype.highlightMarker = function(index){ ...@@ -99,7 +136,10 @@ LeafletObject.prototype.highlightMarker = function(index){
LeafletObject.prototype.dehighlightMarker = 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._measureMarkers[index].setStyle(style);
this.marker._measureLines[index].setStyle(style); this.marker._measureLines[index].setStyle(style);
...@@ -125,3 +165,35 @@ LeafletObject.prototype.deleteMarker = function(index){ ...@@ -125,3 +165,35 @@ LeafletObject.prototype.deleteMarker = function(index){
this.marker.removeMeasureMarker(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 = { var Data = {
camera:{}, camera:{},
...@@ -17,8 +53,14 @@ var SETTINGS = { ...@@ -17,8 +53,14 @@ var SETTINGS = {
'viewinfo': true, 'viewinfo': true,
'moreinfo': true, 'moreinfo': true,
'crosshair': false, 'crosshair': false,
'shiftspeed': 0.01, 'shiftspeed' : 0.01,
'slidingdrag': true 'markersize' : 2,
'markercolor': "#1f1",
'slidingdrag': true,
'basepath': "models",
'path' : "1487451413_967079",
'version': "v1",
// 'kml' : "scene.kml"
} }
// no comments // no comments
...@@ -35,6 +77,10 @@ function parseURL(){ ...@@ -35,6 +77,10 @@ function parseURL(){
case "crosshair": SETTINGS.crosshair = true; break; case "crosshair": SETTINGS.crosshair = true; break;
case "slidingdrag": SETTINGS.slidingdrag = true; break; case "slidingdrag": SETTINGS.slidingdrag = true; break;
case "shiftspeed": SETTINGS.shiftspeed = parseFloat(parameters[i][1]); 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(){ ...@@ -72,8 +118,19 @@ function title_init(){
function light_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({ $.ajax({
url: "kml/test.kml", url: SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.path+".kml",
success: function(response){ success: function(response){
var longitude = parseFloat($(response).find("Camera").find("longitude").text()); var longitude = parseFloat($(response).find("Camera").find("longitude").text());
...@@ -114,7 +171,7 @@ function light_init(){ ...@@ -114,7 +171,7 @@ function light_init(){
map_resize_init(); map_resize_init();
deep_init(); deep_init();
align_init(); align_init();
//x3d_initial_camera_placement(); x3d_initial_camera_placement();
}; };
}); });
...@@ -200,7 +257,6 @@ function deep_init(){ ...@@ -200,7 +257,6 @@ function deep_init(){
} }
// inactive
function x3d_initial_camera_placement(){ function x3d_initial_camera_placement(){
// Roll compensation // Roll compensation
...@@ -211,33 +267,47 @@ function x3d_initial_camera_placement(){ ...@@ -211,33 +267,47 @@ function x3d_initial_camera_placement(){
// Altitude is relative. Do not care. // Altitude is relative. Do not care.
// Roll // Roll
var z = new x3dom.fields.SFVec3f(0,0,1); var x = new x3dom.fields.SFVec3f(1,0,0);
var qr = x3dom.fields.Quaternion.axisAngle(z,-roll); var qr = x3dom.fields.Quaternion.axisAngle(x,roll);
var M_roll = qr.toMatrix(); var Mr = qr.toMatrix();
// Tilt // Tilt
var x = new x3dom.fields.SFVec3f(1,0,0); var y = new x3dom.fields.SFVec3f(0,1,0);
var qt = x3dom.fields.Quaternion.axisAngle(x,-tilt); var qt = x3dom.fields.Quaternion.axisAngle(y,tilt);
var M_tilt = qt.toMatrix(); var Mt = qt.toMatrix();
// Heading // Heading
var y = new x3dom.fields.SFVec3f(0,1,0); var z = new x3dom.fields.SFVec3f(0,0,1);
var qh = x3dom.fields.Quaternion.axisAngle(y,-heading); var qh = x3dom.fields.Quaternion.axisAngle(z,heading);
var M_heading = qh.toMatrix(); 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_rw2w = R_rw2w.inverse();
var Rmap_rw = T.inverse().mult(Mh).mult(T);
var M = M_heading.mult(M_tilt).mult(M_roll); var Rc_w = M_rw2w.mult(T.inverse()).mult(Mh).mult(T);
// store matrices // store matrices
Data.camera.Matrices = { Data.camera.Matrices = {
Head: M_heading, R_h_eul: Mh,
Tilt: M_tilt, R_t_eul: Mt,
Roll: M_roll, R_r_eul: Mr,
R: M R_rw2w : R_rw2w,
M_rw2w : M_rw2w,
V_trueUp_w: Rc_w.e1()
}; };
// set view // set view
var Q = new x3dom.fields.Quaternion(0, 0, 1, 0); var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
Q.setValue(M.inverse()); Q.setValue(Rc_w);
var AA = Q.toAxisAngle(); var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint"); 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(){ function menu_init(){
...@@ -48,6 +84,8 @@ function menu_init(){ ...@@ -48,6 +84,8 @@ function menu_init(){
crosshair_init(); crosshair_init();
shiftspeed_init(); shiftspeed_init();
marker_size_color_init();
} }
function crosshair_init(){ function crosshair_init(){
...@@ -75,3 +113,18 @@ function shiftspeed_init(){ ...@@ -75,3 +113,18 @@ function shiftspeed_init(){
$('#shiftspeed').change(); $('#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) * output in units (meters)
*/ */
...@@ -167,6 +204,8 @@ function x3dom_getCameraPosOr(round){ ...@@ -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(){ function x3dom_setUpRight(){
var mat = Scene.element.runtime.viewMatrix().inverse(); var mat = Scene.element.runtime.viewMatrix().inverse();
...@@ -174,7 +213,8 @@ function x3dom_setUpRight(){ ...@@ -174,7 +213,8 @@ function x3dom_setUpRight(){
var from = mat.e3(); var from = mat.e3();
var at = from.subtract(mat.e2()); 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(); 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){ var X3DOMObject = function(element,data,options){
...@@ -390,21 +426,26 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){ ...@@ -390,21 +426,26 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
id = "my-sph-"+index; id = "my-sph-"+index;
} }
var color = convert_color_l2x(SETTINGS.markercolor);
var html = ` var html = `
<group id='`+id+`' class='`+sph_class+`'> <group id='`+id+`' class='`+sph_class+`'>
<switch whichChoice='0'> <switch whichChoice='0'>
<transform translation='`+x+` `+y+` `+z+`' rotation='0 0 0 0'> <transform translation='`+x+` `+y+` `+z+`' rotation='0 0 0 0'>
<shape class='shapemarker'> <shape class='shapemarker'>
<appearance> <appearance>
<material diffuseColor='0.07 1 0.07' transparency='0.0'></material> <material diffuseColor='`+color+`' transparency='0.0' myColor='`+color+`'></material>
</appearance> </appearance>
<Sphere DEF="sphere" radius="1" /> <Sphere DEF="sphere" radius="`+(SETTINGS.markersize/2)+`" />
</shape> </shape>
</transform> </transform>
</switch> </switch>
</group> </group>
`; `;
var test = convert_color_x2l(SETTINGS.markercolor);
console.log(test);
var sphere_element = $(html); var sphere_element = $(html);
$(this.element).find("scene").append(sphere_element); $(this.element).find("scene").append(sphere_element);
...@@ -860,7 +901,8 @@ X3DOMObject.Marker.highlight = function(elem){ ...@@ -860,7 +901,8 @@ X3DOMObject.Marker.highlight = function(elem){
X3DOMObject.Marker.dehighlight = 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); elem.find('material').attr("diffuseColor",color);
} }
...@@ -885,7 +927,7 @@ X3DOMObject.PointerMarker = function(){ ...@@ -885,7 +927,7 @@ X3DOMObject.PointerMarker = function(){
X3DOMObject.PointerMarker.prototype._init = 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._shape = this._elem.find("shape");
this._registerEvents(); this._registerEvents();
......
test.html
View file @ 777e1748
...@@ -89,6 +89,14 @@ ...@@ -89,6 +89,14 @@
<td>View's parallel shift speed</td> <td>View's parallel shift speed</td>
<td><input id='shiftspeed' type='text' class='input' /></td> <td><input id='shiftspeed' type='text' class='input' /></td>
</tr> </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> <tr>
<td><button>Close</button></td> <td><button>Close</button></td>
</tr> </tr>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment