Difference between revisions of "Wiring Editor"

From Open Source Controls Wiki
Jump to navigation Jump to search
Line 20: Line 20:
<pre id="wiringPalette1" style="display:none">
<pre id="wiringPalette1" style="display:none">
[
[
{"key":"node","name":"BEMS Hat","fill":
{"key":"node","name":"BEMS Hat","fill":"palegreen",
]
]
</pre>
</pre>

Revision as of 11:00, 26 June 2022

Concons1.png

Data

Contains invisible JSON data driving this page.



See Also

Ports and Colours

Diagrams are based around nodes (devices) with ports for making connections.

To enable automatic wiring, port types are required as well as rules about how they can be connected.

Colours tend to be the most commonly used identifier for types of connections, with in computer language is a hex value representing red, green and blue. #000000 is black, #ff0000 is red, #00ff00 is green, #ffffff is white, and so on.

However we require another level of distinction as we may desire to wire to a particular GND for example, or to give communications a plus and minus. This is achieved by using the last digit of the colour as a variation, providing 1,048,576 colours (or signal levels), each with 16 variations.

Taking GND (black) for example. #000000 is the default black and used for ground connections. We may however use #00000f for a power supply ground, or #000001 for a less popular ground that can be used if needed in preference to a popular ground.

Compareblk.png

One can take this to an extreme and give every signal level a unique colour value. This may well feature in future live wiring systems.

By default, ports connect to ports of the same colour. However, a 0-10V OUT cannot connect to another 0-10V OUT so we specify compatible ports with a list of compatible colours called signalTypes, in order of preference. If a preferred port type is free it will be used, if not then the next in the list will be tried, and so on. You can see this in use in the following data for a room thermostat, where it is used to allow connection to both a dry contact #00ffffff and a universal input #ffff00. 

{"name":"Room Thermostat","color":"#dbf6cb","leftArray":[],"rightArray":[{"portId":"right0","portColor":"#000000"},{"portId":"right1","portColor":"#00ffff","signalTypes":["#00ffff","#ffff00"]}],"topArray":[],"bottomArray":[],"key":"roomstat","size":"78.78515625 47"}

Rststwire.png Rststwire2.png

How to Use in Articles

The following two elements have been given an id (view in the source) that can then be passed to a diagram using an iframe tag.

The second element has also been hidden from view.

This way it is possible to create a design on this page and then include it into articles using pure JSON.

Versions

Version
wiring10
  • Node shapes added to context menu
wiring9
  • Port selection added to port context menu
wiring8
  • Context menus for links
  • Context menus for changing node and link line type, colour, and thickness
  • Grouping on nodes using Ctrl+G with group context menus
wiring7
  • Port labels shown on hover
wiring6
  • Palette reduced in width
  • Download PNG
wiringFrame basic view with download SVG button

Improvements

  • Number terminals
  • Fix widths with top/bottom terminals
  • Hover text over terminals
  • Change colour of blocks
  • Position terminals (drag along sides)
  • Menu to change line thickness, type, colour, arrows.
  • Optional wire labels = controller number + terminal number (e.g. 101)
Retrieved from ‘https://hwwiki.ddns.net/index.php?title=Wiring_Editor&oldid=1744’