eebox

A modular electrical panel designer that runs entirely in the browser. Lay out DIN-rail modules, comb bus bars and terminal bars on a front view of the panel, and wire them in a multi-conductor schematic that stays linked to the placed modules. There is no backend: projects live in your browser or in files, and module libraries are JSON files you bring yourself.

Try it: https://ashevchuk.github.io/eebox/

To work offline, download eebox-<version>.zip from the releases, unpack it and open index.html; it needs no server.

Shift-drag selects several modules at once and dragging one moves them all:

Find a module, node or wire by what it is called (Ctrl+F); a minimap in the corner shows where the view is:

A pump station with automation (File > Examples): the back plate carries rails, two soft starters and a meter fixed to the plate, three cable ducts and the distances from the selected device to its neighbours; a second plate is the door:

The schematic of it joins a controller, an analog input module and a terminal strip to a pressure sensor (signal wires in blue and white), and the terminal schedule lists each way of the strip with where its wires go:

A transfer controller and two contactors switch a workshop to the generator when the mains go away (the mains are switched off in this picture):

Features

• Panel layout. Rails of any length, put anywhere on the panel (one under another or side by side), in 17.5 mm module units. Drag modules from the palette, reorder modules and rails, take modules off a rail onto a shelf and put them back.

• Control and signal wiring. Besides phases, neutral, earth and 24 V, wires can carry analog signals (SP, SN, a 4-20 mA loop or a voltage), the shield of a cable (SH) and the two lines of a serial bus (RA, RB). They are a family of their own: a wire joins a signal to a signal only (or to a contact, C), never to mains or 24 V, and Check reports two different signal lines, or a line and a shield, on one net. A terminal block (kind terminal, such as the 12-way Terminal strip template) has a Terminal schedule: a row for each way with the other ends of its wires on the top and the bottom, in the Tables dialog, as Export > Terminal schedule (CSV) and on the print sheet with the connections. Label the top terminals and Label the bottom terminals in the inspector of a placed module number its terminals from a pattern such as X1:{n} or DI{n}, in order along the module; an empty pattern clears them.

• Several plates. A panel has one or more mounting surfaces, such as the back plate and the doors of a cabinet, each with its own size in millimetres, rows, devices on the plate, ducts and notes; the tabs above the drawing choose which one is shown, + adds a plate and a double click renames it. A row, a device on the plate or a duct is moved to another plate in the inspector, and the wiring schematic is one for all of them. The frame of a drawing is its plate: what reaches outside it is an error in Check, and Fit the plate to what is on it sizes it. Picture exports are of the plate on view, the print sheet has a drawing for each plate, and the full-size print covers every plate.

• Devices on the plate and cable ducts. A device made for the plate (Mounting in the module designer: plate or both), such as a soft starter, a drive or a meter, is dropped away from the rails and stands where it is put, in millimetres. While it is dragged it is drawn to the edges and centres of the other things, and the dashed lines show which. A device that clips on a rail still snaps to the rail; a plate device never does. Duct draws a cable duct between two corners; ducts have a size, a label and a place in the inspector, move with the mouse and the arrow keys, and are copied, deleted, compared and printed like the rest. Overlaps are not refused while arranging: Check lists two things standing on one place (an error, outlined in red), a loose device or duct on a rail, a device where it was not made to stand (plate or rail), and, when the panel's Clearance is set, loose devices and ducts that are closer to another thing than that (advice, outlined in amber). With one device or duct selected, lines show the distance to what is beside it on every side and to the left and top edge of the plate, also while it is dragged. A group moves by the kind of item that is grabbed: modules and combs along the rails, devices on the plate and ducts over the plate.

• Laying out a plate. Select several devices and ducts (Shift-drag a rectangle) and the inspector aligns their edges or middles and spaces them evenly. View > Grid draws devices to a grid of 5, 10 or 25 mm; edges of other things win over the grid, and holding Alt while dragging places a device freely. View > Distances to the neighbours switches off the lines that show the distance from the selected thing to its neighbours. A group chosen on the panel is shown as chosen on the schematic, and the other way round.

