Skip to content

X
x3domlet
Commit 8bc06769 authored by Rurik Bugdanov's avatar Rurik Bugdanov
Browse files
Options

remove trailing spaces

parent f888f6f7
Hide whitespace changes
Inline Side-by-side
Showing with 1029 additions and 1030 deletions
index.html
View file @ 8bc06769
......@@ -3,14 +3,14 @@
<head>
<meta charset="utf-8"/>
<title>x3d models index</title>
<script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
<link rel='stylesheet' type='text/css' href='js/index.css'></link>
</head>
<body>
<div id="table_div">
......
js/index.css
View file @ 8bc06769
table{
border-collapse:collapse;
}
......
js/index.js
View file @ 8bc06769
......@@ -6,28 +6,28 @@ var markers = [];
$(function(){
//init();
init_maps();
$.ajax({
url: "list.php",
success: function(response){
List = response;
parse_list(response);
$(".arow")[0].click();
}
});
});
function parse_list(res){
var index = 0;
$(res).find("model").each(function(){
var row = $("<tr class='arow'>");
......@@ -44,60 +44,60 @@ function parse_list(res){
var vlist = "";
$(this).find("version").each(function(i,v){
var comments = $(this).find("comments").text();
var link_url = "test.html?path="+name+"&ver="+$(this).attr("name");
var link = "<a title='"+comments+"' href='"+link_url+"'>"+$(this).attr("name")+"</a>,&nbsp;";
vlist += link;
});
vlist = vlist.slice(0,-7);
row.append("<td class='acell' valign='top'><div>"+vlist+"</div></td>");
row.attr("index",index);
register_row_events(row);
$("#model_table").append(row);
//place markers
$(this).find("Camera").each(function(){
var lat = $(this).find("latitude").text();
var lng = $(this).find("longitude").text();
if (markers[lat+lng]==undefined){
var marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup(name+": "+vlist,{
direction:"top",
});
markers[lat+lng] = marker;
}else{
console.log(markers[lat+lng]);
var content = markers[lat+lng]._popup.getContent();
markers[lat+lng]._popup.setContent(content+"<br/>"+name+": "+vlist);
}
});
index++;
});
}
function register_row_events(elem){
$(elem).on("click",function(){
$(".arow").css({
......@@ -107,30 +107,30 @@ function register_row_events(elem){
$(this).css({
background: "rgba(100,200,255,0.7)"
});
var index = $(this).attr("index");
var list = $(List).find("model");
var item = list[index];
var lat = $($(item).find("latitude")[0]).text();
var lng = $($(item).find("longitude")[0]).text();
map.panTo(new L.LatLng(lat, lng));
if (markers[lat+lng]!=undefined){
markers[lat+lng].openPopup();
}
});
}
// maps
function init_maps(){
// https: also suppported.
var Esri_WorldImagery = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
maxZoom: 21,
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
......@@ -145,35 +145,35 @@ function init_maps(){
subdomains:['mt0','mt1','mt2','mt3'],
}
);
var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 21,
attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}
);
map = L.map('leaflet_map',{
layers:[googleSat],
zoomControl:false,
}).setView([40.7233861, -111.9328843], 12);
new L.Control.Zoom({ position: 'topright' }).addTo(map);
var baseMaps = {
"Esri world imagery": Esri_WorldImagery,
"Google": googleSat,
"Open Street Map": OSMTiles
};
//Esri_WorldImagery.addTo(map);
//googleSat.addTo(map);
//custom control:
//http://www.coffeegnome.net/control-button-leaflet/
L.control.layers(baseMaps).addTo(map);
}
js/leaflet/L.extra.js
View file @ 8bc06769
......@@ -3,27 +3,27 @@
//from here: https://github.com/bbecquet/Leaflet.PolylineDecorator/blob/master/src/L.RotatedMarker.js
L.DomUtil.TRANSFORM_ORIGIN = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'OTransformOrigin', 'MozTransformOrigin', 'msTransformOrigin']);
L.LatLng.prototype.CoordinatesOf = function(angle,distance){
var d = distance;
var a = angle*Math.PI/180;
var lat1 = this.lat*Math.PI/180;
var lng1 = this.lng*Math.PI/180;
var R = L.CRS.Earth.R;
var lat2 = Math.asin(Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(a));
var y = Math.sin(a)*Math.sin(d/R)*Math.cos(lat1);
var x = Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2);
var lng2 = lng1 + Math.atan2(y,x);
lat2 = lat2*180/Math.PI;
lng2 = lng2*180/Math.PI;
return new L.LatLng(lat2,lng2);
}
......
js/leaflet/leaflet.camera-view-marker-controls.js
View file @ 8bc06769
(function (window, document, undefined) {
"use strict";
L.Control.CameraViewMarkerControls = L.Control.extend({
onAdd: function(map){
var name = "leaflet-control-heel";
var div = L.DomUtil.create('div', name+' leaflet-bar');
L.DomEvent.disableClickPropagation(div);
var title = "Altitude and Elevation control mode";
var label = "&#8645";
//var label = "+";
//var label = "&#54629";
var a = L.DomUtil.create('a','leaflet-control-zoom-in leaflet-interactive');
a.innerHTML = label;
a.title = title;
this._div = div;
this._button = a;
this._state = false;
div.appendChild(a);
this._registerEvents();
return div;
},
onRemove: function(){
// Nothing to do here
},
getState: function(){
return this._state;
},
_registerEvents: function(){
var self = this;
L.DomEvent.on(this._button, 'click', function(){
self._state = !self._state;
self._buttonColor();
}, this._button);
},
_buttonColor: function(){
if (this._state){
this._button.style.backgroundColor = "rgba(136,255,136,1)";
}else{
this._button.removeAttribute("style");
}
}
});
L.control.cameraViewMarkerControls = function (options) {
return new L.Control.CameraViewMarkerControls(options);
};
}(this,document));
\ No newline at end of file
js/leaflet/leaflet.camera-view-marker.js
View file @ 8bc06769
......@@ -9,16 +9,16 @@
https://www.elphel.com
*/
/**
/**
* @file leaflet.camera-view-marker.js
* @brief A Leaflet plugin that adds camera view marker:
* Displays:
* * Some marker with basic interactions for position and orientation
*
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* @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
......@@ -52,7 +52,7 @@
* Leaflet.CameraViewMarker assumes that you have already included the Leaflet library.
*/
//CircleMarker has everything one need
//CircleMarker has everything one need
L.CameraViewMarker = L.CircleMarker.extend({
options:{
......@@ -66,7 +66,7 @@
draw_xz: true,
draw_fov: true,
h_control: false,
basepoint:{
url: ""
}
......@@ -76,11 +76,11 @@
var hecs = this.getHCState();
var angle = param;
if (param.target){
param = param.latlng;
}
if (param instanceof L.LatLng) {
var p0 = this._map.latLngToLayerPoint(this._latlng);
......@@ -92,30 +92,30 @@
angle = (180/Math.PI*Math.atan2(dx,dy)+360)%360;
if (hecs){
var l = this._axis_length;
var l_h = l*2.5/2;
var p_base_ll = this._latlng;
var p_base = this._map.latLngToLayerPoint(p_base_ll);
var p1 = new L.Point(p_base.x+l_h*Math.sin(this._heading),p_base.y-l_h*Math.cos(this._heading));
var p2 = this._map.latLngToLayerPoint(param);
var dy = (p1.y - p2.y) - this._altitude*10;
this._elevation = Math.atan2(dy,l_h);
angle = (this._heading)*180/Math.PI;
}
}
if (this._units=="deg"){
this._heading = angle*(Math.PI/180);
}else{
this._heading = angle;
}
this._updateCameraViewMarker();
},
......@@ -127,19 +127,19 @@
if (param.target){
latlng = param.latlng;
if (hecs){
var p1_ll = this._latlng;
var p2_ll = latlng;
var p1 = this._map.latLngToLayerPoint(p1_ll);
var p2 = this._map.latLngToLayerPoint(p2_ll);
p2.x = p1.x;
this._altitude = (p1.y - p2.y)/10;
latlng = this._latlng;
}
}
......@@ -150,26 +150,26 @@
},
setAltitude: function(param){
this._altitude = param;
this._updateCameraViewMarker();
},
setElevation: function(param){
this._elevation = param;
this._updateCameraViewMarker();
},
setFoV: function(param){
this._fov = param;
this._updateCameraViewMarker();
},
//initialize is most likely performed by L.CircleMarker
//this is some default function rewritten
......@@ -177,28 +177,28 @@
this._initCameraViewMarker();
},
},
_initCameraViewMarker: function(){
//constants
this._axis_length = 100;
this._radius = 10;
this._heading = this.options.heading;
this._units = this.options.units;
this._fov = this.options.fov;
this._draw_xz = this.options.draw_xz;
this._draw_fov = this.options.draw_fov;
this._READY = false;
if(!this._layerPaint){
this._layerPaint = L.layerGroup().addTo(this._map);
}
this._controls = {
hc:{
getState: function(){return false;}
......@@ -206,11 +206,11 @@
};
this.h_control = false;
if (typeof L.control.cameraViewMarkerControls == 'function'){
this.h_control = this.options.h_control;
}
if (this.h_control){
this._altitude = this.options.altitude;
this._elevation = this.options.elevation*Math.PI/180;
......@@ -222,84 +222,84 @@
this.setHeading(this._heading);
this._registerEvents();
},
_updateCameraViewMarker: function(){
// this.h_control & this._altitude
if (this.h_control){
this._updateCameraViewMarker_hc();
}else{
this._updateCameraViewMarker_nohc();
}
},
_updateCameraViewMarker_hc: function(){
this._updateCameraViewMarker_nohc();
},
_updateCameraViewMarker_nohc: function(){
var hecs = this.getHCState();
var l = this._axis_length;
var l_h = l*2.5/2;
var p_base_ll = this._latlng;
var p_base = this._map.latLngToLayerPoint(p_base_ll);
var p_head = new L.Point(p_base.x+l_h*Math.sin(this._heading),p_base.y-l_h*Math.cos(this._heading));
var p_x = new L.Point(p_base.x+l*Math.cos(this._heading),p_base.y+l*Math.sin(this._heading));
var p_z = new L.Point(p_base.x-l*Math.sin(this._heading),p_base.y+l*Math.cos(this._heading));
var p_z = new L.Point(p_base.x-l*Math.sin(this._heading),p_base.y+l*Math.cos(this._heading));
var p_fov_l = new L.Point(p_base.x+l*Math.sin(this._heading-this._fov/2),p_base.y-l*Math.cos(this._heading-this._fov/2));
var p_fov_r = new L.Point(p_base.x+l*Math.sin(this._heading+this._fov/2),p_base.y-l*Math.cos(this._heading+this._fov/2));
var p_head_ll = this._map.layerPointToLatLng(p_head);
var p_x_ll = this._map.layerPointToLatLng(p_x);
// y axis adds to right handed coordinate system
var p_z_ll = this._map.layerPointToLatLng(p_z);
var p_fov_l_ll = this._map.layerPointToLatLng(p_fov_l);
var p_fov_r_ll = this._map.layerPointToLatLng(p_fov_r);
var l_head = Array(p_base_ll,p_head_ll);
var l_x = Array(p_base_ll,p_x_ll);
var l_z = Array(p_base_ll,p_z_ll);
var l_fov_l = Array(p_base_ll,p_fov_l_ll);
var l_fov_r = Array(p_base_ll,p_fov_r_ll);
// BEGIN HECS
//base
var p_base_cap = new L.Point(p_base.x,p_base.y-10*this._altitude);
var p_base_cap_ll = this._map.layerPointToLatLng(p_base_cap);
var p_base_cap_t = new L.Point(p_base.x,p_base.y-100);
var p_base_cap_t_ll = this._map.layerPointToLatLng(p_base_cap_t);
var p_base_cap_b = new L.Point(p_base.x,p_base.y+100);
var p_base_cap_b_ll = this._map.layerPointToLatLng(p_base_cap_b);
var p_base_cap_l = new L.Point(p_base.x-50/2,p_base.y);
var p_base_cap_l_ll = this._map.layerPointToLatLng(p_base_cap_l);
var p_base_cap_r = new L.Point(p_base.x+50/2,p_base.y);
var p_base_cap_r_ll = this._map.layerPointToLatLng(p_base_cap_r);
var l_base_cap_tb = Array(p_base_cap_t_ll,p_base_cap_b_ll);
var l_base_cap_lr = Array(p_base_cap_l_ll,p_base_cap_r_ll);
//head
var p_head_cap = new L.Point(p_head.x,p_head.y-10*this._altitude-l_h*Math.tan(this._elevation));
var p_head_cap_ll = this._map.layerPointToLatLng(p_head_cap);
var p_head_cap_t = new L.Point(p_head.x,p_head.y-100);
var p_head_cap_t_ll = this._map.layerPointToLatLng(p_head_cap_t);
......@@ -308,17 +308,17 @@
var p_head_cap_l = new L.Point(p_head.x-50/2,p_head.y);
var p_head_cap_l_ll = this._map.layerPointToLatLng(p_head_cap_l);
var p_head_cap_r = new L.Point(p_head.x+50/2,p_head.y);
var p_head_cap_r_ll = this._map.layerPointToLatLng(p_head_cap_r);
var l_head_cap_tb = Array(p_head_cap_t_ll,p_head_cap_b_ll);
var l_head_cap_lr = Array(p_head_cap_l_ll,p_head_cap_r_ll);
// END
if (!this._READY){
var cBIcon = L.icon({
iconUrl: 'js/images/base.png',
iconSize: [32, 46],
......@@ -326,46 +326,46 @@
//iconSize: [64, 92],
className: 'basePointIcon'
});
this._basePoint = new L.marker(p_base_ll,{
icon: cBIcon
});
this._basePoint = new L.CircleMarker(p_base_ll,{
color: '#191',
fillColor: '#0f3',
fillOpacity: 0.5,
radius: this._radius
});
//this._basePoint._icon.style[L.DomUtil.TRANSFORM_ORIGIN] = "50% 50%";
//this._basePoint._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + (this._heading*180/Math.PI) + 'deg)';
this._headLine = L.polyline(l_head, {color: 'white', weight:2, dashArray:"5,10"}).addTo(this._layerPaint);
if (this._draw_xz){
this._xAxis = L.polyline(l_x, {color: 'red', weight:2 }).addTo(this._layerPaint);
this._zAxis = L.polyline(l_z, {color: 'blue', weight:2 }).addTo(this._layerPaint);
}
if (this._draw_fov){
this._lFov = L.polyline(l_fov_l, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
this._rFov = L.polyline(l_fov_r, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
}
//draw fov lines here
this._basePoint.addTo(this._layerPaint).bringToFront();
var cHIcon = L.icon({
iconUrl: 'js/leaflet/images/crosshair.png',
iconSize: [32, 32]
});
this._headPoint = new L.marker(p_head_ll,{
icon: cHIcon
});
/*
this._headPoint = new L.CircleMarker(p_head_ll,{
color: 'white',
......@@ -374,22 +374,22 @@
radius: this._radius
});
*/
this._headPoint.addTo(this._layerPaint);
this._READY = true;
}else{
this._headLine.setLatLngs(l_head);
if (this._draw_xz){
this._xAxis.setLatLngs(l_x);
this._zAxis.setLatLngs(l_z);
}
if (this._draw_fov){
if (this._lFov){
this._lFov.setLatLngs(l_fov_l);
this._rFov.setLatLngs(l_fov_r);
......@@ -398,10 +398,10 @@
this._rFov = L.polyline(l_fov_r, {color: '#0f3', weight:2 }).addTo(this._layerPaint);
}
}
this._basePoint.setLatLng(p_base_ll);
this._headPoint.setLatLng(p_head_ll);
if (this._baseCapLineV){
this._layerPaint.removeLayer(this._baseCapLineV);
this._layerPaint.removeLayer(this._headCapLineV);
......@@ -414,47 +414,47 @@
this._basePoint.unbindTooltip();
this._headPoint.unbindTooltip();
}
if (hecs){
this._basePoint.bindTooltip("H= "+this._altitude+" m",{
direction:"right",
permanent:"true",
className: "measurementtooltip",
offset:[5,5],
}).openTooltip();
this._headPoint.bindTooltip("&alpha;= "+((180/Math.PI*this._elevation).toFixed(1))+" &deg;",{
direction:"right",
permanent:"true",
className: "measurementtooltip",
offset:[5,5],
offset:[5,5],
}).openTooltip();
this._layerPaint.removeLayer(this._lFov);
this._layerPaint.removeLayer(this._rFov);
this._lFov = false;
this._rFov = false;
this._basePoint.setLatLng(p_base_cap_ll);
this._headPoint.setLatLng(p_head_cap_ll);
this._baseCapLineV = L.polyline(l_base_cap_tb, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
this._headCapLineV = L.polyline(l_head_cap_tb, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
this._baseCapLineH = L.polyline(l_base_cap_lr, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
this._headCapLineH = L.polyline(l_head_cap_lr, {color: '#0f3', weight:2, dashArray:"1,3"}).addTo(this._layerPaint).bringToBack();
}
//this._basePoint._icon.style[L.DomUtil.TRANSFORM] += 'rotate(' + (this._heading*180/Math.PI) + 'deg)';
}
},
_registerEvents: function(){
this._map.on('zoomend',this._onZoomEnd,this);
this._basePoint.on('mousedown',this._dragCameraViewMarker,this);
this._headPoint.on('mousedown',this._rotateCameraViewMarker,this);
......@@ -464,26 +464,26 @@
// from some plugin - I didn't test if it's true
// necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
this._map.on('click',this._mouseClick,this);
this._map.on('click',this._mouseClick,this);
},
_mouseClick: function(e){
this._headPoint.on('mousedown',this._rotateCameraViewMarker,this);
},
_rotateCameraViewMarker: function(e){
this._map.dragging.disable();
this._map.off('mousemove',this._mouseMove,this);
this._map.off('click',this._mouseClick,this);
this._map.on('mousemove',this.setHeading,this);
this._map.on('mouseup',this._mouseUp,this);
// prevent image getting grabbed by browser
e.originalEvent.preventDefault();
......@@ -510,9 +510,9 @@
this._map.off('click',this._mouseClick,this);
this._map.on('mousemove',this.setBasePoint,this);
this._map.on('mouseup',this._mouseUp,this);
// prevent image getting grabbed by browser
e.originalEvent.preventDefault();
......@@ -521,32 +521,32 @@
_onZoomEnd: function(e){
this._updateCameraViewMarker();
},
// height controls
_initHControl: function(){
var self = this;
this._controls.hc = L.control.cameraViewMarkerControls({position:'topleft'}).addTo(this._map);
var btn = this._controls.hc._button;
L.DomEvent.on(btn, 'click', function(){
self._updateCameraViewMarker();
},btn);
},
getHCState: function(){
return this._controls.hc.getState() || this.hcontrol;
}
});
L.cameraViewMarker = function (latlng,options) {
return new L.CameraViewMarker(latlng,options);
};
}(this,document));
js/leaflet/leaflet.camera-view-marker.measure.js
View file @ 8bc06769
......@@ -9,14 +9,14 @@
https://www.elphel.com
*/
/**
/**
* @file leaflet.camera-view-marker.measure.js
* @brief extends Leaflet.CameraViewMarker with distance measuring tool
*
*
* @copyright Copyright (C) 2017 Elphel Inc.
* @author Oleg Dzhimiev <oleg@elphel.com>
*
* @licstart The following is the entire license notice for the
* @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
......@@ -50,30 +50,30 @@
L.CameraViewMarker.include({
createMeasureMarker: function(param,distance){
var latlng = param;
// param is event
if(param.target){
latlng = param.latlng;
}
var p1_ll = this._latlng;
// param was angle then need distance
if (!(latlng instanceof L.LatLng)){
latlng = p1_ll.CoordinatesOf(param,distance);
}
var p2_ll = latlng;
var l_d = Array(p1_ll,p2_ll);
var pll = L.polyline(l_d, {
color: '#1f1',
weight:1,
color: '#1f1',
weight:1,
dashArray:"5,5"
}).addTo(this._layerPaint).bringToBack();
//circle
var tmp_point = new L.CircleMarker(latlng,{
color: '#1f1',
......@@ -82,82 +82,82 @@
fillOpacity: 0.5,
radius: 5,
}).addTo(this._layerPaint);
var distance = latlng.distanceTo(this._latlng).toFixed(1);
tmp_point.bindTooltip(distance+' m',{
permanent:"true",
direction:"right",
className: "measurementtooltip",
offset:[0,0],
}).openTooltip();
tmp_point.on('click',this._measureMarkerClick,this);
tmp_point.on('mousedown',this._dragMeasureMarker,this);
tmp_point._index = this._measureMarkers.length;
this._measureMarkers.push(tmp_point);
this._measureLines.push(pll);
return tmp_point._index;
},
moveMeasureMarker: function(param,index){
var latlng = param;
if (param.target){
index = this.draggedMarker._index;
latlng = param.latlng;
// prevent image getting grabbed by browser
param.originalEvent.preventDefault();
}
var p1_ll = this._latlng;
var p2_ll = latlng;
var l_d = Array(p1_ll,p2_ll);
this._measureMarkers[index].setLatLng(latlng);
this._measureLines[index].setLatLngs(l_d);
var distance = p2_ll.distanceTo(p1_ll).toFixed(1);
this._measureMarkers[index]._tooltip.setContent(distance+' m');
this.draggedMarker = {
_index: index,
_latlng: latlng
};
this._syncMeasureMarkersToBasePoint();
},
removeMeasureMarker: function(param){
var index = param;
if(param.target){
index = param.target._index;
L.DomEvent.stopPropagation(param);
}
this._layerPaint.removeLayer(this._measureMarkers[index]);
this._layerPaint.removeLayer(this._measureLines[index]);
this._measureMarkers.splice(index,1);
this._measureLines.splice(index,1);
this._updateMeasureMarkersIndices();
},
placeSlidingMarker: function(angle,distance){
var p1_ll = this._measureBase;
var p2_ll = p1_ll.CoordinatesOf(angle,distance);
var l_d = Array(p1_ll,p2_ll);
if (this._slidingMarker == undefined){
......@@ -168,43 +168,43 @@
fillOpacity: 0.5,
radius: 5,
}).addTo(this._layerPaint);
this._slidingLine = L.polyline(l_d, {
color: '#1f1',
weight:1,
color: '#1f1',
weight:1,
dashArray:"5,5"
}).addTo(this._layerPaint).bringToBack();
this._slidingMarker.bindTooltip(distance.toFixed(1)+' m',{
permanent:"true",
direction:"right",
className: "measurementtooltip",
offset:[0,0],
}).openTooltip();
}else{
this._slidingMarker.setLatLng(p2_ll);
this._slidingLine.setLatLngs(l_d);
this._slidingMarker._tooltip.setContent(distance.toFixed(1)+' m');
}
},
removeSlidingMarker: function(){
if (this._slidingMarker != undefined){
this._layerPaint.removeLayer(this._slidingMarker);
this._layerPaint.removeLayer(this._slidingLine);
delete this._slidingMarker;
delete this._slidingLine;
}
},
onAdd: function(){
this._initCameraViewMarker();
......@@ -213,18 +213,18 @@
},
_initCVM_M: function(){
this._measuring = false;
this._measureMarkers = Array();
this._measureLines = Array();
this._map.doubleClickZoom.disable();
this._registerEvents_M();
this._measureBase = this._latlng;
this.draggedMarker = {
_index: null,
_latlng: null
......@@ -238,7 +238,7 @@
this._map.on('mousemove',this._mouseMove_M,this);
this._map.on('click', this._toggleMeasureMode, this);
this._map.on('mousemove',this._syncMeasureMarkersToBasePoint, this);
},
_mouseMove_M: function(e){
......@@ -250,22 +250,22 @@
}
},
_toggleMeasureMode: function(e){
if (e.originalEvent.ctrlKey){
this.createMeasureMarker(e);
}
/*
self._measuring = !self._measuring;
if(self._measuring){
self._basePoint.off('mousedown',self._dragCamera, self);
self._map._container.style.cursor = "crosshair";
self._map.on('click', self._placeMeasurePoint, self);
}else{
self._basePoint.on('mousedown',self._dragCamera, self);
self._map._container.style.cursor = "default";
......@@ -273,7 +273,7 @@
}
*/
},
_measureMarkerClick:function(e){
if (e.originalEvent.ctrlKey){
......@@ -281,22 +281,22 @@
}
},
_syncMeasureMarkersToBasePoint: function(e){
if (this._measureMarkers.length!=0){
if (this._measureBase!=this._latlng){
var self = this;
this._measureMarkers.forEach(function(c,i){
var p1_ll = self._latlng;
var p2_ll = c.getLatLng();
var l_d = Array(p1_ll,p2_ll);
self._measureLines[i].setLatLngs(l_d);
var distance = p2_ll.distanceTo(p1_ll).toFixed(1);
c._tooltip.setContent(distance+' m');
});
......@@ -304,54 +304,54 @@
this._measureBase=this._latlng;
}
}
},
_dragMeasureMarker: function(e){
if (!e.originalEvent.ctrlKey){
this.draggedMarker = {
_index: e.target._index,
_latlng: e.target._latlng
};
this._map.dragging.disable();
this._map.off('mousemove',this._mouseMove,this);
this._map.off('click',this._mouseClick,this);
this._map.on('mousemove',this.moveMeasureMarker,this);
this._map.on ('mouseup',this._mouseUp_M,this);
}
},
_mouseUp_M: function(){
this._map.off('mousemove',this.moveMeasureMarker,this);
this._map.dragging.enable();
this._map.on ('mousemove',this._mouseMove,this);
this._map.off ('mouseup',this._mouseUp_M,this);
this.draggedMarker._index = null;
},
_updateMeasureMarkersIndices:function(){
var self = this;
this._measureMarkers.forEach(function(c,i){
self._measureMarkers[i]._index = i;
});
},
});
}(this,document));
js/leaflet_init.js
View file @ 8bc06769
......@@ -7,14 +7,14 @@
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
* @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
......@@ -51,25 +51,25 @@ var LeafletObject = function(id,data,options){
};
this._settings = $.extend(defaults,options);
this._id = id;
//[40.7233861, -111.9328843];
this.center = [data.camera.latitude,data.camera.longitude];
this.heading = data.camera.heading;
//this.heading = 0;//data.camera.heading;
this.fov = data.camera.fov;
this.initialize();
};
LeafletObject.prototype.initialize = function(){
// https: also suppported.
var Esri_WorldImagery = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
maxZoom: this._settings.maxzoom,
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
......@@ -84,14 +84,14 @@ LeafletObject.prototype.initialize = function(){
subdomains:['mt0','mt1','mt2','mt3'],
}
);
var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: this._settings.maxzoom,
attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}
);
this._map = L.map(this._id,{
layers:[googleSat]
}).setView(this.center, this._settings.zoom);
......@@ -103,13 +103,13 @@ LeafletObject.prototype.initialize = function(){
};
L.control.layers(baseMaps).addTo(this._map);
this.drawCamera();
}
LeafletObject.prototype.drawCamera = function(){
this.marker = L.cameraViewMarker(this.center, {
color: '#191',
fillColor: '#0f3',
......@@ -121,7 +121,7 @@ LeafletObject.prototype.drawCamera = function(){
h_control: true,
id: "basecircle"
}).addTo(this._map);
}
LeafletObject.prototype.highlightMarker = function(index){
......@@ -131,13 +131,13 @@ LeafletObject.prototype.highlightMarker = function(index){
this.marker._measureMarkers[index].setStyle(style).bringToFront();
this.marker._measureMarkers[index]._tooltip.bringToFront();
this.marker._measureLines[index].setStyle(style).bringToFront();
}
LeafletObject.prototype.dehighlightMarker = function(index){
color = Data.markers[index].color;
var style = {color:color,fillColor:color};
this.marker._measureMarkers[index].setStyle(style);
......@@ -148,15 +148,15 @@ LeafletObject.prototype.dehighlightMarker = function(index){
LeafletObject.prototype.toggleMarker = function(index){
//console.log("Toggling "+index);
if (!this.marker._measureMarkers[index]._selected){
this.marker._measureMarkers[index]._selected = true;
}else{
this.marker._measureMarkers[index]._selected = false;
}
//console.log(this.marker._measureMarkers[index]._selected);
}
LeafletObject.prototype.deleteMarker = function(index){
......
js/map.css
View file @ 8bc06769
......@@ -15,7 +15,7 @@ html, body, #leaflet_map {
border-radius: 1px;
font-size: 16px;
display:block;
position:absolute;
top: 16px;
left: 3px;
......
js/map.js
View file @ 8bc06769
/*
/*
* TODO:
* *
*
* *
*
*/
// http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
......@@ -14,7 +14,7 @@ $(function(){
});
function light_init(){
$.ajax({
url: "kml/test.kml",
success: function(data){
......@@ -23,15 +23,15 @@ function light_init(){
parseFloat($(data).find("Camera").find("latitude").text()),
parseFloat($(data).find("Camera").find("longitude").text())
];
var heading = parseFloat($(data).find("Camera").find("longitude").text());
init_maps(marker);
},
});
}
var map;
......@@ -40,10 +40,10 @@ var markers = Array();
function init_maps(center){
var elphelinc = center;//[40.7233861, -111.9328843];
// https: also suppported.
var Esri_WorldImagery = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
maxZoom: 21,
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
......@@ -58,14 +58,14 @@ function init_maps(center){
subdomains:['mt0','mt1','mt2','mt3'],
}
);
var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 21,
attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}
);
map = L.map('leaflet_map',{
layers:[googleSat]
}).setView(elphelinc, 17);
......@@ -75,21 +75,21 @@ function init_maps(center){
"Google": googleSat,
"Open Street Map": OSMTiles
};
//Esri_WorldImagery.addTo(map);
//googleSat.addTo(map);
//custom control:
//http://www.coffeegnome.net/control-button-leaflet/
L.control.layers(baseMaps).addTo(map);
drawCamera(elphelinc);
}
function drawCamera(basepoint){
var circle = L.cameraViewMarker(basepoint, {
color: '#191',
fillColor: '#0f3',
......
js/nomap_init.js
View file @ 8bc06769
......@@ -16,43 +16,43 @@ function parseURL(){
}
$(function(){
parseURL();
init();
});
function init(){
init_resize();
var x3delement = $("#x3d_id").find("scene");
var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
console.log(model_url);
var model = $(`
<group>
<inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
</group>`);
x3delement.append(model);
$.getScript("js/x3dom/x3dom-full.debug.js",function(){
//wait until it DOM is extended
x3dom.runtime.ready = function(){
deep_init();
};
});
}
var resizeTimer = false;
var FOV = 30*Math.PI/180;
function init_resize(){
resize();
//bind resize
......@@ -62,40 +62,40 @@ function init_resize(){
resize();
},100);
});
}
function resize(){
var element = document.getElementById('x3d_id');
var w = $(window).width();
var h = $(window).height();
$(element).attr("width",w);
$(element).attr("height",h);
var fov = w/h*FOV;
//fov = Math.PI/2;
setFoV(fov);
}
function setFoV(val){
var element = document.getElementById('x3d_id');
var vp = $(element).find("Viewpoint")[0];
$(vp).prop("fieldOfView",val);
}
var X3DOM_SCENE_INIT_DONE = false;
function deep_init(){
/*
/*
var element = document.getElementById('x3d_id');
element.runtime.enterFrame = function(){
......
js/nomap_vr_init.js
View file @ 8bc06769
......@@ -16,41 +16,41 @@ function parseURL(){
}
$(function(){
parseURL();
init();
});
function init(){
init_resize();
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);
$.getScript("js/x3dom/x3dom-full.debug.js",function(){
//wait until it DOM is extended
x3dom.runtime.ready = function(){
deep_init();
};
});
}
var resizeTimer = false;
var FOV = 30*Math.PI/180;
function init_resize(){
resize();
//bind resize
......@@ -60,40 +60,40 @@ function init_resize(){
resize();
},100);
});
}
function resize(){
var element = document.getElementById('x3d_id');
var w = $(window).width();
var h = $(window).height();
$(element).attr("width",w);
$(element).attr("height",h);
var fov = w/h*FOV;
//fov = Math.PI/2;
setFoV(fov);
}
function setFoV(val){
var element = document.getElementById('x3d_id');
var vp = $(element).find("Viewpoint")[0];
$(vp).prop("fieldOfView",val);
}
var X3DOM_SCENE_INIT_DONE = false;
function deep_init(){
/*
/*
var element = document.getElementById('x3d_id');
element.runtime.enterFrame = function(){
......
js/ui.css
View file @ 8bc06769
......@@ -53,7 +53,7 @@ html, body, #x3d_wrapper {
border-radius: 1px;
font-size: 16px;
display:block;
position:absolute;
top: 16px;
left: 3px;
......@@ -167,7 +167,7 @@ html, body, #x3d_wrapper {
background-image:url('images/settings.png');
background-size: 32px 32px;
background-repeat: no-repeat;
background-color:white;
width: 32px;
height: 32px;
......@@ -190,7 +190,7 @@ html, body, #x3d_wrapper {
background-image:url('images/align.png');
background-size: 32px 32px;
background-repeat: no-repeat;
background-color:white;
width: 32px;
height: 32px;
......
js/ui_align.js
View file @ 8bc06769
function align_init(){
$("#align_button").on("click",function(){
align_heading();
});
}
function align_heading(){
// find selected markers
// pick the first one?
// align?!
console.log("heading");
var map_markers = Map.marker._measureMarkers;
var selected_markers = [];
map_markers.forEach(function(c,i){
if (selected_markers.length<2){
if (c._selected){
......@@ -24,26 +24,26 @@ function align_heading(){
}
}
});
if (selected_markers.length<2){
console.log("select 2 markers");
Scene.showMessage("messagewindow","error: select 2 markers","red");
}
console.log(selected_markers);
}
function align_roll(){
console.log("roll");
}
function align_tilt(){
console.log("tilt");
}
js/ui_functions.js
View file @ 8bc06769
// general
/*
*
*
*/
function ui_showMessage(id,msg,bg){
if (bg != undefined){
$("#"+id).css({background:bg});
}
$("#"+id).show();
$("#"+id).html($("<div>").html(msg).css({
padding:"5px 10px"
})).show();
}
function ui_hideMessage(id){
$("#"+id).hide();
}
// scene (x3dom)
......
js/ui_help.js
View file @ 8bc06769
function help_init(){
/*
var help_content = `
<div>
......@@ -16,11 +16,11 @@ function help_init(){
display:"none"
}).html(help_content);
*/
var help = $("#help-content");
help.hide();
$("#help_button").on("click",function(){
help.show();
});
......@@ -28,5 +28,5 @@ function help_init(){
help.on('click',function(){
help.hide();
});
}
\ No newline at end of file
js/ui_init.js
View file @ 8bc06769
......@@ -7,14 +7,14 @@
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
* @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
......@@ -91,9 +91,9 @@ $(function(){
title_init();
help_init();
menu_init();
light_init();
});
function title_init(){
......@@ -110,24 +110,24 @@ function title_init(){
"font-family": '"Helvetica Neue", Helvetica, Arial, sans-serif',
"user-select": "none"
});
$("body").append(html);
}
function light_init(){
var x3delement = $("#x3d_id").find("scene");
var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
var model_back_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+"-texture-bgnd-ext.jpeg";
var model = $(`
<group>
<inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>
</group>
<group>
<Background
<Background
id="Background"
class="Background"
backUrl= "js/images/background_side.jpeg"
......@@ -139,9 +139,9 @@ function light_init(){
</Background>
</group>
`);
x3delement.append(model);
$.ajax({
url: SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.path+".kml",
success: function(response){
......@@ -149,13 +149,13 @@ function light_init(){
var longitude = parseFloat($(response).find("Camera").find("longitude").text());
var latitude = parseFloat($(response).find("Camera").find("latitude").text());
var altitude = parseFloat($(response).find("Camera").find("altitude").text());
var heading = parseFloat($(response).find("Camera").find("heading").text());
var tilt = parseFloat($(response).find("Camera").find("tilt").text());
var roll = parseFloat($(response).find("Camera").find("roll").text());
var fov = parseFloat($(response).find("Camera").find("fov").text());
Data.camera = new X3L({
x: 0,
y: 0,
......@@ -168,12 +168,12 @@ function light_init(){
roll: roll || 0,
fov: fov || 0,
});
var element = document.getElementById('x3d_id');
Scene = new X3DOMObject(element,Data,{});
Scene.initResize();
$.getScript("js/x3dom/x3dom-full.debug.js",function(){
Map = new LeafletObject('leaflet_map',Data,{});
......@@ -186,39 +186,39 @@ function light_init(){
x3d_initial_camera_placement();
x3d_events();
leaf_events();
};
});
},
});
}
function map_resize_init(){
var html = $("<div>",{id:"map_resizer_handle"});
$("#map_wrapper").append(html);
html.on("mousedown",function(){
$("body").on("mousemove",map_resize);
$(Scene.element).find("canvas").on("mousemove",map_resize);
});
html.on("mouseup",function(){
$("body").off("mousemove",map_resize);
$(Scene.element).find("canvas").off("mousemove",map_resize);
});
}
function map_resize(e){
var xm = e.clientX;
var ym = e.clientY;
......@@ -239,11 +239,11 @@ function map_resize(e){
// from some forum, stackoverflow?
setTimeout(function(){Map._map.invalidateSize();}, 100);
}
function deep_init(){
//Scene.initResize();
Scene.FoVEvents();
Scene.KeyEvents();
......@@ -257,9 +257,9 @@ function deep_init(){
cnt = parseInt(progress_counter[1]);
if (!Scene._X3DOM_SCENE_INIT_DONE&&(cnt==0)){
//Scene.initResize();
// now then all shapes are parsed and accessible
Scene.ShapeEvents();
......@@ -267,7 +267,7 @@ function deep_init(){
}
};
}
function x3d_initial_camera_placement(){
......@@ -275,33 +275,33 @@ function x3d_initial_camera_placement(){
var heading = Data.camera.heading*Math.PI/180;
var tilt = (Data.camera.tilt-90)*Math.PI/180;
var roll = Data.camera.roll*Math.PI/180;
// Altitude is relative. Do not care.
// Heading,Tilt,Roll
var Mh = x3dom.fields.SFMatrix4f.rotationZ(heading);
var Mt = x3dom.fields.SFMatrix4f.rotationY(tilt);
var Mr = x3dom.fields.SFMatrix4f.rotationX(roll);
// rw = real world with North
// w = virtual world = x3dom frame reference
// proper Euler rotation
var R = Mh.mult(Mt).mult(Mr);
// convert to proper Euler
var T = x3dom_toYawPitchRoll();
var R0 = T.inverse().mult(R).mult(T);
// _rw - real world
// _w - virt world
// exclude roll?
//var RC0_rw = T.inverse().mult(Mh).mult(Mt).mult(T);
// exclude tilt and roll
var RC0_rw = T.inverse().mult(Mh).mult(T);
var RC_w = R0.inverse().mult(RC0_rw);
// store matrices
Data.camera.Matrices = {
......@@ -309,9 +309,9 @@ function x3d_initial_camera_placement(){
Up0: RC_w.e1(),
RC_w: RC_w,
};
x3dom_setViewpoint(RC_w);
}
function x3d_events(){
......@@ -319,61 +319,61 @@ function x3d_events(){
var elem = Scene.element;
elem.addEventListener('keydown',function(e){
//console.log("scene keydown");
if ((e.key=="Shift")||(SETTINGS.highlight&&!SETTINGS.pointer)){
// select shape
var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
if (!$(sr.pickObject).hasClass("shapemarker")){
X3DOMObject.Shape.highlight(sr.pickObject);
}
}
if (e.key=="Control"){
var x,y,z;
var dist = 1000;
var mouse = x3dom_getXYPosOr(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y,false);
if (mouse.d_xz != null){
dist = parseFloat(mouse.d_xz);
X3DOMObject.Marker.place(mouse.x,mouse.y,mouse.z,"sliding_sphere");
$("#sliding_sphere").find("switch").attr("whichChoice",0);
}
Map.marker.placeSlidingMarker(mouse.a,dist);
}
},true);
elem.addEventListener('keyup',function(e){
if (e.key=="Shift"){
// select shape
var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
X3DOMObject.Shape.dehighlight(sr.pickObject);
}
if (e.key=="Control"){
X3DOMObject.Marker.place(0,0,0,"sliding_sphere");
$("#sliding_sphere").find("switch").attr("whichChoice",-1);
Map.marker.removeSlidingMarker();
}
},true);
elem.addEventListener('mousedown',function(){
elem.addEventListener('mousemove',x3d_mouseMove,true);
});
......@@ -383,37 +383,37 @@ function x3d_events(){
});
elem.addEventListener('mouseover',function(e){
// have to focus if want key events to work w/o extra click
Scene.focusOnCanvas();
});
elem.addEventListener('mousemove',function(e){
// have to focus if want key events to work w/o extra click
Scene.focusOnCanvas();
var camera = x3dom_getCameraPosOr(e.clientX,e.clientY,false);
Map.marker.setAltitude(camera.y);
Map.marker.setElevation(camera.e*Math.PI/180);
X3DOMObject.displayInfo(e);
X3DOMObject.displayViewInfo(e);
if (SETTINGS.highlight&&!SETTINGS.pointer){
var sr = elem.runtime.shootRay(e.path[0].mouse_drag_x,e.path[0].mouse_drag_y);
X3DOMObject.Shape.highlight(sr.pickObject);
}
if ((Scene._ctrlKey)||(SETTINGS.pointer)){
// show shadow marker
var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,false);
var dist = parseFloat(mouse.d_xz) || 1000;
Map.marker.placeSlidingMarker(mouse.a,dist);
}else{
......@@ -422,51 +422,51 @@ function x3d_events(){
Map.marker.removeSlidingMarker();
}
if (e.buttons==1){
// upright view
x3dom_setUpRight();
}
// what is this?
//x3d_mouseMove();
},true);
elem.addEventListener('mouseout',function(e){
// hide shadow marker
Map.marker.removeSlidingMarker();
ui_hideMessage("window-info");
});
}
function leaf_events(){
var Camera = Map.marker;
Camera._map.on('mouseover',function(e){
//console.log("map mouseover");
//$(this).focus();
this._container.focus();
});
Camera._map.on('mousemove',function(e){
//console.log("map mousemove");
this._container.focus();
});
/*
});
/*
// this one works
document.getElementById("leaflet_map").addEventListener('keydown',function(e){
console.log("well2");
});
*/
Camera._map.on('click',function(e){
if (e.originalEvent.ctrlKey){
......@@ -474,55 +474,55 @@ function leaf_events(){
var Lm = Camera._measureMarkers[Data.markers.length];
if (Lm!=undefined){
var mark = new X3L({
latitude: Lm._latlng.lat,
longitude: Lm._latlng.lng,
color: SETTINGS.markercolor,
size: SETTINGS.markersize,
});
var p1_ll = Camera._latlng;
var p2_ll = Lm._latlng;
var distance = p1_ll.distanceTo(p2_ll);
p_w = x3dom_delta_map2scene(p1_ll,p2_ll);
mark.x = p_w.x;
mark.y = p_w.y;
mark.z = p_w.z;
mark.d_map = distance;
mark.d_x3d = "<font style='color:red;'>drag over 3D</font>";
Data.markers.push(mark);
X3DOMObject.displayMarkInfo(Data.markers.length-1);
//new X3DOMObject.Marker(mark.x,mark.y,mark.z,true);
new X3DOMObject.Marker(mark.x,mark.y,mark.z,false);
//Scene.createMarker(mark.x,mark.y,mark.z);
//x3d_markerEvents(Data.markers.length-1);
X3DOMObject.MapMarker.registerEvents(Lm);
}
}
});
Camera._map.on('mousedown',function(e){
if (!e.originalEvent.ctrlKey){
Camera._map.on('mousemove',leaf_mousemove,Camera);
Camera._map.on('mouseup',leaf_mouseup,Camera);
}
});
}
......@@ -532,7 +532,7 @@ function leaf_mouseup(e){
var Camera = Map.marker;
Camera._map.off('mousemove',leaf_mousemove,Camera);
Camera._map.off('mousemove',leaf_mouseup,Camera);
Camera.draggedMarker._index = null;
}
......@@ -541,103 +541,103 @@ function leaf_mousemove(e){
// update Scene dragged marker position
leaf_drag_marker();
var hecs = Map.marker.getHCState();
if (hecs){
leaf_mousemove_hc(e)
}else{
leaf_mousemove_nohc(e);
}
}
function leaf_mousemove_hc(){
var Camera = Map.marker;
var altitude = Camera._altitude;
var elevation = Camera._elevation; //rads
x3dom_altelev(altitude,elevation);
X3DOMObject.displayViewInfo({});
}
function leaf_mousemove_nohc(e){
var Camera = Map.marker;
var p0 = new L.LatLng(Data.camera.latitude,Data.camera.longitude);
var p1 = new L.LatLng(Camera._latlng.lat,Camera._latlng.lng);
var dh = Camera._heading - Math.PI/180*Data.camera.heading;
Data.camera.heading = Camera._heading*180/Math.PI;
Data.camera.latitude = Camera._latlng.lat;
Data.camera.longitude = Camera._latlng.lng;
if ((p0.lat!=p1.lat)||(p0.lng!=p1.lng)){
leaf_translation_v1(p0,p1);
}else{
x3dom_rotation(dh);
x3dom_rotation(dh);
}
X3DOMObject.displayViewInfo({});
}
function leaf_drag_marker(){
var Camera = Map.marker;
// update Scene marker position
if (Camera.draggedMarker._index != null){
//console.log(Camera.draggedMarker._latlng);
var index = Camera.draggedMarker._index;
var p1_ll = Camera._latlng;
var p2_ll = Camera.draggedMarker._latlng;
var mark = Data.markers[index];
mark.latitude = p2_ll.lat;
mark.longitude = p2_ll.lng;
var distance = p1_ll.distanceTo(p2_ll);
var dp_w = x3dom_delta_map2scene(p1_ll,p2_ll);
mark.x = dp_w.x;
mark.z = dp_w.z;
mark.d_map = distance;
X3DOMObject.displayMarkInfo(index);
X3DOMObject.Marker.place(mark.x,mark.y,mark.z,"my-sph-"+index);
}
}
function leaf_translation_v1(p0,p1){
var dp_w = x3dom_delta_map2scene(p0,p1);
x3dom_translation(dp_w.x,dp_w.y,dp_w.z);
// if not updated then moving in 3D scene will make it jump
Scene.old_view_translation = x3dom_getViewTranslation(Scene.element);
}
function x3d_mouseMove(){
x3dom_update_map();
}
js/ui_menu.js
View file @ 8bc06769
......@@ -7,14 +7,14 @@
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
* @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
......@@ -36,7 +36,7 @@
*/
function menu_init(){
// init checkboxes
for (var setting in SETTINGS){
if (typeof SETTINGS[setting] === 'boolean'){
......@@ -50,29 +50,29 @@ function menu_init(){
$("#"+setting).val(SETTINGS[setting]);
}
}
// init options menu
var menu = $("#menu-content");
$("#menu_button").on("click",function(){
menu.show();
});
// changing a checkbox will not close menu
menu.on('click',function(e){
var test = $(e.target).hasClass("donothide");
if (!test){
menu.hide();
}
});
// change checkbox
$(".my-check-box").on('click',function(e){
var state = $(this).prop("checked");
var id = $(this).attr("id");
if (state==true){
SETTINGS[id] = true;
}else{
......@@ -84,9 +84,9 @@ function menu_init(){
crosshair_init();
shiftspeed_init();
marker_size_color_init();
reset_view_init();
}
......@@ -117,7 +117,7 @@ function shiftspeed_init(){
}
function marker_size_color_init(){
$('#markersize').on('change',function(e){
SETTINGS.markersize = $(this).val();
});
......@@ -127,15 +127,15 @@ function marker_size_color_init(){
SETTINGS.markercolor = $(this).val();
});
$('#markercolor').change();
}
function reset_view_init(){
$("#reset_view").on('click',function(){
x3d_initial_camera_placement();
x3d_mouseMove();
Scene.resize();
});
}
\ No newline at end of file
js/util_functions.js
View file @ 8bc06769
......@@ -3,37 +3,37 @@
*/
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;
}
/*
* convert #7f7 to '0.5 1.0 0.5'
*/
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;
}
}
// http://www.movable-type.co.uk/scripts/latlong.html
// initial bearing
......@@ -46,17 +46,17 @@ function getAzimuth2(p1,p2){
//p1 - start point
//p2 - end point
var dlat = p2.lat-p1.lat;
var dlon = p2.lng-p1.lng;
var y = Math.sin(dlon)*Math.cos(p2.lat);
var x = Math.cos(p1.lat)*Math.sin(p2.lat)-Math.sin(p1.lat)*Math.cos(p2.lat)*Math.cos(dlon);
var azimuth = ((2*Math.PI + Math.atan2(y,x))*180/Math.PI) % 360;
return azimuth;
}
*/
/*
......@@ -64,18 +64,18 @@ function getAzimuth2(p1,p2){
*/
/*
function getAzimuth(p1_ll,p2_ll){
var Camera = Map.marker;
var p1 = Camera._map.latLngToLayerPoint(p1_ll);
var p2 = Camera._map.latLngToLayerPoint(p2_ll);
var dx = p2.x - p1.x;
var dz = p2.y - p1.y;
var azimuth = (180/Math.PI*Math.atan2(dx,-dz)+360)%360;
return azimuth;
}
*/
\ No newline at end of file
js/x3dom/x3dom.css
View file @ 8bc06769
......@@ -18,8 +18,8 @@ X3D, x3d {
border: 1px solid #000;
}
X3D:hover,
x3d:hover,
X3D:hover,
x3d:hover,
.x3dom-canvas:hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
......@@ -41,7 +41,7 @@ x3d:hover,
}
.x3dom-canvas:focus {
outline:none;
outline:none;
}
.x3dom-progress {
margin: 0;
......@@ -195,12 +195,12 @@ x3d:hover,
opacity: 0.75;
}
.x3dom-nox3d p {
.x3dom-nox3d p {
color: #fff;
font-size: 14px;
}
.x3dom-nox3d a {
.x3dom-nox3d a {
color: #fff;
font-size: 14px;
}
......@@ -208,9 +208,9 @@ x3d:hover,
/* self-clearing floats */
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
js/x3dom_functions.js
View file @ 8bc06769
......@@ -7,14 +7,14 @@
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
* @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
......@@ -36,19 +36,19 @@
*/
function x3dom_getViewTranslation(elem){
var m = elem.runtime.viewMatrix().inverse();
var tr = m.e3();
return tr;
}
/**
* get position and orientation in the 3D scene defined by mouse's canvas x,y
* get position and orientation in the 3D scene defined by mouse's canvas x,y
*/
function x3dom_getXYPosOr(cnvx,cnvy,round){
var elem = Scene.element;
var x,y,z;
......@@ -59,65 +59,65 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
var dist_xz = 1000;
var shootRay = elem.runtime.shootRay(cnvx,cnvy);
var valid_distance = true;
if (shootRay.pickPosition != null){
var index = Scene.highlighted_marker_index;
if (index==null){
if ((Scene.draggedTransformNode!=undefined)&&(Scene.draggedTransformNode!=null)){
var sphere = Scene.draggedTransformNode.parent().parent();
index = parseInt(sphere.attr("id").substr(7));
}
}
if ((index==null)||(Data.markers[index]==undefined)){
x = shootRay.pickPosition.x;
y = shootRay.pickPosition.y;
z = shootRay.pickPosition.z;
dist_xz = Math.sqrt(x*x+z*z);
}else{
x = Data.markers[index].x;
y = Data.markers[index].y;
z = Data.markers[index].z;
dist_xz = Data.markers[index].d_x3d;
if (isNaN(dist_xz)){
dist_xz = Math.sqrt(x*x+z*z);
}
}
dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
id = $(shootRay.pickObject).attr("id");
}else{
var viewingRay = elem.runtime.getViewingRay(cnvx,cnvy);
x = viewingRay.dir.x;
y = viewingRay.dir.y;
z = viewingRay.dir.z;
dist_xz = null;
dist_xyz = null;
valid_distance = false;
}
var R0 = Data.camera.Matrices.R0;
var p_w = new x3dom.fields.SFVec3f(x,y,z);
var p_rw = R0.multMatrixVec(p_w);
if (valid_distance){
dist_xz = Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z);
dist_xyz = Math.sqrt(p_rw.y*p_rw.y+dist_xz*dist_xz);
dist_xyz = Math.sqrt(p_rw.y*p_rw.y+dist_xz*dist_xz);
}else{
dist_xz = null;
dist_xyz = null;
......@@ -127,17 +127,17 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
az = (az+360)%360;
el = Math.atan2(p_rw.y,Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z))*180/Math.PI;
sk = 0;
var result = {
x: !round? x : x.toFixed(2),
y: !round? y : y.toFixed(2),
z: !round? z : z.toFixed(2),
a: !round? az : az.toFixed(1),
e: !round? el : el.toFixed(1),
s: !round? sk : sk.toFixed(1)
};
if (dist_xz!=null){
result.d_xz = !round? dist_xz : dist_xz.toFixed(1);
result.d_xyz = !round? dist_xyz : dist_xyz.toFixed(1);
......@@ -145,35 +145,35 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
result.d_xz = dist_xz;
result.d_xyz = dist_xyz;
}
result.id = id;
result.index = index;
return result;
}
/**
* Get position and orientation of the observer (=viewer=camera)
* Get position and orientation of the observer (=viewer=camera)
* in the 3D scene
*/
function x3dom_getCameraPosOr(round){
//console.log("Getting PosOr");
var elem = Scene.element;
var m = elem.runtime.viewMatrix().inverse();
var tr = m.e3();
var R0 = Data.camera.Matrices.R0;
//var T0 = x3dom_toYawPitchRoll();
m = R0.mult(m);
//m = x3dom_TxMxTi(m);
var ypr = x3dom_YawPitchRoll_nc(m);
ypr.yaw = (180/Math.PI*ypr.yaw+360)%360;
......@@ -181,7 +181,7 @@ function x3dom_getCameraPosOr(round){
ypr.roll *= 180/Math.PI;
//x3dom_matrix_test();
if (!round){
return {
x: tr.x,
......@@ -199,9 +199,9 @@ function x3dom_getCameraPosOr(round){
a: ypr.yaw.toFixed(1),
e: ypr.pitch.toFixed(1),
s: ypr.roll.toFixed(1)
};
};
}
}
// this upright is for world coordinates, not the camera's
......@@ -209,17 +209,17 @@ function x3dom_getCameraPosOr(round){
function x3dom_setUpRight(){
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = Data.camera.Matrices.Up0;
var s = mat.e2().cross(up).normalize();
var newup = mat.e2().cross(s).normalize().negate();
mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
x3dom_setViewpoint(mat);
}
......@@ -228,7 +228,7 @@ function x3dom_setUpRight(){
* rotation by delta angle around camera's current Up vector
*/
function x3dom_rotation(dangle){
var mat = Scene.element.runtime.viewMatrix();
mat = mat.inverse();
......@@ -236,19 +236,19 @@ function x3dom_rotation(dangle){
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
var q0 = x3dom.fields.Quaternion.axisAngle(up, -dangle);
var m0 = q0.toMatrix();
var m1 = x3dom.fields.SFMatrix4f.translation(from);
var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
var mres = m1.mult(m0).mult(m1n);
newat = mres.multMatrixPnt(at);
newmat = x3dom.fields.SFMatrix4f.lookAt(from, newat, up);
x3dom_setViewpoint(newmat);
}
......@@ -257,41 +257,41 @@ function x3dom_rotation(dangle){
* translate camera in x3dom space
*/
function x3dom_translation(dx,dy,dz){
var delta = new x3dom.fields.SFVec3f(dx,dy,dz);
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
var newfrom = from.add(delta);
var newat = newfrom.subtract(mat.e2());
var newmat = x3dom.fields.SFMatrix4f.lookAt(newfrom, newat, up);
x3dom_setViewpoint(newmat);
}
function x3dom_altelev(alt,elev){
//x3dom_matrix_test();
var mat = Scene.element.runtime.viewMatrix().inverse();
var R0 = Data.camera.Matrices.R0;
//var T = x3dom_toYawPitchRoll();
//var T = x3dom_toYawPitchRoll();
var from = mat.e3();
from.y = alt;
var mat = R0.mult(mat);
var ypr = x3dom_YawPitchRoll_nc(mat);
var ypr2 = x3dom_YawPitchRoll_nc_degs(mat);
//console.log("Check1");
//console.log(ypr2);
var az = ypr.yaw;
var el = elev;
var sk = ypr.roll;
......@@ -309,7 +309,7 @@ function x3dom_altelev(alt,elev){
var ypr2 = x3dom_YawPitchRoll_nc_degs(R_rw);
//console.log("Check2");
//console.log(ypr2);
var matt = x3dom.fields.SFMatrix4f.translation(from);
var newmat = matt.mult(R_w);
......@@ -322,16 +322,16 @@ function x3dom_altelev(alt,elev){
* back and forth conversions for tests
*/
function x3dom_matrix_test(){
console.log("begin==================================");
var viewpoint = $(Scene.element).find("Viewpoint");
console.log("Viewpoint DOM element");
console.log("position: "+viewpoint.attr("position"));
console.log("orientation: "+viewpoint.attr("orientation"));
/*
/*
* 1. view matrix:
* - from world to camera
* - cols - world basis in camera coords
......@@ -343,54 +343,54 @@ function x3dom_matrix_test(){
*/
var mat = Scene.element.runtime.viewMatrix();
console.log("1. View Matrix from runtime");
console.log(mat.toString());
var mat_i = mat.inverse();
console.log("2. Inverted View Matrix");
console.log(mat_i.toString());
var from = mat_i.e3();
var at = from.subtract(mat_i.e2());
var up = mat_i.e1();
console.log("3. From-At-Up");
var mat_fau = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
console.log(mat_fau.toString());
var T = x3dom_toYawPitchRoll();
var mat_eul = T.mult(mat_i).mult(T.inverse());
var eangles = x3dom_YawPitchRoll_degs(mat_eul);
console.log(eangles);
var R = mat;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11)*180/Math.PI;
console.log("Angles:");
console.log("az="+az+" el="+el+" sk="+sk);
console.log("matrix from angles");
console.log("matrix from angles");
var matx = x3dom.fields.SFMatrix4f.rotationX(el*Math.PI/180);
var maty = x3dom.fields.SFMatrix4f.rotationY(az*Math.PI/180);
var matz = x3dom.fields.SFMatrix4f.rotationZ(sk*Math.PI/180);
var m1 = x3dom.fields.SFMatrix4f.translation(from);
var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
var newmat = maty.mult(matx).mult(matz);
console.log(newmat.toString());
console.log("end==================================");
}
......@@ -433,11 +433,11 @@ function x3dom_TxMxTi(m){
}
function x3dom_YawPitchRoll(m){
var yaw = Math.atan2(m._10,m._00);
var pitch = -Math.asin(m._20);
var roll = Math.atan2(m._21,m._22);
return {
yaw: yaw,
pitch: pitch,
......@@ -446,9 +446,9 @@ function x3dom_YawPitchRoll(m){
}
function x3dom_YawPitchRoll_degs(m){
var a = x3dom_YawPitchRoll(m);
return {
yaw: a.yaw*180/Math.PI,
pitch: a.pitch*180/Math.PI,
......@@ -460,38 +460,38 @@ function x3dom_YawPitchRoll_degs(m){
* from not converted matrix
*/
function x3dom_YawPitchRoll_nc(m){
var yaw = -Math.atan2(m._02,m._22);
var pitch = -Math.asin(m._12);
var roll = -Math.atan2(m._10,m._11);
return {
yaw: yaw,
pitch: pitch,
roll: roll
};
}
function x3dom_YawPitchRoll_nc_degs(m){
var a = x3dom_YawPitchRoll_nc(m);
return {
yaw: a.yaw*180/Math.PI,
pitch: a.pitch*180/Math.PI,
roll: a.roll*180/Math.PI
};
}
/*
function x3dom_YawPitchRoll_2_degs(m){
var pitch = Math.PI+Math.asin(m._20);
var roll = Math.atan2(m._21/Math.cos(pitch),m._22/Math.cos(pitch));
var yaw = Math.atan2(m._10/Math.cos(pitch),m._00/Math.cos(pitch));
return {
yaw: yaw*180/Math.PI,
pitch: pitch*180/Math.PI,
......@@ -500,7 +500,7 @@ function x3dom_YawPitchRoll_2_degs(m){
}
*/
function x3dom_delta_map2scene(p0,p1){
var pi = new L.LatLng(p0.lat,p1.lng);
var dx = p0.distanceTo(pi);
......@@ -511,73 +511,73 @@ function x3dom_delta_map2scene(p0,p1){
if (p1.lng<p0.lng) dp_rw.x = -dp_rw.x;
if (p1.lat>p0.lat) dp_rw.z = -dp_rw.z;
var M0 = Data.camera.Matrices.R0.inverse();
var dp_w = M0.multMatrixVec(dp_rw);
return dp_w;
}
// x,y,z - x3dom internal coords
function x3dom_getDistAngle(x,y,z){
var R0 = Data.camera.Matrices.R0;
var p_w = new x3dom.fields.SFVec3f(x,y,z);
var p_rw = R0.multMatrixVec(p_w);
var d = Math.sqrt(p_rw.x*p_rw.x+p_rw.z*p_rw.z);
var a = Math.atan2(p_rw.x,-p_rw.z)*180/Math.PI;
return Array(d,a);
}
function x3dom_update_map(){
var Camera = Map.marker;
// real world ypr from viewmatrix
var mat = Scene.element.runtime.viewMatrix().inverse();
var R0 = Data.camera.Matrices.R0;
//var T = x3dom_toYawPitchRoll();
var p_w = mat.e3();
var dp_w = mat.e3();
//var m_rw = T.mult(R0).mult(mat).mult(T.inverse());
// R0 - rw -> w
mat = R0.mult(mat);
var ypr = x3dom_YawPitchRoll_nc_degs(mat);
var heading = ypr.yaw;
Map.marker.setHeading(heading);
// real world angle distance of some point
if (Scene.old_view_translation != null){
dp_w = dp_w.subtract(Scene.old_view_translation);
}
// from w to rw
dp_rw = R0.multMatrixVec(dp_w);
var distance = Math.sqrt(dp_rw.x*dp_rw.x+dp_rw.z*dp_rw.z);
var angle = 0;
if (dp_rw.z!=0){
angle = 180/Math.PI*Math.atan2(dp_rw.x,-dp_rw.z);
}
//angle = angle + heading;
var initial_coordinates = [Data.camera.latitude,Data.camera.longitude];
var p0 = new L.LatLng(initial_coordinates[0],initial_coordinates[1]);//Camera._latlng;
var p1 = p0.CoordinatesOf(angle,distance);
......@@ -587,16 +587,16 @@ function x3dom_update_map(){
Data.camera.latitude = p1.lat;
Data.camera.longitude = p1.lng;
Data.camera.heading = heading;
Scene.old_view_translation = p_w;
}
// uses globals
function x3dom_setViewpoint(m){
//console.log("Setting a viewpoint");
var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
Q.setValue(m);
var AA = Q.toAxisAngle();
......
js/x3dom_init.js
View file @ 8bc06769
......@@ -7,14 +7,14 @@
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
* @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
......@@ -39,9 +39,9 @@ var X3DOMObject = function(element,data,options){
this.element = element;
this.data = data;
var defaults = {
debug: true, // {boot}, unused
debug: true, // {boot}, unused
highlight: true, // {bool}, highlight surfaces on mouseover
fov: 30*Math.PI/180,// {rad}, default vertical fov
fov_step: 0.025, // {rad}, min change
......@@ -49,7 +49,7 @@ var X3DOMObject = function(element,data,options){
this._settings = $.extend(defaults,options);
this._DEBUG = this._settings.debug;
this._DEBUG = this._settings.debug;
this._FOV = this._settings.fov;
this._FOV_STEP = this._settings.fov_step;
this._HIGHLIGHT_ON_MOUSEOVER = this._settings.highlight;
......@@ -57,22 +57,22 @@ var X3DOMObject = function(element,data,options){
// tmp vars
this._resizeTimer = false;
this._eventCtrlKey = false;
this.highlighted_marker_index = null;
this.old_view_translation = null;
// status vars
this._X3DOM_SCENE_INIT_DONE = false;
this._ctrlKey = false;
this._shiftKey = false;
this.markInfoIndex = null;
};
// ui, window
X3DOMObject.prototype.initResize = function(){
var self = this;
self.resize();
......@@ -89,7 +89,7 @@ X3DOMObject.prototype.initResize = function(){
// ui, window
X3DOMObject.prototype.resize = function(){
var self = this;
var w = $(window).width();
......@@ -97,7 +97,7 @@ X3DOMObject.prototype.resize = function(){
$(self.element).attr("width",w);
$(self.element).attr("height",h);
$("#crosshair_h").css({
left: (w/2-$("#crosshair_h").width()/2)+"px",
top: (h/2)+"px"
......@@ -107,26 +107,26 @@ X3DOMObject.prototype.resize = function(){
left: (w/2)+"px",
top: (h/2-$("#crosshair_v").height()/2)+"px"
});
var fov = w/h*self._FOV;
//fov = Math.PI/2;
self.setFoV(fov);
self.data.camera.fov = fov;
if (Map.marker != undefined){
Map.marker.setFoV(fov);
}
}
/*
X3DOMObject.getX3DOMlibrary = function(){
var self = this;
$.getScript("js/x3dom-full.debug.js",function(){
//wait until it parsed the DOM
x3dom.runtime.ready = function(){
......@@ -138,9 +138,9 @@ X3DOMObject.getX3DOMlibrary = function(){
// so one doesn't have to click to enable keydown/keyup
X3DOMObject.prototype.focusOnCanvas = function(){
this.element.getElementsByTagName("canvas")[0].focus();
}
/**
......@@ -148,11 +148,11 @@ X3DOMObject.prototype.focusOnCanvas = function(){
* which was the default action
*/
X3DOMObject.prototype.FoVEvents = function(){
var self = this;
// true = CAPTURING = from parent to child
// canvas is a child of x3d
//Chrome?!
self.element.addEventListener('mousewheel',function(e){
var delta = e.deltaY>0 ? 1 : -1;
......@@ -162,9 +162,9 @@ X3DOMObject.prototype.FoVEvents = function(){
e.stopPropagation();
return false;
},true);
//Firefox?!
self.element.addEventListener('DOMMouseScroll',function(e){
self.element.addEventListener('DOMMouseScroll',function(e){
var delta = e.detail>0 ? 1 : -1;
self.changeFoV(delta*self._FOV_STEP);
// prevent zoom
......@@ -172,8 +172,8 @@ X3DOMObject.prototype.FoVEvents = function(){
e.stopPropagation();
return false;
},true);
}
/**
......@@ -184,20 +184,20 @@ X3DOMObject.prototype.changeFoV = function(val){
var fov = this.getFoV()+val;
this.setFoV(fov);
// update Map
// update Map
Map.marker.setFoV(fov);
}
/**
* Set by @val rad
*/
X3DOMObject.prototype.setFoV = function(val){
var vp = $(this.element).find("Viewpoint")[0];
$(vp).prop("fieldOfView",val);
// apply to all viewpoints, but:
// https://doc.x3dom.org/author/Navigation/Viewpoint.html
// = correct field of view is not guaranteed in X3DOM
......@@ -206,24 +206,24 @@ X3DOMObject.prototype.setFoV = function(val){
$(this).attr("fieldOfView",fov);
});
*/
}
/**
* Read property from DOM element
*/
X3DOMObject.prototype.getFoV = function(){
var vp = $(this.element).find("Viewpoint")[0];
return parseFloat($(vp).prop("fieldOfView"));
}
/**
* Remember which key is pressed - used for mouse moving / dragging
*/
X3DOMObject.prototype.KeyEvents = function(){
var self = this;
//Chrome?!
self.element.addEventListener('mousemove',function(e){
......@@ -236,7 +236,7 @@ X3DOMObject.prototype.KeyEvents = function(){
self._shiftKey = true;
}else{
self._shiftKey = false;
}
}
},true);
self.element.addEventListener('keypress',function(e){
......@@ -244,20 +244,20 @@ X3DOMObject.prototype.KeyEvents = function(){
$("#reset_view").click();
}
});
}
/**
* The 3D model building blocks are shapes
*/
X3DOMObject.prototype.ShapeEvents = function(){
var self = this;
var tmp = new X3DOMObject.PointerMarker();
var inlines = $(self.element).find("inline");
inlines.each(function(){
if ($(this).attr("name")!="back"){
......@@ -265,15 +265,15 @@ X3DOMObject.prototype.ShapeEvents = function(){
var shapes = $(this).find("Shape");
shapes.each(function(){
new X3DOMObject.Shape(this);
});
}
});
}
/**
......@@ -281,62 +281,62 @@ X3DOMObject.prototype.ShapeEvents = function(){
*/
X3DOMObject.Shape = function(element){
this._elem = element
this._registerEvents();
}
X3DOMObject.Shape.prototype._registerEvents = function(){
var self = Scene;
$(this._elem).on("mousemove",function(e){
var x = e.originalEvent.worldX;
var y = e.originalEvent.worldY;
var z = e.originalEvent.worldZ;
if (self._ctrlKey||SETTINGS.pointer){
$("#sliding_sphere").find('material').attr("diffuseColor",convert_color_l2x(SETTINGS.markercolor));
$("#sliding_sphere").find('Sphere').attr("radius",SETTINGS.markersize/2);
X3DOMObject.Marker.place(x,y,z,"sliding_sphere");
$("#sliding_sphere").find("switch").attr("whichChoice",0);
}else{
X3DOMObject.Marker.place(0,0,0,"sliding_sphere");
$("#sliding_sphere").find("switch").attr("whichChoice",-1);
}
/*
if (!SETTINGS.verticaldrag&&Scene.draggedMarker){
console.log("dragging not vertically");
//$(Scene.draggedMarker) - get id
var sphere = $(Scene.draggedMarker).parent().parent();
console.log(Scene.draggedMarker.parent().parent());
var index = parseInt(sphere.attr("id").substr(7));
console.log(index);
X3DOMObject.Marker.place(x,y,z,"my-sph-"+index);
}
*/
});
$(this._elem).on("click",function(e){
// if self._shiftKey then the mouse will always be over the pointer marker
if ((self._shiftKey)||(SETTINGS.highlight)){
X3DOMObject.Shape.toggle(this);
}
});
$(this._elem).on("mouseover",function(e){
......@@ -357,13 +357,13 @@ X3DOMObject.Shape.prototype._registerEvents = function(){
X3DOMObject.Shape.dehighlight(this);
});
}
X3DOMObject.Shape.highlight = function(elem){
var m = $(elem).find("Material[class='hl']");
if (m.length==0){
m = $("<Material>",{class:'hl'});
//m.attr("ambientintensity","1");
......@@ -375,45 +375,45 @@ X3DOMObject.Shape.highlight = function(elem){
}
X3DOMObject.Shape.dehighlight = function(elem){
var self = this;
$(elem).find("Appearance").find("Material[class='hl']").remove();
m = $(elem).find("Material[class='sl']");
if (m.length==1){
X3DOMObject.Shape.select(elem);
}
}
X3DOMObject.Shape.toggle = function(elem){
var self = this;
var m = $(elem).find("Material[class='sl']");
if (m.length!=0){
X3DOMObject.Shape.deselect(elem);
}else{
X3DOMObject.Shape.select(elem);
}
}
X3DOMObject.Shape.select = function(elem){
var self = this;
X3DOMObject.Shape.deselect(elem);
var m = $(elem).find("Material[class='sl']");
m = $("<Material>",{class:'sl'});
m.attr("emissiveColor","1 1 1");
//m.attr("transparency","0");
$(elem).find("Appearance").append(m);
}
X3DOMObject.Shape.deselect = function(elem){
......@@ -425,14 +425,14 @@ X3DOMObject.Shape.deselect = function(elem){
X3DOMObject.prototype.createMarker = function(x,y,z,id){
var self = this;
var sph_class = "";
var index = null;
var color = convert_color_l2x(SETTINGS.markercolor);
var size = SETTINGS.markersize/2;
if ((id=="")||(id==undefined)){
sph_class = "my-markers";
index = $("."+sph_class).length;
......@@ -440,38 +440,38 @@ X3DOMObject.prototype.createMarker = function(x,y,z,id){
color = convert_color_l2x(self.data.markers[index].color);
size = self.data.markers[index].size/2;
}
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>
<shape class='shapemarker'>
<appearance>
<material diffuseColor='`+color+`' transparency='0.0' myColor='`+color+`'></material>
</appearance>
</appearance>
<Sphere DEF="sphere" radius="`+size+`" />
</shape>
</shape>
</transform>
</switch>
</group>
`;
var sphere_element = $(html);
$(this.element).find("scene").append(sphere_element);
//var shape = $(sphere_element).find("shape");
//var id_prefix = $(sphere_element).attr("id").substr(0,7);
return sphere_element;
// sphere events
// Drag, select, delete
// Data.push()
}
X3DOMObject.prototype.updateMarkersIndices = function(){
$(this.element).find(".my-markers").each(function(i,v){
$(this).attr("id","my-sph-"+i);
......@@ -480,7 +480,7 @@ X3DOMObject.prototype.updateMarkersIndices = function(){
// sphere events
// Drag, select, delete
// Data.push()
}
/**
......@@ -488,54 +488,54 @@ X3DOMObject.prototype.updateMarkersIndices = function(){
* @ylevel - level height
*/
X3DOMObject.Marker = function(x,y,z,ylevel){
this._x = x || 0;
this._y = y || 0;
this._z = z || 0;
this._ylevel = ylevel || false;
this.init();
}
X3DOMObject.Marker.prototype.init = function(){
if (this._ylevel){
//console.log(this._x+" "+this._y+" "+this._z);
// temporary solution is to shoot rays - very slow
var cPos = Scene.element.runtime.calcCanvasPos(this._x,this._y,this._z);
var cx = cPos[0];
var cy = 0;
var x,y,z,d0,d1;
var sr;
d0 = Math.sqrt(this._x*this._x+this._z*this._z);
for(var i=0;i<$(window).height();i++){
sr = Scene.element.runtime.shootRay(cx,cy);
if (sr.pickPosition != null){
x = sr.pickPosition.x;
y = sr.pickPosition.y;
z = sr.pickPosition.z;
d1 = Math.sqrt(x*x+z*z);
if ((d1-d0)<0.1){
this._y = y;
break;
}
}
cy += 1;
}
/*
//var from = new x3dom.fields.SFVec3f(this._x, 100, this._z);
var from = new x3dom.fields.SFVec3f(0, 0, 0);
......@@ -543,36 +543,36 @@ X3DOMObject.Marker.prototype.init = function(){
var dir = new x3dom.fields.SFVec3f(0, -0, -1);//at.subtract(from);
// dir gets auto normalized
var vray = new x3dom.fields.Ray(from, dir);
//var vray = Scene.element.runtime.getViewingRay(0,0);
console.log(vray);
var scene = Scene.element.runtime.canvas.doc._scene;
var info = Scene.element.runtime.canvas.doc._viewarea._pickingInfo;
console.log(Scene.element.runtime.pickMode());
//console.log(Scene.element.runtime.changePickMode('idbuf'));
//console.log(Scene.element.runtime.changePickMode('color'));
console.log(Scene.element.runtime.changePickMode('texcoord'));
//console.log(Scene.element.runtime.changePickMode('box'));
console.log(Scene.element.runtime.pickMode());
var isect = scene.doIntersect(vray);
console.log(info);
console.log("vr");
console.log(vray);
if (vray.hitObject!=null){
console.log($(vray.hitObject._xmlNode).parent().find("ImageTexture").attr("url"));
var el = $(vray.hitObject._xmlNode).parent();
var bbox = Scene.element.runtime.getSceneBBox();
console.log(bbox);
this._x = vray.hitPoint.x;
this._y = vray.hitPoint.y;
this._z = vray.hitPoint.z;
......@@ -584,14 +584,14 @@ X3DOMObject.Marker.prototype.init = function(){
var bbox = Scene.element.runtime.getSceneBBox();
console.log(bbox);
*/
/*
var sr = Scene.element.runtime.shootRay(1000,450);
console.log("sr");
console.log(sr);
*/
/*
//while(vray.hitPoint.y>-100){
var n=0;
......@@ -607,48 +607,48 @@ X3DOMObject.Marker.prototype.init = function(){
}
*/
//do intersect
//hitobject
//get y
}
this._elem = Scene.createMarker(this._x,this._y,this._z);
this._shape = this._elem.find("shape");
this._registerEvents();
}
X3DOMObject.Marker.prototype._registerEvents = function(){
var PREFIX = "my-sph-";
var self = this;
var marker = this._shape;
//var id_prefix = $(this._elem).attr("id").substr(0,PREFIX.length);
//var index = parseInt($(this._elem).attr("id").substr(PREFIX.length));
marker.on('click',function(e){
var elem = $(this).parent().parent().parent();
var index = parseInt($(elem).attr("id").substr(PREFIX.length));
var id_prefix = $(elem).attr("id").substr(0,PREFIX.length);
//self.dehighlight();
//X3DOMObject.PointerMarker.dehighlight(self._elem);
if (Scene._ctrlKey){
if (id_prefix==PREFIX){
elem.remove();
// REMOVE
Data.markers.splice(index,1);
Scene.updateMarkersIndices();
Map.deleteMarker(index);
}
}else{
......@@ -657,38 +657,38 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
Map.toggleMarker(index);
}
});
marker.on('mouseover',function(e){
var elem = $(this).parent().parent().parent();
var index = parseInt($(elem).attr("id").substr(PREFIX.length));
var id_prefix = $(elem).attr("id").substr(0,PREFIX.length);
X3DOMObject.Marker.highlight(elem);
Map.highlightMarker(index);
Scene.highlighted_marker_index = index;
if (Scene._ctrlKey){
if (id_prefix==PREFIX){
$("#sliding_sphere").find("switch").attr("whichChoice",-1);
}
}
});
/*
marker.addEventListener('mouseover',function(){
Scene.showMessage("infowindow","X");
},true);
*/
marker.on('mouseout',function(e){
var elem = $(this).parent().parent().parent();
var index = parseInt($(elem).attr("id").substr(PREFIX.length));
......@@ -696,7 +696,7 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
Scene.highlighted_marker_index = null;
if (Scene.draggedTransformNode==null){
if (!elem.prop("selected")){
X3DOMObject.Marker.dehighlight(elem);
Map.dehighlightMarker(index);
......@@ -706,39 +706,39 @@ X3DOMObject.Marker.prototype._registerEvents = function(){
}
}
});
marker.on('mousedown',function(e){
var elem = $(this).parent().parent().parent();
var index = parseInt($(elem).attr("id").substr(PREFIX.length));
X3DOMObject.Marker.dehighlight(elem);
Map.dehighlightMarker(index);
document.getElementById("navInfo").setAttribute("type", '"NONE"');
Scene.lastMouseX = event.offsetX;
Scene.lastMouseY = event.offsetY;
X3DOMObject.Marker.dragStart(this);
Scene.element.addEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
Scene.element.addEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
});
marker.on('mouseup',function(e){
var elem = $(this).parent().parent().parent();
var index = parseInt($(elem).attr("id").substr(PREFIX.length));
X3DOMObject.Marker.highlight(elem);
Map.highlightMarker(index);
});
}
X3DOMObject.Marker.mouseUp = function(){
......@@ -751,18 +751,18 @@ X3DOMObject.Marker.mouseUp = function(){
X3DOMObject.Marker.toggle(elem);
}
*/
Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
Scene.element.removeEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
Scene.draggedTransformNode = null;
Scene.draggingUpVec = null;
Scene.draggingRightVec = null;
Scene.unsnappedDragPos = null;
Scene.markerdragged = false;
document.getElementById("navInfo").setAttribute("type",'"examine"');
}
// from https://x3dom.org/x3dom/example/MovingObjectsWithDOMEvents.html
......@@ -772,13 +772,13 @@ X3DOMObject.Marker.dragStart = function(elem){
var transformNode = $(elem).parent();
var tr0 = $(transformNode).attr("translation");
Scene.draggedTransformNode = transformNode;
Scene.draggedTransformNode = transformNode;
Scene.unsnappedDragPos = new x3dom.fields.SFVec3f.parse(tr0);
//compute the dragging vectors in world coordinates
//(since navigation is disabled, those will not change until dragging has been finished)
var vMatInv = Scene.element.runtime.viewMatrix().inverse();
var viewDir = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 0.0, -1.0));
......@@ -793,18 +793,18 @@ X3DOMObject.Marker.dragStart = function(elem){
var magnificationFactor = 1.0 / Math.abs(p1[0] - p2[0]);
//scale up vector and right vector accordingly
//scale up vector and right vector accordingly
Scene.draggingUpVec = Scene.draggingUpVec.multiply(magnificationFactor);
Scene.draggingRightVec = Scene.draggingRightVec.multiply(magnificationFactor);
}
X3DOMObject.Marker.mouseMove = function(event){
Scene.markerdragged = true;
X3DOMObject.Marker.highlight(Scene.draggedTransformNode.parent().parent());
//offsetX / offsetY polyfill for FF
var target = event.target || event.srcElement;
var rect = target.getBoundingClientRect();
......@@ -830,15 +830,15 @@ X3DOMObject.Marker.mouseMove = function(event){
if (!$(sr.pickObject).hasClass("shapemarker")){
var sphere = Scene.draggedTransformNode.parent().parent();
var index = parseInt(sphere.attr("id").substr(7));
X3DOMObject.Marker.place(sr.pickPosition.x,sr.pickPosition.y,sr.pickPosition.z,"my-sph-"+index);
//console.log("got shape");
//Scene.draggedTransformNode
X3DOMObject.Marker.slide(index,sr.pickPosition.x,sr.pickPosition.y,sr.pickPosition.z);
X3DOMObject.displayInfo(event);
X3DOMObject.displayViewInfo(event);
}
}
}
......@@ -846,11 +846,11 @@ X3DOMObject.Marker.mouseMove = function(event){
Scene.lastMouseX = event.offsetX;
Scene.lastMouseY = event.offsetY;
}
X3DOMObject.Marker.drag = function(dx,dy){
var offsetUp = Scene.draggingUpVec.multiply(-dy);
var offsetRight = Scene.draggingRightVec.multiply(dx);
......@@ -860,23 +860,23 @@ X3DOMObject.Marker.drag = function(dx,dy){
var sphere = $(Scene.draggedTransformNode).parent().parent();
var index = parseInt(sphere.attr("id").substr(7));
X3DOMObject.Marker.slide(index,Scene.unsnappedDragPos.x,Scene.unsnappedDragPos.y,Scene.unsnappedDragPos.z);
}
X3DOMObject.Marker.slide = function(index,x,y,z){
var da = x3dom_getDistAngle(x,y,z);
var distance = da[0];
var angle = da[1];
var p1_ll = Map.marker._latlng;
var p2_ll = p1_ll.CoordinatesOf(angle,distance);
var c = Data.markers[index];
c.x = x;
c.y = y;
c.z = z;
......@@ -885,53 +885,53 @@ X3DOMObject.Marker.slide = function(index,x,y,z){
c.altitude = c.y;
//d_x3d - map distance calculated from the model
c.d_x3d = distance;
X3DOMObject.displayMarkInfo(index);
X3DOMObject.displayInfo({});
Map.marker.moveMeasureMarker(p2_ll,index);
}
X3DOMObject.Marker.place = function(x,y,z,id){
var tr = $("#"+id).find("transform");
var tr = $("#"+id).find("transform");
$(tr).attr("translation",x+" "+y+" "+z);
}
X3DOMObject.Marker.highlight = function(elem){
var color = "1 0.5 0.5";
elem.find('material').attr("diffuseColor",color);
elem.find('material').attr("diffuseColor",color);
}
X3DOMObject.Marker.dehighlight = function(elem){
//var color = "0.07 1 0.07";
var color = elem.find('material').attr("myColor");
elem.find('material').attr("diffuseColor",color);
}
X3DOMObject.Marker.toggle = function(elem){
if (elem.prop("selected")){
elem.prop("selected",false);
}else{
elem.prop("selected",true);
}
}
// PointerMarker
X3DOMObject.PointerMarker = function(){
//init
this._init();
};
X3DOMObject.PointerMarker.prototype._init = function(){
......@@ -939,23 +939,23 @@ X3DOMObject.PointerMarker.prototype._init = function(){
this._elem = Scene.createMarker(0,0,0,"sliding_sphere");
this._shape = this._elem.find("shape");
this._registerEvents();
this._elem.find("switch").attr("whichChoice",-1);
}
X3DOMObject.PointerMarker.prototype._registerEvents = function(){
var self = this;
var Camera = Map.marker;
self._shape.on("click",function(e){
X3DOMObject.Marker.dehighlight(self._elem);
var xyz = $(this).parent().attr("translation");
xyz = xyz.split(" ");
// Create marker for Data
var mark = new X3L({
x: parseFloat(xyz[0]) || 0,
......@@ -964,44 +964,44 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
color: SETTINGS.markercolor,
size: SETTINGS.markersize,
});
mark.d_x3d = Math.sqrt(mark.x*mark.x+mark.z*mark.z);
mark.d_map = "<font style='color:red;'>drag over map</font>";
Data.markers.push(mark);
X3DOMObject.displayMarkInfo(Data.markers.length-1);
// Create marker on the scene
new X3DOMObject.Marker(mark.x,mark.y,mark.z);
var da = x3dom_getDistAngle(mark.x,mark.y,mark.z);
var distance = da[0];
var angle = da[1];
// Create marker on the map
Camera.createMeasureMarker(angle,distance);
var map_mark = Camera._measureMarkers[Camera._measureMarkers.length-1];
// Update marker in Data
mark.latitude = map_mark._latlng.lat;
mark.longitude = map_mark._latlng.lng;
// register events for a new marker in Data
X3DOMObject.MapMarker.registerEvents(map_mark);
// need?
Camera._syncMeasureMarkersToBasePoint();
});
self._shape.on("mousedown",function(e){
X3DOMObject.Marker.highlight(self._elem);
});
}
/**
......@@ -1010,27 +1010,27 @@ X3DOMObject.PointerMarker.prototype._registerEvents = function(){
X3DOMObject.MapMarker = {};
X3DOMObject.MapMarker.registerEvents = function(map_mark){
var Camera = Map.marker;
map_mark.on('mouseover',function(){
//console.log(this._index);
var index = this._index;
var elem = $("#my-sph-"+index);
X3DOMObject.Marker.highlight(elem);
Map.highlightMarker(index);
});
map_mark.on('mouseout',function(){
var index = this._index;
var elem = $("#my-sph-"+index);
if (Camera.draggedMarker._index!=index){
if (Camera.draggedMarker._index!=index){
if (!this._selected){
X3DOMObject.Marker.dehighlight(elem);
Map.dehighlightMarker(index);
......@@ -1038,110 +1038,110 @@ X3DOMObject.MapMarker.registerEvents = function(map_mark){
}
});
/*
map_mark.on('click',function(e){
var index = this._index
var elem = $("#my-sph-"+index);
X3DOMObject.Marker.toggle(elem);
Map.toggleMarker(index);
//if ctrl - remove
//Data.markers.splice(index);
//Scene.updateMarkersIndices();
});
*/
map_mark.on('mousedown',function(){
var index = this._index;
var elem = $("#my-sph-"+index);
X3DOMObject.Marker.dehighlight(elem);
Map.dehighlightMarker(index);
});
map_mark.on('mouseup',function(e){
var index = this._index;
var elem = $("#my-sph-"+index);
if (e.originalEvent.ctrlKey){
// from Data
Data.markers.splice(index);
// from Map (indices get updated)
Map.deleteMarker(index);
// from Scene
elem.remove();
Scene.updateMarkersIndices();
}else{
X3DOMObject.Marker.toggle(elem);
Map.toggleMarker(index);
X3DOMObject.Marker.highlight(elem);
Map.highlightMarker(index);
}
});
}
/**
* info template
*/
X3DOMObject.displayInfo = function(e){
if (Data.markers.length==0||!SETTINGS.markinfo){
ui_hideMessage("window-markinfo");
}
//console.log("displayInfo");
var elem = Scene.element;
var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,true);
if (Data.markers[mouse.index]!=undefined){
X3DOMObject.displayMarkInfo(mouse.index);
}
var dist = 1000;
$("#window-info").css({"font-size":"20px"});
if (mouse.d_xz != null){
var dist_msg = "";
var id_msg = "";
if (SETTINGS.moreinfo){
//console.log("displayInfo actual displaying");
$("#window-info").css({"font-size":"16px"});
var st = mouse.id;
id_msg = (st===undefined)?"n/a":st;
dist_msg += "<table>";
dist_msg += "<tr><th align='center'>shape id</td><td>"+id_msg+"</td></tr>";
dist_msg += "</table>";
dist_msg += "</table>";
dist_msg += "<table>";
dist_msg += "<tr><th align='left'>d<sub>xz</sub></td><td>"+mouse.d_xz+" m</td>";
dist_msg += "<td>&nbsp;</td>";
dist_msg += "<th align='left'>d<sub>xyz</sub></td><td>"+mouse.d_xyz+" m</td></tr>";
dist_msg += "</table>";
dist_msg += "</table>";
}else{
dist_msg = mouse.d_xz+" m";
......@@ -1168,31 +1168,31 @@ X3DOMObject.displayInfo = function(e){
* view info template
*/
X3DOMObject.displayViewInfo = function(e){
if (Data.markers.length==0||!SETTINGS.markinfo){
ui_hideMessage("window-markinfo");
}
if (!e.target){
e.clientX = $(window).width()/2;
e.clientY = $(window).height()/2;
}
var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,true);
mouse.s = "0";
/*
if (Data.markers[mouse.index]!=undefined){
X3DOMObject.displayMarkInfo(mouse.index);
}
*/
var camera = x3dom_getCameraPosOr(true);
// ?!!!
//Map.marker.setAltitude(camera.y);
//Map.marker.setElevation(camera.e*Math.PI/180);
var msg = `
<table>
<tr>
......@@ -1229,7 +1229,7 @@ X3DOMObject.displayViewInfo = function(e){
</tr>
</table>
`;
if (SETTINGS.viewinfo){
ui_showMessage("window-viewinfo",msg);
}else{
......@@ -1241,56 +1241,55 @@ X3DOMObject.displayViewInfo = function(e){
* view marker data - satellite vs 3d model
*/
X3DOMObject.displayMarkInfo = function(index){
//console.log("displayMarkInfo");
var hide = false;
if (Data.markers.length==0){
hide = true;
}else{
msg = "<div>Marker "+index+" (Satellite vs 3D model)</div>";
var d_map = Data.markers[index].d_map;
var d_x3d = Data.markers[index].d_x3d;
var d_map_float = parseFloat(d_map);
var d_x3d_float = parseFloat(d_x3d);
var delta;
if (isNaN(d_map_float)){
d_map_msg = d_map;
}else{
d_map_msg = d_map_float.toFixed(1)+" m";
}
if (isNaN(d_x3d_float)){
d_x3d_msg = d_x3d;
}else{
d_x3d_msg = d_x3d_float.toFixed(1)+" m";
}
if (!isNaN(d_x3d_float)&&!isNaN(d_map_float)){
delta = (d_map_float-d_x3d_float).toFixed(1);
}else{
delta = "-";
}
msg += "<table>";
msg += "<tr title='drag marker over map to update distance'><th align='left'>d<sub>map</sub></th><td align='left' style='text-align:left;'>"+d_map_msg+"</td></tr>";
msg += "<tr title='drag marker over 3d scene to update distance'><th align='left'>d<sub>3d</sub></th><td align='left' style='text-align:left;'>"+d_x3d_msg+"</td></tr>";
msg += "<tr><th align='center'>&Delta;</th><td align='left' style='text-align:left;'>"+delta+" m</td></tr>";
msg += "</table>";
}
if (hide||!SETTINGS.markinfo){
ui_hideMessage("window-markinfo");
}else{
ui_showMessage("window-markinfo",msg);
}
}
}
js/x3l.js
View file @ 8bc06769
/*
*
*
* Copyright (C) 2017 Elphel Inc.
* License: GPLv3
*
*
*/
var X3L = function(options){
var defaults = {
x: 0,
y: 0,
z: 0,
latitude: 0,
longitude: 0,
altitude: 0,
heading: 0,
tilt: 90,
roll: 0,
fov: 0,
color: "#1f1",
size: 2,
};
this._data = $.extend(defaults,options);
this.x = this._data.x;
this.y = this._data.y;
this.z = this._data.z;
this.longitude = this._data.longitude;
this.latitude = this._data.latitude;
this.altitude = this._data.altitude;
this.heading = this._data.heading;
this.tilt = this._data.tilt;
this.roll = this._data.roll;
this.fov = this._data.fov;
this.color = this._data.color;
this.size = this._data.size;
......
test.html
View file @ 8bc06769
......@@ -3,9 +3,9 @@
<head>
<meta charset="utf-8"/>
<title>Scene+Map</title>
<script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
<script type='text/javascript' src='js/leaflet/L.extra.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls.js'></script>
......@@ -14,7 +14,7 @@
<script type='text/javascript' src='js/x3dom_init.js'></script>
<script type='text/javascript' src='js/x3dom_functions.js'></script>
<script type='text/javascript' src='js/leaflet_init.js'></script>
<script type='text/javascript' src='js/x3l.js'></script>
......@@ -23,14 +23,14 @@
<script type='text/javascript' src='js/ui_help.js'></script>
<script type='text/javascript' src='js/ui_functions.js'></script>
<script type='text/javascript' src='js/ui_align.js'></script>
<script type='text/javascript' src='js/util_functions.js'></script>
<link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
<link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
<link rel='stylesheet' type='text/css' href='js/ui.css'></link>
</head>
<body>
<div id='x3d_wrapper'>
......
test_nomap.html
View file @ 8bc06769
......@@ -3,19 +3,19 @@
<head>
<meta charset="utf-8"/>
<title>Scene (NoMap)</title>
<script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
<script type='text/javascript' src='js/nomap_init.js'></script>
<link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
<link rel='stylesheet' type='text/css' href='js/ui.css'></link>
</head>
<body>
<div id='x3d_wrapper'>
<x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">
<x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">
<scene>
<navigationInfo id="navInfo" type='"examine" "walk"' speed='0.01'></navigationInfo>
<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>
......
test_nomap_vr.html
View file @ 8bc06769
......@@ -3,14 +3,14 @@
<head>
<meta charset="utf-8"/>
<title>Scene (NoMap)</title>
<script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
<script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script>
<!-- <script type='text/javascript' src='js/nomap_vr_init.js'></script> -->
<link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
<style type='text/css'>
body {margin:0; padding:0; background-color:#04344c; background-color:#ddeeff; }
.stereo-view {float:left; }
......@@ -38,28 +38,28 @@
<div class='stereo-view-1'>
<!--view-source:http://realism.com/sample/model/stereo/VAM_246-1-1870/model-ig0b75.x3d?=&headlight=true&ipd=30&%20=-->
<!--view-source:http://realism.com/x3d-examples/HTML5-Fall2014/stereo/kelpie.sgl.html -->
<script>
document.writeln ("<x3d id='all_view' showStat='false' showLog='false' disableDoubleClick='true' keysEnabled='true' x='0px' y='0px' width='"+(2*x3dWidth)+"px' height='"+x3dHeight+"px'>");
var x3dDimStr = x3dWidth + ' ' + x3dHeight + ' 4';
</script>
<scene>
<navigationInfo type='"EXAMINE" "WALK"'></navigationInfo>
<background DEF='bgnd'
backUrl= "js/images/background_side.jpeg"
bottomUrl="js/images/background_floor.jpeg"
<background DEF='bgnd'
backUrl= "js/images/background_side.jpeg"
bottomUrl="js/images/background_floor.jpeg"
frontUrl= "models/1488240695_710844/V0/1488240695_710844-texture-bgnd-ext.jpeg"
leftUrl= "js/images/background_side.jpeg"
rightUrl= "js/images/background_side.jpeg"
leftUrl= "js/images/background_side.jpeg"
rightUrl= "js/images/background_side.jpeg"
topUrl= "js/images/background_sky.jpeg">
</background>
<transform translation='0 0 0' rotation='0 1 0 0'>
<viewpoint DEF='viewpoint' id='x3d_viewpoint' position='0 0 0' orientation='0 1 0 0' zNear='0.001' zFar='2000'></viewpoint>
</transform>
<group id='unrendered_scene' render='false'>
<group DEF='scene'>
<transform DEF='Viewpoint-Left' id='x3d_viewpoint' translation='0 0 0' rotation='0 1 0 0'>
......@@ -75,7 +75,7 @@
</transform>
</group>
</group>
<group DEF='left' render='true'>
<shape>
<appearance>
......@@ -83,15 +83,15 @@
<script>
document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtLeft' stereoMode='LEFT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
</script>
<viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>
<background USE='bgnd' containerField='background'></background>
<group USE='scene' containerField="scene"></group>
</renderedTexture>
<composedShader>
<field name='tex' type='SFInt32' value='0'></field>
<field name='leftEye' type='SFFloat' value='1'></field>
......@@ -106,7 +106,7 @@
{
vec2 pos = sign(position.xy);
fragTexCoord = texcoord;
gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0);
gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0);
}
</shaderPart>
<!-- The division of pos.x relates to the fraction of the window that is used -->
......@@ -136,15 +136,15 @@
<script>
document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtRight' stereoMode='RIGHT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
</script>
<viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>
<background USE='bgnd' containerField='background'></background>
<group USE='scene' containerField="scene"></group>
</renderedTexture>
<composedShader>
<field name='tex' type='SFInt32' value='0'></field>
<field name='leftEye' type='SFFloat' value='0'></field>
......@@ -172,7 +172,7 @@
</scene>
</x3d>
</div>
<script language='JavaScript'>
// --> Check to see if there are DeviceOrientation events in the DOM
......@@ -187,7 +187,7 @@
alpha = 360-eventData.alpha;
rotate (alpha, 'alpha');
rotate (beta, 'beta');
rotate (gamma, 'gamma');
rotate (gamma, 'gamma');
}, false);
}else{
alert ('No Device Motion Sensor');
......@@ -197,14 +197,14 @@
intAngle = Math.floor(angle + 0.5);
if (intAngle == previousAngles[label]) {return; }
previousAngles[label] = intAngle;
if (label == 'alpha') {
rotateView ("x3d_viewpoint_"+label, vectors[label]+" "+intAngle*deg2rad);
// rotateView ("x3d_viewpointR_"+label, vectors[label]+" "+intAngle*deg2rad);
// rotateView ("x3d_viewpointL_"+label, vectors[label]+" "+intAngle*deg2rad);
}
}
function rotateView (label, vector) {
view = document.getElementById(label);
view.setAttribute('set_rotation',vector);
......
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