Files
BondGraph/BEdit
2026-07-19 22:16:37 +02:00
..
2026-07-19 21:26:27 +02:00
2026-07-19 22:16:37 +02:00
2026-07-19 21:26:27 +02:00
2026-07-19 22:16:37 +02:00
2026-07-19 21:26:27 +02:00
2026-07-19 19:19:15 +02:00
2026-07-19 21:26:27 +02:00
2026-07-19 22:16:37 +02:00
2026-07-19 22:16:37 +02:00

BEdit Qt starter

A small desktop application scaffold using Python and PySide6 (the official Qt bindings). Its interface is maintained in Qt Designer and it includes a main window, menu bar, blank central workspace, common keyboard shortcuts, and persisted window geometry. The application forces Qt's light Fusion palette, so it remains light even when the operating-system theme is dark.

Run it

Python 3.10 or newer is required. From this directory:

python -m venv .venv

Activate the environment:

  • Windows PowerShell: .venv\Scripts\Activate.ps1
  • Windows Command Prompt: .venv\Scripts\activate.bat
  • Linux/macOS: source .venv/bin/activate

Then install and launch:

python -m pip install --upgrade pip
python -m pip install -e ".[dev]"
python -m bedit

After installation, the bedit command also launches the application.

Project layout

.
├── pyproject.toml          dependencies, package metadata, and `bedit` command
├── README.md
├── ui/main_window.ui       editable Qt Designer source
└── src/bedit
    ├── __main__.py         supports `python -m bedit`
    ├── app.py              starts Qt and applies the forced light palette
    ├── main_window.py      behavior and signal connections
    └── ui_main_window.py   generated from the Designer file; do not hand-edit

Designing the UI further

The project now uses Qt Designer. It is included with PySide6 on most installations. Open the existing form with:

pyside6-designer ui/main_window.ui

In Designer, use the Widget Box to add controls, the Object Inspector to select them, and the Property Editor to name and configure them. Always put widgets in a layout (horizontal, vertical, grid, or form) so the window resizes correctly.

Save the form, close the running application if necessary, then regenerate its Python wrapper:

pyside6-uic ui/main_window.ui -o src/bedit/ui_main_window.py

Do not hand-edit the generated Python file; change the .ui file and regenerate it. Add behavior and signal connections in main_window.py. Widget names from Designer are available there through self.ui, such as self.ui.graphView.

In VS Code, the same commands are available through Terminal → Run Task:

  • Qt: Open Main Window in Designer opens the form for visual editing.
  • Qt: Build Designer Files compiles resources and then regenerates the UI wrapper. It is the default build task, available with Ctrl+Shift+B.
  • The separate resource and UI compilation tasks remain available when only one generated file needs rebuilding.

A sensible next design pass

  1. Sketch the main tasks and screens before choosing widgets.
  2. Turn each major area into its own widget class in src/bedit/widgets/.
  3. Use a QStackedWidget for page-like navigation, or QDockWidget for movable tool panels in an editor-style application.
  4. Use reusable QAction objects for menu commands and any future toolbars.
  5. Keep file/data operations outside widget classes as the application grows.
  6. Add icons through a Qt resource file (.qrc) so packaging is reliable.
  7. Test on Windows regularly; fonts, scaling, and native dialogs vary by platform.

Graph and library prototype

Documents and libraries use the same recursive format: a library is simply a BEdit document used as a copy source. The built-in example defines A, B, and C.

  • A document can own multiple independent top-level graph or text components. Right-click Current Document to create one, and double-click a current component in the tree to activate it.
  • Drag a component from Libraries onto the workspace. Placement recursively copies it with new IDs, leaving no link to the source.
  • Drag components to move them; movement participates in undo and redo.
  • Components, interface terminals, and connections are selectable. Use a rubber band or Ctrl-click for multiple selection, Delete to remove items, and the standard Cut/Copy/Paste shortcuts to duplicate selected component groups.
  • Click an output port and then an input port to create a connection.
  • Double-click a graph component to open its owned subgraph; use Up to return.
  • Graph components show Pointer, Input, and Output tools. Select an interface tool and click the canvas to add a visible internal terminal and a corresponding external block port. Interface terminals can be moved afterward.
  • Right-click a component on the canvas or in Current Document to edit its name, icon shape, icon text, fill color, and border color. The same dialog can hide that component's contained subtree from the Libraries tree.
  • Double-click a text component to edit its input list, output list, and implementation.source JSON.
  • Right-click any graph component under Current Document to add nested graph or text blocks. Any current-document component can also be deleted there.
  • The active document hierarchy has its own Document panel; the Libraries panel contains only configured external libraries.
  • Select one or more blocks and press Ctrl+R, or use the Transform toolbar, to rotate them clockwise by 90 degrees. Rotation is saved and supports undo/redo. Apply JSON updates that source and participates in undo/redo.
  • File → Save writes the complete recursive document to JSON.
  • File → Close Document removes the active document and returns to an empty workspace. An open graph uses a light gray, 32-unit dotted canvas.
  • Edit → Settings → Libraries accepts document files or folders of JSON files.

Every component owns its ports, declarative icon, properties, and child graph:

{
  "format": "bedit-document",
  "version": 1,
  "roots": [{
    "id": "my-component",
    "name": "My Component",
    "position": {"x": 0, "y": 0},
    "interface": {
      "inputs": [{"id": "in", "name": "Input", "type": "signal", "properties": {
        "iconPosition": {"x": 0, "y": 40}
      }}],
      "outputs": [{"id": "out", "name": "Output", "type": "signal", "properties": {
        "iconPosition": {"x": 128, "y": 64}
      }}]
    },
    "icon": {
      "size": {"width": 128, "height": 128},
      "elements": [{
        "type": "rectangle", "x": 32, "y": 32,
        "width": 64, "height": 64,
        "cornerRadius": 5,
        "fill": "#dbeafe", "stroke": "#245c9c",
        "lineWidth": 1.5, "lineStyle": "solid"
      }]
    },
    "properties": {},
    "implementation": {
      "kind": "text",
      "source": {
        "equations": ["out = gain * in"],
        "parameters": {"gain": 1.0}
      }
    }
  }]
}

Graph components use "implementation": {"kind": "graph", "graph": ...}; text components use "implementation": {"kind": "text", "source": ...} and never own a graph. Vector icons can contain rectangles, circles, ellipses, lines, triangles, and text. Each element owns its geometry, fill, stroke, and line style; ports keep their icon anchor in properties.iconPosition. The port type registry controls which types may connect (currently signal only). Graph and icon grid sizes are configured independently in Settings. The recursive model is under src/bedit/document/, library loading and the live Current Document tree are under src/bedit/library/, and graphics are isolated under src/bedit/workspace/.

Optional tools

You do not need another GUI framework. Useful additions are:

  • Qt Designer for drag-and-drop form layout.
  • Ruff for formatting/linting (ruff check .).
  • pytest-qt later for GUI interaction tests.
  • PyInstaller or Nuitka later to produce a Windows .exe.

The light colors are defined in apply_light_theme() in src/bedit/app.py. Adjust that palette if you want different light colors. Avoid a large stylesheet unless the application needs highly customized controls; palettes preserve more of Qt's standard behavior.