• Wire lengths and duct fill. Each wire between two modules on the panel gets an estimated length (the distance between its terminals along and across the plate, plus a slack that the panel sets; between plates, the way out to the nearest edge plus a fixed allowance), shown in the wire list as Run (mm). A wire can be said to run in a duct and a duct can be given a depth; the inspector then shows how full the duct is, and Check advises when it is over half full. Wires are assigned by hand, not routed, and the conductor diameters are typical values that are not verified.

• Context menu. A right click (or the menu key, or Shift+F10) opens a menu of what is under the pointer, on the panel and on the schematic: take a module off its rail, copy, duplicate, delete, align devices on a plate, chain nodes, undo and redo, with the keys shown beside each item. It is an HTML menu, not the browser's, and it does only what the toolbar, the inspector and the keys already do.

• Cut list and wire numbers. Export > Cut list (CSV), the Tables dialog and the print sheet total the wires by cross-section (with a 10 % reserve on the estimated lengths), the DIN rails and the cable ducts. Nodes > Number the wires… gives every wire that has no label a number from a pattern such as W{n}; labels that are already there stay, and the numbers go on after the highest one in use.

• Controller inputs and outputs. Export > Inputs and outputs (CSV), the Tables dialog and the print sheet list every terminal of the controllers with its name, the label it was given and where its wire goes. Fill in the Label column of the CSV and read it back with File > Import terminal labels (CSV)… (a table of Device, Terminal and Label; a blank label takes the label away, and a row that does not fit is skipped with the reason).

• Poles and conductors. A module has real terminals: L, L1-L3, N, PE and PEN per pole, top and bottom, and control terminals: relay contacts (C), which take a wire of any kind, and 24 V DC, which cannot be wired to mains conductors. Neutral and earth bars have custom widths, comb bus bars distribute phases to the modules under them, along their top terminals or, with the bottom combs of the library, along the bottom ones. The pattern of a comb repeats once per unit (L1 L2 L3 N for 3-phase + N), so choose the comb whose period is the width of the modules under it: the 3-phase comb for 3-pole modules of 3 units, the 3-phase + N comb for 4-pole modules of 4.

• Faces of the modules. A module can carry a drawing of its face (art in the library): lines, rectangles, ellipses, polylines and text that follow the width of a resizable copy by staying at the left, right or middle, stretching, or repeating as tiles, so a terminal block grows its screws with its width. The Face mode of the module designer draws them with the mouse: lines, rectangles, ellipses, polylines and text, moved and resized by their handles, with colours, line width, the way a shape follows the width and its place among the others set in fields, and the usual Undo. The designer turns a shape by a quarter or a half turn and flips it about its middle, and turns a text to any angle. Export SVG saves the face as an SVG file in millimetres, with the way each shape follows the width written in attributes of its own, and Import SVG… puts such a file, or any other, on the face of another module; the two together carry a drawing between modules. Import SVG… puts the drawing of an SVG file on the face, as lines, shapes, curves and text, shows what it would look like and says what it leaves out; the file is only read, never run. The bundled devices have faces, so a breaker, an RCD, a relay and a meter look different on the panel. The text of the drawings is set in a bundled font (Noto Sans, SIL Open Font License), which is also written into a saved SVG, so they look the same on every machine.

• A short name for the face. A module has a Name for the palette and the parts list, and may have a Short name, up to 16 characters, which the face shows instead, where the long name does not fit.

• Designing a placed module. Edit module… in the inspector opens the module in the designer. A bundled device cannot be changed, so the designer works on a copy in My modules, and when it is saved the module on the panel is given that copy, losing only the wires of terminals that the copy no longer has (it asks first); the next Edit module… edits the same copy. A module of your own is changed in place, and the project takes the new definition at once when nothing would be lost.

