Hosting basic web UI on ROSbot XL

snap/hooks/configure

@@ -83,6 +83,16 @@ if [ "$TRANSPORT_SETTING" = "builtin" ] || [ "$TRANSPORT_SETTING" = "shm" ]; the
   fi
 fi
 
+# Get the transport setting using snapctl
+OPT="webui.layout"
+LAYOUT="$(snapctl get ${OPT})"
+
+# Only exit with status 1 if conditions are not met
+if [ ! -f "${SNAP_COMMON}/foxglove-${LAYOUT}.json" ]; then
+  log_and_echo "'${SNAP_COMMON}/foxglove-${LAYOUT}.json' does not exist."
+  exit 1
+fi
+
 # Make sure ros-humble-ros-base is connected
 ROS_PLUG="ros-humble-ros-base"
 
@@ -93,7 +103,7 @@ if ! snapctl is-connected ${ROS_PLUG}; then
 fi
 
 # restart services with new ROS 2 config
-for service in daemon caddy-server bridge; do
+for service in daemon web-ui web-ws; do
   if snapctl services ${SNAP_NAME}.${service} | grep -qw active; then
     snapctl restart ${SNAP_NAME}.${service}
     log "Restarted ${SNAP_NAME}.${service}"

snap/hooks/install

@@ -15,6 +15,7 @@ snapctl set driver.include-camera-mount=True
 snapctl set driver.camera-model!
 snapctl set driver.lidar-model!
 snapctl set driver.namespace! # unset
+snapctl set webui.layout=default
 snapctl set serial-port="/dev/ttyUSBDB"
 snapctl set transport="udp"
 snapctl set ros-localhost-only=0
