Skip to content

X
x3domlet
Commit 0d16388e authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

moved from private repo

parents
Hide whitespace changes
Inline Side-by-side
Showing with 4851 additions and 0 deletions
js/.directory 0 → 100644
View file @ 0d16388e
[Dolphin]
PreviewsShown=true
SortRole=date
Timestamp=2017,5,23,18,34,17
Version=3
ViewMode=1
js/LeafletObject.js 0 → 100644
View file @ 0d16388e
// http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
// http://leafletjs.com/examples/extending/extending-1-classes.html
// - extend or include
var LeafletObject = function(id,data,options){
var defaults = {
debug: true,
highlight: true,
maxzoom: 21,
zoom: 17,
fov: 30*Math.PI/180,//deg
};
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}',
{
maxZoom: this._settings.maxzoom,
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}
);
var googleSat = L.tileLayer(
'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
{
maxZoom: this._settings.maxzoom,
attribution: 'Thanks to comrade Google for our happy childhood',
subdomains:['mt0','mt1','mt2','mt3'],
}
);
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);
var baseMaps = {
"Esri world imagery": Esri_WorldImagery,
"Google": googleSat,
"Open Street Map": OSMTiles
};
L.control.layers(baseMaps).addTo(this._map);
this.drawCamera();
}
LeafletObject.prototype.drawCamera = function(){
this.marker = L.cameraViewMarker(this.center, {
color: '#191',
fillColor: '#0f3',
fillOpacity: 0.5,
radius: 10,
heading: this.heading,
fov: this.fov,
draw_xz: false,
h_control: true,
id: "basecircle"
}).addTo(this._map);
}
LeafletObject.prototype.highlightMarker = function(index){
var style = {color:'#f88',fillColor:"#f30"};
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){
var style = {color:'#1f1',fillColor:"#0f3"};
this.marker._measureMarkers[index].setStyle(style);
this.marker._measureLines[index].setStyle(style);
}
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){
this.marker.removeMeasureMarker(index);
}
js/X3DOMObject.js 0 → 100644
View file @ 0d16388e
var X3DOMObject = function(element,data,options){
var defaults = {
debug: true,
highlight: true,
fov: 30*Math.PI/180,//deg, vertical
fov_step: 0.025, //rad
};
this._settings = $.extend(defaults,options);
this._FOV = this._settings.fov;
this._FOV_STEP = this._settings.fov_step;
this._HIGHLIGHT_ON_MOUSEOVER = this._settings.highlight;
this._DEBUG = this._settings.debug;
this._resizeTimer = false;
this._eventCtrlKey = false;
//this._X3DOM_SCENE_INIT = this._settings.debug;
this._X3DOM_SCENE_INIT = false;
//this._element = element;
this.element = element;
this.highlighted_marker_index = null;
this.old_view_translation = null;
//this.lastMouseX;
//this.lastMouseY;
this.data = data;
this.initialize();
};
X3DOMObject.prototype.initialize = function(){
var self = this;
self.resize();
//bind resize
$(window).resize(function(){
clearTimeout(self.resizeTimer);
self.resizeTimer = window.setTimeout(function(){
self.resize();
},100);
});
//self.getX3DOMlibrary();
}
X3DOMObject.prototype.resize = function(){
var self = this;
var w = $(window).width();
var h = $(window).height();
$(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"
});
$("#crosshair_v").css({
left: (w/2)+"px",
top: (h/2-$("#crosshair_v").height()/2)+"px"
});
var fov = w/h*self._FOV;
//fov = Math.PI/2;
// apply to all viewpoints, but:
// https://doc.x3dom.org/author/Navigation/Viewpoint.html
// = correct field of view is not guaranteed in X3DOM
$(self.element).find("Viewpoint").each(function(){
$(this).attr("fieldOfView",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(){
self.deepInit();
};
});
}
*/
// so one doesn't have to click to enable keydown/keyup
X3DOMObject.prototype.focusOnCanvas = function(){
this.element.getElementsByTagName("canvas")[0].focus();
}
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)?self._FOV_STEP:-self._FOV_STEP;
self.changeFoV(e,delta);
},true);
//Firefox?!
self.element.addEventListener('DOMMouseScroll',function(e){
var delta = (e.detail>0)?self._FOV_STEP:-self._FOV_STEP;
self.changeFoV(e,delta);
},true);
}
X3DOMObject.prototype.changeFoV = function(e,val){
var fov = this.getFoV()+val;
this.setFoV(fov);
Map.marker.setFoV(fov);
e.preventDefault();
e.stopPropagation();
return false;
}
X3DOMObject.prototype.setFoV = function(val){
var vp = $(this.element).find("Viewpoint")[0];
$(vp).prop("fieldOfView",val);
}
X3DOMObject.prototype.getFoV = function(){
var vp = $(this.element).find("Viewpoint")[0];
return parseFloat($(vp).prop("fieldOfView"));
}
X3DOMObject.prototype.KeyEvents = function(){
var self = this;
//Chrome?!
self.element.addEventListener('mousemove',function(e){
if (e.ctrlKey){
self._ctrlKey = true;
}else{
self._ctrlKey = false;
}
if (e.shiftKey){
self._shiftKey = true;
}else{
self._shiftKey = false;
}
},true);
}
/*
X3DOMObject.prototype.mouseMove = function(e){
//offsetX / offsetY polyfill for FF
var target = e.target || e.srcElement;
var rect = target.getBoundingClientRect();
e.offsetX = e.clientX - rect.left;
e.offsetY = e.clientY - rect.top;
if (this.lastMouseX === -1){
this.lastMouseX = e.offsetX;
}
if (this.lastMouseY === -1){
this.lastMouseY = e.offsetY;
}
if (this.draggedTransformNode){
this.dragMarker(e.offsetX - this.lastMouseX, e.offsetY - this.lastMouseY);
}
this.lastMouseX = e.offsetX;
this.lastMouseY = e.offsetY;
}
X3DOMObject.prototype.dragMarker = function(dx,dy){
var offsetUp = draggingUpVec.multiply(-dy);
var offsetRight = draggingRightVec.multiply(dx);
this.unsnappedDragPos = this.unsnappedDragPos.add(offsetUp).add(offsetRight);
$(this.draggedTransformNode).attr("translation", this.unsnappedDragPos.toString());
//use callback?
}
*//*
X3DOMObject.prototype.stopDraggingMarker = function(e){
this.removeEventListener('mousemove',this.mouseMove,true);
this.removeEventListener('mouseup',this.mouseup,true);
draggedTransformNode = null;
draggingUpVec = null;
draggingRightVec = null;
unsnappedDragPos = null;
document.getElementById("navInfo").setAttribute("type",'"examine"');
}
*/
X3DOMObject.prototype.initInfoWindow = function(){
//...
/*
// position - folowing mouse without delay? aha
$(this.element).find("canvas").on('mousemove',function(e){
$("#window-info").css({
top: (e.originalEvent.clientY+20)+"px",
left: (e.originalEvent.clientX+20)+"px"
});
});
$("#window-info").on('mouseover',function(){
$(this).hide();
});
*/
}
X3DOMObject.prototype.initViewInfoWindow = function(){
/*
var el = $("<div>",{id:"messagewindow"}).css({
position:"absolute",
bottom:"2px",
left:"2px",
"z-index":10,
background:"red",
border:"1px solid red",
"border-radius": "2px",
color:"white",
padding:"0px"
});
$("body").append(el);
*/
}
X3DOMObject.prototype.showMessage = function(id,msg,bg){
if (bg != undefined){
$("#"+id).css({background:bg});
}
$("#"+id).show();
$("#"+id).html($("<div>").html(msg).css({
padding:"5px 10px"
})).show();
}
X3DOMObject.prototype.hideMessage = function(id){
$("#"+id).hide();
}
X3DOMObject.prototype.registerShapesEvents = function(){
var self = this;
var tmp = new X3DOMObject.PointerMarker();
var inlines = $(self.element).find("inline");
inlines.each(function(){
if ($(this).attr("name")!="back"){
var shapes = $(this).find("Shape");
shapes.each(function(){
/*
this.addEventListener('click',function(e){
console.log("click1");
//console.log(e.worldX+" "+e.worldY+" "+e.worldZ);
//createSphere(e.worldX,e.worldY,e.worldZ);
});
*/
$(this).on("mousemove",function(e){
var x = e.originalEvent.worldX;
var y = e.originalEvent.worldY;
var z = e.originalEvent.worldZ;
if (self._ctrlKey||SETTINGS.pointer){
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);
}
/*
var v = new x3dom.fields.SFVec3f(x,y,z);
//for printing
var x = v.x.toFixed(2);
var y = v.y.toFixed(2);
var z = v.z.toFixed(2);
var l = (v.length()).toFixed(1);
var msg = "<div>x="+x+"</div>"+
"<div>y="+y+"</div>"+
"<div>z="+z+"</div>"+
"<div>d="+l+"</div>";
msg = "<div>"+l+" m</div>";
//self.showMessage("infowindow",msg);
*/
});
$(this).on("click",function(e){
console.log(e);
/*
// when ctrlKey then the mouse is always over pointer marker
if (self._ctrlKey){
self.placeMarker(e.originalEvent.worldX,e.originalEvent.worldY,e.originalEvent.worldZ);
}
*/
if ((self._shiftKey)||(SETTINGS.highlight)){
self.toggleShape(this);
}
});
$(this).on("mouseover",function(e){
/*
var tmp = $(self).attr("id");
if (tmp == undefined){
tmp = "missing <b>id</b> attribute";
}
x3dom.debug.logInfo(tmp);
self.showMessage("shapetitle",tmp);
*/
// e.ctrlKey will not work because X3DOM does something to events
if (self._shiftKey){
if (self._HIGHLIGHT_ON_MOUSEOVER){
self.highlightShape(this);
}
}
});
$(this).on("mouseout",function(e){
self.dehighlightShape(this);
//self.placeMarker(0,0,0,"sliding_sphere");
//self.hideMessage("shapetitle");
//self.resetInfoWindow();
});
// not working
/*
$(this).on("keydown",function(e){
console.log("KeyDown");
self.highlightShape(self);
});
*/
// not working
/*
this.addEventListener('keydown',function(e){
console.log("should not work!");
});
*/
// not working
/*
$(this).on("keyup",function(e){
console.log("keyup");
self.highlightShape(self);
});
*/
});
}
});
}
X3DOMObject.prototype.highlightShape = function(elem){
var m = $(elem).find("Material[class='hl']");
if (m.length==0){
m = $("<Material>",{class:'hl'});
//m.attr("ambientintensity","1");
//m.attr("shininess","0.2");
m.attr("emissiveColor","0.1 0.3 0.1");
$(elem).find("Appearance").append(m);
}
}
X3DOMObject.prototype.dehighlightShape = function(elem){
var self = this;
$(elem).find("Appearance").find("Material[class='hl']").remove();
m = $(elem).find("Material[class='sl']");
if (m.length==1){
self.selectShape(elem);
}
}
X3DOMObject.prototype.toggleShape = function(elem){
var self = this;
var m = $(elem).find("Material[class='sl']");
if (m.length!=0){
self.deselectShape(elem);
}else{
self.selectShape(elem);
}
}
X3DOMObject.prototype.selectShape = function(elem){
var self = this;
self.deselectShape(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.prototype.deselectShape = function(elem){
var tmpapp = $(elem).find("Appearance").find("Material[class='sl']").remove();
}
X3DOMObject.prototype.createMarker = function(x,y,z,id){
var self = this;
sph_class = "";
var index = null;
if ((id=="")||(id==undefined)){
sph_class = "my-markers";
index = $("."+sph_class).length;
id = "my-sph-"+index;
}
var html = `
<group id='`+id+`' class='`+sph_class+`'>
<switch whichChoice='0'>
<transform translation='`+x+` `+y+` `+z+`' rotation='0 0 0 0'>
<shape class='shapemarker'>
<appearance>
<material diffuseColor='0.07 1 0.07' transparency='0.0'></material>
</appearance>
<Sphere DEF="sphere" radius="1" />
</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);
});
// sphere events
// Drag, select, delete
// Data.push()
}
X3DOMObject.prototype.placeMarker = function(x,y,z,id){
var tr = $("#"+id).find("transform");
$(tr).attr("translation",x+" "+y+" "+z);
}
X3DOMObject.prototype.highlightMarker = function(index){
var color = "1 0.5 0.5";
$("#my-sph-"+index).find('material').attr("diffuseColor",color);
}
X3DOMObject.prototype.dehighlightMarker = function(index){
var elem = $("#my-sph-"+index).find('material');
var color = "0.07 1 0.07";
if (!elem.prop("selected")){
elem.attr("diffuseColor",color);
}
}
X3DOMObject.prototype.toggleMarker = function(index){
var elem = $("#my-sph-"+index).find('material');
var color = elem.attr("diffuseColor");
if (elem.prop("selected")){
elem.prop("selected",false);
}else{
elem.prop("selected",true);
}
}
X3DOMObject.prototype.getViewDirection = function(){
var elem = this.element;
var vp_mat = elem.runtime.viewMatrix();
var vMatInv = vp_mat.inverse();
var viewDir = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 0.0, -1.0));
var angle = Math.atan2(viewDir.x,-viewDir.z)*180/Math.PI;
return angle;
}
X3DOMObject.prototype.getViewTranslation = function(){
var elem = this.element;
var vp_mat = elem.runtime.viewMatrix().inverse();
//var vp_rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
//vp_rotation.setValue(vp_mat);
var vp_translation = vp_mat.e3();
return vp_translation;
}
// Marker
X3DOMObject.Marker = function(x,y,z){
this._x = x || 0;
this._y = y || 0;
this._z = z || 0;
this.init();
}
X3DOMObject.Marker.prototype.init = function(){
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){
//self.dehighlight();
//X3DOMObject.PointerMarker.dehighlight(self._elem);
if (Scene._ctrlKey){
if (id_prefix==PREFIX){
self._elem.remove();
// REMOVE
Data.markers.splice(index);
Scene.updateMarkersIndices();
Map.deleteMarker(index);
}
}else{
X3DOMObject.Marker.toggle(self._elem);
Map.toggleMarker(index);
}
});
marker.on('mouseover',function(e){
X3DOMObject.Marker.highlight(self._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){
//self.highlightMarker(index);
Scene.highlighted_marker_index = null;
if (Scene.draggedTransformNode==null){
if (!self._elem.prop("selected")){
X3DOMObject.Marker.dehighlight(self._elem);
Map.dehighlightMarker(index);
}else{
X3DOMObject.Marker.highlight(self._elem);
Map.highlightMarker(index);
}
}
});
marker.on('mousedown',function(e){
X3DOMObject.Marker.dehighlight(self._elem);
Map.dehighlightMarker(index);
document.getElementById("navInfo").setAttribute("type", '"NONE"');
Scene.lastMouseX = event.offsetX;
Scene.lastMouseY = event.offsetY;
X3DOMObject.Marker.dragStart(this);
//$(this).on('mousemove',x3d_markerDrag);
/*
$(Scene.element).on('mousemove',function(){
console.log("preMouseMove");
x3d_sceneMouseMove2();
},true);
*/
Scene.element.addEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
Scene.element.addEventListener('mouseup',X3DOMObject.Marker.mouseUp,true);
});
marker.on('mouseup',function(e){
X3DOMObject.Marker.highlight(self._elem);
Map.highlightMarker(index);
});
}
X3DOMObject.Marker.mouseUp = function(){
var elem = Scene.draggedTransformNode.parent().parent();
// click is already bound
/*
if (!Scene.markerdragged){
X3DOMObject.Marker.toggle(elem);
}
*/
Scene.element.removeEventListener('mousemove',X3DOMObject.Marker.mouseMove,true);
Scene.element.removeEventListener('mouseup',X3DOMObject.Marker.mouseUp,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
X3DOMObject.Marker.dragStart = function(elem){
// move up from <shape> to <transform>
var transformNode = $(elem).parent();
var tr0 = $(transformNode).attr("translation");
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));
//use the viewer's up-vector and right-vector
Scene.draggingUpVec = vMatInv.multMatrixVec(new x3dom.fields.SFVec3f(0.0, 1.0, 0.0));
Scene.draggingRightVec = viewDir.cross(Scene.draggingUpVec);
var p1 = Scene.element.runtime.calcCanvasPos(Scene.unsnappedDragPos.x, Scene.unsnappedDragPos.y, Scene.unsnappedDragPos.z);
var p2 = Scene.element.runtime.calcCanvasPos(Scene.unsnappedDragPos.x + Scene.draggingRightVec.x,
Scene.unsnappedDragPos.y + Scene.draggingRightVec.y,
Scene.unsnappedDragPos.z + Scene.draggingRightVec.z);
var magnificationFactor = 1.0 / Math.abs(p1[0] - p2[0]);
//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();
event.offsetX = event.clientX - rect.left;
event.offsetY = event.clientY - rect.top;
if (Scene.lastMouseX === -1){
Scene.lastMouseX = event.offsetX;
}
if (Scene.lastMouseY === -1){
Scene.lastMouseY = event.offsetY;
}
if (Scene.draggedTransformNode){
X3DOMObject.Marker.drag(event.offsetX - Scene.lastMouseX, event.offsetY - Scene.lastMouseY);
}
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);
Scene.unsnappedDragPos = Scene.unsnappedDragPos.add(offsetUp).add(offsetRight);
$(Scene.draggedTransformNode).attr("translation", Scene.unsnappedDragPos.toString());
var sphere = $(Scene.draggedTransformNode).parent().parent();
var index = parseInt(sphere.attr("id").substr(7));
var c = Data.markers[index];
c.x = Scene.unsnappedDragPos.x;
c.y = Scene.unsnappedDragPos.y;
c.z = Scene.unsnappedDragPos.z;
var azimuth = Math.atan2(c.x,-c.z)*180/Math.PI;
//var initial_heading = Data.camera.heading;
var distance = Math.sqrt(c.x*c.x+c.z*c.z);
var p1_ll = Map.marker._latlng;
var p2_ll = p1_ll.CoordinatesOf(azimuth+INIT_HEADING,distance);
c.latitude = p2_ll.lat;
c.longitude = p2_ll.lng;
c.altitude = c.y;
Map.marker.moveMeasureMarker(p2_ll,index);
}
X3DOMObject.Marker.place = function(x,y,z,id){
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);
}
X3DOMObject.Marker.dehighlight = function(elem){
var color = "0.07 1 0.07";
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(){
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,
y: parseFloat(xyz[1]) || 0,
z: parseFloat(xyz[2]) || 0
});
Data.markers.push(mark);
// Create marker on the scene
new X3DOMObject.Marker(mark.x,mark.y,mark.z);
// Create marker on the map
var azimuth = Math.atan2(mark.x,-mark.z)*180/Math.PI;
var distance = Math.sqrt(mark.x*mark.x+mark.z*mark.z);
Camera.createMeasureMarker(azimuth+INIT_HEADING,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);
});
}
X3DOMObject.MapMarker = {};
X3DOMObject.MapMarker.registerEvents = function(map_mark){
var Camera = Map.marker;
map_mark.on('mouseover',function(){
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 (!this._selected){
X3DOMObject.Marker.dehighlight(elem);
Map.dehighlightMarker(index);
}
}
});
/*
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);
}
});
}
X3DOMObject.displayInfo = function(e){
var elem = Scene.element;
var mouse = x3dom_getXYPosOr(e.clientX,e.clientY,true);
var dist = 1000;
$("#window-info").css({"font-size":"20px"});
if (mouse.d_xz != null){
var dist_msg = "";
var id_msg = "";
if (SETTINGS.moreinfo){
$("#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><table>";
dist_msg += "<tr><th align='center'>d<sub>xz</sub></td><td>"+mouse.d_xz+" m</td></tr>";
dist_msg += "<tr><th align='center'>d<sub>xyz</sub></td><td>"+mouse.d_xyz+" m</td></tr>";
dist_msg += "</table>";
}else{
dist_msg = mouse.d_xz+" m";
}
dist = parseFloat(mouse.d_xz);
}else{
dist_msg = "&infin; m";
}
var msg = "<div>"+dist_msg+"</div>";
Scene.showMessage("window-info",msg);
return dist;
}
X3DOMObject.displayViewInfo = function(e){
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";
var camera = x3dom_getCameraPosOr(true);
// ?!!!
//Map.marker.setAltitude(camera.y);
//Map.marker.setElevation(camera.e*Math.PI/180);
var msg = `
<table>
<tr>
<td></td>
<td colspan='3' align='center'>position, m</td>
<td colspan='3' align='center'>orientation, &deg;</td>
</tr>
<tr>
<th></th>
<th style='width:50px;'>x</th>
<th style='width:50px;'>y</th>
<th style='width:50px;'>z</th>
<th>azimuth</th>
<th>elevation</th>
<th>skew</th>
</tr>
<tr>
<td>mouse</td>
<td>`+mouse.x+`</td>
<td>`+mouse.y+`</td>
<td>`+mouse.z+`</td>
<td>`+mouse.a+`</td>
<td>`+mouse.e+`</td>
<td>`+mouse.s+`</td>
</tr>
<tr>
<td>camera</td>
<td>`+camera.x+`</td>
<td>`+camera.y+`</td>
<td>`+camera.z+`</td>
<td>`+camera.a+`</td>
<td>`+camera.e+`</td>
<td>`+camera.s+`</td>
</tr>
</table>
`;
if (SETTINGS.viewinfo){
Scene.showMessage("window-viewinfo",msg);
}else{
Scene.hideMessage("window-viewinfo");
}
}
// various calcs
function x3dom_getXYPosOr(cnvx,cnvy,round){
var elem = Scene.element;
var x,y,z;
var az,el,sk;
var id;
var dist_xyz = 1000;
var dist_xz = 1000;
var shootRay = elem.runtime.shootRay(cnvx,cnvy);
if (shootRay.pickPosition != null){
var index = Scene.highlighted_marker_index;
if ((index==null)||(Data.markers[index]==undefined)){
x = shootRay.pickPosition.x;
y = shootRay.pickPosition.y;
z = shootRay.pickPosition.z;
}else{
x = Data.markers[index].x;
y = Data.markers[index].y;
z = Data.markers[index].z;
}
dist_xz = Math.sqrt(x*x+z*z);
dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
if (round){
dist_xz.toFixed(2);
dist_xyz.toFixed(2);
}
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;
}
az = Math.atan2(x,-z)*180/Math.PI;
az = (az+INIT_HEADING+360)%360;
el = Math.atan2(y,Math.sqrt(x*x+z*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);
}else{
result.d_xz = dist_xz;
result.d_xyz = dist_xyz;
}
result.id = id;
return result;
}
function x3dom_getCameraPosOr(round){
var elem = Scene.element;
var vm = elem.runtime.viewMatrix().inverse();
var tr = vm.e3();
var x = tr.x;
var y = tr.y;
var z = tr.z;
var R = vm;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
az = (az+INIT_HEADING+360)%360;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11);
if (!round){
return {
x: x,
y: y,
z: z,
a: az,
e: el,
s: sk
};
}else{
return {
x: x.toFixed(2),
y: y.toFixed(2),
z: z.toFixed(2),
a: az.toFixed(1),
e: el.toFixed(1),
s: sk.toFixed(1)
};
}
}
function x3dom_setUpRight(){
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = new x3dom.fields.SFVec3f(0, 1, 0);
var s = mat.e2().cross(up).normalize();
var newup = mat.e2().cross(s).normalize().negate();
//at = from.add(v);
mat = x3dom.fields.SFMatrix4f.lookAt(from, at, newup);
//mat = mat.inverse();
//var m1 = x3dom.fields.SFMatrix4f.translation(from);
//var m1n = x3dom.fields.SFMatrix4f.translation(from.negate());
//mat = m1.mult(mat).mult(m1n);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
Q.setValue(mat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",mat.e3().toString());
viewpoint.attr("centerOfRotation",mat.e3().toString());
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
function x3dom_rotation(delta_a){
/*
* Printing values:
*
* var mat = Scene.element.runtime.viewMatrix().inverse();
* var rotation = new x3dom.fields.Quaternion(0, 0, 1, 0);
* rotation.setValue(mat);
* var translation = mat.e3();
*
*/
var mat = Scene.element.runtime.viewMatrix();
mat = mat.inverse();
//console.log(mat.toString());
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
var q0 = x3dom.fields.Quaternion.axisAngle(up, -delta_a);
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);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
//Q.setValue(newmat.inverse());
Q.setValue(newmat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
viewpoint.attr("position",from.toString());
viewpoint.attr("centerOfRotation",from.toString());
}
// horizontal?
function x3dom_translation(dx,dy,dz){
var mat = Scene.element.runtime.viewMatrix().inverse();
var tr = mat.e3();
var x = tr.x+dx;
var y = tr.y+dy;
var z = tr.z+dz;
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",x+" "+y+" "+z);
viewpoint.attr("centerOfRotation",x+" "+y+" "+z);
}
function x3dom_altelev(alt,elev){
//x3dom_matrix_test();
var mat = Scene.element.runtime.viewMatrix().inverse();
var from = mat.e3();
from.y = alt;
var az = Math.atan2(mat._02,mat._22);
var el = elev;
var sk = Math.atan2(mat._10,mat._11);
var matx = x3dom.fields.SFMatrix4f.rotationX(el);
var maty = x3dom.fields.SFMatrix4f.rotationY(az);
var matz = x3dom.fields.SFMatrix4f.rotationZ(sk);
var matt = x3dom.fields.SFMatrix4f.translation(from);
var newmat = matt.mult(maty).mult(matx).mult(matz);
var Q = new x3dom.fields.Quaternion(0,0,1,0);
Q.setValue(newmat);
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("position",newmat.e3().toString());
viewpoint.attr("centerOfRotation",newmat.e3().toString());
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
function x3dom_matrix_test(){
var viewpoint = $(Scene.element).find("Viewpoint");
console.log("Viewpoint DOM element");
console.log("position: "+viewpoint.attr("position"));
console.log("orientation: "+viewpoint.attr("orientation"));
var mat = Scene.element.runtime.viewMatrix().inverse();
console.log("inversed viewMatrix");
console.log(mat.toString());
var from = mat.e3();
var at = from.subtract(mat.e2());
var up = mat.e1();
console.log("matrix from from-at-up");
var newmat = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
console.log(newmat.toString());
var R = mat;
var az = Math.atan2(R._02,R._22)*180/Math.PI;
//az = (az+INIT_HEADING+360)%360;
//az = (az+360)%360;
var el = -Math.asin(R._12)*180/Math.PI;
var sk = Math.atan2(R._10,R._11);
console.log("Angles:");
console.log("az="+az+" el="+el+" sk="+sk);
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());
}
js/align.js 0 → 100644
View file @ 0d16388e
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){
selected_markers.push(c);
}
}
});
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/help.js 0 → 100644
View file @ 0d16388e
function help_init(){
/*
var help_content = `
<div>
<table>
<tr>
<td>asdfasdfadfasdfasdfasfHelp!</td>
</tr>
</table>
</div>
`;
var help = $("<div>",{id:"help-content"}).css({
display:"none"
}).html(help_content);
*/
var help = $("#help-content");
help.hide();
$("#help_button").on("click",function(){
help.show();
});
help.on('click',function(){
help.hide();
});
}
\ No newline at end of file
js/images/.directory 0 → 100644
View file @ 0d16388e
[Dolphin]
PreviewsShown=true
SortRole=date
Timestamp=2017,5,30,10,40,30
Version=3
ViewMode=1
js/index.js 0 → 100644
View file @ 0d16388e
var Data = {
camera:{},
markers:[],
};
var Scene;
var Map;
var INIT_HEADING = 0;
var SETTINGS = {
'pointer': false,
'highlight': false,
'viewinfo': false,
'moreinfo': false,
'crosshair': false,
'shiftspeed': 0.01
}
$(function(){
parseURL();
title_init();
help_init();
menu_init();
light_init();
});
function title_init(){
var html = $("<div>").html("Demo");
html.css({
position:"absolute",
top: "10px",
left: "50%",
color:"white",
"font-size":"40px",
"font-weight":"bold",
"font-family": '"Helvetica Neue", Helvetica, Arial, sans-serif',
"user-select": "none"
});
$("body").append(html);
}
function light_init(){
$.ajax({
url: "kml/test.kml",
success: function(response){
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,
z: 0,
latitude: latitude || 0,
longitude: longitude || 0,
altitude: altitude || 0,
heading: heading || 0,
tilt: tilt || 0,
roll: roll || 0,
fov: fov || 0,
});
INIT_HEADING = heading;
var element = document.getElementById('x3d_id');
Scene = new X3DOMObject(element,Data,{});
$.getScript("js/x3dom-full.debug.js",function(){
Map = new LeafletObject('leaflet_map',Data,{});
//wait until it parsed the DOM
x3dom.runtime.ready = function(){
map_resize_init();
deep_init();
align_init();
//x3d_initial_camera_placement();
};
});
},
});
}
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;
var xw = $(window).width();
var yw = $(window).height();
var xb = parseInt($("#map_wrapper").css("right"));
var yb = parseInt($("#map_wrapper").css("bottom"));
var w = xw - xm - xb;
var h = yw - ym - yb;
$("#map_wrapper").width(w);
$("#map_wrapper").height(h);
$("#leaflet_map").width(w);
$("#leaflet_map").height(h);
// from some forum, stackoverflow?
setTimeout(function(){Map._map.invalidateSize();}, 100);
}
function deep_init(){
Scene.FoVEvents();
Scene.KeyEvents();
Scene.element.runtime.enterFrame = function(){
// the only <strong> in the document
var progress_element = $(Scene.element).find("strong");
var progress_counter = $(progress_element).html();
progress_counter = progress_counter.split(" ");
cnt = parseInt(progress_counter[1]);
if (!Scene._X3DOM_SCENE_INIT&&(cnt==0)){
//if(Scene._DEBUG){
Scene.initInfoWindow();
Scene.initViewInfoWindow();
Scene.registerShapesEvents();
//}
Scene._X3DOM_SCENE_INIT = true;
x3d_events();
leaf_events();
}
};
}
// inactive
function x3d_initial_camera_placement(){
// Roll compensation
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.
// Roll
var z = new x3dom.fields.SFVec3f(0,0,1);
var qr = x3dom.fields.Quaternion.axisAngle(z,-roll);
var M_roll = qr.toMatrix();
// Tilt
var x = new x3dom.fields.SFVec3f(1,0,0);
var qt = x3dom.fields.Quaternion.axisAngle(x,-tilt);
var M_tilt = qt.toMatrix();
// Heading
var y = new x3dom.fields.SFVec3f(0,1,0);
var qh = x3dom.fields.Quaternion.axisAngle(y,-heading);
var M_heading = qh.toMatrix();
var M = M_heading.mult(M_tilt).mult(M_roll);
// store matrices
Data.camera.Matrices = {
Head: M_heading,
Tilt: M_tilt,
Roll: M_roll,
R: M
};
// set view
var Q = new x3dom.fields.Quaternion(0, 0, 1, 0);
Q.setValue(M.inverse());
var AA = Q.toAxisAngle();
var viewpoint = $(Scene.element).find("Viewpoint");
viewpoint.attr("orientation",AA[0].toString()+" "+AA[1]);
}
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")){
Scene.highlightShape(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);
Scene.dehighlightShape(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);
});
elem.addEventListener('mouseup',function(){
elem.removeEventListener('mousemove',x3d_mouseMove,true);
});
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);
Scene.highlightShape(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{
// hide shadow marker
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();
Scene.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){
var Lm = Camera._measureMarkers[Data.markers.length];
if (Lm!=undefined){
var mark = new X3L({
latitude: Lm._latlng.lat,
longitude: Lm._latlng.lng
});
var p1_ll = Camera._latlng;
var p2_ll = Lm._latlng;
//var azimuth = getAzimuth(p1_ll,p2_ll);
var azimuth = getAzimuth(p1_ll,p2_ll);
var initial_heading = INIT_HEADING;
var angle = azimuth - initial_heading;
var distance = p1_ll.distanceTo(p2_ll);
//console.log("angle from lat lng: "+angle);
mark.x = distance*Math.sin(Math.PI/180*angle);
mark.y = 0;
mark.z = -distance*Math.cos(Math.PI/180*angle);
Data.markers.push(mark);
new X3DOMObject.Marker(mark.x,mark.y,mark.z);
//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);
}
});
}
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;
}
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);
}
function leaf_mousemove_nohc(e){
var Camera = Map.marker;
//old
var p0 = new L.LatLng(Data.camera.latitude,Data.camera.longitude);
var p1 = new L.LatLng(Camera._latlng.lat,Camera._latlng.lng);
Data.camera.latitude = Camera._latlng.lat;
Data.camera.longitude = Camera._latlng.lng;
var dh = Camera._heading - Math.PI/180*Data.camera.heading;
//console.log(Camera._heading);
Data.camera.heading = Camera._heading*180/Math.PI;
var newheading = Data.camera.heading;// - INIT_HEADING;
if ((p0.lat!=p1.lat)||(p0.lng!=p1.lng)){
console.log("translation");
leaf_translation_v1(p0,p1);
}
//leaf_rotation_v1(newheading,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 azimuth = getAzimuth(p1_ll,p2_ll);
//var initial_heading = Data.camera.heading;
var angle = azimuth - INIT_HEADING;
var distance = p1_ll.distanceTo(p2_ll);
mark.x = distance*Math.sin(Math.PI/180*angle);
mark.z = -distance*Math.cos(Math.PI/180*angle);
X3DOMObject.Marker.place(mark.x,mark.y,mark.z,"my-sph-"+index);
}
}
function leaf_translation_v1(p0,p1){
var pi = new L.LatLng(p0.lat,p1.lng);
var dx = p0.distanceTo(pi);
var dy = 0;
var dz = p1.distanceTo(pi);
var dl = p0.distanceTo(p1);
//console.log(dx+" "+dz+" "+dl);
if (p1.lng<p0.lng){
dx = -dx;
}
if (p1.lat<p0.lat){
dz = -dz;
}
var da = Math.atan2(dz,dx);
var A = Math.PI/180*INIT_HEADING;
dx = dl*Math.sin(A-da);
dz = -dl*Math.cos(A-da);
console.log("dx="+dx+" dy="+dy+" dz="+dz+" A="+A+" da="+da);
// translation over map = xz
x3dom_translation(dx,dy,dz)
}
function x3d_mouseMove(){
var Camera = Map.marker;
var initial_heading = Data.camera.heading;
//var initial_heading = INIT_HEADING;
var heading = Scene.getViewDirection();
Map.marker.setHeading(heading+INIT_HEADING);
var d = Scene.getViewTranslation();
var dx;
var dz;
if (Scene.old_view_translation == null){
dx = 0;
dz = 0;
}else{
dx = d.x - Scene.old_view_translation.x;
dz = d.z - Scene.old_view_translation.z;
}
var distance = Math.sqrt(dx*dx+dz*dz);
var angle = 180/Math.PI*Math.atan2(dx,-dz);
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+INIT_HEADING,distance);
Map.marker.setBasePoint(p1);
Map.marker._syncMeasureMarkersToBasePoint();
Data.camera.latitude = p1.lat;
Data.camera.longitude = p1.lng;
Data.camera.heading = heading+INIT_HEADING;
Scene.old_view_translation = d;
}
// http://www.movable-type.co.uk/scripts/latlong.html
// initial bearing
// precision problems?!
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;
}
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 comments
function parseURL(){
var parameters=location.href.replace(/\?/ig,"&").split("&");
for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");
for (var i=1;i<parameters.length;i++) {
switch (parameters[i][0]) {
case "pointer": SETTINGS.pointer = true; break;
case "highlight": SETTINGS.highlight = true; break;
case "viewinfo": SETTINGS.viewinfo = true; break;
case "moreinfo": SETTINGS.moreinfo = true; break;
case "crosshair": SETTINGS.crosshair = true; break;
case "shiftspeed": SETTINGS.shiftspeed = parseFloat(parameters[i][1]); break;
}
}
}
js/index_new.css 0 → 100644
View file @ 0d16388e
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;
}
.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/jquery-3.1.1.js 0 → 100644
View file @ 0d16388e
This source diff could not be displayed because it is too large. You can view the blob instead.
js/leaflet-x3dom.js 0 → 100644
View file @ 0d16388e
/*
*
* 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
};
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;
};
js/leaflet/.directory 0 → 100644
View file @ 0d16388e
[Dolphin]
PreviewsShown=true
SortRole=date
Timestamp=2017,5,23,18,34,26
Version=3
ViewMode=1
js/leaflet/L.extra.js 0 → 100644
View file @ 0d16388e
(function (window, document, undefined) {
"use strict";
//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);
}
}(this,document));
js/leaflet/leaflet-src.js 0 → 100644
View file @ 0d16388e
This source diff could not be displayed because it is too large. You can view the blob instead.
js/leaflet/leaflet-src.map 0 → 100644
View file @ 0d16388e
This source diff could not be displayed because it is too large. You can view the blob instead.
js/leaflet/leaflet.camera-view-marker-controls.js 0 → 100644
View file @ 0d16388e
(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 0 → 100644
View file @ 0d16388e
/*
Leaflet.CameraViewMarker - specific markerwith interactions like rotate and drag
Copyright (C) 2017 Elphel Inc.
License: GPLv3
http://leafletjs.com
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
* 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.
*/
// Reference links:
// * https://github.com/lvoogdt/Leaflet.awesome-markers
// * (ref) https://github.com/ppete2/Leaflet.PolylineMeasure
// * https://github.com/ewoken/Leaflet.MovingMarker/blob/master/MovingMarker.js
// * (not used) https://blog.webkid.io/rarely-used-leaflet-features/
(function (window, document, undefined) {
"use strict";
/*
* Leaflet.CameraViewMarker assumes that you have already included the Leaflet library.
*/
//CircleMarker has everything one need
L.CameraViewMarker = L.CircleMarker.extend({
options:{
heading:0,
// altitude:10,
// elevation:-40,
altitude:0,
elevation:0,
fov:0, // if 0 then do not draw
units:"deg",
draw_xz: true,
draw_fov: true,
h_control: false,
basepoint:{
url: ""
}
},
setHeading: function(param){
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);
var p1 = this._map.latLngToLayerPoint(param);
var dx = p1.x - p0.x;
var dy = p0.y - p1.y;
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();
},
setBasePoint: function(param){
var latlng = param;
var hecs = this.getHCState();
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;
}
}
this._latlng = latlng;
this._updateCameraViewMarker();
},
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
onAdd: function(){
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 = {};
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;
this._initHControl();
}else{
this._altitude = 0;
this._elevation = 0;
}
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_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);
var p_head_cap_b = new L.Point(p_head.x,p_head.y+100);
var p_head_cap_b_ll = this._map.layerPointToLatLng(p_head_cap_b);
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],
//iconSize: [40, 57],
//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/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',
fillColor: 'white',
fillOpacity: 0.1,
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);
}else{
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);
}
}
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);
this._baseCapLineV = false;
this._headCapLineV = false;
this._layerPaint.removeLayer(this._baseCapLineH);
this._layerPaint.removeLayer(this._headCapLineH);
this._baseCapLineH = false;
this._headCapLineH = false;
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],
}).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);
},
_mouseMove: function(e){
this._map.on('click',this._mouseClick,this); // necassary for _dragCircle. If switched on already within _dragCircle an unwanted click is fired at the end of the drag.
},
_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);
},
_mouseUp: function(e){
this._map.dragging.enable();
this._map.off('mousemove',this.setHeading,this);
this._map.off('mousemove',this.setBasePoint,this);
this._map.on ('mousemove',this._mouseMove,this);
this._map.off('mouseup',this._mouseUp,this);
},
_dragCameraViewMarker: 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.setBasePoint,this);
this._map.on('mouseup',this._mouseUp,this);
// prevent image getting grabbed by browser
e.originalEvent.preventDefault();
},
_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 0 → 100644
View file @ 0d16388e
/*
Leaflet.CameraViewMarker - specific marker with interactions like rotate and drag
Copyright (C) 2017 Elphel Inc.
License: GPLv3
http://leafletjs.com
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
* 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.
*/
// Reference plugins:
// * https://github.com/lvoogdt/Leaflet.awesome-markers
// * https://github.com/ppete2/Leaflet.PolylineMeasure
// * https://github.com/ewoken/Leaflet.MovingMarker/blob/master/MovingMarker.js
// * (not used) https://blog.webkid.io/rarely-used-leaflet-features/
(function (window, document, undefined) {
"use strict";
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,
dashArray:"5,5"
}).addTo(this._layerPaint).bringToBack();
//circle
var tmp_point = new L.CircleMarker(latlng,{
color: '#1f1',
fillColor: '#0f3',
weight: 2,
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;
}
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){
this._slidingMarker = new L.CircleMarker(p2_ll,{
color: '#1b1',
fillColor: '#0f3',
weight: 2,
fillOpacity: 0.5,
radius: 5,
}).addTo(this._layerPaint);
this._slidingLine = L.polyline(l_d, {
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();
this._initCVM_M();
},
_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
};
//turn on measure mode
//this._toggleMeasureMode();
},
_registerEvents_M: function(){
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){
if (e.originalEvent.ctrlKey){
this._map._container.style.cursor = "pointer";
}else{
this._map._container.style.cursor = "default";
}
},
_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";
self._map.off('click', self._placeMeasurePoint, self);
}
*/
},
_measureMarkerClick:function(e){
if (e.originalEvent.ctrlKey){
this.removeMeasureMarker(e);
}
},
_syncMeasureMarkersToBasePoint: function(){
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');
});
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/leaflet.css 0 → 100644
View file @ 0d16388e
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
max-width: none !important;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-control-zoom-out {
font-size: 20px;
}
.leaflet-touch .leaflet-control-zoom-in {
font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 24px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #999;
}
.leaflet-popup-scrolled {
overflow: auto;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
margin-top: -1px;
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-clickable {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
js/leaflet/leaflet.js 0 → 100644
View file @ 0d16388e
This source diff could not be displayed because it is too large. You can view the blob instead.
js/menu.js 0 → 100644
View file @ 0d16388e
function menu_init(){
// init checkboxes
for (var setting in SETTINGS){
if (typeof SETTINGS[setting] === 'boolean'){
if (SETTINGS[setting]){
$("#"+setting).prop("checked",true);
}else{
$("#"+setting).prop("checked",false);
}
}else{
//number?
$("#"+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 class1 = $(e.target).hasClass("my-check-box");
var class2 = $(e.target).hasClass("input");
if (!class1&&!class2){
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{
SETTINGS[id] = false;
}
});
crosshair_init();
shiftspeed_init();
}
function crosshair_init(){
if (SETTINGS.crosshair){
$(".crosshair").show();
}
$("#crosshair").on('click',function(){
if (SETTINGS.crosshair){
$(".crosshair").show();
}else{
$(".crosshair").hide();
}
});
}
function shiftspeed_init(){
$('#shiftspeed').on('change',function(e){
$("#navInfo").prop("speed",$(this).val());
$(this).blur();
});
$('#shiftspeed').change();
}
js/x3dom-full.debug.js 0 → 100644
View file @ 0d16388e
This source diff could not be displayed because it is too large. You can view the blob instead.
js/x3dom.css 0 → 100644
View file @ 0d16388e
/*
* X3DOM JavaScript Library
* http://www.x3dom.org
*
* (C)2009 Fraunhofer IGD, Darmstadt, Germany
* Dual licensed under the MIT and GPL
*
* Based on code originally provided by
* Philip Taylor: http://philip.html5.org
*/
X3D, x3d {
position:relative; /* in order to be able to position stat-div within X3D */
float:left; /* float the element so it has the same size like the canvas */
cursor:pointer;
margin: 0;
padding: 0;
border: 1px solid #000;
}
X3D:hover,
x3d:hover,
.x3dom-canvas:hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.x3dom-canvas {
border:none;
cursor:pointer;
cursor:-webkit-grab;
cursor:grab;
width:100%;
height:100%;
float:left;
}
.x3dom-canvas-mousedown {
cursor:-webkit-grabbing;
cursor:grabbing;
}
.x3dom-canvas:focus {
outline:none;
}
.x3dom-progress {
margin: 0;
padding: 6px 8px 0px 26px;
left: 0px;
top: 0px;
position: absolute;
color: #0f0;
font-family: Helvetica, sans-serif;
line-height:10px;
font-size: 10px;
min-width: 45px;
min-height: 20px;
border: 0px;
background-position: 4px 4px;
background-repeat: no-repeat;
background-color: #333;
background-color: rgba(51, 51, 51, 0.9);
z-index: 100;
background-image: url('data:image/gif;base64,R0lGODlhEAAQAPQAADMzM////z4+Po+Pj0pKSsbGxpycnP///7e3t+Hh4XR0dGZmZu7u7oGBgfr6+tLS0qqqqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==');
}
.x3dom-progress.bar span {
position: absolute;
left: 0;
top: 0;
line-height: 20px;
background-color: red;
}
.x3dom-statdiv {
margin: 0;
padding: 0;
right: 10px;
top: 10px;
position: absolute;
color: #0f0;
font-family: Helvetica, sans-serif;
line-height:10px;
font-size: 10px;
width: 75px;
height: 70px;
border: 0px;
}
#x3dom-state-canvas {
margin: 2px;
padding: 0;
right: 0%;
top: 0%;
position: absolute;
}
#x3dom-state-viewer {
position: absolute;
margin: 2px;
padding: 5px;
width: 135px;
top: 0%;
right: 0%;
opacity: 0.9;
background-color: #323232;
z-index: 1000;
font-family: Arial, sans-serif;
color: #C8C8C8;
font-weight: bold;
text-transform: uppercase;
cursor: help;
}
.x3dom-states-head {
display: block;
font-size: 26px;
}
.x3dom-states-rendermode-software {
font-size: 10px;
margin: 0 0 2px 2px;
}
.x3dom-states-rendermode-hardware {
font-size: 10px;
margin: 0 0 2px 2px;
}
.x3dom-states-head2 {
font-size: 10px;
}
.x3dom-states-list {
float: left;
width: 100%;
border-top: 1px solid #C8C8C8;
list-style: none;
font-size: 9px;
line-height: 16px;
margin:0;
padding: 0;
padding-top: 2px;
}
.x3dom-states-item {
width: 100%;
float: left;
}
.x3dom-states-item-title {
float: left;
margin-left: 2px;
}
.x3dom-states-item-value {
float: right;
margin-right: 2px;
}
.x3dom-touch-marker {
display: inline;
padding: 5px;
border-radius: 10px;
position: absolute;
font-family: Helvetica, sans-serif;
line-height:10px;
font-size: 10px;
color: darkorange;
background: cornsilk;
opacity: 0.6;
border: 2px solid orange;
z-index: 200;
}
.x3dom-logContainer {
border: 2px solid olivedrab;
height: 200px;
padding: 4px;
overflow: auto;
white-space: pre-wrap;
font-family: sans-serif;
font-size: x-small;
color: #00ff00;
background-color: black;
margin-right: 10px;
}
.x3dom-nox3d {
font-family: Helvetica, sans-serif;
font-size: 14px;
background-color: #eb7a7a;
padding: 1em;
opacity: 0.75;
}
.x3dom-nox3d p {
color: #fff;
font-size: 14px;
}
.x3dom-nox3d a {
color: #fff;
font-size: 14px;
}
/* self-clearing floats */
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
kml/test.kml 0 → 100644
View file @ 0d16388e
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<PhotoOverlay>
<name>test</name>
<visibility>1</visibility>
<shape>rectangle</shape>
<TimeStamp>
<when>1487451413.967079</when>
</TimeStamp>
<Camera>
<longitude>-111.9328843</longitude>
<latitude>40.7233861</latitude>
<altitude>1305.1</altitude>
<heading>65</heading>
<tilt>90</tilt>
<roll>0</roll>
</Camera>
<Icon>
<href>x3d/1487451413_967079.x3d</href>
</Icon>
<ExtendedData>
<OriginalData>
<longitude>-111.9328843</longitude>
<latitude>40.7233861</latitude>
<altitude>1305.1</altitude>
<heading>65</heading>
<tilt>90</tilt>
<roll>0</roll>
</OriginalData>
</ExtendedData>
</PhotoOverlay>
</Document>
</kml>
test.html 0 → 100644
View file @ 0d16388e
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Scene+Map</title>
<script type='text/javascript' src='js/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>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script>
<script type='text/javascript' src='js/X3DOMObject.js'></script>
<script type='text/javascript' src='js/LeafletObject.js'></script>
<!-- <script type='text/javascript' src='js/LeafletObject.js'></script> -->
<script type='text/javascript' src='js/leaflet-x3dom.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<script type='text/javascript' src='js/menu.js'></script>
<script type='text/javascript' src='js/help.js'></script>
<script type='text/javascript' src='js/align.js'></script>
<link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
<!-- <link rel='stylesheet' type='text/css' href='js/map.css'></link> -->
<link rel='stylesheet' type='text/css' href='js/x3dom.css'></link>
<!-- <link rel='stylesheet' type='text/css' href='js/index.css'></link> -->
<link rel='stylesheet' type='text/css' href='js/index_new.css'></link>
</head>
<body>
<div id='x3d_wrapper'>
<x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false">
<scene>
<navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>
<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>
<group>
<inline name="1487451413_967079" namespacename="1487451413_967079" url="x3d/1487451413_967079.x3d"/>
</group>
<group>
<inline name="back" namespacename="back" url="x3d/background.x3d"/>
</group>
</scene>
</x3d>
</div>
<div id='map_wrapper'>
<div id="leaflet_map"></div>
</div>
<div id='crosshair_h' class='crosshair'></div>
<div id='crosshair_v' class='crosshair'></div>
<div id='help_wrapper'>
<div id='menu_button'></div>
<div id='help_button'>?</div>
<!--<div id='align_button'></div>-->
</div>
<div id='info-wrapper'>
<div id='window-info'></div>
<div id='window-viewinfo'></div>
</div>
<div id='menu-content'>
<div>
<h2>Settings</h2>
<table>
<tr>
<td>Show view info (x, y, z, azimuth, elevation, skew)</td>
<td><input id='viewinfo' type='checkbox' class='my-check-box' /></td>
</tr>
<tr>
<td>Show more info (hitting ray: id, x, y, z, d<sub>xz</sub>, d<sub>xyz</sub>)</td>
<td><input id='moreinfo' type='checkbox' class='my-check-box' /></td>
</tr>
<tr>
<td>Show crosshair</td>
<td><input id='crosshair' type='checkbox' class='my-check-box' /></td>
</tr>
<tr>
<td>Show pointer marker (green sphere over 3D scene)</td>
<td><input id='pointer' type='checkbox' class='my-check-box' /></td>
</tr>
<tr>
<td>Highlight 3D elements on mouse over</td>
<td><input id='highlight' type='checkbox' class='my-check-box' /></td>
</tr>
<tr>
<td>View's parallel shift speed</td>
<td><input id='shiftspeed' type='text' class='input' /></td>
</tr>
<tr>
<td><button>Close</button></td>
</tr>
</table>
</div>
</div>
<div id='help-content'>
<div>
<h2>3D Scene + Map</h2>
<h3 style='color:rgba(200,200,255,1);'>Map</h3>
<table>
<tr>
<td><b>ctrl + left click</b></td>
<td>
<ul>
<li>create markers, relative height = 0</li>
<li>remove markers</li>
</ul>
</td>
</tr>
<tr>
<td><b>draggable objects (global XZ)</b></td>
<td>
<ul>
<li>markers</li>
<li>camera base (green)</li>
<li>heading crosshair (white)</li>
</ul>
</td>
</tr>
</table>
<h3 style='color:rgba(200,200,255,1);'>Scene</h3>
<table>
<tr>
<td><b>ctrl + left click</b></td>
<td>
<ul>
<li>create markers, relative height = surface hitting point height</li>
<li>remove markers</li>
</ul>
</td>
</tr>
<tr>
<td><b>mouse wheel (scroll)</b></td>
<td>
<ul>
<li>change field of view (= camera focal length)</li>
</ul>
</td>
</tr>
<tr>
<td><b>mouse wheel (drag)</b></td>
<td>
<ul>
<li>move camera over its XY (= parallel shift)</li>
</ul>
</td>
</tr>
<tr>
<td><b>draggable objects (camera XY)</b></td>
<td>
<ul>
<li>markers only</li>
</ul>
</td>
</tr>
<tr>
<td><button>Close</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
x3d/axes.x3d 0 → 100644
View file @ 0d16388e
<?xml version="1.0" encoding="UTF-8"?>
<x3d profile="Interchange" version="3.3">
<Scene>
<group>
<transform translation='0 0 1'>
<transform translation='5 0 0' rotation='0 0 1 1.57079632679489661923'>
<shape>
<appearance>
<material diffuseColor='1 0 0' transparency='0.0'></material>
</appearance>
<Cylinder DEF="cylinder" radius="0.1" height="10.0" />
</shape>
</transform>
<transform translation='0 5 0' rotation='0 0 0 0'>
<shape>
<appearance>
<material diffuseColor='0 1 0' transparency='0.0'></material>
</appearance>
<Cylinder DEF="cylinder" radius="0.1" height="10.0" />
</shape>
</transform>
<transform translation='0 0 5' rotation='1 0 0 1.57079632679489661923'>
<shape>
<appearance>
<material diffuseColor='0 0 1' transparency='0.0'></material>
</appearance>
<Cylinder DEF="cylinder" radius="0.1" height="10.0" />
</shape>
</transform>
</transform>
</group>
</Scene>
</x3d>
\ No newline at end of file
x3d/background.x3d 0 → 100644
View file @ 0d16388e
<?xml version="1.0" encoding="UTF-8"?>
<x3d profile="Interchange" version="3.3">
<Scene>
<Background
id="Background"
class="Background"
backUrl= "background_side.jpeg"
bottomUrl="background_floor.jpeg"
frontUrl= "background.jpeg"
leftUrl= "background_side.jpeg"
rightUrl= "background_side.jpeg"
topUrl= "background_sky.jpeg">
</Background>
</Scene>
</x3d>
\ No newline at end of file
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