• Earthing systems. A source states how the supply is earthed: TN-S, TN-C-S, TN-C, TT or IT, and choosing the system in the inspector gives the source the conductors of that system (it asks before it removes wires); the system is written on the node. Check then advises when the source's conductors do not fit the system, when a PEN conductor is under 10 mm2 or passes through a switching device, and reports a short circuit where N and PE are joined without a PEN or a PEN is split a second time. A PEN is split into N and PE by a terminal block such as the bundled PEN splitting block; an Earth electrode node bonded to the PEN stands for a repeated earthing. The earth-fault loop and the first fault of an IT system are not calculated, only the phase-to-neutral loop is.

• Wiring schematic. Wire terminal to terminal, or wire all poles of two nodes at once. Wires obey conductor families (phase to phase, N to N, PE to PE, DC to DC; a contact terminal takes any), are routed around nodes and can carry labels.

• Colours of the conductors. File > Colours... chooses how phases, neutral and earth are drawn, on the screen, in exports and in print: the PUE colours (A yellow, B green, C red, the default), the EU ones (L1 brown, L2 black, L3 grey), or a high-contrast set for screens. Colours can be edited one conductor at a time, the earth conductor is yellow-green striped, and a colour that would be lost on its ground, black on the dark screen or yellow on paper, gets an outline. A scheme is exported to and imported from a file.

• Routing wires by hand. Drag a wire in the schematic to move the piece you took hold of; it moves across itself and snaps to the grid, to a gap beside a node and to a gap beside another wire, with a guide line. Drag the piece at a terminal sideways to bend the wire there. Escape cancels a drag and Undo takes it back; a wire keeps its route when its nodes move, and Route automatically in the inspector, or Nodes > Route all wires automatically, gives it back to the router. Nodes > Separate overlapping wires sets wires that run on top of each other, or closer than a gap, side by side. Shift-click selects several wires, and so does a Shift-drag rubber band over empty space; pulling one of them takes along the pieces of the others that run beside it, and Separate then works on the selection only. New sources are put above the schematic and new loads below it. Pulling one wire leaves the others where they are drawn: the automatic wires that would have moved are kept on their routes (Route automatically frees them).

  

• Marks on faults. Wires, nodes and modules that take part in a wiring fault, among them sources of the same phase joined in parallel through closed devices, are marked in red on the drawing as you work, and what Check only advises about, such as a missing earth or wires that lie on top of each other, in amber, with the reason in the inspector of the marked item. Exports and print leave the marks out. The Library and Inspector buttons hide the panels beside the drawing, and they start hidden in a narrow window.

• Check lists the problems. Check opens a list of what is wrong, faults first, then advice, then remarks; a click on an item selects it on the drawing and brings it into view, switching between the panel and the schematic when the item is on the other one.

• Palette. Every module is shown with a small picture of its face. A module of My modules can be copied or taken out of the library from the palette (a panel that uses it keeps its own copy).

• Help. ? in the toolbar lists the shortcuts, and an empty drawing says how to start.

• The face editor with several shapes. Shift- or Ctrl-click and a rubber band select several shapes, which move, turn, flip, align, spread out, copy and paste together, also onto another module; the drawing zooms and pans, and a rectangle or an ellipse can be turned to any angle.

• Arranging the schematic. Ctrl-click and a Ctrl-drag over empty space select several nodes; Nodes > Align and Distribute line them up and Arrange nodes lays the whole schematic out in rows from the sources to the loads.

• Tables. Export > Tables... shows the parts, circuits, wires and ferrules in the application, each column sortable.

• Several projects, earlier states and a backup. File > Projects... keeps projects in the browser next to the autosaved one: save the one on the screen over the stored copy or as a new one, open another, delete one. The application also keeps the last 12 earlier states of the project on the screen, every few minutes and before something replaces it (a new panel, an example, an opened file, a restore), listed under Earlier states. File > Back up everything... downloads one JSON file with the project on the screen, the saved projects, your own libraries, snippets and settings; Restore from backup... adds the projects and snippets (nothing that is stored is overwritten) and replaces libraries and settings with the same id, after asking. The red Clear all data... in the same dialog deletes everything the application keeps in the browser (the project on the screen, stored projects and earlier states, libraries, snippets, settings) after two questions, and reloads the page; back up first.

  

