previous human label

frontend/src/components/DrawingExistingMarkers.jsx

@@ -6,6 +6,10 @@ function DrawExistingMarkers (props){ //imageSize and markerList
     let currentOffsetY
     let currentConfidence
 
+
+    console.log('imageLeft' + props.imagePosition.left)
+    console.log('imageTop' + props.imagePosition.top)
+
     let currentOffsetArray = props.markerList.map((item) =>{
         currentOffsetX = Math.round((item.x/props.imageSize.originalWidth)*props.imageSize.viewWidth)+props.imagePosition.left
         currentOffsetY = Math.round((item.y/props.imageSize.originalHeight)*props.imageSize.viewHeight)+props.imagePosition.top

frontend/src/components/Image.jsx

@@ -16,8 +16,10 @@ function Image (props) {
   console.log('IN IMAGE COMPONENT')
   console.log(props.existingLabel)
 
+  // to examine if there is an existing human labelled json file, if there is, we will merge the list to the markerlist in the useEffect when there is a change in props, if not we will declare the list as []
   let existingLabel = props.existingLabel.length>0 ? props.existingLabel : [] 
-  console.log(existingLabel)
+  let imageWidth = props.existingLabel.length>0 ? 2048 : 0 //not ideal solution as I am hardcoding it but this is to make it work but may be able to get backend to send the dimension, as first render for detecting image original size does not work here
+  let imageHeight = props.existingLabel.length>0 ? 1536 : 0 //not ideal solution as I am hardcoding it but this is to make it work but may be able to get backend to send the dimension, as first render for detecting image original size does not work here
 
   //State for x, y coordinates based on the original image 
   const [coordinate, setCoordinate] = useState({
@@ -29,17 +31,34 @@ function Image (props) {
   //State for array containing objects each of which recording one marker/tag. WARNING the LAST tag may not be recorded due to the useState
   const [markerList, setMarkerList] = useState([])
 
-  //useEffect(() => {
-  //  setMarkerList(props.existingLabel || []); // Set to empty array if existingLabel is not provided
-  //}, [props.existingLabel]); 
+    //State for recording the original width/height of the image and view width/height. THIS might not need to be STATE
+  const [imageSize, setImageSize] = useState({
+    originalWidth : 0,
+    originalHeight : 0,
+    viewWidth : 683,
+    viewHeight : 512
+  })
+
+  //State to determine if ML marker to be shown
+  const [showRetrodetect, setShowRetrodetect] = useState(0)
+
+  // for zooming
+  let scale = 1
+  let scaleZoomIn = 1.2
+  let scaleZoomOut = 0.8
+
+  const [imageNewPosition, setImageNewPosition] = useState({
+      left: 0,
+      top: 0,
+  })
 
   useEffect (() => { //reset every initial state when image changes
 
-    setMarkerList([])
+    setMarkerList(existingLabel)
 
     setImageSize({
-      originalWidth : 0,
-      originalHeight : 0,
+      originalWidth : imageWidth,
+      originalHeight : imageHeight,
       viewWidth : 683,
       viewHeight : 512
     })
@@ -56,29 +75,7 @@ function Image (props) {
 
   }, [props])
 
-  //State for recording the original width/height of the image and view width/height. THIS might not need to be STATE
-  const [imageSize, setImageSize] = useState({
-    originalWidth : 0,
-    originalHeight : 0,
-    viewWidth : 683,
-    viewHeight : 512
-  })
-
-  //State to determine if ML marker to be shown
-  const [showRetrodetect, setShowRetrodetect] = useState(0)
-
-  // for zooming
-  let scale = 1
-  let scaleZoomIn = 1.2
-  let scaleZoomOut = 0.8
-
-  const [imageNewPosition, setImageNewPosition] = useState({
-      left: 0,
-      top: 0,
-  })
-  // for zooming in
-
-  useEffect(() => {
+  useEffect(() => { // when there is a window resize
     const handleResize = () => {
       const imageCurrent = imgRef.current; //so that it will still work when clickHandler has not been called
 
@@ -139,7 +136,8 @@ function Image (props) {
     console.log('Offset X & Y', e.nativeEvent.offsetX, e.nativeEvent.offsetY)
     console.log('client X & client Y', e.clientX, e.clientY)
     console.log('original pixel x & y', originalPixelX, originalPixelY)
-
+    console.log('image.top', imageRect.top )
+    console.log('image.left', imageRect.left )
 
 
     setImageSize({
@@ -242,6 +240,7 @@ function Image (props) {
             left: x
             }
         ) 
+
       }
     }
 
@@ -278,9 +277,8 @@ function Image (props) {
       <>
         <h1>{coordinate.x}, {coordinate.y}</h1>
         <h2>Confidence {coordinate.confidence}</h2>
-        <SaveMarkers markerList={markerList}/>
+        <SaveMarkers markerList={markerList} photo={props.photo}/>
         <button onClick={RetrodetectController}>Show Retrodetect labels</button>
-        <p>{props.existingLabel}</p>
         <div className='ImageContainer'>
             <img ref={imgRef} src={props.image} onClick={clickHandler} alt='' style={{
                 height: `${imageSize.viewHeight}px`,

frontend/src/components/PhotoSelection.jsx

@@ -6,6 +6,7 @@ Display a drop-down list of photos to be shown.
 */
 function PhotoSelection(props) {
     const [currentPhoto, setCurrentPhoto] = useState('')
+    const [photoPath, setPhotoPath] = useState('')
     const [humanLabel, setHumanLabel] = useState([])
     /*
     List the photos for users to choose from
@@ -19,7 +20,7 @@ function PhotoSelection(props) {
     function photoFetcher(e) {
         let selectedPhoto = e.target.value;
 
-        console.log(selectedPhoto);
+        setPhotoPath(selectedPhoto);
 
         // Update the list of photo filenames available in that session
         let urlJpeg = '/api/photos/' + selectedPhoto.replace("np", "jpeg");
@@ -52,7 +53,7 @@ function PhotoSelection(props) {
             >
                 <option/>
                 {listDisplayed}</select>
-            <Image image={currentPhoto} existingLabel={humanLabel}/>
+            <Image image={currentPhoto} existingLabel={humanLabel} photo={photoPath}/>
 
         </>
     )

frontend/src/components/SaveMarkers.jsx

@@ -7,7 +7,8 @@ function SaveMarkers(props) {
 
     function handleSubmit() {
 
-        const photo_path = '1970-01-01/set_A/device_1234/camera_1/20200101_094359.123456_000002.np';
+        //const photo_path = '1970-01-01/set_A/device_1234/camera_1/20200101_094359.123456_000002.np';
+        const photo_path = props.photo
         const source = 'btviewer';
         const version = '0.0.0'
         const url = `/api/labels/create?path=${photo_path}&source=${source}&version=${version}`;