From 85fd06f20413e348059205a84ecb50765fc8f0c7 Mon Sep 17 00:00:00 2001 From: Ruffin Date: Sat, 13 May 2023 11:31:29 +0200 Subject: [PATCH] Improve Dev Container Web App Visualization (#3551) * Add Caddyfile to reverse proxy websockets in an attempt to avoid authentication tokens in headers when forwarding ports from codespaces via web interface - https://docs.github.com/en/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace#using-command-line-tools-and-rest-clients-to-access-ports - https://caddyserver.com/docs/quick-starts/reverse-proxy - https://caddy.community/t/caddy-v2-how-to-proxy-websoket-v2ray-websocket-tls/7040/13 * Update caddy related tasks * Rename Gzweb task to Gzweb Bridge to make room for more gzweb tasks * Add Gzweb Client Task * Add Caddyfile to reverse proxy websockets now for Gzweb * Specify config file to avoid crosstalk between caddy stop commands * Fix reverse proxy for websockets by correcting matcher using headers as websocket request header value is lowercase for gzweb and foxglove * Comment out log output files for debugging * Simplify tasks by removing client tasks * Stop tasks by using terminate via the workbench.action.tasks.terminate command * Move Caddyfile * Add Web Server tasks * Move Caddyfile * Update log output file path * Update root path * Update reverse_proxy for both gzweb and foxglove by using the path argument for respective matchers - https://caddyserver.com/docs/caddyfile/matchers#path-matchers * Use snippets to keep Caddyfile DRY - https://caddyserver.com/docs/caddyfile/concepts#snippets * Use rewrite to catch trailing slash as file_server defaults do not correct reverse_proxy. This make typing the websocket URL more forgiving - https://caddyserver.com/docs/caddyfile/patterns#trailing-slashes * Improve websocket snippet to keep Caddyfile DRY * Use header_regexp for case-insensitive matching given web port forwarding from Codespaces is odd and rewrites the value of this header field to lowercases even when local browser request is sent as `Upgrade` * Add helper index page to web server to link to web apps for reverse proxy * Limit templates to fix gzweb by adding matcher for only root index otherwise gzweb's own index.html gets overwritten * Add comments to Cadyfile to document tricky configuration * Stage working redirect * Simplify index.html * Add helper redirect to simplify foxglove to set the respective queries values to automate websocket setup, and ensure the websocket schema matches the https request * Avoid hardcoding port number * Clean up comments * Use header to compute redirect to take into account requesting forwarding or more codespace port forwarding shenanigans * Use shorthand placeholders - https://caddyserver.com/docs/caddyfile/concepts#placeholders * Formatting * Keep trailing slash to stay consistent with caddy file_server directive that serves a 308 Permanent Redirect for both foxglove and gzweb paths anyway * Refactor matcher logic to account for requests either from host ports from local dev containers or forwarded requests from codespace web port forwarding * Split snippet into globals for composability * Update comments * Add Placeholders for debugging * Use tables to center * Use github markdown - https://github.com/sindresorhus/github-markdown-css * Simplify vars * Rename vars * Revert "Rename vars" as dotted var names do not work in Caddyfile This reverts commit 3e2d1b3fe30f8a4ffb5134fc2f6f5cffd574bcdc. * Add System Monitor to debug CPU load and memory issues * Update headings * Update layout * Update layout * Add Foxglove layout for Nav2 * Symlink assets folder for web server * Fetch Foxglove layout using layoutUrl a new parameter to load layout json data from URL - https://github.com/orgs/foxglove/discussions/217 * Cleanup * Use fork to fetch Foxglove layout using layoutUrl until this PR is merged: - https://github.com/foxglove/studio/pull/5987 * Update Caddyfile to handle relative root by using local srv folder * Inject mobile view html tags using the caddy replace module - https://caddyserver.com/docs/modules/http.handlers.replace_response - https://github.com/caddyserver/replace-response * Simplify Caddyfile * Use snippet for apps * Simplify Caddyfile * Simplify Caddyfile * Build caddy using custom modules * Remove unused symlinks * Add comments * Use environment and defined variables for config to avoid hard coded paths * Add FoxgloveUrl to vars for reuse in templates * Fix trailing slash for DataSourceUrl * Use exec to run gzserver with xvfb to prevent ros launch from orphaning process and ensure gzserver receives SIGTERM signal given gzserver often hangs after only SIGINT - https://unix.stackexchange.com/a/196053/213124 * Update redirect for foxglove to redirect from path /foxglove/autolayout * Add redirect for foxglove to redirect from path /foxglove/autoconnect but does not use LayoutUrl as to not change from cached layout * Use web app manifest to set display as standalone - https://web.dev/add-manifest/ - https://developer.mozilla.org/en-US/docs/Web/Manifest * Template manifest files to embed host info into app name * Add manifests for other web apps * Add shortcuts for Foxglove - https://developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts - https://web.dev/app-shortcuts/ * Format * Update comments * Revert use of fork * Remove debug directive --- .devcontainer/caddy/Caddyfile | 122 ++ .../srv/assets/nav2_foxglove_layout.json | 463 +++++++ .devcontainer/caddy/srv/github-markdown.css | 1102 +++++++++++++++++ .devcontainer/caddy/srv/index.html | 34 + .devcontainer/caddy/srv/index.md | 48 + .../srv/manifests/foxglove/manifest.json | 32 + .../caddy/srv/manifests/glances/manifest.json | 15 + .../caddy/srv/manifests/gzweb/manifest.json | 15 + .../caddy/srv/manifests/manifest.json | 8 + .devcontainer/devcontainer.json | 2 +- .vscode/tasks.json | 135 +- Dockerfile | 33 +- 12 files changed, 1932 insertions(+), 77 deletions(-) create mode 100644 .devcontainer/caddy/Caddyfile create mode 100644 .devcontainer/caddy/srv/assets/nav2_foxglove_layout.json create mode 100644 .devcontainer/caddy/srv/github-markdown.css create mode 100644 .devcontainer/caddy/srv/index.html create mode 100644 .devcontainer/caddy/srv/index.md create mode 100644 .devcontainer/caddy/srv/manifests/foxglove/manifest.json create mode 100644 .devcontainer/caddy/srv/manifests/glances/manifest.json create mode 100644 .devcontainer/caddy/srv/manifests/gzweb/manifest.json create mode 100644 .devcontainer/caddy/srv/manifests/manifest.json diff --git a/.devcontainer/caddy/Caddyfile b/.devcontainer/caddy/Caddyfile new file mode 100644 index 00000000000..74a9df93b28 --- /dev/null +++ b/.devcontainer/caddy/Caddyfile @@ -0,0 +1,122 @@ +# Snippet for global matchers and variables +# to logically expression request conditions +# E.g. for conditionally changing redirects +(globals) { + # Use gzip compression for all responses + encode gzip + + # Matcher for http request scheme. E.g. "http" or "https" + @http_scheme { + expression {http.request.scheme}=="https" || {header.X-Forwarded-Scheme}=="https" + } + # If any http scheme is "https", then use "wss" + vars @http_scheme WsScheme "wss" + # Else default to "ws" + vars WsScheme "ws" + + # Matcher for forwarded request headers + @host_forwarded { + header X-Forwarded-Host * + } + # If http headers exists, then use them + vars @host_forwarded WsHost {header.X-Forwarded-Host} + # Else default to host in request + vars WsHost {http.request.hostport} + + # Matcher for websocket connection upgrade requests + @websockets { + # Avoid case sensitivity issues when matching field values + # E.g. when values are rewritten by Codespace port forwarding + header_regexp Connection (?i)(Upgrade) + header Upgrade websocket + } +} + +# Snippet for redirect with given URL queries values +# to simplify remote development with web apps +# E.g auto redirect websocket URL to match request scheme +(redirect) { + # Configure redirect to match request scheme + vars LayoutUrl "/assets/nav2_foxglove_layout.json" + vars DataSourceUrl "{vars.WsScheme}://{vars.WsHost}{args.0}/" + redir /autoconnect "{args.0}/?ds=foxglove-websocket&ds.url={vars.DataSourceUrl}" + redir /autolayout "{args.0}/?ds=foxglove-websocket&ds.url={vars.DataSourceUrl}&layoutUrl={vars.LayoutUrl}" +} + +# Snippet for dummy imports +(dummy) { +} + +# Snippet for enabling mobile web app features +# to improve user experience on small screen devices +# E.g. for enabling fullscreen mode on iOS and Android +(mobile) { + # Match for directory redirects to index.html + route / { + # Inject link to manifest just after tag + # https://developer.mozilla.org/docs/Web/Manifest + replace `` `` + } + # Redirect relative handle_path'ed manifest.json to /manifests directory + redir /manifest.json /manifests{http.request.orig_uri.path.dir}manifest.json +} + +# Snippet for hosted web app using websockets +# to serve static files and reverse proxying connections +# E.g. for serving GzWeb and Foxglove web apps +(app) { + # Redirect implicit directory requests twards index.html + redir {args.0} {args.0}/ + # handle and strip path prefix from redirect + handle_path {args.0}/* { + # Set root directory for static files + root * {args.1} + # Serve static files + file_server + # Enable mobile web app features + import mobile + # Reverse proxy websockets to backend address + reverse_proxy @websockets {args.2} + # Import custom snippets + import {args.3} {args.0} + } +} + +# Listen for http requests on port 8080 +# regardless of hostname or domain address +# E.g. whatever Codespaces assigns to host +:8080 { + # Include global matchers and variables + import globals + + # Handle main landing page + handle /* { + # Use relative path for root directory + root * srv + file_server + import mobile + # Render markdown files as html + templates + # Template manifest.json files + templates */manifest.json { + mime application/json + } + } + + # Import app snippets for web apps + import app "/gzweb" "{$GZWEB_WS}/http/client" "localhost:9090" "dummy" + import app "/foxglove" "{$FOXGLOVE_WS}" "localhost:8765" "redirect" + + # Handle glances web app + redir /glances /glances/ + handle_path /glances/* { + import mobile + # Reverse proxy to glances backend + reverse_proxy * "localhost:61208" + } + + # For debugging + # log { + # output file /var/log/caddy/server.log + # } +} diff --git a/.devcontainer/caddy/srv/assets/nav2_foxglove_layout.json b/.devcontainer/caddy/srv/assets/nav2_foxglove_layout.json new file mode 100644 index 00000000000..f92821fac49 --- /dev/null +++ b/.devcontainer/caddy/srv/assets/nav2_foxglove_layout.json @@ -0,0 +1,463 @@ +{ + "configById": { + "3D!18i6zy7": { + "layers": { + "845139cb-26bc-40b3-8161-8ab60af4baf5": { + "visible": true, + "frameLocked": true, + "label": "Grid", + "instanceId": "845139cb-26bc-40b3-8161-8ab60af4baf5", + "layerId": "foxglove.Grid", + "size": 10, + "divisions": 10, + "lineWidth": 1, + "color": "#A0A0A4ff", + "position": [ + 0, + 0, + 0 + ], + "rotation": [ + 0, + 0, + 0 + ], + "order": 1 + } + }, + "cameraState": { + "perspective": true, + "distance": 21.05263157877764, + "phi": 38.925517117715195, + "thetaOffset": -138.92710744521386, + "targetOffset": [ + -2.6847696124888896, + 0.2191229688744439, + 3.6086809432821955e-16 + ], + "target": [ + 0, + 0, + 0 + ], + "targetOrientation": [ + 0, + 0, + 0, + 1 + ], + "fovy": 45, + "near": 0.5, + "far": 5000 + }, + "followMode": "follow-pose", + "scene": { + "transforms": { + "showLabel": false, + "editable": false, + "labelSize": 0.049999999999999975, + "enablePreloading": false, + "lineWidth": 2 + } + }, + "transforms": { + "frame:camera_link": { + "visible": false + }, + "frame:camera_depth_frame": { + "visible": false + }, + "frame:camera_depth_optical_frame": { + "visible": false + }, + "frame:camera_rgb_frame": { + "visible": false + }, + "frame:camera_rgb_optical_frame": { + "visible": false + }, + "frame:imu_link": { + "visible": false + }, + "frame:caster_back_right_link": { + "visible": false + }, + "frame:caster_back_left_link": { + "visible": false + }, + "frame:odom": { + "visible": true + }, + "frame:base_footprint": { + "visible": true + }, + "frame:wheel_left_link": { + "visible": false + }, + "frame:wheel_right_link": { + "visible": false + }, + "frame:base_link": { + "visible": false + }, + "frame:base_scan": { + "visible": false + }, + "frame:map": { + "visible": true + } + }, + "topics": { + "/scan": { + "visible": true, + "colorField": "intensity", + "colorMode": "flat", + "colorMap": "turbo", + "pointSize": 5, + "flatColor": "#ff0000" + }, + "/global_costmap/costmap": { + "visible": true, + "maxColor": "#E800174d", + "unknownColor": "#5700ff4d", + "minColor": "#ffffff4d", + "invalidColor": "#ff00ff4d", + "colorMode": "costmap", + "alpha": 0.3 + }, + "/global_costmap/obstacle_layer": { + "visible": false + }, + "/global_costmap/voxel_marked_cloud": { + "visible": false + }, + "/goal_pose": { + "visible": false + }, + "/local_costmap/costmap": { + "visible": false + }, + "/local_costmap/voxel_layer": { + "visible": false + }, + "/local_costmap/clearing_endpoints": { + "visible": false, + "colorField": "x", + "colorMode": "colormap", + "colorMap": "turbo" + }, + "/map": { + "visible": true, + "minColor": "#ffffff", + "maxColor": "#000000", + "unknownColor": "#708986ff", + "frameLocked": false, + "colorMode": "map" + }, + "/amcl_pose": { + "visible": false + }, + "/local_plan": { + "visible": true, + "lineWidth": 0.01, + "gradient": [ + "#c8ff00c7", + "#00c8ffba" + ] + }, + "/plan": { + "visible": false, + "gradient": [ + "rgba(124, 107, 255, 1)", + "#ff6b6b" + ], + "lineWidth": 1 + }, + "/plan_smoothed": { + "visible": false + }, + "/received_global_plan": { + "visible": true, + "gradient": [ + "#ff0000c7", + "#6b70ffc2" + ], + "lineWidth": 0.02, + "type": "line", + "arrowScale": [ + 0.02, + 0.0015, + 0.0015 + ] + }, + "/transformed_global_plan": { + "visible": false + }, + "/robot_description": { + "visible": false + }, + "/cost_cloud": { + "visible": false + }, + "/initialpose": { + "visible": false + } + }, + "publish": { + "type": "pose_estimate", + "poseTopic": "/move_base_simple/goal", + "pointTopic": "", + "poseEstimateTopic": "/initialpose", + "poseEstimateXDeviation": 0.5, + "poseEstimateYDeviation": 0.5, + "poseEstimateThetaDeviation": 0.26179939 + }, + "followTf": "map" + }, + "DiagnosticSummary!3bo4e39": { + "minLevel": 0, + "pinnedIds": [], + "hardwareIdFilter": "", + "topicToRender": "/diagnostics", + "sortByLevel": true + }, + "RosOut!1iib9dq": { + "searchTerms": [], + "minLogLevel": 1 + }, + "3D!2agiaqk": { + "layers": { + "845139cb-26bc-40b3-8161-8ab60af4baf5": { + "visible": false, + "frameLocked": true, + "label": "Grid", + "instanceId": "845139cb-26bc-40b3-8161-8ab60af4baf5", + "layerId": "foxglove.Grid", + "size": 10, + "divisions": 10, + "lineWidth": 1, + "color": "#A0A0A4ff", + "position": [ + 0, + 0, + 0 + ], + "rotation": [ + 0, + 0, + 0 + ], + "order": 1 + } + }, + "cameraState": { + "perspective": true, + "distance": 4.078136514883917, + "phi": 56.068374260572, + "thetaOffset": 92.50000000000723, + "targetOffset": [ + 0.03816360663426963, + 0.15755079607173259, + 7.341598429161142e-18 + ], + "target": [ + 0, + 0, + 0 + ], + "targetOrientation": [ + 0, + 0, + 0, + 1 + ], + "fovy": 45, + "near": 0.5, + "far": 5000 + }, + "followMode": "follow-pose", + "scene": { + "transforms": { + "showLabel": true, + "editable": false, + "labelSize": 0.049999999999999975, + "enablePreloading": false, + "lineWidth": 2 + } + }, + "transforms": { + "frame:camera_link": { + "visible": false + }, + "frame:camera_depth_frame": { + "visible": false + }, + "frame:camera_depth_optical_frame": { + "visible": false + }, + "frame:camera_rgb_frame": { + "visible": false + }, + "frame:camera_rgb_optical_frame": { + "visible": false + }, + "frame:imu_link": { + "visible": false + }, + "frame:caster_back_right_link": { + "visible": false + }, + "frame:caster_back_left_link": { + "visible": false + }, + "frame:odom": { + "visible": true + }, + "frame:base_footprint": { + "visible": true + }, + "frame:wheel_left_link": { + "visible": false + }, + "frame:wheel_right_link": { + "visible": false + }, + "frame:base_link": { + "visible": false + }, + "frame:base_scan": { + "visible": false + }, + "frame:map": { + "visible": true + } + }, + "topics": { + "/scan": { + "visible": true, + "colorField": "intensity", + "colorMode": "flat", + "colorMap": "turbo", + "pointSize": 5, + "flatColor": "#ff0000" + }, + "/global_costmap/costmap": { + "visible": true, + "maxColor": "#E800174d", + "unknownColor": "#5700ff4d", + "minColor": "#ffffff4d", + "invalidColor": "#ff00ff4d", + "colorMode": "costmap", + "alpha": 0.3 + }, + "/global_costmap/obstacle_layer": { + "visible": false + }, + "/global_costmap/voxel_marked_cloud": { + "visible": false + }, + "/goal_pose": { + "visible": false + }, + "/local_costmap/costmap": { + "visible": false + }, + "/local_costmap/voxel_layer": { + "visible": false + }, + "/local_costmap/clearing_endpoints": { + "visible": false, + "colorField": "x", + "colorMode": "colormap", + "colorMap": "turbo" + }, + "/map": { + "visible": true, + "minColor": "#ffffff", + "maxColor": "#000000", + "unknownColor": "#708986ff", + "frameLocked": false, + "colorMode": "map" + }, + "/amcl_pose": { + "visible": false + }, + "/local_plan": { + "visible": true, + "lineWidth": 0.01, + "gradient": [ + "#c8ff00c7", + "#00c8ffba" + ] + }, + "/plan": { + "visible": false, + "gradient": [ + "rgba(124, 107, 255, 1)", + "#ff6b6b" + ], + "lineWidth": 1 + }, + "/plan_smoothed": { + "visible": false + }, + "/received_global_plan": { + "visible": true, + "gradient": [ + "#ff0000c7", + "#6b70ffc2" + ], + "lineWidth": 0.02, + "type": "line", + "arrowScale": [ + 0.02, + 0.0015, + 0.0015 + ] + }, + "/transformed_global_plan": { + "visible": false + }, + "/robot_description": { + "visible": true + }, + "/cost_cloud": { + "visible": false + }, + "/initialpose": { + "visible": false + } + }, + "publish": { + "type": "pose_estimate", + "poseTopic": "/move_base_simple/goal", + "pointTopic": "", + "poseEstimateTopic": "/initialpose", + "poseEstimateXDeviation": 0.5, + "poseEstimateYDeviation": 0.5, + "poseEstimateThetaDeviation": 0.26179939 + }, + "followTf": "base_link" + } + }, + "globalVariables": {}, + "userNodes": {}, + "playbackConfig": { + "speed": 1 + }, + "layout": { + "first": "3D!18i6zy7", + "second": { + "first": "DiagnosticSummary!3bo4e39", + "second": { + "first": "RosOut!1iib9dq", + "second": "3D!2agiaqk", + "direction": "column" + }, + "direction": "column", + "splitPercentage": 28.227360308285164 + }, + "direction": "row", + "splitPercentage": 74.87855655794587 + } + } \ No newline at end of file diff --git a/.devcontainer/caddy/srv/github-markdown.css b/.devcontainer/caddy/srv/github-markdown.css new file mode 100644 index 00000000000..049cae6b291 --- /dev/null +++ b/.devcontainer/caddy/srv/github-markdown.css @@ -0,0 +1,1102 @@ +@media (prefers-color-scheme: dark) { + .markdown-body { + color-scheme: dark; + --color-prettylights-syntax-comment: #8b949e; + --color-prettylights-syntax-constant: #79c0ff; + --color-prettylights-syntax-entity: #d2a8ff; + --color-prettylights-syntax-storage-modifier-import: #c9d1d9; + --color-prettylights-syntax-entity-tag: #7ee787; + --color-prettylights-syntax-keyword: #ff7b72; + --color-prettylights-syntax-string: #a5d6ff; + --color-prettylights-syntax-variable: #ffa657; + --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; + --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; + --color-prettylights-syntax-invalid-illegal-bg: #8e1519; + --color-prettylights-syntax-carriage-return-text: #f0f6fc; + --color-prettylights-syntax-carriage-return-bg: #b62324; + --color-prettylights-syntax-string-regexp: #7ee787; + --color-prettylights-syntax-markup-list: #f2cc60; + --color-prettylights-syntax-markup-heading: #1f6feb; + --color-prettylights-syntax-markup-italic: #c9d1d9; + --color-prettylights-syntax-markup-bold: #c9d1d9; + --color-prettylights-syntax-markup-deleted-text: #ffdcd7; + --color-prettylights-syntax-markup-deleted-bg: #67060c; + --color-prettylights-syntax-markup-inserted-text: #aff5b4; + --color-prettylights-syntax-markup-inserted-bg: #033a16; + --color-prettylights-syntax-markup-changed-text: #ffdfb6; + --color-prettylights-syntax-markup-changed-bg: #5a1e02; + --color-prettylights-syntax-markup-ignored-text: #c9d1d9; + --color-prettylights-syntax-markup-ignored-bg: #1158c7; + --color-prettylights-syntax-meta-diff-range: #d2a8ff; + --color-prettylights-syntax-brackethighlighter-angle: #8b949e; + --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; + --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; + --color-fg-default: #c9d1d9; + --color-fg-muted: #8b949e; + --color-fg-subtle: #6e7681; + --color-canvas-default: #0d1117; + --color-canvas-subtle: #161b22; + --color-border-default: #30363d; + --color-border-muted: #21262d; + --color-neutral-muted: rgba(110,118,129,0.4); + --color-accent-fg: #58a6ff; + --color-accent-emphasis: #1f6feb; + --color-attention-subtle: rgba(187,128,9,0.15); + --color-danger-fg: #f85149; + } + } + + @media (prefers-color-scheme: light) { + .markdown-body { + color-scheme: light; + --color-prettylights-syntax-comment: #6e7781; + --color-prettylights-syntax-constant: #0550ae; + --color-prettylights-syntax-entity: #8250df; + --color-prettylights-syntax-storage-modifier-import: #24292f; + --color-prettylights-syntax-entity-tag: #116329; + --color-prettylights-syntax-keyword: #cf222e; + --color-prettylights-syntax-string: #0a3069; + --color-prettylights-syntax-variable: #953800; + --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; + --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; + --color-prettylights-syntax-invalid-illegal-bg: #82071e; + --color-prettylights-syntax-carriage-return-text: #f6f8fa; + --color-prettylights-syntax-carriage-return-bg: #cf222e; + --color-prettylights-syntax-string-regexp: #116329; + --color-prettylights-syntax-markup-list: #3b2300; + --color-prettylights-syntax-markup-heading: #0550ae; + --color-prettylights-syntax-markup-italic: #24292f; + --color-prettylights-syntax-markup-bold: #24292f; + --color-prettylights-syntax-markup-deleted-text: #82071e; + --color-prettylights-syntax-markup-deleted-bg: #ffebe9; + --color-prettylights-syntax-markup-inserted-text: #116329; + --color-prettylights-syntax-markup-inserted-bg: #dafbe1; + --color-prettylights-syntax-markup-changed-text: #953800; + --color-prettylights-syntax-markup-changed-bg: #ffd8b5; + --color-prettylights-syntax-markup-ignored-text: #eaeef2; + --color-prettylights-syntax-markup-ignored-bg: #0550ae; + --color-prettylights-syntax-meta-diff-range: #8250df; + --color-prettylights-syntax-brackethighlighter-angle: #57606a; + --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; + --color-prettylights-syntax-constant-other-reference-link: #0a3069; + --color-fg-default: #24292f; + --color-fg-muted: #57606a; + --color-fg-subtle: #6e7781; + --color-canvas-default: #ffffff; + --color-canvas-subtle: #f6f8fa; + --color-border-default: #d0d7de; + --color-border-muted: hsla(210,18%,87%,1); + --color-neutral-muted: rgba(175,184,193,0.2); + --color-accent-fg: #0969da; + --color-accent-emphasis: #0969da; + --color-attention-subtle: #fff8c5; + --color-danger-fg: #cf222e; + } + } + + .markdown-body { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: var(--color-fg-default); + background-color: var(--color-canvas-default); + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-size: 16px; + line-height: 1.5; + word-wrap: break-word; + } + + .markdown-body .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; + } + + .markdown-body h1:hover .anchor .octicon-link:before, + .markdown-body h2:hover .anchor .octicon-link:before, + .markdown-body h3:hover .anchor .octicon-link:before, + .markdown-body h4:hover .anchor .octicon-link:before, + .markdown-body h5:hover .anchor .octicon-link:before, + .markdown-body h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); + } + + .markdown-body details, + .markdown-body figcaption, + .markdown-body figure { + display: block; + } + + .markdown-body summary { + display: list-item; + } + + .markdown-body [hidden] { + display: none !important; + } + + .markdown-body a { + background-color: transparent; + color: var(--color-accent-fg); + text-decoration: none; + } + + .markdown-body abbr[title] { + border-bottom: none; + text-decoration: underline dotted; + } + + .markdown-body b, + .markdown-body strong { + font-weight: var(--base-text-weight-semibold, 600); + } + + .markdown-body dfn { + font-style: italic; + } + + .markdown-body h1 { + margin: .67em 0; + font-weight: var(--base-text-weight-semibold, 600); + padding-bottom: .3em; + font-size: 2em; + border-bottom: 1px solid var(--color-border-muted); + } + + .markdown-body mark { + background-color: var(--color-attention-subtle); + color: var(--color-fg-default); + } + + .markdown-body small { + font-size: 90%; + } + + .markdown-body sub, + .markdown-body sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + .markdown-body sub { + bottom: -0.25em; + } + + .markdown-body sup { + top: -0.5em; + } + + .markdown-body img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: var(--color-canvas-default); + } + + .markdown-body code, + .markdown-body kbd, + .markdown-body pre, + .markdown-body samp { + font-family: monospace; + font-size: 1em; + } + + .markdown-body figure { + margin: 1em 40px; + } + + .markdown-body hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid var(--color-border-muted); + height: .25em; + padding: 0; + margin: 24px 0; + background-color: var(--color-border-default); + border: 0; + } + + .markdown-body input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + .markdown-body [type=button], + .markdown-body [type=reset], + .markdown-body [type=submit] { + -webkit-appearance: button; + } + + .markdown-body [type=checkbox], + .markdown-body [type=radio] { + box-sizing: border-box; + padding: 0; + } + + .markdown-body [type=number]::-webkit-inner-spin-button, + .markdown-body [type=number]::-webkit-outer-spin-button { + height: auto; + } + + .markdown-body [type=search]::-webkit-search-cancel-button, + .markdown-body [type=search]::-webkit-search-decoration { + -webkit-appearance: none; + } + + .markdown-body ::-webkit-input-placeholder { + color: inherit; + opacity: .54; + } + + .markdown-body ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; + } + + .markdown-body a:hover { + text-decoration: underline; + } + + .markdown-body ::placeholder { + color: var(--color-fg-subtle); + opacity: 1; + } + + .markdown-body hr::before { + display: table; + content: ""; + } + + .markdown-body hr::after { + display: table; + clear: both; + content: ""; + } + + .markdown-body table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; + } + + .markdown-body td, + .markdown-body th { + padding: 0; + } + + .markdown-body details summary { + cursor: pointer; + } + + .markdown-body details:not([open])>*:not(summary) { + display: none !important; + } + + .markdown-body a:focus, + .markdown-body [role=button]:focus, + .markdown-body input[type=radio]:focus, + .markdown-body input[type=checkbox]:focus { + outline: 2px solid var(--color-accent-fg); + outline-offset: -2px; + box-shadow: none; + } + + .markdown-body a:focus:not(:focus-visible), + .markdown-body [role=button]:focus:not(:focus-visible), + .markdown-body input[type=radio]:focus:not(:focus-visible), + .markdown-body input[type=checkbox]:focus:not(:focus-visible) { + outline: solid 1px transparent; + } + + .markdown-body a:focus-visible, + .markdown-body [role=button]:focus-visible, + .markdown-body input[type=radio]:focus-visible, + .markdown-body input[type=checkbox]:focus-visible { + outline: 2px solid var(--color-accent-fg); + outline-offset: -2px; + box-shadow: none; + } + + .markdown-body a:not([class]):focus, + .markdown-body a:not([class]):focus-visible, + .markdown-body input[type=radio]:focus, + .markdown-body input[type=radio]:focus-visible, + .markdown-body input[type=checkbox]:focus, + .markdown-body input[type=checkbox]:focus-visible { + outline-offset: 0; + } + + .markdown-body kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + line-height: 10px; + color: var(--color-fg-default); + vertical-align: middle; + background-color: var(--color-canvas-subtle); + border: solid 1px var(--color-neutral-muted); + border-bottom-color: var(--color-neutral-muted); + border-radius: 6px; + box-shadow: inset 0 -1px 0 var(--color-neutral-muted); + } + + .markdown-body h1, + .markdown-body h2, + .markdown-body h3, + .markdown-body h4, + .markdown-body h5, + .markdown-body h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: var(--base-text-weight-semibold, 600); + line-height: 1.25; + } + + .markdown-body h2 { + font-weight: var(--base-text-weight-semibold, 600); + padding-bottom: .3em; + font-size: 1.5em; + border-bottom: 1px solid var(--color-border-muted); + } + + .markdown-body h3 { + font-weight: var(--base-text-weight-semibold, 600); + font-size: 1.25em; + } + + .markdown-body h4 { + font-weight: var(--base-text-weight-semibold, 600); + font-size: 1em; + } + + .markdown-body h5 { + font-weight: var(--base-text-weight-semibold, 600); + font-size: .875em; + } + + .markdown-body h6 { + font-weight: var(--base-text-weight-semibold, 600); + font-size: .85em; + color: var(--color-fg-muted); + } + + .markdown-body p { + margin-top: 0; + margin-bottom: 10px; + } + + .markdown-body blockquote { + margin: 0; + padding: 0 1em; + color: var(--color-fg-muted); + border-left: .25em solid var(--color-border-default); + } + + .markdown-body ul, + .markdown-body ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; + } + + .markdown-body ol ol, + .markdown-body ul ol { + list-style-type: lower-roman; + } + + .markdown-body ul ul ol, + .markdown-body ul ol ol, + .markdown-body ol ul ol, + .markdown-body ol ol ol { + list-style-type: lower-alpha; + } + + .markdown-body dd { + margin-left: 0; + } + + .markdown-body tt, + .markdown-body code, + .markdown-body samp { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; + } + + .markdown-body pre { + margin-top: 0; + margin-bottom: 0; + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; + word-wrap: normal; + } + + .markdown-body .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; + } + + .markdown-body input::-webkit-outer-spin-button, + .markdown-body input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; + } + + .markdown-body::before { + display: table; + content: ""; + } + + .markdown-body::after { + display: table; + clear: both; + content: ""; + } + + .markdown-body>*:first-child { + margin-top: 0 !important; + } + + .markdown-body>*:last-child { + margin-bottom: 0 !important; + } + + .markdown-body a:not([href]) { + color: inherit; + text-decoration: none; + } + + .markdown-body .absent { + color: var(--color-danger-fg); + } + + .markdown-body .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; + } + + .markdown-body .anchor:focus { + outline: none; + } + + .markdown-body p, + .markdown-body blockquote, + .markdown-body ul, + .markdown-body ol, + .markdown-body dl, + .markdown-body table, + .markdown-body pre, + .markdown-body details { + margin-top: 0; + margin-bottom: 16px; + } + + .markdown-body blockquote>:first-child { + margin-top: 0; + } + + .markdown-body blockquote>:last-child { + margin-bottom: 0; + } + + .markdown-body h1 .octicon-link, + .markdown-body h2 .octicon-link, + .markdown-body h3 .octicon-link, + .markdown-body h4 .octicon-link, + .markdown-body h5 .octicon-link, + .markdown-body h6 .octicon-link { + color: var(--color-fg-default); + vertical-align: middle; + visibility: hidden; + } + + .markdown-body h1:hover .anchor, + .markdown-body h2:hover .anchor, + .markdown-body h3:hover .anchor, + .markdown-body h4:hover .anchor, + .markdown-body h5:hover .anchor, + .markdown-body h6:hover .anchor { + text-decoration: none; + } + + .markdown-body h1:hover .anchor .octicon-link, + .markdown-body h2:hover .anchor .octicon-link, + .markdown-body h3:hover .anchor .octicon-link, + .markdown-body h4:hover .anchor .octicon-link, + .markdown-body h5:hover .anchor .octicon-link, + .markdown-body h6:hover .anchor .octicon-link { + visibility: visible; + } + + .markdown-body h1 tt, + .markdown-body h1 code, + .markdown-body h2 tt, + .markdown-body h2 code, + .markdown-body h3 tt, + .markdown-body h3 code, + .markdown-body h4 tt, + .markdown-body h4 code, + .markdown-body h5 tt, + .markdown-body h5 code, + .markdown-body h6 tt, + .markdown-body h6 code { + padding: 0 .2em; + font-size: inherit; + } + + .markdown-body summary h1, + .markdown-body summary h2, + .markdown-body summary h3, + .markdown-body summary h4, + .markdown-body summary h5, + .markdown-body summary h6 { + display: inline-block; + } + + .markdown-body summary h1 .anchor, + .markdown-body summary h2 .anchor, + .markdown-body summary h3 .anchor, + .markdown-body summary h4 .anchor, + .markdown-body summary h5 .anchor, + .markdown-body summary h6 .anchor { + margin-left: -40px; + } + + .markdown-body summary h1, + .markdown-body summary h2 { + padding-bottom: 0; + border-bottom: 0; + } + + .markdown-body ul.no-list, + .markdown-body ol.no-list { + padding: 0; + list-style-type: none; + } + + .markdown-body ol[type=a] { + list-style-type: lower-alpha; + } + + .markdown-body ol[type=A] { + list-style-type: upper-alpha; + } + + .markdown-body ol[type=i] { + list-style-type: lower-roman; + } + + .markdown-body ol[type=I] { + list-style-type: upper-roman; + } + + .markdown-body ol[type="1"] { + list-style-type: decimal; + } + + .markdown-body div>ol:not([type]) { + list-style-type: decimal; + } + + .markdown-body ul ul, + .markdown-body ul ol, + .markdown-body ol ol, + .markdown-body ol ul { + margin-top: 0; + margin-bottom: 0; + } + + .markdown-body li>p { + margin-top: 16px; + } + + .markdown-body li+li { + margin-top: .25em; + } + + .markdown-body dl { + padding: 0; + } + + .markdown-body dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: var(--base-text-weight-semibold, 600); + } + + .markdown-body dl dd { + padding: 0 16px; + margin-bottom: 16px; + } + + .markdown-body table th { + font-weight: var(--base-text-weight-semibold, 600); + } + + .markdown-body table th, + .markdown-body table td { + padding: 6px 13px; + border: 1px solid var(--color-border-default); + } + + .markdown-body table tr { + background-color: var(--color-canvas-default); + border-top: 1px solid var(--color-border-muted); + } + + .markdown-body table tr:nth-child(2n) { + background-color: var(--color-canvas-subtle); + } + + .markdown-body table img { + background-color: transparent; + } + + .markdown-body img[align=right] { + padding-left: 20px; + } + + .markdown-body img[align=left] { + padding-right: 20px; + } + + .markdown-body .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; + } + + .markdown-body span.frame { + display: block; + overflow: hidden; + } + + .markdown-body span.frame>span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid var(--color-border-default); + } + + .markdown-body span.frame span img { + display: block; + float: left; + } + + .markdown-body span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: var(--color-fg-default); + } + + .markdown-body span.align-center { + display: block; + overflow: hidden; + clear: both; + } + + .markdown-body span.align-center>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; + } + + .markdown-body span.align-center span img { + margin: 0 auto; + text-align: center; + } + + .markdown-body span.align-right { + display: block; + overflow: hidden; + clear: both; + } + + .markdown-body span.align-right>span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; + } + + .markdown-body span.align-right span img { + margin: 0; + text-align: right; + } + + .markdown-body span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; + } + + .markdown-body span.float-left span { + margin: 13px 0 0; + } + + .markdown-body span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; + } + + .markdown-body span.float-right>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; + } + + .markdown-body code, + .markdown-body tt { + padding: .2em .4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: var(--color-neutral-muted); + border-radius: 6px; + } + + .markdown-body code br, + .markdown-body tt br { + display: none; + } + + .markdown-body del code { + text-decoration: inherit; + } + + .markdown-body samp { + font-size: 85%; + } + + .markdown-body pre code { + font-size: 100%; + } + + .markdown-body pre>code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; + } + + .markdown-body .highlight { + margin-bottom: 16px; + } + + .markdown-body .highlight pre { + margin-bottom: 0; + word-break: normal; + } + + .markdown-body .highlight pre, + .markdown-body pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: var(--color-canvas-subtle); + border-radius: 6px; + } + + .markdown-body pre code, + .markdown-body pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; + } + + .markdown-body .csv-data td, + .markdown-body .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; + } + + .markdown-body .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: var(--color-canvas-default); + border: 0; + } + + .markdown-body .csv-data tr { + border-top: 0; + } + + .markdown-body .csv-data th { + font-weight: var(--base-text-weight-semibold, 600); + background: var(--color-canvas-subtle); + border-top: 0; + } + + .markdown-body [data-footnote-ref]::before { + content: "["; + } + + .markdown-body [data-footnote-ref]::after { + content: "]"; + } + + .markdown-body .footnotes { + font-size: 12px; + color: var(--color-fg-muted); + border-top: 1px solid var(--color-border-default); + } + + .markdown-body .footnotes ol { + padding-left: 16px; + } + + .markdown-body .footnotes ol ul { + display: inline-block; + padding-left: 16px; + margin-top: 16px; + } + + .markdown-body .footnotes li { + position: relative; + } + + .markdown-body .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ""; + border: 2px solid var(--color-accent-emphasis); + border-radius: 6px; + } + + .markdown-body .footnotes li:target { + color: var(--color-fg-default); + } + + .markdown-body .footnotes .data-footnote-backref g-emoji { + font-family: monospace; + } + + .markdown-body .pl-c { + color: var(--color-prettylights-syntax-comment); + } + + .markdown-body .pl-c1, + .markdown-body .pl-s .pl-v { + color: var(--color-prettylights-syntax-constant); + } + + .markdown-body .pl-e, + .markdown-body .pl-en { + color: var(--color-prettylights-syntax-entity); + } + + .markdown-body .pl-smi, + .markdown-body .pl-s .pl-s1 { + color: var(--color-prettylights-syntax-storage-modifier-import); + } + + .markdown-body .pl-ent { + color: var(--color-prettylights-syntax-entity-tag); + } + + .markdown-body .pl-k { + color: var(--color-prettylights-syntax-keyword); + } + + .markdown-body .pl-s, + .markdown-body .pl-pds, + .markdown-body .pl-s .pl-pse .pl-s1, + .markdown-body .pl-sr, + .markdown-body .pl-sr .pl-cce, + .markdown-body .pl-sr .pl-sre, + .markdown-body .pl-sr .pl-sra { + color: var(--color-prettylights-syntax-string); + } + + .markdown-body .pl-v, + .markdown-body .pl-smw { + color: var(--color-prettylights-syntax-variable); + } + + .markdown-body .pl-bu { + color: var(--color-prettylights-syntax-brackethighlighter-unmatched); + } + + .markdown-body .pl-ii { + color: var(--color-prettylights-syntax-invalid-illegal-text); + background-color: var(--color-prettylights-syntax-invalid-illegal-bg); + } + + .markdown-body .pl-c2 { + color: var(--color-prettylights-syntax-carriage-return-text); + background-color: var(--color-prettylights-syntax-carriage-return-bg); + } + + .markdown-body .pl-sr .pl-cce { + font-weight: bold; + color: var(--color-prettylights-syntax-string-regexp); + } + + .markdown-body .pl-ml { + color: var(--color-prettylights-syntax-markup-list); + } + + .markdown-body .pl-mh, + .markdown-body .pl-mh .pl-en, + .markdown-body .pl-ms { + font-weight: bold; + color: var(--color-prettylights-syntax-markup-heading); + } + + .markdown-body .pl-mi { + font-style: italic; + color: var(--color-prettylights-syntax-markup-italic); + } + + .markdown-body .pl-mb { + font-weight: bold; + color: var(--color-prettylights-syntax-markup-bold); + } + + .markdown-body .pl-md { + color: var(--color-prettylights-syntax-markup-deleted-text); + background-color: var(--color-prettylights-syntax-markup-deleted-bg); + } + + .markdown-body .pl-mi1 { + color: var(--color-prettylights-syntax-markup-inserted-text); + background-color: var(--color-prettylights-syntax-markup-inserted-bg); + } + + .markdown-body .pl-mc { + color: var(--color-prettylights-syntax-markup-changed-text); + background-color: var(--color-prettylights-syntax-markup-changed-bg); + } + + .markdown-body .pl-mi2 { + color: var(--color-prettylights-syntax-markup-ignored-text); + background-color: var(--color-prettylights-syntax-markup-ignored-bg); + } + + .markdown-body .pl-mdr { + font-weight: bold; + color: var(--color-prettylights-syntax-meta-diff-range); + } + + .markdown-body .pl-ba { + color: var(--color-prettylights-syntax-brackethighlighter-angle); + } + + .markdown-body .pl-sg { + color: var(--color-prettylights-syntax-sublimelinter-gutter-mark); + } + + .markdown-body .pl-corl { + text-decoration: underline; + color: var(--color-prettylights-syntax-constant-other-reference-link); + } + + .markdown-body g-emoji { + display: inline-block; + min-width: 1ch; + font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 1em; + font-style: normal !important; + font-weight: var(--base-text-weight-normal, 400); + line-height: 1; + vertical-align: -0.075em; + } + + .markdown-body g-emoji img { + width: 1em; + height: 1em; + } + + .markdown-body .task-list-item { + list-style-type: none; + } + + .markdown-body .task-list-item label { + font-weight: var(--base-text-weight-normal, 400); + } + + .markdown-body .task-list-item.enabled label { + cursor: pointer; + } + + .markdown-body .task-list-item+.task-list-item { + margin-top: 4px; + } + + .markdown-body .task-list-item .handle { + display: none; + } + + .markdown-body .task-list-item-checkbox { + margin: 0 .2em .25em -1.4em; + vertical-align: middle; + } + + .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em .25em .2em; + } + + .markdown-body .contains-task-list { + position: relative; + } + + .markdown-body .contains-task-list:hover .task-list-item-convert-container, + .markdown-body .contains-task-list:focus-within .task-list-item-convert-container { + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; + } + + .markdown-body ::-webkit-calendar-picker-indicator { + filter: invert(50%); + } \ No newline at end of file diff --git a/.devcontainer/caddy/srv/index.html b/.devcontainer/caddy/srv/index.html new file mode 100644 index 00000000000..da489d9c0c3 --- /dev/null +++ b/.devcontainer/caddy/srv/index.html @@ -0,0 +1,34 @@ +{{$pathParts := splitList "/" .OriginalReq.URL.Path}} +{{$markdownFilename := default "index" (slice $pathParts 2 | join "/")}} +{{$markdownFilePath := printf "/%s.md" $markdownFilename}} +{{if not (fileExists $markdownFilePath)}}{{httpError 404}}{{end}} +{{$markdownFile := (include $markdownFilePath | splitFrontMatter)}} +{{$title := default $markdownFilename $markdownFile.Meta.title}} + + + + + + {{$title}} + + + + + +
{{markdown $markdownFile.Body}}
+ + diff --git a/.devcontainer/caddy/srv/index.md b/.devcontainer/caddy/srv/index.md new file mode 100644 index 00000000000..acaec1c52c4 --- /dev/null +++ b/.devcontainer/caddy/srv/index.md @@ -0,0 +1,48 @@ +{ + "title": "Web Server" +} +## Hosted Apps + +Redirects for available web apps: + +| App | Links | +|-|-| +| [![Foxglove](foxglove/favicon.ico)](foxglove/autolayout) | [**Foxglove Studio**](foxglove/autolayout) | +| [![Gzweb](gzweb/favicon.ico)](gzweb) | [**Gzweb Client**](gzweb) | +| [![Glances](https://nicolargo.github.io/glances/favicon.ico)](glances) | [**System Monitor**](glances) | + +## External Resources + +For more related documentation: + +- [Nav2 Documentation](https://navigation.ros.org) + - [Development Guides](https://navigation.ros.org/development_guides) + - [Dev Containers](https://navigation.ros.org/development_guides/devcontainer_docs) + +## Session Info + +Useful information about host server and remote client: + +|Key | Value | +|-|-| +| Host | `{{.Host}}` | +| Remote IP | `{{placeholder "http.request.remote.host"}}` | +| Date | `{{now}}` | + +### Server Diagnostics + +
+Websocket Debug + +For troubleshooting websocket connections: + +|Key | Value | +|-|-| +| `header.X-Forwarded-Host` | `{{placeholder "header.X-Forwarded-Host"}}` | +| `header.X-Forwarded-Scheme` | `{{placeholder "header.X-Forwarded-Scheme"}}` | +| `http.request.hostport` | `{{placeholder "http.request.hostport"}}` | +| `http.request.scheme` | `{{placeholder "http.request.scheme"}}` | +| `http.vars.WsHost` | `{{placeholder "http.vars.WsHost"}}` | +| `http.vars.WsScheme` | `{{placeholder "http.vars.WsScheme"}}` | + +
diff --git a/.devcontainer/caddy/srv/manifests/foxglove/manifest.json b/.devcontainer/caddy/srv/manifests/foxglove/manifest.json new file mode 100644 index 00000000000..24237b34f42 --- /dev/null +++ b/.devcontainer/caddy/srv/manifests/foxglove/manifest.json @@ -0,0 +1,32 @@ +{ + "name": "Foxglove: {{placeholder "http.request.hostport"}}", + "short_name": "Foxglove: {{placeholder "http.request.hostport"}}", + "icons": [ + { + "src": "/foxglove/apple-touch-icon.png", + "sizes": "180x180", + "type": "image/png" + } + ], + "start_url": "/foxglove/autoconnect", + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone", + "shortcuts" : [ + { + "name": "Auto Connect", + "url": "/foxglove/autoconnect", + "description": "Auto connect to default data source" + }, + { + "name": "Auto Layout", + "url": "/foxglove/autolayout", + "description": "Auto connect using default layout" + }, + { + "name": "Manual Connect", + "url": "/foxglove/", + "description": "Manually connect to data source" + } + ] +} diff --git a/.devcontainer/caddy/srv/manifests/glances/manifest.json b/.devcontainer/caddy/srv/manifests/glances/manifest.json new file mode 100644 index 00000000000..7578cc2fafa --- /dev/null +++ b/.devcontainer/caddy/srv/manifests/glances/manifest.json @@ -0,0 +1,15 @@ +{ + "name": "Glances: {{placeholder "http.request.hostport"}}", + "short_name": "Glances: {{placeholder "http.request.hostport"}}", + "icons": [ + { + "src": "/glances/favicon.ico", + "sizes": "32x32", + "type": "image/ico" + } + ], + "start_url": "/glances", + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/.devcontainer/caddy/srv/manifests/gzweb/manifest.json b/.devcontainer/caddy/srv/manifests/gzweb/manifest.json new file mode 100644 index 00000000000..d97b278a29a --- /dev/null +++ b/.devcontainer/caddy/srv/manifests/gzweb/manifest.json @@ -0,0 +1,15 @@ +{ + "name": "Gzweb: {{placeholder "http.request.hostport"}}", + "short_name": "Gzweb: {{placeholder "http.request.hostport"}}", + "icons": [ + { + "src": "/gzweb/favicon.ico", + "sizes": "64x64", + "type": "image/ico" + } + ], + "start_url": "/gzweb", + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/.devcontainer/caddy/srv/manifests/manifest.json b/.devcontainer/caddy/srv/manifests/manifest.json new file mode 100644 index 00000000000..84bdd22d8ab --- /dev/null +++ b/.devcontainer/caddy/srv/manifests/manifest.json @@ -0,0 +1,8 @@ +{ + "name": "Nav2: {{placeholder "http.request.hostport"}}", + "short_name": "Nav2: {{placeholder "http.request.hostport"}}", + "start_url": "/", + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index c81677a58ca..09aaa5d31d4 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -14,8 +14,8 @@ // "--privileged", // device access to host peripherals, e.g. USB // "--security-opt=seccomp=unconfined", // enable debugging, e.g. gdb ], - "workspaceMount": "source=${localWorkspaceFolder},target=/opt/overlay_ws/src/navigation2,type=bind", "workspaceFolder": "/opt/overlay_ws/src/navigation2", + "workspaceMount": "source=${localWorkspaceFolder},target=${containerWorkspaceFolder},type=bind", "onCreateCommand": ".devcontainer/on-create-command.sh", "updateContentCommand": ".devcontainer/update-content-command.sh", "postCreateCommand": ".devcontainer/post-create-command.sh", diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 2f65dac128b..39bdc832813 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -4,144 +4,121 @@ "version": "2.0.0", "tasks": [ { - "label": "Gzweb", + "label": "Web Server", "icon": { "id": "debug-start" }, "type": "process", - "command": "npm", + "command": "caddy", "args": [ - "start" + "run", + "--watch" ], "options": { - "cwd": "/opt/gzweb", - "env": { - "npm_config_port": "9090" - } + "cwd": "${workspaceFolder}/.devcontainer/caddy" }, - "hide": true, "isBackground": true, + "hide": true, "problemMatcher": [] }, { - "label": "Stop Gzweb", + "label": "Stop Web Server", "icon": { "id": "debug-stop" }, "type": "shell", - "command": "pkill -SIGTERM -f 'npm start' || true", + "command": "echo ${input:Terminate Web Server}", "hide": true, "problemMatcher": [] }, { - "label": "Restart Gzweb", - "icon": { - "id": "debug-restart" - }, - "dependsOn": [ - "Stop Gzweb", - "Gzweb" - ], - "dependsOrder": "sequence", - "problemMatcher": [] - }, - { - "label": "Foxglove Bridge", + "label": "System Monitor", "icon": { "id": "debug-start" }, - "type": "shell", - "command": "source ./install/setup.bash && ros2 run foxglove_bridge foxglove_bridge", - "options": { - "cwd": "/opt/overlay_ws", - }, + "type": "process", + "command": "glances", + "args": [ + "-w" + ], "isBackground": true, "hide": true, "problemMatcher": [] }, { - "label": "Stop Foxglove Bridge", + "label": "Stop System Monitor", "icon": { "id": "debug-stop" }, "type": "shell", - "command": "pkill -SIGTERM -f 'ros2 run foxglove_bridge foxglove_bridge' || true", + "command": "echo ${input:Terminate System Monitor}", "hide": true, "problemMatcher": [] }, { - "label": "Foxglove Studio", + "label": "Gzweb Bridge", "icon": { "id": "debug-start" }, "type": "process", - "command": "caddy", + "command": "npm", "args": [ - "file-server", - "--listen", - ":8080" + "start" ], "options": { - "cwd": "/opt/foxglove", + "cwd": "${env:GZWEB_WS}", + "env": { + "npm_config_port": "9090" + } }, - "isBackground": true, "hide": true, + "isBackground": true, "problemMatcher": [] }, { - "label": "Stop Foxglove Studio", + "label": "Stop Gzweb Bridge", "icon": { "id": "debug-stop" }, "type": "shell", - "command": "pkill -SIGTERM -f 'caddy file-server --listen :8080' || true", + "command": "echo ${input:Terminate Gzweb Bridge}", "hide": true, "problemMatcher": [] }, { - "label": "Foxglove", + "label": "Foxglove Bridge", "icon": { "id": "debug-start" }, - "dependsOn": [ - "Foxglove Bridge", - "Foxglove Studio" - ], + "type": "shell", + "command": "source ./install/setup.bash && ros2 run foxglove_bridge foxglove_bridge", + "options": { + "cwd": "${env:OVERLAY_WS}", + }, + "isBackground": true, "hide": true, "problemMatcher": [] }, { - "label": "Stop Foxglove", + "label": "Stop Foxglove Bridge", "icon": { "id": "debug-stop" }, - "dependsOn": [ - "Stop Foxglove Bridge", - "Stop Foxglove Studio" - ], + "type": "shell", + "command": "echo ${input:Terminate Foxglove Bridge}", "hide": true, "problemMatcher": [] }, - { - "label": "Restart Foxglove", - "icon": { - "id": "debug-restart" - }, - "dependsOn": [ - "Stop Foxglove", - "Foxglove" - ], - "dependsOrder": "sequence", - "problemMatcher": [] - }, { "label": "Start Visualizations", "icon": { "id": "debug-start" }, "dependsOn": [ - "Gzweb", - "Foxglove" + "Web Server", + "System Monitor", + "Gzweb Bridge", + "Foxglove Bridge" ], // "hide": true, "problemMatcher": [] @@ -152,8 +129,10 @@ "id": "debug-stop" }, "dependsOn": [ - "Stop Gzweb", - "Stop Foxglove" + "Stop Web Server", + "Stop System Monitor", + "Stop Gzweb Bridge", + "Stop Foxglove Bridge" ], // "hide": true, "problemMatcher": [] @@ -170,5 +149,31 @@ "dependsOrder": "sequence", "problemMatcher": [] } + ], + "inputs": [ + { + "id": "Terminate Web Server", + "type": "command", + "command": "workbench.action.tasks.terminate", + "args": "Web Server" + }, + { + "id": "Terminate System Monitor", + "type": "command", + "command": "workbench.action.tasks.terminate", + "args": "System Monitor" + }, + { + "id": "Terminate Gzweb Bridge", + "type": "command", + "command": "workbench.action.tasks.terminate", + "args": "Gzweb Bridge" + }, + { + "id": "Terminate Foxglove Bridge", + "type": "command", + "command": "workbench.action.tasks.terminate", + "args": "Foxglove Bridge" + }, ] } diff --git a/Dockerfile b/Dockerfile index d30b9d75913..2e4d4f75dea 100644 --- a/Dockerfile +++ b/Dockerfile @@ -143,18 +143,24 @@ RUN mv /etc/apt/apt.conf.d/docker-clean /etc/apt/ RUN apt-get update && \ apt-get install -y \ bash-completion \ - gdb + gdb && \ + pip3 install \ + bottle \ + glances # source underlay for shell RUN echo 'source "$UNDERLAY_WS/install/setup.bash"' >> /etc/bash.bashrc +# multi-stage for caddy +FROM caddy:builder AS caddyer + +# build custom modules +RUN xcaddy build \ + --with github.com/caddyserver/replace-response + # multi-stage for visualizing FROM dever AS visualizer -# install foxglove dependacies -RUN echo "deb https://dl.cloudsmith.io/public/caddy/stable/deb/debian any-version main" > /etc/apt/sources.list.d/caddy-stable.list -RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 65760c51edea2017cea2ca15155b6d79ca56ea34 - # install demo dependencies RUN apt-get update && apt-get install -y \ ros-$ROS_DISTRO-aws-robomaker-small-warehouse-world \ @@ -176,9 +182,9 @@ RUN apt-get install -y --no-install-recommends \ # clone gzweb ENV GZWEB_WS /opt/gzweb -RUN git clone --branch python3 https://github.com/ruffsl/gzweb.git $GZWEB_WS +RUN git clone https://github.com/osrf/gzweb.git $GZWEB_WS -# build gzweb +# setup gzweb RUN cd $GZWEB_WS && . /usr/share/gazebo/setup.sh && \ GAZEBO_MODEL_PATH=$GAZEBO_MODEL_PATH:$(find /opt/ros/$ROS_DISTRO/share \ -mindepth 1 -maxdepth 2 -type d -name "models" | paste -s -d: -) && \ @@ -189,17 +195,22 @@ RUN cd $GZWEB_WS && . /usr/share/gazebo/setup.sh && \ RUN GZSERVER=$(which gzserver) && \ mv $GZSERVER $GZSERVER.orig && \ echo '#!/bin/bash' > $GZSERVER && \ - echo 'xvfb-run -s "-screen 0 1280x1024x24" gzserver.orig "$@"' >> $GZSERVER && \ + echo 'exec xvfb-run -s "-screen 0 1280x1024x24" gzserver.orig "$@"' >> $GZSERVER && \ chmod +x $GZSERVER # install foxglove dependacies RUN apt-get install -y --no-install-recommends \ - caddy \ ros-$ROS_DISTRO-foxglove-bridge -# copy foxglove +# setup foxglove ENV FOXGLOVE_WS /opt/foxglove -COPY --from=ghcr.io/foxglove/studio /src $FOXGLOVE_WS +# Use custom fork until PR is merged: +# https://github.com/foxglove/studio/pull/5987 +# COPY --from=ghcr.io/foxglove/studio /src $FOXGLOVE_WS +COPY --from=ghcr.io/ruffsl/foxglove_studio@sha256:8a2f2be0a95f24b76b0d7aa536f1c34f3e224022eed607cbf7a164928488332e /src $FOXGLOVE_WS + +# install web server +COPY --from=caddyer /usr/bin/caddy /usr/bin/caddy # multi-stage for exporting FROM tester AS exporter