Skip to main content
Version: 9

Creating Custom View Panes in the MoveIt Pro UI

Custom View Panes allow you to add your own control panels, buttons, or web content as view panes in the MoveIt Pro canvas. You can embed external URLs or local HTML files to display your own custom interfaces alongside the built-in visualization and debugging tools. This is ideal for hardware-specific controls your robot might need, like monitoring actuator faults, temperatures, or other statuses. It can also be used for high-level application data like picks per minute, current job, etc.. This guide will walk you through creating your first custom view pane, from adding it through the UI to creating a simple static HTML page.

Add a Custom View Pane via URL​

The simplest way to add a custom view pane is to use an existing URL. You can add any web page or HTML file that's accessible via HTTP.

To add a custom view pane, open the view selector dropdown in any canvas area and click the "Add Custom View Pane" button at the bottom of the menu.

In the modal that appears, you'll see an "Add New URL" input field. To add a new custom view pane:

  1. Enter URL: In the "Add New URL" input field, enter the URL to your HTML content. Supported formats:
    • Absolute URLs: http://example.com/page.html or https://example.com/page.html
    • Relative paths: /path/to/file.html, ./file.html, or ../file.html (max 5 levels deep)
  2. Click the + button: Click the plus (+) button next to the input field to add the pane
  3. Configure the pane: After clicking the + button, the pane will appear in the "Existing Custom Panes" section where you can:
    • Name: Edit the pane name (defaults to "Custom Pane N")
    • URL: View or edit the URL
    • Enable ROS Bridge: Toggle this option if you want your iframe content to interact with ROS topics (see ROS Bridge Integration for details)
  4. Save: Click "Done" to save your custom view pane. It will be available in the view selector dropdown and can be added to your canvas layout.

For example, you can add a world clock view pane by using the following URL:

https://www.clocklink.com/html5embed.php?clock=008&timezone=ACST&color=black&size=91&Title=&Message=&Target=&From=2026,1,1,0,0,0
note

Custom view panes are automatically saved to your browser's storage and will persist across browser sessions. You can manage (add, edit, or remove) custom panes at any time by opening the Custom View Panes modal again.

Create Your Own HTML File​

If you want to create a custom HTML file for your view pane, you can create a simple static HTML page.

For example, create file called my-custom-pane.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Custom Pane</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #1a1a1a;
            color: #ffffff;
        }
        h1 {
            color: #4a9eff;
        }
    </style>
</head>
<body>
    <h1>My Custom Hardware Interface</h1>
    <button type="button">Reset Hardware</button>
</body>
</html>

Save this file in a location accessible via HTTP. For local development, you can:

  • Place it in a web server directory (e.g., Apache, Nginx)
  • Use a simple HTTP server: python3 -m http.server 8000
  • Access it via http://localhost:8000/my-custom-pane.html

Then add it as a custom view pane using the URL http://localhost:8000/my-custom-pane.html following the steps in the previous section.

URL Requirements​

Custom view panes support the following URL formats:

  • Absolute URLs: Must use http:// or https:// protocols
    • Example: https://example.com/dashboard.html
  • Relative paths: Can start with /, ./, or ../
    • Example: /static/panes/dashboard.html
    • Example: ./panes/dashboard.html
    • Example: ../shared/dashboard.html
    • Note: Relative paths using ../ are limited to 5 levels deep for security

Security Considerations​

Custom view panes run in sandboxed iframes with the following security features:

  • Sandbox Permissions: Iframes are created with allow-scripts, allow-same-origin, allow-forms, and allow-popups permissions
  • URL Validation: Only http:// and https:// protocols are allowed for absolute URLs
  • Relative Path Limits: Relative paths using ../ are limited to 5 levels deep to prevent path traversal attacks

When creating custom view panes:

  • Only load content from trusted sources
  • Validate and sanitize any user input in your HTML/JavaScript
  • Use HTTPS when possible for external resources

Next Steps​

Now that you've created your first custom view pane, you can:

  • Add more complex HTML content with CSS styling
  • Include JavaScript for interactive features
  • Enable ROS Bridge integration to interact with ROS topics (see ROS Bridge Integration)