Merge pull request #25 from SheffieldMLtracking/fetch-image

Fetch image
SheffieldMLtracking · Jun 17, 2024 · 8be22b1 · 8be22b1
2 parents f2f2337 + 8365f4d
commit 8be22b1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -5,7 +5,6 @@ function App() {
     return (
         <div className="App">
             <Sessions/>  {/*It should be a component, which in turn have all the children component to fetch session, camera, device etc.*/}
-            <Image/>
         </div>
     );
 }

diff --git a/frontend/src/components/Image.jsx b/frontend/src/components/Image.jsx
@@ -1,5 +1,4 @@
 import './Image.css'
-import image from '../mockData/test.jpg'
 
 import { useState, useRef, useEffect } from 'react'
 import DrawRetrodetectMarkers from './DrawRetrodetectMarkers.jsx';
@@ -8,12 +7,14 @@ import SaveMarkers from './SaveMarkers.jsx';
 
 /*
 A bee tracking photo
-*/
-function Image () {
+import image from '../mockData/test.jpg'
 
+*/
+function Image (props) {
   //Ref for image
   const imgRef = useRef(null);
-
+  console.log('IN IMAGE COMPONENT')
+  console.log(props.image)
 
   //State for x, y coordinates based on the original image 
   const [coordinate, setCoordinate] = useState({
@@ -260,7 +261,7 @@ function Image () {
         <SaveMarkers markerList={markerList}/>
         <button onClick={RetrodetectController}>Show Retrodetect labels</button>
         <div className='ImageContainer'>
-            <img ref={imgRef} src={image} onClick={clickHandler} alt='' style={{
+            <img ref={imgRef} src={props.image} onClick={clickHandler} alt='' style={{
                 height: `${imageSize.viewHeight}px`,
                 width: `${imageSize.viewWidth}px`,
                 top: `${imageNewPosition.top}px`,

diff --git a/frontend/src/components/PhotoSelection.jsx b/frontend/src/components/PhotoSelection.jsx
@@ -1,9 +1,10 @@
 import {useState} from 'react'
+import Image from './Image';
 
 /*
 Display a drop-down list of photos to be shown.
 */
-function PhotoSelection (props) {
+function PhotoSelection(props) {
     const [currentPhoto, setCurrentPhoto] = useState('')
     /*
     List the photos for users to choose from
@@ -16,23 +17,20 @@ function PhotoSelection (props) {
     */
     function photoFetcher(e) {
         let selectedPhoto = e.target.value;
-        setCurrentPhoto(selectedPhoto);
+
         console.log(selectedPhoto);
 
         // Update the list of photo filenames available in that session
         let url = `/api/${selectedPhoto}`;
-        url = url.replace("np","jpeg")
-        console.log(url)
-        fetch(url)
-        .then(response => response.json())
-        .then(data => setCurrentPhoto(data));
+        let urlJpeg = '/api/photos/' + selectedPhoto.replace("np", "jpeg");
+        setCurrentPhoto(urlJpeg);
 
+        console.log(currentPhoto)
 
     }
 
 
-
-    return(
+    return (
         <>
             <select
                 name="photo"
@@ -42,9 +40,10 @@ function PhotoSelection (props) {
             >
                 <option/>
                 {listDisplayed}</select>
-                
+            <Image image={currentPhoto}/>
 
         </>
     )
 }
+
 export default PhotoSelection