added location GPS

sustainability-lab · Oct 29, 2024 · ed62a72 · ed62a72
1 parent 988fe82
commit ed62a72
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 0 deletions.
diff --git a/gradio-gps.py b/gradio-gps.py
@@ -0,0 +1,41 @@
+import gradio as gr
+
+# This function receives latitude and longitude from JavaScript
+def get_location(latitude, longitude):
+    if latitude and longitude:
+        return f"Latitude: {latitude}, Longitude: {longitude}"
+    else:
+        return "Location not available or permission denied."
+
+# Gradio interface with JavaScript for GPS
+with gr.Blocks() as iface:
+    gr.Markdown("## Device GPS Location Finder")
+
+    # JavaScript to get GPS and pass it to the Python function
+    js = """
+    () => {
+        navigator.geolocation.getCurrentPosition(
+            position => {
+                const latitude = position.coords.latitude;
+                const longitude = position.coords.longitude;
+                // Return latitude and longitude to Gradio input
+                gradioApp().querySelector('#latitude input').value = latitude;
+                gradioApp().querySelector('#longitude input').value = longitude;
+                gradioApp().querySelector('#submit').click();
+            },
+            error => {
+                alert("Geolocation access was denied.");
+            }
+        );
+    }
+    """
+    latitude = gr.Textbox(label="Latitude", interactive=False, elem_id="latitude", visible=False)
+    longitude = gr.Textbox(label="Longitude", interactive=False, elem_id="longitude", visible=False)
+
+    # Button to trigger JavaScript and get GPS
+    gps_button = gr.Button("Get GPS Location", elem_id="submit").click(
+        get_location, [latitude, longitude], gr.Textbox(label="Result")
+    ).then(None, [], _js=js)
+
+# Launch the app
+iface.launch()
diff --git a/location.html b/location.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GPS Location Finder</title>
+    <style>
+        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
+        #location { font-weight: bold; color: #333; }
+    </style>
+</head>
+<body>
+
+<h1>GPS Location Finder</h1>
+<p>Click the button below to get your GPS location.</p>
+<button onclick="getLocation()">Get GPS Location</button>
+
+<p id="location">Location will appear here.</p>
+
+<script>
+    function getLocation() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(showPosition, showError);
+        } else {
+            document.getElementById("location").innerText = "Geolocation is not supported by this browser.";
+        }
+    }
+
+    function showPosition(position) {
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
+        document.getElementById("location").innerText = `Latitude: ${latitude}, Longitude: ${longitude}`;
+    }
+
+    function showError(error) {
+        switch(error.code) {
+            case error.PERMISSION_DENIED:
+                document.getElementById("location").innerText = "User denied the request for Geolocation.";
+                break;
+            case error.POSITION_UNAVAILABLE:
+                document.getElementById("location").innerText = "Location information is unavailable.";
+                break;
+            case error.TIMEOUT:
+                document.getElementById("location").innerText = "The request to get user location timed out.";
+                break;
+            case error.UNKNOWN_ERROR:
+                document.getElementById("location").innerText = "An unknown error occurred.";
+                break;
+        }
+    }
+</script>
+
+</body>
+</html>
diff --git a/streamlit-gps.py b/streamlit-gps.py
@@ -0,0 +1,43 @@
+import streamlit as st
+
+# HTML + JavaScript to get GPS coordinates
+js_code = """
+<script>
+    navigator.geolocation.getCurrentPosition(
+        (position) => {
+            const latitude = position.coords.latitude;
+            const longitude = position.coords.longitude;
+            document.getElementById('latitude').value = latitude;
+            document.getElementById('longitude').value = longitude;
+            document.getElementById('locationForm').submit();
+        },
+        (error) => {
+            alert("Geolocation access denied.");
+        }
+    );
+</script>
+"""
+
+st.title("Device GPS Location Finder")
+st.write("Click the button below to get your GPS location.")
+
+# HTML form to send data back to Streamlit
+st.components.v1.html(
+    f"""
+    <form id="locationForm" action="/" method="get">
+        <input type="hidden" name="latitude" id="latitude">
+        <input type="hidden" name="longitude" id="longitude">
+        <input type="button" value="Get GPS Location" onclick="{js_code}">
+    </form>
+    """,
+    height=0,
+)
+
+# Display GPS if data is available
+latitude = st.experimental_get_query_params().get("latitude", [None])[0]
+longitude = st.experimental_get_query_params().get("longitude", [None])[0]
+
+if latitude and longitude:
+    st.write(f"Latitude: {latitude}, Longitude: {longitude}")
+else:
+    st.write("Location not found or permission denied.")