add background.png

README.md

@@ -1,8 +1,17 @@
-# 1. 依赖
- * python3
- * pip
- * nicegui: pip install nicegui
- * interfaces
+# Robot Control GUI
+```
+  展示机器人状态，控制机器人运动。
+```
+
+---
+
+# 1. 依赖环境
+```
+  python3
+  pip
+  nicegui: pip install nicegui
+  interfaces
+```
 
 # 2. 编译运行
 ```
@@ -16,4 +25,5 @@
 
   正常启动Server后，打开浏览器访问 http://localhost:8080/
 
-```
+```
+---

ctrlgui/ctrlgui_node.py

@@ -13,6 +13,7 @@ from std_msgs.msg import String
 from std_srvs.srv import Trigger
 from nicegui import ui
 from interfaces.msg import RobotWorkInfo
+from starlette.staticfiles import StaticFiles
 
 class CtrlGuiNode(Node):
     """ROS2 node that publishes String messages to /robot_status."""
@@ -46,6 +47,22 @@ class CtrlGuiNode(Node):
 
 def build_ui(node: CtrlGuiNode) -> None:
     """Build the NiceGUI UI."""
+    # Add background image using custom CSS
+    ui.add_head_html('''
+        <style>
+            body {
+                background-image: url("/static/background.png");
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-attachment: fixed;
+            }
+            .card-container {
+                background-color: rgba(255, 255, 255, 0.9);
+                border-radius: 10px;
+            }
+        </style>
+    ''')
+    
     # --- build UI ---
     # ui.label('Robot Control GUI Node').classes('text-2xl')
     # message_input = ui.input('Message', value='Hello from NiceGUI')
@@ -75,7 +92,7 @@ def build_ui(node: CtrlGuiNode) -> None:
     ui.label('Robot Work Information').classes('text-xl')
     
     # Create labels for all RobotWorkInfo fields
-    with ui.card().classes('w-full'):
+    with ui.card().classes('w-full card-container'):
         ui.label('Basic Information').classes('text-lg font-bold')
         with ui.grid(columns=2).classes('w-full'):
             msg_id_label = ui.label()
@@ -154,6 +171,11 @@ def main() -> None:
     def main_page():
         build_ui(node)
 
+    # Add static file serving for background image
+    from nicegui import app
+    static_path = os.path.join(os.path.dirname(__file__), '..', 'static')
+    app.mount('/static', StaticFiles(directory=static_path), name='static')
+
     # Ensure clean shutdown when the process exits
     def shutdown() -> None:
         try:
@@ -177,6 +199,9 @@ def main() -> None:
     atexit.register(shutdown)
 
 if __name__ in {"__main__", "__mp_main__"}:
+    # Import StaticFiles for serving static files
+    from starlette.staticfiles import StaticFiles
+    
     # Start NiceGUI honoring HOST/PORT environment variables (configurable via ROS launch)
     host = os.getenv('HOST', '0.0.0.0')
     try:

setup.py

@@ -1,4 +1,6 @@
 from setuptools import find_packages, setup
+import os
+from glob import glob
 
 package_name = 'ctrlgui'
 
@@ -11,6 +13,8 @@ setup(
             ['resource/' + package_name]),
         ('share/' + package_name, ['package.xml']),
         ('share/' + package_name + '/launch', ['launch/ctrlgui.launch.py']),
+        ('share/' + package_name + '/static', 
+            [os.path.join('static', 'background.png')]),
     ],
     install_requires=['setuptools', 'nicegui>=1.4.0'],
     zip_safe=True,
@@ -24,4 +28,4 @@ setup(
             'ctrlgui_node = ctrlgui.ctrlgui_node:main'
         ],
     },
-)
+)

static/generate_bg.py

@@ -0,0 +1,16 @@
+from PIL import Image, ImageDraw
+
+# Create a new image with a simple pattern
+width, height = 800, 600
+image = Image.new('RGB', (width, height), '#f0f0f0')
+
+# Draw a simple pattern
+draw = ImageDraw.Draw(image)
+for i in range(0, width, 20):
+    draw.line([(i, 0), (i, height)], fill='#e0e0e0')
+for i in range(0, height, 20):
+    draw.line([(0, i), (width, i)], fill='#e0e0e0')
+
+# Save the image
+image.save('/root/workspace/hivecore_ws/hivecore_robot_ctrlgui/static/background.png')
+print("Background image created successfully.")