• Passing a project on for approval. A project is one file: Export in the projects list (or File > Save) gives a .eebox.json to send, and Import... in the same list, or dropping such a file on the page, adds the ones that were sent without touching the project on the screen. The panel carries the information that goes with a drawing: revision, author, date, status (draft, for review, changes requested, approved), who approved it and notes. It is written on the frame of the drawing, so it shows in every PNG and SVG, in a block under the title of the print sheet, and in the list of projects.

  

  When a file comes back, File > Compare with a file... (or Compare on a project of the list) shows what differs from the project on the screen: the information, rows, modules, combs, schematic nodes, loads and wires, each with where it was and where it is now.

  

• Notes on the drawings. Note in the toolbar writes a note on the front view or the schematic: press where it points and drag to where the note goes (an arrow is drawn), or just click for a note without an arrow, then type the text. A note is moved by its plate, its arrow by the head, edited with a double click and removed with Delete. Notes go into the PNG, SVG and print, and Text in exports can leave them out; the comparison of two projects lists them.

• Keyboard. With something selected, the arrow keys move it (modules a unit along the rail or between rails, Alt for a quarter of a unit; devices on the plate and ducts 1 mm, Shift for 10 mm, Alt for half a millimetre; nodes 10 mm, Shift for 50 mm), Tab and Shift+Tab go to the next or previous module or node, Enter goes to its fields in the inspector and Escape lets go.

• Wiring helpers. Nodes > Feed the others from the first wires the outputs of the node that was selected first to the inputs of the others, and Chain the selected nodes wires each selected node to the next one down.

• Small windows and touch. Below 1000 px the library and the inspector are drawers over the drawing, one at a time; two fingers zoom and move the drawing on a touch screen, and a trackpad pinch zooms. The toolbar stays on one row: when the window is too narrow, the buttons that are used least go into a More menu and come back when it is wide again, and a drop-down list is kept inside the window. On a touch screen the buttons are taller, a finger held still on the drawing opens the context menu, one finger moves a module or the empty drawing, and a module is dragged from the library drawer with a finger.

• Several tabs. The autosave is one entry for the whole site, so a second tab that writes it is noticed: this tab stops saving and asks which version stands, the other tab's or its own.

• Ukrainian and English. View > Language switches the interface; it starts in the language the browser asks for. The text of the page, the dialogs, the inspector and the common messages are translated; the text of files that are refused for being wrong, the names of the modules of a library and everything you write yourself stay as they are.

• Snippets. Save selection as snippet... keeps the selected modules with the wires between them under a name; Insert puts them on the panel at the nearest free place, with new ids and new nodes on the schematic, and takes the module definitions along if the project does not know them.

• Finding and moving about. Ctrl+F (or Find) looks for a module, comb, source, load or wire by label, name, article number or id and takes you to it; F (or Zoom to selection) zooms to what is selected, and shows everything when nothing is; a minimap in the corner shows where the view is and moves it on a click or drag (View > Minimap).

• Arranging modules. The Modules menu packs the selected modules to the left or right, spreads them with equal gaps, puts them at the start or end of the row, and copies a whole row with its modules, combs and label.

• Editing in the tables. The labels and cross-sections in Wires, and the power, cable and length in Circuits, can be typed over in Export > Tables...; Enter moves to the next row, and a value that the inspector would refuse is refused with the same words.

• Calculation summary. Export > Calculation summary... lists each circuit with a mark for its cable, voltage drop, breaker, RCD and earth, and the reason on hover: what is wrong, and what is not known yet. It uses the cable table of File > Cable settings, which is not verified.

  

• A tour. A first visit starts a short tour of the views and menus; ? has Take the tour for later.

