Merge pull request #129 from ecubus/panel

Panel

Author: frankie-zeng

.eslintignore

@@ -9,3 +9,4 @@ resources/bin
 resources/lib
 resources/docs/scriptApi
 resources/buildInScript
+src/renderer/src/views/uds/panel-designer

.vitepress/config.mts

@@ -111,7 +111,7 @@ export default withMermaid({
         const container = document.querySelector('.content-container');
         if (!container) return;
        
-      
+
         container.addEventListener('click', function(e) {
           if (e.target.tagName === 'IMG') {
             // Check if the image is inside an anchor tag
@@ -241,6 +241,9 @@ export default withMermaid({
               { text: 'CAN DBC', link: '/docs/um/dbc' }
             ]
           },
+          {
+            text:'Panel',link:'/docs/um/panel/index.md'
+          },
           {
             text: 'Setting',
 

README.md

@@ -45,6 +45,7 @@ EcuBus-Pro is an open-source alternative to commercial automotive diagnostic too
 - 📊 **Database Support**: LIN LDF (edit & export), CAN DBC (view) - [Details](./docs/um/database.md)
 - 📈 **Data Visualization**: Real-time signal graphing and analysis - [Details](./docs/um/graph/graph.md)
 - ⌨️ **Command Line**: Full-featured CLI for automation and integration - [Details](./docs/um/cli.md)
+- 🎨 **Panel**: Drag-and-drop interface builder for custom UI - [Details](./docs/um/panel/index.md)
 
 [Read the Docs to Learn More.](https://app.whyengineer.com)
 

docs/about/screenshots.md

@@ -12,6 +12,10 @@
 
 ![base1](./graph.gif)
 
+## Panel
+![base1](./../um//panel/base.gif)
+![base1](./../um/panel/base1.gif)
+
 ## Scripting Engine
 
 Built on Node.js, our scripting engine enables:

docs/um/panel/base.gif

@@ -0,0 +1,53 @@
+# Panel
+
+## What is Panel?
+
+The Panel is a flexible, drag-and-drop interface that provides a blank slate where you can freely arrange and connect functional components. Like building with LEGO blocks, you can assemble various features within the Panel to create custom interfaces:
+
+![Panel Interface](./base.gif)
+
+## Panel Capabilities
+
+The Panel feature offers exceptional flexibility for quickly building various demonstrations or testing platforms:
+
+- Create conversion tools with graphical interfaces for users
+- Build testing pipelines with simple, click-based interfaces for production line workers
+- Connect components to DBC/LDF file signals, enabling UI changes to trigger corresponding signal changes, see [Database](./../database)
+- Bind components to user-defined or system variables to display or modify their values, see [Variable](./../var/var)
+- And much more to be discovered!
+
+## Panel Features
+
+### Editing Functionality
+
+The editing interface consists of three main areas:
+
+1. **Component Area**: Contains a wide range of ready-to-use components
+2. **Panel Area**: For placing and arranging components
+3. **Component Property Editor**: For setting component properties such as signal binding, variable binding, etc.
+
+![Editing Interface](./image.png)
+
+### Supported Components
+
+The Canvas currently supports four major categories of components:
+
+- **Interactive Components**: Buttons, inputs, and other user interaction elements
+- **SubForm Components**: Special functionality components
+- **Display Components**: Visual representation elements
+- **Layout Components**: For organizing and structuring your interface
+
+![Component Categories](./image1.png)
+
+More component types will be added in future updates, such as dashboard gauges to simulate a car instrument panel.
+
+
+
+### Display Functionality
+
+After configuring your components, users can view and interact with them in the display mode:
+
+![Display Mode](./base1.gif)
+
+
+