edit mode on/off and errors displaying

js/leaflet/leaflet.camera-view-marker-controls-location.js

@@ -9,10 +9,14 @@
             var name = "leaflet-control-heel";
 
             var div = L.DomUtil.create('div', name+' leaflet-bar');
+            div.id = "location_control";
 
             L.DomEvent.disableClickPropagation(div);
 
-            var title = "Camera approximate location control";
+            var title = [
+              'Camera approximate heading and location control.',
+              'Move the base marker around and rotate.'
+            ].join('\n');
 
             //var label = "&#9760";
             //var label = "&#128681";

js/leaflet_init.js

@@ -119,10 +119,14 @@ LeafletObject.prototype.drawCamera = function(){
         fov: this.fov,
         draw_xz: false,
         h_control: true,
-        l_control: SETTINGS.edit,
+        l_control: true,
         id: "basecircle"
     }).addTo(this._map);
 
+    // the id is buried in the leaflet plugin
+    $("#location_control").addClass("edit");
+    controls_showhide();
+
 }
 
 LeafletObject.prototype.highlightMarker = function(index){

js/ui.css

@@ -255,6 +255,16 @@ html, body, #x3d_wrapper {
     text-align:center;
 }
 
+#window-error{
+    z-index: 10;
+    background: rgba(256,256,256,1);
+    border: 0px solid rgba(100,100,100,0.5);
+    border-radius: 1px;
+    color: red;
+    font-size: 16px;
+    margin-top: 2px;
+}
+
 .input{
     text-align: right;
     width: 100px;

js/ui_align.js

+/*
+
+  Copyright (C) 2017 Elphel Inc.
+
+  License: GPL-3.0
+
+  https://www.elphel.com
+
+*/
+/**
+ * @file -
+ * @brief -
+ *
+ * @copyright Copyright (C) 2017 Elphel Inc.
+ * @author Oleg Dzhimiev <oleg@elphel.com>
+ *
+ * @licstart  The following is the entire license notice for the
+ * JavaScript code in this page.
+ *
+ *   The JavaScript code in this page is free software: you can
+ *   redistribute it and/or modify it under the terms of the GNU
+ *   General Public License (GNU GPL) as published by the Free Software
+ *   Foundation, either version 3 of the License, or (at your option)
+ *   any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ *   without even the implied warranty of MERCHANTABILITY or FITNESS
+ *   FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ *   As additional permission under GNU GPL version 3 section 7, you
+ *   may distribute non-source (e.g., minimized or compacted) forms of
+ *   that code without the copy of the GNU GPL normally required by
+ *   section 4, provided you include this license notice and a URL
+ *   through which recipients can access the Corresponding Source.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
 
 function align_init(){
 
@@ -23,6 +59,7 @@ function check_markers(){
 
   var c1,c2;
   var result = true;
+  var msg = [];
 
   for(var i=0;i<Data.markers.length;i++){
 
@@ -30,17 +67,22 @@ function check_markers(){
     c2 = Data.markers[i].d_x3d;
 
     if (c1.toString().indexOf("drag")!=-1){
-      console.log("error: marker "+i+": drag over map. Mouse over shows a marker info.");
+      msg.push("error: marker "+i+": drag over map. Mouse over shows a marker info.");
+      //console.log("error: marker "+i+": drag over map. Mouse over shows a marker info.");
       result = false;
     }
 
     if (c2.toString().indexOf("drag")!=-1){
-      console.log("error: marker "+i+": drag over 3D scene. Mouse over shows a marker info.");
+      msg.push("error: marker "+i+": drag over 3D scene. Mouse over shows a marker info.");
       result = false;
     }
 
   }
 
+  if (msg.length!=0){
+    ui_showMessage("window-error",msg.join("<br/>"));
+  }
+
   return result;
 
 }
@@ -53,19 +95,24 @@ function x3dom_align_GN(){
   // need at least 3 points
   if (Data.markers != undefined){
     if (Data.markers.length<3){
-        console.log("Alignment error: place at least 3 points");
+        var msg = "Alignment error: place at least 3 markers";
+        ui_showMessage("window-error",msg);
         return -1;
     }
   }else{
-    console.log("Alignment error: place at least 3 points");
+    var msg = "Alignment error: place at least 3 markers";
+    ui_showMessage("window-error",msg);
     return -1;
   }
 
   if (!check_markers()){
-    console.log("Alignment error: marker has not been moved over 3D or Map");
+    //var msg = "Alignment error: marker has not been moved over 3D or Map";
+    //ui_showMessage("window-error",msg);
     return -2;
   }
 
+  ui_hideMessage("window-error");
+
   // initial approximation:
   var x0 = Data.camera.kml.latitude;
   var y0 = Data.camera.kml.longitude;

js/ui_init.js

@@ -58,7 +58,7 @@ var SETTINGS = {
     'path'   : "1487451413_967079",
     'version': "v1",
     'experimental': false,
-    'edit': true,
+    'edit': false,
     'files': {
       'x3d':"",
       'x3d_background':"",
@@ -99,8 +99,9 @@ $(function(){
     parseURL();
 
     SETTINGS.files.x3d = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";
-    SETTINGS.files.x3d_background = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+"-texture-bgnd-ext.jpeg"
-    SETTINGS.files.kml = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.path+".kml";
+    SETTINGS.files.x3d_background = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+"-texture-bgnd-ext.jpeg";
+    // always reload kml
+    SETTINGS.files.kml = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.path+".kml?"+Date.now();
 
     title_init();
     help_init();

js/ui_menu.js

@@ -51,9 +51,7 @@ function menu_init(){
         }
     }
 
-    if (!SETTINGS.experimental){
-      $(".experimental").hide();
-    }
+    controls_showhide();
 
     // init options menu
     var menu = $("#menu-content");
@@ -85,17 +83,17 @@ function menu_init(){
 
     });
 
-    crosshair_init();
+    $("#window-error").on('click',function(){
+      $(this).hide();
+    });
 
+    crosshair_init();
     shiftspeed_init();
-
     marker_size_color_init();
-
     reset_view_init();
-
     align_init();
-
     work_with_kml_init();
+    editmode_init();
 }
 
 function crosshair_init(){
@@ -159,3 +157,31 @@ function work_with_kml_init(){
     });
 
 }
+
+function editmode_init(){
+
+  // the id is buried in the leaflet plugin
+  $("#location_control").addClass("edit");
+
+  $("#edit").on('change',function(){
+    SETTINGS.edit = $(this).prop("checked");
+    controls_showhide();
+  });
+
+}
+
+function controls_showhide(){
+
+    if (!SETTINGS.experimental){
+      $(".experimental").hide();
+    }else{
+      $(".experimental").show();
+    }
+
+    if (!SETTINGS.edit){
+      $(".edit").hide();
+    }else{
+      $(".edit").show();
+    }
+
+}

js/x3dom_init.js

@@ -2,7 +2,7 @@
 
   Copyright (C) 2017 Elphel Inc.
 
-  License: GPLv3
+  License: GPL-3.0
 
   https://www.elphel.com
 

test.html

@@ -76,6 +76,7 @@ Instructions:
         <div id='window-info'></div>
         <div id='window-markinfo'></div>
         <div id='window-viewinfo'></div>
+        <div id='window-error'></div>
     </div>
     <div id='menu-content'>
         <div>
@@ -126,6 +127,10 @@ Instructions:
                 <tr>
                     <td>&nbsp;</td>
                 </tr>
+                <tr>
+                    <td title='Adjust initial location and heading'>Edit mode</td>
+                    <td><input id='edit' type='checkbox' class='my-check-box donothide' /></td>
+                </tr>
                 <tr class='edit'>
                     <td>
                       Initial location and heading:
@@ -135,9 +140,6 @@ Instructions:
                       <button id='savekml' class='ic donothide' title='save'><img src='js/images/ic_file_upload_black_48dp_1x.png' class='icim donothide'/></button>
                     </td>
                 </tr>
-                <tr>
-                    <td>&nbsp;</td>
-                </tr>
                 <tr class='experimental'>
                     <td>
                       <button id='align_0' class='donothide'>Align0</button>