@@ -45,4 +46,7 @@ cp -r $SNAP/opt/ros/snap/share/ros_components_description ${SNAP_COMMON}/ros2_ws
 cp -r $SNAP/usr/share/rosbot-xl/config/*.xml ${SNAP_COMMON}/
 
 # copy joy params
-cp -r $SNAP/usr/share/rosbot-xl/config/teleop_twist_joy_params.yaml ${SNAP_COMMON}/
+cp -r $SNAP/usr/share/rosbot-xl/config/teleop_twist_joy_params.yaml ${SNAP_COMMON}/
+
+# copy webui layouts
+cp -r $SNAP/usr/share/$SNAP_NAME/config/foxglove-*.json ${SNAP_COMMON}/

snap/local/Caddyfile

@@ -1,3 +1,11 @@
+# :8080 {
+# 	# Serve static files from /var/www/foxglove
+# 	root * /var/www/foxglove
+
+# 	# Handle all requests
+# 	file_server
+# }
+
 :80 {
 	# Enable HTTP/2 over clear text (h2c)
 	# protocols h2c
@@ -9,6 +17,26 @@
 
 	# Reverse Proxy for the main site
 	handle_path /* {
-		reverse_proxy http://127.0.0.1:8080
+		# reverse_proxy http://127.0.0.1:8080
+		# Serve static files from /var/www/foxglove
+		root * {$SNAP_DATA}/www/foxglove/
+
+		@ipv6Client {
+			expression {http.request.host}.startsWith("fc94")
+		}
+
+		handle @ipv6Client {
+			vars full_host [{http.request.host}]
+			redir /ui /?ds=foxglove-websocket&ds.url=ws%3A%2F%2F%5B{http.request.host}%5D%2Fws
+		}
+
+		# Handle all other requests (from non-IPv6 clients)
+		handle {
+			vars full_host {http.request.host}
+			redir /ui /?ds=foxglove-websocket&ds.url=ws%3A%2F%2F{http.request.host}%2Fws
+		}
+
+		# Handle all requests
+		file_server
 	}
 }

snap/local/caddy_launcher.sh

@@ -1,5 +1,37 @@
 #!/usr/bin/bash
 
 # Define a function to log and echo messages
-caddy run --config $SNAP/etc/caddy/Caddyfile --adapter caddyfile
+log_and_echo() {
+    local message="$1"
+    # Log the message with logger
+    logger -t "${SNAP_NAME}" "caddy_launcher: $message"
+    # Echo the message to standard error
+    echo >&2 "$message"
+}
+
+# Define the source and destination directories
+site_path="$SNAP/usr/local/www/"
+site_tmp_path="$SNAP_DATA/www/"
+layout="$(snapctl get webui.layout)"
+log_and_echo "Using ${SNAP_COMMON}/foxglove-$layout.json"
+
+# Ensure the destination directory exists
+rm -rf $site_tmp_path
+mkdir -p "$site_tmp_path"
+
+# Copy foxglove folder to temp path
+cp -R $site_path/foxglove $site_tmp_path
+
+# apply the layout
+index_html_path=$site_tmp_path/foxglove/index.html
+index_html_content=$(cat $index_html_path)
+replace_pattern='/*FOXGLOVE_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/'
+replace_value=$(cat ${SNAP_COMMON}/foxglove-$layout.json)
+echo "${index_html_content/"$replace_pattern"/$replace_value}" > $index_html_path
+
+# disable cache
+sed -i "s|<div id=\"root\"></div>|<script>\nlocalStorage.clear();sessionStorage.clear();\n</script>\n&|" $index_html_path
+
+# Define a function to log and echo messages
+caddy run --config $SNAP/usr/share/$SNAP_NAME/config/Caddyfile --adapter caddyfile
 

snap/local/compose.yaml

@@ -0,0 +1,32 @@
+x-common-config:
+  &common-config
+  network_mode: host
+  ipc: host 
+  pid: host
+  restart: unless-stopped
+  environment:
+    - FASTRTPS_DEFAULT_PROFILES_FILE=/shm-only.xml
+
+services:
+  luxonis:
+    image: husarion/depthai:humble-2.8.1-20240127
+    <<: *common-config
+    volumes:
+      - /dev/bus/usb:/dev/bus/usb
+      - ./oak-1-low-bandwidth.yaml:/params.yaml
+    device_cgroup_rules:
+      - 'c 189:* rmw'
+    command: >
+      ros2 launch depthai_ros_driver camera.launch.py
+        params_file:=/params.yaml
+        parent_frame:=camera_mount_link
+
+  rplidar:
+    image: husarion/rplidar:humble-1.0.1-20240216
+    <<: *common-config
+    devices:
+      - ${LIDAR_SERIAL:-/dev/ttyRPLIDAR}:/dev/ttyUSB0
+    command: >
+      ros2 launch /husarion_utils/rplidar.launch.py
+        serial_baudrate:=${LIDAR_BAUDRATE:-256000}
+        serial_port:=/dev/ttyUSB0

snap/local/foxglove-default.json

@@ -0,0 +1,132 @@
+{
+    "configById": {
+      "Teleop!3yjcv6d": {
+        "topic": "/cmd_vel",
+        "publishRate": 10,
+        "upButton": {
+          "field": "linear-x",
+          "value": 1
+        },
+        "downButton": {
+          "field": "linear-x",
+          "value": -1
+        },
+        "leftButton": {
+          "field": "angular-z",
+          "value": 1
+        },
+        "rightButton": {
+          "field": "angular-z",
+          "value": -1
+        }
+      },
+      "3D!36yxwbl": {
+        "cameraState": {
+          "perspective": true,
+          "distance": 2.2036622046999295,
+          "phi": 59.99999999999968,
+          "thetaOffset": 45.000000000000036,
+          "targetOffset": [
+            -0.1884647536706241,
+            0.13784349522327283,
+            -3.166224866510698e-17
+          ],
+          "target": [
+            0,
+            0,
+            0
+          ],
+          "targetOrientation": [
+            0,
+            0,
+            0,
+            1
+          ],
+          "fovy": 45,
+          "near": 0.5,
+          "far": 5000
+        },
+        "followMode": "follow-pose",
+        "scene": {},
+        "transforms": {
+          "frame:antenna_link": {
+            "visible": false
+          },
+          "frame:antenna_connector_link": {
+            "visible": false
+          },
+          "frame:body_link": {
+            "visible": false
+          },
+          "frame:base_link": {
+            "visible": true
+          },
+          "frame:cover_link": {
+            "visible": false
+          },
+          "frame:imu_link": {
+            "visible": false
+          },
+          "frame:camera_mount_mid_link": {
+            "visible": false
+          },
+          "frame:camera_mount_bot_link": {
+            "visible": false
+          },
+          "frame:camera_mount_top_link": {
+            "visible": false
+          },
+          "frame:camera_mount_link": {
+            "visible": false
+          },
+          "frame:slamtec_rplidar_s1_link": {
+            "visible": false
+          },
+          "frame:laser": {
+            "visible": false
+          },
+          "frame:fl_wheel_link": {
+            "visible": false
+          },
+          "frame:fr_wheel_link": {
+            "visible": false
+          },
+          "frame:rl_wheel_link": {
+            "visible": false
+          },
+          "frame:rr_wheel_link": {
+            "visible": false
+          },
+          "frame:odom": {
+            "visible": true
+          }
+        },
+        "topics": {
+          "/robot_description": {
+            "visible": true
+          }
+        },
+        "layers": {},
+        "publish": {
+          "type": "point",
+          "poseTopic": "/move_base_simple/goal",
+          "pointTopic": "/clicked_point",
+          "poseEstimateTopic": "/initialpose",
+          "poseEstimateXDeviation": 0.5,
+          "poseEstimateYDeviation": 0.5,
+          "poseEstimateThetaDeviation": 0.26179939
+        },
+        "imageMode": {}
+      }
+    },
+    "globalVariables": {},
+    "userNodes": {},
+    "playbackConfig": {
+      "speed": 1
+    },
+    "layout": {
+      "direction": "row",
+      "first": "3D!36yxwbl",
+      "second": "Teleop!3yjcv6d"
+    }
+  }