BusDiagram
GitHub Download

Guide

#First diagram

This example has one four-key push-button and one four-output switching actuator. Key 1 and Key 2 turn L1 and L2 on and off; Key 3 and Key 4 do the same for L1 through L4.

Edit in designer ↗
<bus-diagram>
<script type="application/json">
{
  "formatVersion": 2,
  "title": "Control multiple outputs",
  "description": "A four-key push-button and a four-output switching actuator each use one individual address. Key 1 (on) and Key 2 (off) control L1 and L2; Key 3 (on) and Key 4 (off) control L1 through L4. One telegram can operate several outputs.",
  "lines": [{ "address": "1.1", "name": "Example line" }],
  "groupAddresses": [
    { "address": "1/1/1", "name": "L1–L2 lighting", "dpt": "1.001" },
    { "address": "1/1/2", "name": "L1–L4 lighting", "dpt": "1.001" }
  ],
  "devices": [
    {
      "id": "pushButton",
      "name": "Push-button",
      "address": "1.1.1",
      "kind": "pushButton",
      "behavior": "pushButton/v1",
      "description": "A four-key push-button: one device, one individual address, and one group object per key.",
      "objects": [
        {
          "id": "key1",
          "name": "Key 1",
          "ga": "1/1/1",
          "dpt": "1.001",
          "port": "input",
          "flags": { "W": true, "T": true }
        },
        {
          "id": "key2",
          "name": "Key 2",
          "ga": "1/1/1",
          "dpt": "1.001",
          "port": "input",
          "flags": { "W": true, "T": true }
        },
        {
          "id": "key3",
          "name": "Key 3",
          "ga": "1/1/2",
          "dpt": "1.001",
          "port": "input",
          "flags": { "W": true, "T": true }
        },
        {
          "id": "key4",
          "name": "Key 4",
          "ga": "1/1/2",
          "dpt": "1.001",
          "port": "input",
          "flags": { "W": true, "T": true }
        }
      ],
      "buttons": [
        { "id": "button-0", "label": "Key 1", "press": { "object": "key1", "value": 1 } },
        { "id": "button-1", "label": "Key 2", "press": { "object": "key2", "value": 0 } },
        { "id": "button-2", "label": "Key 3", "press": { "object": "key3", "value": 1 } },
        { "id": "button-3", "label": "Key 4", "press": { "object": "key4", "value": 0 } }
      ]
    },
    {
      "id": "switchActuator",
      "name": "Four-output switching actuator",
      "address": "1.1.2",
      "kind": "switchActuator",
      "behavior": "switchActuator/v1",
      "description": "One four-channel switching actuator. Channels 1 and 2 listen to both group addresses; channels 3 and 4 listen only to 1/1/2.",
      "objects": [
        {
          "id": "c1",
          "name": "Channel 1",
          "ga": ["1/1/1", "1/1/2"],
          "dpt": "1.001",
          "port": "switch",
          "channel": "s1",
          "flags": { "W": true, "T": false }
        },
        {
          "id": "c2",
          "name": "Channel 2",
          "ga": ["1/1/1", "1/1/2"],
          "dpt": "1.001",
          "port": "switch",
          "channel": "s2",
          "flags": { "W": true, "T": false }
        },
        {
          "id": "c3",
          "name": "Channel 3",
          "ga": "1/1/2",
          "dpt": "1.001",
          "port": "switch",
          "channel": "s3",
          "flags": { "W": true, "T": false }
        },
        {
          "id": "c4",
          "name": "Channel 4",
          "ga": "1/1/2",
          "dpt": "1.001",
          "port": "switch",
          "channel": "s4",
          "flags": { "W": true, "T": false }
        }
      ],
      "channels": [
        { "id": "s1", "label": "L1", "equipment": { "type": "lamp" } },
        { "id": "s2", "label": "L2", "equipment": { "type": "lamp" } },
        { "id": "s3", "label": "L3", "equipment": { "type": "lamp" } },
        { "id": "s4", "label": "L4", "equipment": { "type": "lamp" } }
      ]
    }
  ],
  "options": { "speed": 1, "filterTables": false }
}
</script>
</bus-diagram>

#1. Embed the scenario

<script src="bus-diagram.js"></script>

<bus-diagram>
  <script type="application/json">
    { "formatVersion": 2, "lines": [{ "address": "1.1" }], "devices": [] }
  </script>
</bus-diagram>

Place the installation JSON inside a <script type="application/json"> element within <bus-diagram>. The browser does not execute or display that script; the component reads it as data.

#2. Declare the line and group addresses

{
  "formatVersion": 2,
  "title": "Control multiple outputs",
  "lines": [{ "address": "1.1", "name": "Example line" }],
  "groupAddresses": [
    { "address": "1/1/1", "name": "L1–L2 lighting", "dpt": "1.001" },
    { "address": "1/1/2", "name": "L1–L4 lighting", "dpt": "1.001" }
  ],
  "devices": []
}

lines declares twisted-pair lines. Each device's individual address belongs to a declared line. groupAddresses supplies names and DPTs shown in the bus monitor. The complete example adds devices to this skeleton.

#3. Add the push-button

{
  "id": "pushButton",
  "name": "Push-button",
  "address": "1.1.1",
  "kind": "pushButton",
  "behavior": "pushButton/v1",
  "objects": [
    { "id": "key1", "name": "Key 1", "ga": "1/1/1", "dpt": "1.001", "port": "input", "flags": { "W": true, "T": true } },
    { "id": "key2", "name": "Key 2", "ga": "1/1/1", "dpt": "1.001", "port": "input", "flags": { "W": true, "T": true } }
  ],
  "buttons": [
    { "id": "key1", "label": "Key 1", "press": { "object": "key1", "value": 1 } },
    { "id": "key2", "label": "Key 2", "press": { "object": "key2", "value": 0 } }
  ]
}

The device has one individual address regardless of its number of keys. Each communication object has a group address (ga), a DPT, a behavior port, and flags. A button's press action writes a value to its object; the object transmits it when its T flag is set.

#4. Add the switching actuator

{
  "id": "switchActuator",
  "name": "Four-output switching actuator",
  "address": "1.1.2",
  "kind": "switchActuator",
  "behavior": "switchActuator/v1",
  "objects": [
    { "id": "c1", "name": "Channel 1", "ga": ["1/1/1", "1/1/2"], "dpt": "1.001", "port": "switch", "channel": "s1", "flags": { "W": true, "T": false } }
  ],
  "channels": [{ "id": "s1", "label": "L1", "equipment": { "type": "lamp" } }]
}

The first address in ga is the object's sending address; it also listens to subsequent addresses. Channel s1 is an actuator output, and its connected equipment is the lamp shown in the diagram. The complete scenario declares the remaining objects and channels.

#5. Operate the diagram

The diagram is drawn from these declarations. To follow its behavior, press Key 1. A telegram travels from the push-button to the actuator on 1/1/1. Channels 1 and 2 accept it, turning on L1 and L2. The bus monitor shows the telegram; select its row to inspect the frame. Open the designer to modify the scenario.