first map layout ready #2

localdevices · Jan 28, 2025 · 1a81272 · 1a81272
1 parent 3df3217
commit 1a81272
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 48 deletions.
diff --git a/dashboard/README.md b/dashboard/README.md
@@ -21,6 +21,7 @@ npm install dotenv  # for setting environment variables
 npm install react-icons
 npm install react-zoom-pan-pinch
 npm install react-draggable
+npm install proj4
 
 # Start dev server, ensuring the API url is added as environment variable
 VITE_API_BASE_URL="http://<name-of-server>:<port-of-server>" npm run dev

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -15,7 +15,9 @@
     "@xterm/xterm": "^5.5.0",
     "axios": "^1.7.9",
     "dotenv": "^16.4.7",
+    "epsg-index": "^2.0.0",
     "leaflet": "^1.9.4",
+    "proj4": "^2.15.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",

diff --git a/dashboard/src/App.css b/dashboard/src/App.css
@@ -7,13 +7,20 @@
 .app-container {
   display: flex;
   flex-direction: column; /* Stack Navbar, Main Content, and Footer */
+  margin: 0;
+  padding: 0;
   height: 100vh; /* Ensure the container fills the entire viewport */
+  width: 100%;
   overflow: hidden; /* prevent body from scrolling */
+  box-sizing: border-box;
+
 }
 .main-content {
-  flex: 1; /* This makes the main content area take up the remaining space */
+  flex: 1 1 auto; /* This makes the main content area take up the remaining space */
   overflow-y: auto; /* scrollable with overflowing content */
-  padding: 1rem; /* Optional: Add some padding */
+  position: relative;
+  padding: 1rem 1rem; /* Optional: Add some padding */
+  height: 100%;
 }
 .btn {
   background-color: #0a4777;

diff --git a/dashboard/src/nav/Footer.css b/dashboard/src/nav/Footer.css
@@ -1,4 +1,5 @@
 .footer {
+  flex: 0 0 auto;
   background-color: #0a4777; /* Consistent color */
   color: white;
   text-align: center;

diff --git a/dashboard/src/nav/Navbar.css b/dashboard/src/nav/Navbar.css
@@ -3,12 +3,13 @@
 /* Navbar Styles */
 .navbar {
     display: flex;
+    flex: 0 0 auto;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 20px;
+    padding: 0px 0px;
     background-color: #0a4777;
     color: white;
-    height: 70px;
+    height: 60px;
 }
 
 .navbar-toggler {

diff --git a/dashboard/src/proj-db.json b/dashboard/src/proj-db.json
@@ -0,0 +1,3 @@
+{
+  "28992": "+proj=sterea +lat_0=52.1561605555556 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725 +units=m +no_defs +type=crs"
+}
diff --git a/dashboard/src/views/calibration.css b/dashboard/src/views/calibration.css
@@ -1,9 +1,10 @@
 .tabbed-form-container {
-  margin: 20px;
-  display: flex;
+  display: block;
+  position: relative;
   flex-direction: column;
-  align-items: stretch;
-
+  max-height: 100%;
+  box-sizing: border-box;
+  margin: 0px;
 }
 
 .tabbed-layout {
@@ -12,34 +13,56 @@
   margin-bottom: 10px;
 }
 
-.tabs-column {
+/* tab row layout */
+.tabs-row {
   display: flex;
-  flex-direction: column;
-  width: 200px;
-  background-color: #f9f9f9;
-  border-right: 1px solid #ccc;
+  justify-content: start; /* Align tabs to the left */
+  padding: 5px;
+  background-color: #f8f9fa; /* Light background for tabs row */
+  border-bottom: 2px solid #ccc; /* Underline divider */
 }
 
-.tabs-column button {
-  padding: 15px 10px;
-  text-align: left;
-  background-color: transparent;
-  border: none;
+/* Style for individual tabs */
+.tabs-row button {
+  border: 0px solid #ccc;
+  border-radius: 5px 5px 0 0; /* Rounded top corners */
+  padding: 10px 20px;
+  margin-right: 5px; /* Space between tabs */
+  background: #e9ecef; /* Default background color */
+  color: #000;
   cursor: pointer;
-  border-bottom: 1px solid #ccc;
-  font-size: 16px;
-  width: 100%; // button span over the entire width of the
+  transition: all 0.3s ease;
+  font-size: 13px;
 }
 
-.tabs-column button.active-tab {
-  background-color: #007bff;
-  color: white;
-  font-weight: bold;
+/* Hover effect for tabs */
+.tabs-row button:hover {
+  background: #d6dade; /* Slightly darker hover color */
 }
 
-.tab-content {
+/* Active tab styling */
+.tabs-row .active-tab {
+  background: #fff; /* Active tab matches content background */
+  border-bottom: 2px solid white; /* Matches the background */
+  font-weight: bold; /* Highlight active tab with bold text */
+}
+
+
+
+/* .tab-content {
   flex: 1;
   padding: 0px;
+} */
+
+.tab-content {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  position: relative;
+  height: 100%;
+  padding: 0px;
+  background: #fff;
+  /*border: 1px solid #ccc;
+  /*border-radius: 0 5px 5px 5px; /* Rounded bottom corners (Excel style) */
 }
 
 .img-calibration {

diff --git a/dashboard/src/views/calibration.jsx b/dashboard/src/views/calibration.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import VideoTab from './calibrationTabs/videoTab'
 import XYZWidget from './calibrationTabs/XyzWidget';
+import MapTab from './calibrationTabs/mapTab';
 import '../nav/Navbar.css'
 import './calibration.css'; // Ensure the styles reflect the updated layout.
 
@@ -12,7 +13,7 @@ const Calibration = () => {
   const [nextId, setNextId] = useState(1);  // widget ids increment automatically
   const [dots, setDots] = useState([]); // Array of { x, y, id } objects
   const [GCPsVisible, setGCPsVisible] = useState(false); // State to toggle GCP menu right-side
-
+  const [epsgCode, setEpsgCode] = useState(4326);
 
   const [formData, setFormData] = useState({
     video: '',
@@ -82,10 +83,8 @@ const Calibration = () => {
     {GCPsVisible && <div className="sidebar-overlay" onClick={toggleMenu}></div>}
       <h1>Camera calibration</h1>
 
-      {/* Form container */}
-      <form onSubmit={handleSubmit} className="tabbed-layout">
-        {/* Tabs column */}
-        <div className="tabs-column">
+        {/* Tabs row */}
+        <div className="tabs-row">
           <button
             className={activeTab === 'video' ? 'active-tab' : ''}
             onClick={(e) => {
@@ -137,18 +136,14 @@ const Calibration = () => {
             </div>
           )}
           {activeTab === 'map' && (
-            <div>
-              <label>Map view</label>
-              <textarea
-                value={formData.map}
-                onChange={(e) =>
-                  handleInputChange('map', e.target.value)
-                }
-              ></textarea>
-            </div>
+            <MapTab
+              epsgCode={epsgCode}
+              widgets={widgets}
+              selectedWidgetId={selectedWidgetId}
+              updateWidget={updateWidget}
+            />
           )}
         </div>
-      </form>
       {/* Right-side button to toggle the menu */}
       <button
         onClick={toggleMenu}
@@ -175,9 +170,20 @@ const Calibration = () => {
         <img src="./public/orc_favicon.svg" alt="ORC Logo" width="30" height="30" className="d-inline-block align-text-top"/>
         {' '} GCPs
       </a>
+      <hr/>
       <div>
-{/*       <div className="tabs-column" style={{width:"300px"}}> */}
-{/*       <div style={{ flex: 1 }}> */}
+        {/* CRS Input */}
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="epsgCode" style={{ marginRight: '10px' }}>Coordinate reference system (e.g. EPSG code or Proj4 string):</label>
+          <input
+            type="text"
+            id="epsgCode"
+            value={epsgCode}
+            onChange={(e) => setEpsgCode(e.target.value)}
+            placeholder="4326"
+            style={{ width: '300px' }}
+          />
+        </div>
 
           <button onClick={addWidget} className="active-tab">Add GCP</button>
           {widgets.map((widget) => (