• Print. Export > Print... asks which parts go on the sheet (the drawings, the lists) and the paper, A4, A3 or Letter, landscape or portrait; the browser then shows the pages.

• Lengths. The inspector shows the position and the width of a module in module units or in millimetres; the choice is kept.

• Labels on everything. Modules, rails, wires, terminals, sources, loads and the drawing itself.

• Object inspector. Edit the properties of whatever is selected, with validation. Changes that would remove wires ask first.

• Loads and cables. Give a load its power, power factor, cable length and circuit kind to see the current on every wire, from the load up to the source, the voltage drop, and the smallest cable cross-section that carries the current and keeps the drop within the limit. A cable you pick is checked against the breaker and the limit. The cable table and the norms are edited in File > Cable settings, a form with the table of currents, the voltage drop limits, the conductor values and the fault loop values, where changed values are outlined and a wrong cell is marked where it is; the settings are exported to and imported from a JSON file; the built-in ones are a reference only, see the limits below.

• Power. Set a breaker, switch or contactor to open, a changeover switch to input 1 or 2, or switch a source off in the inspector, and the schematic shows what loses power: wires without voltage go grey and dashed, and what they feed fades. A load's Supplied field says yes or no. Contactors follow their coil and voltage, phase-failure and transfer relays close their contacts when they sense voltage, so a backup supply switched by a relay shows up as live or dead; a contactor can also be forced closed or open. Impulse relays, staircase and time switches, twilight switches and on/off-delay timers have a flag you set in the inspector (output on, delay elapsed), because time is not simulated.

• Examples. File > Examples... opens a studio flat, a house panel, an entry with a PEN conductor split into N and PE, a workshop with a generator on a changeover switch and a workshop where a transfer controller and two contactors switch to the generator by themselves.

• Supply and protection. A source can state its short-circuit current and loop impedance; Check then warns about breakers that cannot break that current and about cables whose fault current is too low to trip their breaker at once. Both are rough: upstream cable impedance and RCDs are ignored, and the trip multiples of the curves are editable and unverified.

• Copy and paste. Shift-click or a Shift-drag rubber band selects several modules, and dragging one of them moves the whole selection; Ctrl+A selects all, Ctrl+C, Ctrl+V and Ctrl+D copy, paste and duplicate them with their labels and widths; Delete removes the selection. Add copies in the inspector places any number of copies edge to edge after the selection, which is how a row of 20 terminal clamps is made.

• Ruler. Ruler in the toolbar (or R) measures on the panel: drag from point to point and it shows the distance in mm and in module units, with its two parts. The ends snap to the edges of modules, combs, rails and the frame, so a gap between two modules reads exactly. Escape switches it off; a measurement is not saved and is left out of exports.

• Real widths. Widths and positions are not limited to whole units: a 22.5 mm relay is 1.2857 units and sits flush against its neighbours.

• Parts and prices. Import a parts list from a CSV file (File > Import library or parts (CSV)...). Modules can carry a price; the parts list and the print sheet total it per currency. A wire list (CSV) names both ends of every wire, and Export > Wire end labels (CSV) gives one label for each end of each wire (Label 1;Label 2;Copies, semicolons, UTF-8) to import into a label printer's software.

• Check. Finds overlaps, wrongly joined conductors, also those that meet only through a closed breaker, switch or contactor (L1 and L2 on the two sides of a one-pole breaker), and orphaned nodes, and warns about design problems: a load without protective earth, a module fed through its outputs only, more current drawn on one phase than a module is rated for, and loads that can be fed without passing an RCD or RCBO.

