slow progress

client/src/App.js

@@ -1,7 +1,7 @@
 import logo from './logo.svg';
 import './App.css';
 import { BasicStream } from './BasicStream'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useEffect } from 'react'
 import { Container, Row, Col, Button } from 'react-bootstrap';
 window.addEventListener('error', e => {
   if (e.message === 'ResizeObserver loop limit exceeded' || e.message === 'ResizeObserver loop completed with undelivered notifications.') {
@@ -23,28 +23,52 @@ window.addEventListener('error', e => {
 function App() {
 
   const [pan, setPan] = useState(0);
+  const [tilt, setTilt] = useState(0);
+  const [zoom, setZoom] = useState(2000);
 
 
-  const handlePanChange= async (amount) => {
+  useEffect( () => {
+    try {
+      fetch(`http://localhost:3000/camera?pan=${pan}&tile=${tilt}&zoom=${zoom}`).then(response => response.json()).then(data => console.log(data));
+  } catch (err) {
+      console.log(err.message)
+  }
+  }, [pan, tilt, zoom]);
+
+  const handlePanChange=  (amount) => {
     var new_pan = pan + amount;
     setPan(new_pan);
-    try {
-        const data = await (await fetch(`http://localhost:3000/camera?pan=${new_pan}`)).json()
-    } catch (err) {
-        console.log(err.message)
-    }
+}
+
+const handleTiltChange=  (amount) => {
+  var new_tilt = tilt + amount;
+  setTilt(new_tilt);
+}
+
+const handleZoomChange=  (amount) => {
+  var new_zoom = zoom + amount;
+  setZoom(new_zoom);
 }
 
     return (
       <div >
         <table>
           <tr>
             <td className="App"> <BasicStream  /></td>
-            <td>      
+            <td> 
+              <div>   
             <button onClick={()=>{handlePanChange(-10)}}>Decrease Pan</button>       
-
               {pan}
-              <button  onClick={()=>{handlePanChange(10)}}>Increase Pan</button>
+              <button  onClick={()=>{handlePanChange(10)}}>Increase Pan</button> </div>  
+
+              <div>
+              <button onClick={()=>{handleTiltChange(-10)}}>Decrease Pan</button>       
+              {tilt}
+              <button  onClick={()=>{handleTiltChange(10)}}>Increase Pan</button></div>
+              <div>
+              <button onClick={()=>{handleZoomChange(-200)}}>Decrease Pan</button>       
+              {zoom}
+              <button  onClick={()=>{handleZoomChange(200)}}>Increase Pan</button></div>
               </td>
           </tr>
         </table>

occlusion-mapper/Dockerfile

@@ -5,4 +5,4 @@ RUN pip3 install poetry==1.1.5
 RUN poetry config virtualenvs.create false
 RUN poetry install --no-dev
 ADD template_pub_sub.py .
-ENTRYPOINT [ "python3", "template_pub_sub.py" ]
+ENTRYPOINT [ "python3", "occlusion_mapper.py" ]