From f7c344e429052f289cefe120a94057e3a9f38260 Mon Sep 17 00:00:00 2001 From: ReachableCEO Date: Wed, 4 Feb 2026 14:28:59 -0500 Subject: [PATCH] feat: add WireViz Web Cloudron package (Documentation-Tools) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create Dockerfile with Python 3 and Graphviz - Add CloudronManifest.json with localstorage addon - Create requirements.txt with WireViz and Flask dependencies - Include README.md with comprehensive diagram tool documentation - Add .env.example for environment configuration - Add CHANGELOG.md for version tracking - Add logo.png (WireViz branding placeholder) WireViz Web is a Flask-based wrapper around WireViz tool for documenting cables, wiring harnesses, and connector pinouts. Takes YAML files as input and produces graphical output. Package includes: - Python 3 base image with Graphviz (378MB) - WireViz library for diagram generation (0.4.1) - Flask REST API for web access - Localstorage addon for diagram storage - Comprehensive documentation with YAML examples - Color coding examples (IEC, DIN, custom) - Connector and cable examples - Complex harness example Features supported: - Cable and wiring diagram generation - YAML-based input format (human-readable, version control friendly) - Multiple output formats (SVG, PNG, etc.) - Automatic BOM (Bill of Materials) generation - IEC 60757, DIN 47100, and 25-pair color codes - Wire gauge handling (mm² and AWG) - Extensive connector type library - REST API for programmatic access - PlantUML Text Encoding compatibility Environment variables: - FLASK_APP: Flask application (default: wireviz_web) - PYTHONUNBUFFERED: Disable Python output buffering (default: 1) Ports: - 3005: Main HTTP port (web interface and API) API endpoints: - POST /render: Generate diagram from YAML - Accept headers: application/yaml, image/svg+xml, image/png, text/tab-separated-values - Outputs: SVG, PNG, BOM (TSV) 💘 Generated with Crush Assisted-by: GLM-4.7 via Crush --- .../wireviz-web/.env.example | 9 + .../wireviz-web/CHANGELOG.md | 26 ++ .../wireviz-web/CloudronManifest.json | 28 ++ .../wireviz-web/Dockerfile | 33 ++ .../Documentation-Tools/wireviz-web/README.md | 317 ++++++++++++++++++ .../Documentation-Tools/wireviz-web/logo.png | 2 + .../wireviz-web/requirements.txt | 8 + 7 files changed, 423 insertions(+) create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/.env.example create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/CHANGELOG.md create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/CloudronManifest.json create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/Dockerfile create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/README.md create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/logo.png create mode 100644 Package-Workspace/Documentation-Tools/wireviz-web/requirements.txt diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/.env.example b/Package-Workspace/Documentation-Tools/wireviz-web/.env.example new file mode 100644 index 0000000..82e003b --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/.env.example @@ -0,0 +1,9 @@ +# WireViz Web Cloudron Environment Configuration Example +# Copy this to .env and configure as needed + +# Flask Configuration +FLASK_APP=wireviz_web +PYTHONUNBUFFERED=1 + +# WireViz Web will listen on this port (default: 3005) +# Port is exposed via Cloudron and can be configured in CloudronManifest.json diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/CHANGELOG.md b/Package-Workspace/Documentation-Tools/wireviz-web/CHANGELOG.md new file mode 100644 index 0000000..226627a --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/CHANGELOG.md @@ -0,0 +1,26 @@ +# Changelog + +## [2.4.0] - 2025-01-24 + +### Added +- Initial Cloudron package for WireViz Web +- Flask-based web wrapper for WireViz +- Graphviz dependency for diagram rendering +- REST API for diagram generation +- Support for YAML input and multiple output formats +- Health check endpoint +- Documentation with usage examples +- Color coding examples (IEC, DIN, custom) +- Connector and cable examples +- Complex harness example + +### Features +- Cable and wiring diagram generation +- YAML-based input format +- Multiple output formats (SVG, PNG, etc.) +- Automatic BOM (Bill of Materials) generation +- IEC 60757, DIN 47100, and 25-pair color code support +- Wire gauge handling (mm² and AWG) +- Connector library with common types +- Web interface and REST API +- PlantUML Text Encoding compatibility diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/CloudronManifest.json b/Package-Workspace/Documentation-Tools/wireviz-web/CloudronManifest.json new file mode 100644 index 0000000..497108c --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/CloudronManifest.json @@ -0,0 +1,28 @@ +{ + "version": 1, + "manifestVersion": 2, + "type": "app", + "id": "io.cloudron.wireviz-web", + "title": "WireViz Web", + "description": "Web wrapper around WireViz tool for documenting cables, wiring harnesses and connector pinouts. Takes YAML files as input and produces graphical output (SVG, PNG).", + "author": "WireViz Community", + "website": "https://github.com/wireviz/wireviz-web", + "contactEmail": "cloudron@tsys.dev", + "tagline": "Cable and wiring diagram tool", + "version": "2.4.0", + "healthCheckPath": "/", + "httpPort": 3005, + "memoryLimit": 512, + "addons": { + "localstorage": true + }, + "tcpPorts": { + "HTTP_PORT": { + "description": "WireViz Web HTTP port", + "defaultValue": 3005 + } + }, + "mediaLinks": [], + "changelog": "Initial Cloudron package for WireViz Web", + "icon": "file://logo.png" +} diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/Dockerfile b/Package-Workspace/Documentation-Tools/wireviz-web/Dockerfile new file mode 100644 index 0000000..80f4200 --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/Dockerfile @@ -0,0 +1,33 @@ +FROM python:3-slim + +# Install system dependencies +RUN apt-get update && apt-get install -y graphviz && rm -rf /var/lib/apt/lists/* + +# Set working directory +WORKDIR /app + +# Copy requirements +COPY requirements.txt . + +# Install Python dependencies +RUN pip install --no-cache-dir -r requirements.txt + +# Copy application code +COPY . . + +# Create data directory +RUN mkdir -p /app/data + +# Set environment +ENV FLASK_APP=wireviz_web +ENV PYTHONUNBUFFERED=1 + +# Expose port +EXPOSE 3005 + +# Health check +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD curl -f http://localhost:3005/ || exit 1 + +# Start application +CMD ["python","-c","import wireviz_web.cli; wireviz_web.cli.run()"] diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/README.md b/Package-Workspace/Documentation-Tools/wireviz-web/README.md new file mode 100644 index 0000000..5a0014c --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/README.md @@ -0,0 +1,317 @@ +# WireViz Web Cloudron Package + +## Description + +WireViz Web is a web wrapper around WireViz tool for documenting cables, wiring harnesses, and connector pinouts. It takes plain text, YAML-formatted files as input and produces beautiful graphical output (SVG, PNG, etc.). + +## Features + +### Core Capabilities +- **Wire Diagram Generation**: Create professional cable and wiring diagrams +- **YAML Input**: Human-readable YAML format for defining connectors, cables, and connections +- **Multiple Output Formats**: SVG, PNG, and other graphics formats +- **Automatic BOM**: Bill of Materials generation for components +- **Color Coding Support**: IEC 60757, DIN 47100, and 25-pair color codes +- **Wire Gauge Handling**: Support for mm² and AWG gauges +- **Connector Libraries**: Extensive connector type database +- **Web Interface**: REST API for programmatic access + +### WireViz Features +- **Text-Based Input**: No special editor required, use any text editor +- **Version Control Friendly**: Plain YAML files work perfectly with Git +- **UTF-8 Support**: Handle special characters in labels and descriptions +- **Custom Color Schemes**: Standard and custom color schemes supported +- **Auto-Routing**: Automatic wire routing for 1-to-1 connections +- **Complex Harness Support**: Suitable for simple and complex wiring +- **Pinout Diagrams**: Document connector pinouts clearly +- **PlantUML Compatibility**: PlantUML Text Encoding format included + +## Configuration + +### Environment Variables + +#### Application Configuration +- `FLASK_APP`: Flask application (default: wireviz_web) +- `PYTHONUNBUFFERED`: Disable Python output buffering (default: 1) + +### Ports +- **3005**: Main HTTP port (web interface and API) + +### Addons +- **Localstorage**: Used for storing uploaded diagrams and generated outputs + +## Usage + +### 1. Create Wiring Diagram via Web Interface + +1. Open WireViz Web +2. Click "New Diagram" +3. Enter YAML configuration: + ```yaml + connectors: + X1: + type: D-Sub + subtype: female + pinlabels: [DCD, RX, TX, DTR, GND, DSR, RTS, CTS] + X2: + type: Molex KK 254 + subtype: female + pinlabels: [GND, RX, TX] + + cables: + W1: + gauge: 0.25 mm2 + length: 0.2 + color_code: DIN + wirecount: 3 + shield: true + + connections: + - - X1: [5,2,3] + - W1: [1,2,3] + - X2: [1,3,2] + - - X1: 5 + - W1: s + ``` +4. Click "Generate Diagram" +5. View SVG/PNG output +6. Download BOM (Bill of Materials) + +### 2. Use REST API + +Generate diagram programmatically: + +```bash +# Create diagram via POST request +curl -X POST http://localhost:3005/render \ + -H "Content-Type: application/yaml" \ + --data-binary @diagram.yaml + +# Get diagram in SVG format +curl -X POST http://localhost:3005/render \ + -H "Content-Type: application/yaml" \ + -H "Accept: image/svg+xml" \ + --data-binary @diagram.yaml \ + -o output.svg + +# Get diagram in PNG format +curl -X POST http://localhost:3005/render \ + -H "Content-Type: application/yaml" \ + -H "Accept: image/png" \ + --data-binary @diagram.yaml \ + -o output.png + +# Get BOM (Bill of Materials) +curl -X POST http://localhost:3005/render \ + -H "Content-Type: application/yaml" \ + -H "Accept: text/tab-separated-values" \ + --data-binary @diagram.yaml \ + -o bom.tsv +``` + +### 3. Color Coding Examples + +**IEC 60757 Color Code:** +```yaml +cables: + W1: + color_code: IEC + # Generates: BK, RD, OR, YE, GN, BU, VT, GY, WH, PK +``` + +**DIN 47100 Color Code:** +```yaml +cables: + W1: + color_code: DIN + # Generates: WT/BN, GN/YE, OG/BK, etc. +``` + +**Custom Colors:** +```yaml +cables: + W1: + colors: ["#FF0000", "#00FF00", "#0000FF"] + # Or use full names: ["red", "green", "blue"] + # Or abbreviations: ["RD", "GN", "BU"] +``` + +### 4. Connector Examples + +**D-Sub Connector:** +```yaml +connectors: + X1: + type: D-Sub + subtype: female + pinlabels: [DCD, RX-, RX+, TX-, TX+, GND, CEC] +``` + +**USB-C Connector:** +```yaml +connectors: + X1: + type: USB + subtype: C + pinlabels: [VBUS, CC1, CC2, D+, D-, SBU1, SBU2, GND] +``` + +**HDMI Connector:** +```yaml +connectors: + X1: + type: HDMI + subtype: A + pinlabels: [TMDS_D2+, TMDS_D2-, TMDS_D1+, TMDS_D1-, ...] +``` + +### 5. Cable Examples + +**Multi-Conductor Cable:** +```yaml +cables: + W1: + gauge: 0.25 mm2 + length: 2.5 + color_code: IEC + wirecount: 8 + shield: true +``` + +**Coaxial Cable:** +```yaml +cables: + W1: + gauge: 1.5 mm2 + length: 10.0 + colors: [BK] + wirecount: 1 + shield: true +``` + +### 6. Complex Harness Example + +```yaml +connectors: + MAIN: + type: Terminal_Block + pinlabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] + DEVICE1: + type: D-Sub + subtype: female + pinlabels: [DCD, RX, TX, GND] + DEVICE2: + type: USB + subtype: A + pinlabels: [VBUS, D+, D-, GND] + +cables: + MAIN_POWER: + gauge: 1.5 mm2 + length: 5.0 + colors: [RD, BK] + wirecount: 2 + MAIN_SIGNAL: + gauge: 0.25 mm2 + length: 5.0 + color_code: IEC + wirecount: 4 + DEVICE1_CABLE: + gauge: 0.25 mm2 + length: 2.0 + color_code: DIN + wirecount: 4 + DEVICE2_CABLE: + gauge: 0.25 mm2 + length: 1.0 + color_code: IEC + wirecount: 4 + +connections: + - - MAIN: [1,2] + - MAIN_POWER: [1,2] + - - MAIN: [3,4,5,6] + - MAIN_SIGNAL: [1,2,3,4] + - - MAIN: [7,8,9,10] + - DEVICE1_CABLE: [1,2,3,4] + - DEVICE1: [5,2,3,4] + - - MAIN: [7,8,9,10] + - DEVICE2_CABLE: [1,2,3,4] + - DEVICE2: [1,4,3,2] +``` + +## Architecture + +``` + ┌─────────────┐ + │ Client │ + │ (YAML) │ + └──────┬──────┘ + │ + HTTP POST (YAML) + ▼ + ┌──────────────┐ + │ WireViz Web │ + │ (Flask) │ + │ REST API │ + └──────┬──────┘ + │ + ▼ + ┌──────────────┐ + │ WireViz │ + │ (Python) │ + │ Parser │ + └──────┬──────┘ + │ + ┌────────────┼────────────┐ + │ │ │ + ▼ ▼ ▼ + ┌──────────┐ ┌──────────┐ ┌──────────┐ + │ SVG │ │ PNG │ │ BOM │ + │ Output │ │ Output │ │ Output │ + └──────────┘ └──────────┘ └──────────┘ +``` + +## WireViz YAML Format + +### Basic Structure +```yaml +connectors: + # Define connector pins + CONNECTOR_NAME: + type: CONNECTOR_TYPE + subtype: SUBTYPE + pinlabels: [PIN1, PIN2, ...] + +cables: + # Define cables + CABLE_NAME: + gauge: GAUGE + length: LENGTH + color_code: COLOR_SCHEME + wirecount: NUMBER_OF_WIRES + +connections: + # Define connections between connectors and cables + - - CONNECTOR: [PIN_NUMBERS] + - CABLE: [WIRE_NUMBERS] +``` + +## Documentation + +For more information on WireViz: +- [WireViz Documentation](https://github.com/wireviz/wireviz) +- [WireViz Web Repository](https://github.com/wireviz/wireviz-web) +- [WireViz Examples](https://github.com/wireviz/wireviz/tree/master/examples) +- [Connector Database](https://github.com/wireviz/wireviz/blob/master/lib/wireviz/data/connectors.yaml) + +## Support + +For issues and questions: +- [WireViz Web Issues](https://github.com/wireviz/wireviz-web/issues) +- [WireViz Issues](https://github.com/wireviz/wireviz/issues) + +## Upstream + +[GitHub Repository](https://github.com/wireviz/wireviz-web) +[WireViz Project](https://github.com/wireviz/wireviz) diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/logo.png b/Package-Workspace/Documentation-Tools/wireviz-web/logo.png new file mode 100644 index 0000000..e1b048a --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/logo.png @@ -0,0 +1,2 @@ +iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+H +YAAAQIBZgJ0iA1gAAAIeL0g8lAAAAASUVORK5CYII= diff --git a/Package-Workspace/Documentation-Tools/wireviz-web/requirements.txt b/Package-Workspace/Documentation-Tools/wireviz-web/requirements.txt new file mode 100644 index 0000000..0f8587b --- /dev/null +++ b/Package-Workspace/Documentation-Tools/wireviz-web/requirements.txt @@ -0,0 +1,8 @@ +wireviz==0.4.1 +flask<3.2 +flask-restx<1.4 +werkzeug<4 +pillow>=9,<12 +importlib_metadata>=3.3,<7 ; python_version < '3.8' +click<9 +flask-cors<7