• Module designer. New module... in the sidebar draws a module and lets you place its terminals with the mouse: click the top or bottom half to add one, drag to move it, Delete to remove it, Undo and Redo to take a step back. A click can add a whole kind of terminal with its standard names (coil A1 A2, contacts 13 14, 11 12 14, supply, DC supply, sensor, a row). Row... adds any number of terminals to a side at once, spread evenly, and Block... makes a terminal block with so many on top and so many below (1 and 1, 1 and 6, 0 and 8, whatever the device has), all one point if you like. Terminals can stand anywhere along the module, not only on a whole unit, and Spread evens them out again. Connect joins two terminals inside the module, drawn as lines to a common point, and All terminals: conductor sets one conductor on all of them. A slider shows the module at another width and a second drawing shows it on a rail as the panel does; Variants... makes a copy for every rating, curve or conductor, so a block in five colours is designed once. Start from a template (breaker, contactor, relay, lighting relay, meter, pilot light, power supply, changeover switch, and for automation a soft starter, a frequency drive, a controller, a control transformer, a large contactor, a large power supply, a meter for a plate) or from nothing; fields for the name, width and height in millimetres, mounting (rail, plate or both), ratings and the selected terminal sit beside the drawing. A device of any size can be made: it stands centred on its rail, and the frame of the panel grows to hold it. Sizes in the templates are typical, not from any maker; check them against the datasheet. Modules are kept in your own My modules library. edit on a module in the palette, or Edit module... in the inspector of a placed one, opens it again; a module of the bundled library is copied first.

• Your own libraries. Import JSON libraries, search and group the palette, update placed modules from a changed library, or write a library in the built-in editor. See docs/library-format.md. Every file the application writes says which release wrote it (generator) and which version of its format it follows; see docs/file-format.md.

• Full-size print. Export > Print full size... cuts what stands on the rails, with its labels and a margin, into overlapping A4 sheets at 1:1, on a white ground, with a dashed line where the next sheet begins, to print at 100 % and glue. The frame of the cabinet is left out and so are sheets with nothing on them.

  

• Output. PNG and SVG on a white ground, parts list and a list of circuits with the ferrules needed (CSV), a print sheet (panel, schematic, parts list, circuits, ferrules), labels for the modules at actual size and markers for the ends of cables, save and open project files, share links, autosave.

Quick start

Open the page, drag modules from the palette onto a rail, switch to Schematic and wire them. To see a finished design, open examples/house-panel.json with Open... or pick one under File > Examples; examples/automation-panel.json is the pump station with two plates.

The bundled Generic IEC modules library is generated from standard rating series and covers breakers, RCDs, RCBOs (also with three phases and a neutral), switches, fuse disconnectors, feed-through terminals (L, N, PE and control, 2.5 to 16 mm2), terminal strips and distribution blocks, surge protectors (spark gap, combined, varistor and fine protection, and for DC), contactors of one to four poles, voltage and phase monitoring relays, lighting relays, changeover switches for a backup input, a transfer controller, meters and small devices. Its widths are typical values and do not come from any manufacturer, so import your own library for real parts.

Development

npm install
npm run dev                 # dev server
npm test                    # unit tests
npm run typecheck
npm run build:dist-file     # static build in dist-file/, opens from file://
npm run e2e                 # smoke test of the built page in Chrome or Chromium (build first)

There are no runtime dependencies. The code is split into a pure model (no DOM, unit-tested) and the UI on top of it; src/library, src/layout, src/schematic, src/electrical and src/project hold the model.

Pushes to main run the tests and deploy dist-file/ to GitHub Pages.

Limits

• The cable table (copper, PVC, 30 °C, methods B1, B2, C and E, 1.5 to 35 mm²) was compared with tables B.52.2, B.52.4 and B.52.10 of IEC 60364-5-52:2009 and matches them. The resistivity, reactance and voltage drop limits are not verified. Check them before relying on a cable size. There is no grouping or temperature correction and no selectivity calculation. The voltage drop is that of the final circuit only, from the panel to the load, with the simplified formula of the standard.
• Currents assume 230 V single-phase and balanced 400 V three-phase loads. Wires behind a phase bar, and wires in a loop, show no current.
• The checks are advice, not a design verification.
• A project keeps its own copy of the modules it uses, so a changed library reaches it only through Update modules from libraries.
• The Ukrainian translation covers the interface and the common messages; some technical messages, such as why a file was refused, are English in both languages.

License

MIT