add function map viewer

www/index.html

@@ -1038,14 +1038,31 @@
 
               <div class="mapEditorCanvasWrap" id="mapEditorCanvasWrap">
                 <div class="mapEditorCanvasTip" id="mapEditorCanvasTip" role="status" data-i18n="maps.editor.canvasTip">Drag the map to move your view or use the zoom-in and -out buttons to zoom.</div>
-                <div class="mapEditorViewport">
+                <!-- Layer 1: View space — pan/zoom on canvasInner only -->
+                <div class="mapEditorViewport" id="mapEditorViewport">
                   <div class="mapEditorCanvasInner" id="mapEditorCanvasInner">
-                    <div class="mapEditorSheet" id="mapEditorSheet">
-                      <img id="mapEditorImage" class="mapEditorImage" alt="" hidden />
-                      <div id="mapEditorEmpty" class="mapEditorEmpty" hidden data-i18n="maps.editor.noData">No map data — open ⋮ menu to upload a PNG.</div>
+                    <!-- Layer 2: Image space — floor plan pixels 1:1 (20 px/m at res 0.05) -->
+                    <div class="mapEditorImageLayer" id="mapEditorImageLayer">
+                      <div class="mapEditorSheet" id="mapEditorSheet">
+                        <div class="mapEditorSheetGrid" id="mapEditorSheetGrid" aria-hidden="true"></div>
+                        <img id="mapEditorImage" class="mapEditorImage" alt="" draggable="false" hidden />
+                        <div id="mapEditorOrigin" class="mapEditorOrigin" hidden aria-hidden="true">
+                          <span class="mapEditorOriginAxis mapEditorOriginAxis--x" aria-hidden="true"></span>
+                          <span class="mapEditorOriginAxis mapEditorOriginAxis--y" aria-hidden="true"></span>
+                          <span class="mapEditorOriginDot" aria-hidden="true"></span>
+                          <span class="mapEditorOriginLabel" id="mapEditorOriginLabel"></span>
+                        </div>
+                        <div id="mapEditorEmpty" class="mapEditorEmpty" hidden data-i18n="maps.editor.noData">No map data — open ⋮ menu to upload a PNG.</div>
+                      </div>
                     </div>
                   </div>
                 </div>
+                <!-- Layer readout: view | image px | world m -->
+                <div class="mapEditorStatusBar" id="mapEditorStatusBar" aria-live="polite">
+                  <span class="mapEditorStatusItem mapEditorStatusItem--view" id="mapEditorStatusView">View —</span>
+                  <span class="mapEditorStatusItem mapEditorStatusItem--image" id="mapEditorStatusImage">Image —</span>
+                  <span class="mapEditorStatusItem mapEditorStatusItem--world" id="mapEditorStatusWorld">World —</span>
+                </div>
               </div>
             </div>
 
@@ -1152,21 +1169,21 @@
                 <div class="mapsMirFieldRow">
                   <label class="mapsMirField">
                     <span class="mapsMirFieldLabel" data-i18n="maps.settings.resolution">Resolution (m/px)</span>
-                    <input type="number" id="mapSettingsResolution" step="0.001" min="0.001" />
+                    <input type="number" id="mapSettingsResolution" step="any" min="0.001" />
                   </label>
                   <label class="mapsMirField">
                     <span class="mapsMirFieldLabel" data-i18n="maps.settings.originX">Origin X</span>
-                    <input type="number" id="mapSettingsOriginX" step="0.01" />
+                    <input type="number" id="mapSettingsOriginX" step="any" />
                   </label>
                 </div>
                 <div class="mapsMirFieldRow">
                   <label class="mapsMirField">
                     <span class="mapsMirFieldLabel" data-i18n="maps.settings.originY">Origin Y</span>
-                    <input type="number" id="mapSettingsOriginY" step="0.01" />
+                    <input type="number" id="mapSettingsOriginY" step="any" />
                   </label>
                   <label class="mapsMirField">
                     <span class="mapsMirFieldLabel" data-i18n="maps.settings.originYaw">Origin yaw</span>
-                    <input type="number" id="mapSettingsOriginYaw" step="0.01" />
+                    <input type="number" id="mapSettingsOriginYaw" step="any" />
                   </label>
                 </div>
                 <div class="mapsMirDialogFooter">
