feat: Implement grid snapping and panning functionality in ObjectFlowDesigner
- Added grid snapping to object creation and dragging for better alignment. - Introduced panning support with right-click and mouse wheel events for canvas navigation. - Enhanced object properties for transformers and nodes, including detailed information display. - Updated connection properties to include cable type, cross-section, and length. - Implemented validation for overhead cable connections to ensure correct node types. - Improved rendering logic to account for scrolling and grid display. - Added CSS styles for warnings and specific node types for better UI feedback.
This commit is contained in:
Chop
157
readme.md
157
readme.md
@@ -0,0 +1,157 @@
|
||||
# Power System Designer
|
||||
|
||||
A web-based graphical interface for designing electrical power distribution systems. This application allows you to create and connect electrical components including transformers, cable boxes, poles, and various types of power cables.
|
||||
|
||||
## Components
|
||||
|
||||
### 🔺 Transformer
|
||||
|
||||
- **Purpose**: Steps down voltage from high to low voltage
|
||||
- **Data Fields**:
|
||||
- Number: Unique identifier
|
||||
- Name: Custom name for the transformer
|
||||
- Upper Voltage (V): Input voltage level
|
||||
- Bottom Voltage (V): Output voltage level
|
||||
- Power (kVA): Power rating in kilovolt-amperes
|
||||
- Description: Additional notes
|
||||
- **Constraints**: Only one transformer allowed per design, can have only one output connection
|
||||
|
||||
### ⬛ Nodes (Cable Boxes, Poles, and End Connections)
|
||||
|
||||
- **Cable Box Types**: Hand-input description field for custom box types
|
||||
- **Pole Types**: Hand-input description field for custom pole types
|
||||
- **End Connection Types**: Terminal connections for overhead lines
|
||||
- **Data Fields**:
|
||||
- Number: Unique identifier
|
||||
- Name: Custom name
|
||||
- Node Type: Cable box, pole, or end connection
|
||||
- Type Description: Hand-input field for specific subtype
|
||||
- Power Rating (kW): Power capacity for boxes and end connections (not applicable to poles)
|
||||
- Description: Additional notes
|
||||
- **Constraints**:
|
||||
- Cable boxes and poles: One input, multiple outputs
|
||||
- End connections: Multiple inputs, no outputs (terminal points)
|
||||
|
||||
### 🔌 Power Cables
|
||||
|
||||
Four types of power cables are supported:
|
||||
|
||||
#### Ground Cables
|
||||
|
||||
- **YAKY**: Underground power cable
|
||||
- **NA2XY-J**: Underground power cable with improved insulation
|
||||
|
||||
#### Overhead Cables
|
||||
|
||||
- **AL**: Aluminum overhead conductor
|
||||
- **AsXSn**: Aluminum conductor with steel reinforcement
|
||||
|
||||
**Data Fields**:
|
||||
|
||||
- Label: Display name for the cable
|
||||
- Cable Type: One of the four types above
|
||||
- Cross Section (mm²): Cable conductor cross-sectional area
|
||||
- Length (m): Cable length in meters
|
||||
- Description: Additional specifications
|
||||
|
||||
**Constraints**:
|
||||
|
||||
- Overhead cables (AL, AsXSn) can only connect to poles or end connections
|
||||
- Ground cables (YAKY, NA2XY-J) can connect to any nodes
|
||||
- All cables enforce electrical flow direction (no reverse connections)
|
||||
- End connections are terminal points (no outgoing connections allowed)
|
||||
|
||||
## Features
|
||||
|
||||
### Visual Design Interface
|
||||
|
||||
- **Drag & Drop**: Place components by clicking on palette items
|
||||
- **Grid Snapping**: All components automatically snap to a 20px grid for precise alignment
|
||||
- **Connection Mode**: Click "Connect with Cable" then click two components to connect them
|
||||
- **Selection Mode**: Click components or cables to select and edit properties
|
||||
- **Visual Differentiation**:
|
||||
- Transformers appear as green triangles
|
||||
- Poles appear as dark gray squares with ⬆ symbol
|
||||
- Cable boxes appear as blue squares with ⬛ symbol
|
||||
- End connections appear as red squares with ⬤ symbol
|
||||
- Power ratings displayed below boxes and end connections
|
||||
- Custom type descriptions shown below each node
|
||||
- **Enhanced Grid**: Major grid lines every 80px, minor grid lines every 20px for better visual guidance
|
||||
|
||||
### Smart Validation
|
||||
|
||||
- **Component Limits**: Only one transformer per design
|
||||
- **Connection Rules**: Overhead cables automatically validate pole/end connection requirements
|
||||
- **Flow Direction**: Prevents invalid electrical connections
|
||||
- **Duplicate Prevention**: No duplicate connections between same components
|
||||
- **End Connection Rules**: Terminal points cannot have outgoing connections
|
||||
|
||||
### Data Management
|
||||
|
||||
- **Properties Panel**: Edit all component and cable specifications
|
||||
- **Export/Import**: Save and load complete designs as JSON files
|
||||
- **Real-time Updates**: Changes immediately reflected in visual design
|
||||
|
||||
## Usage Instructions
|
||||
|
||||
1. **Adding Components**:
|
||||
|
||||
- Click on "Transformer" or "Node" in the Components panel
|
||||
- Components automatically snap to the grid for precise alignment
|
||||
- For nodes, select type (Cable Box, Pole, or End Connection) in properties
|
||||
- Enter custom type descriptions and power ratings as needed
|
||||
- Components will appear on the canvas and can be moved by dragging (with grid snapping)
|
||||
|
||||
2. **Connecting Components**:
|
||||
|
||||
- Click "Connect with Cable" button
|
||||
- Click on the source component (transformer or node)
|
||||
- Click on the destination component to create a cable connection
|
||||
- Switch back to "Select Mode" to edit properties
|
||||
|
||||
3. **Editing Properties**:
|
||||
|
||||
- Click on any component or cable in Select Mode
|
||||
- Use the Properties panel on the right to edit specifications
|
||||
- Changes are saved automatically
|
||||
|
||||
4. **Validating Design**:
|
||||
|
||||
- Overhead cables will show warnings if not connected to poles or end connections
|
||||
- End connections automatically prevent outgoing connections
|
||||
- Invalid connections are prevented with error messages
|
||||
- Visual indicators show connection status and power ratings
|
||||
|
||||
5. **Saving/Loading**:
|
||||
- Use "Export Data" to save your design as a JSON file
|
||||
- Use "Import Data" to load a previously saved design
|
||||
- "Clear All" removes all components and connections
|
||||
|
||||
## Technical Specifications
|
||||
|
||||
- **Built with**: HTML5 Canvas, CSS3, Vanilla JavaScript
|
||||
- **File Format**: JSON for data persistence
|
||||
- **Browser Support**: Modern browsers with Canvas support
|
||||
- **Responsive**: Adapts to different screen sizes
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
web/
|
||||
├── index.html # Main application interface
|
||||
├── styles.css # CSS styling and layout
|
||||
├── script.js # Core application logic
|
||||
└── README.md # This documentation
|
||||
```
|
||||
|
||||
## Power System Rules Enforced
|
||||
|
||||
1. **Electrical Flow**: Power flows from transformer to nodes only
|
||||
2. **Voltage Levels**: Transformer steps down from high to low voltage
|
||||
3. **Cable Types**: Different cables for underground vs overhead installation
|
||||
4. **Infrastructure**: Overhead cables require pole infrastructure or end connections
|
||||
5. **Connection Limits**: Realistic electrical connection constraints
|
||||
6. **Safety Standards**: Prevents invalid electrical configurations
|
||||
7. **Power Management**: Track power ratings for distribution points and end connections
|
||||
|
||||
This application is designed for educational purposes and basic power system planning. For actual electrical installations, consult qualified electrical engineers and follow local electrical codes.
|
||||
|
||||
Reference in New Issue
Block a user