643a4210ea
- 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.
158 lines
6.2 KiB
Markdown
158 lines
6.2 KiB
Markdown
# 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.
|