@@ -1176,12 +1193,72 @@
               </form>
             </dialog>
 
+            <dialog id="mapUploadConfirmDialog" class="mapsMirDialog">
+              <div class="mapsMirDialogPanel">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.uploadConfirm.title">Overwrite map?</h2>
+                <p id="mapUploadConfirmText" class="mapsMirDialogText"></p>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapUploadConfirmNoBtn" data-i18n="common.no">No</button>
+                  <button type="button" class="mapsMirBtn mapsMirBtn--green" id="mapUploadConfirmYesBtn" data-i18n="maps.uploadConfirm.yes">Overwrite</button>
+                </div>
+              </div>
+            </dialog>
+
+            <dialog id="mapUploadMetaDialog" class="mapsMirDialog">
+              <form id="mapUploadMetaForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.uploadMeta.title">Map metadata</h2>
+                <p class="mapsMirDialogText" data-i18n="maps.uploadMeta.hint">Enter ROS map_server parameters or import a .yaml file.</p>
+                <button type="button" class="mapsMirLinkBtn" id="mapUploadImportYamlBtn" data-i18n="maps.uploadMeta.importYaml">Import YAML file…</button>
+                <input type="file" id="mapUploadYamlInput" accept=".yaml,.yml,text/yaml" hidden />
+                <div class="mapsMirFieldRow">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.settings.resolution">Resolution (m/px)</span>
+                    <input type="number" id="mapUploadResolution" step="any" min="0.001" required />
+                  </label>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.uploadMeta.negate">Negate</span>
+                    <input type="number" id="mapUploadNegate" step="1" min="0" max="1" />
+                  </label>
+                </div>
+                <div class="mapsMirFieldRow">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.settings.originX">Origin X</span>
+                    <input type="number" id="mapUploadOriginX" step="any" required />
+                  </label>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.settings.originY">Origin Y</span>
+                    <input type="number" id="mapUploadOriginY" step="any" required />
+                  </label>
+                </div>
+                <div class="mapsMirFieldRow">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.settings.originYaw">Origin yaw</span>
+                    <input type="number" id="mapUploadOriginYaw" step="any" />
+                  </label>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.uploadMeta.occupiedThresh">Occupied thresh</span>
+                    <input type="number" id="mapUploadOccupiedThresh" step="any" min="0" max="1" />
+                  </label>
+                </div>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.uploadMeta.freeThresh">Free thresh</span>
+                  <input type="number" id="mapUploadFreeThresh" step="any" min="0" max="1" />
+                </label>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapUploadMetaCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--green" data-i18n="maps.uploadMeta.continue">Continue</button>
+                </div>
+              </form>
+            </dialog>
+
             <dialog id="mapActivateDialog" class="mapsMirDialog">
-              <h2 class="mapsMirDialogTitle" data-i18n="maps.activateDialog.title">Activate map?</h2>
-              <p id="mapActivateDialogText" class="mapsMirDialogText"></p>
-              <div class="mapsMirDialogFooter">
-                <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapActivateNoBtn" data-i18n="common.no">No</button>
-                <button type="button" class="mapsMirBtn mapsMirBtn--green" id="mapActivateYesBtn" data-i18n="common.yes">Yes</button>
+              <div class="mapsMirDialogPanel">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.activateDialog.title">Activate map?</h2>
+                <p id="mapActivateDialogText" class="mapsMirDialogText"></p>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapActivateNoBtn" data-i18n="common.no">No</button>
+                  <button type="button" class="mapsMirBtn mapsMirBtn--green" id="mapActivateYesBtn" data-i18n="common.yes">Yes</button>
+                </div>
               </div>
             </dialog>
 
@@ -1645,6 +1722,8 @@ GET /api/v2.0.0/status</pre>
     <script src="/auth.js"></script>
     <script src="/nav.js"></script>
     <script src="/missions.js"></script>
+    <script src="/map-geo.js"></script>
+    <script src="/map-yaml.js"></script>
     <script src="/maps.js"></script>
     <script src="/map-editor.js"></script>
     <script src="/topbar.js"></script>