add option to set exposure to index page

AviaAv · Nov 26, 2024 · 4119ba7 · 4119ba7
1 parent d6c1810
commit 4119ba7
Showing 1 changed file with 40 additions and 12 deletions.
diff --git a/fastapi_backend.py b/fastapi_backend.py
@@ -82,6 +82,8 @@
 
 print(dev.query_sensors())
 sensors = dev.query_sensors()
+exposure_inputs = ""
+exposure_input_scripts = ""
 for s in sensors:
     base_path = s.name.replace(' ', '_')
     set_exp_path = f"{base_path}_exposure"
@@ -101,21 +103,46 @@ def set_exposure(exposure: int = Body(...)):
             return {"message": f"Exposure set to {exposure}", "val" : exposure}
 
         app.add_api_route(f"/{base_path}", get_sensor_name, methods=["GET"], tags=["camera-controls"])
-        app.add_api_route(f"/{get_exp_path}", get_exposure, methods=["GET"], tags=["camera-controls"])
-        app.add_api_route(f"/{set_exp_path}", set_exposure, methods=["POST"], tags=["camera-controls"])
+        if s.supports(rs.option.exposure): # we probably can automate it iterating for every option
+            app.add_api_route(f"/{get_exp_path}", get_exposure, methods=["GET"], tags=["camera-controls"])
+            app.add_api_route(f"/{set_exp_path}", set_exposure, methods=["POST"], tags=["camera-controls"])
 
     create_routes(s)
+    if s.supports(rs.option.exposure):
+        exposure_inputs += f"""
+            Set {s.name} exposure:
+            <input type="number" id="set-{base_path}-exposure" value="0">
+            <br/>
+            """
+
+        exposure_input_scripts += f"""
+            document.getElementById('set-{base_path}-exposure').addEventListener('input', function(event) {{
+                const exposureValue = event.target.value;
+                fetch('/{set_exp_path}', {{
+                    method: 'POST',
+                    body: exposureValue,
+                    headers: {{
+                        'Content-Type': 'text/plain'
+                    }}
+                }});
+            }});
+    
+            fetch('/{get_exp_path}')
+                .then(response => response.json())
+                .then(data => {{
+                    document.getElementById('set-{base_path}-exposure').value = data.val;
+                }});
+            """
 
 # Flag to track the camera status
 camera_on = True
 show_depth = True
 show_color = True
 
 @app.get("/", tags=["root"],
-         description="Get a random string",
-         response_description="A random string")
+         description="Print Hello RealSense",
+         response_description="Return Hello RealSense")
 def read_root():
-    #random_string = ''.join(random.choices(string.ascii_letters + string.digits, k=6)) # used for testing
     return {"message": f"Hello RealSense!"}
 
 
@@ -210,7 +237,7 @@ def get_camera_status():
 
 @app.get("/index", tags=["root"])
 def index():
-    return HTMLResponse(content="""
+    return HTMLResponse(content=f"""
     <html>
     <body>
     <h1>RealSense Stream</h1>
@@ -221,22 +248,23 @@ def index():
         <button type="submit" name="toggle_color">Toggle Color Stream</button>
         <button type="submit" name="toggle_depth">Toggle Depth Stream</button>
     </form>
-
+    {exposure_inputs}
     <script>
-    document.getElementById('toggle-camera-form').addEventListener('submit', function(event) {
+    document.getElementById('toggle-camera-form').addEventListener('submit', function(event) {{
         event.preventDefault();
         const formData = new FormData(event.target);
         const action = event.submitter.name;
         const url = '/' + action;
-        fetch(url, {
+        fetch(url, {{
             method: 'POST',
             body: formData
-        }).then(() => {
+        }}).then(() => {{
             // timestamp is used to reload image from server
             document.getElementById('color-stream').src = '/color_stream?' + new Date().getTime(); 
             document.getElementById('depth-stream').src = '/depth_stream?' + new Date().getTime(); 
-        });
-    });
+        }});
+    }});
+    {exposure_input_scripts}
     </script>
     </body>
     </html>