Live library objects

Developers/Playground

Edit the template JSON and change the parameters. Rendering applies the same dynamics rules as Runtime: default style, first matching state, bad quality and disabled.

faceplates/pump.json✓ JSON

{
  "width": 340,
  "height": 210,
  "background": "#ffffff",
  "parameters": {
    "running": "bool",
    "fault": "bool",
    "flow": "float",
    "permit": "bool"
  },
  "elements": [
    {
      "id": "body",
      "kind": "rectangle",
      "x": 0,
      "y": 0,
      "w": 340,
      "h": 210,
      "color": "#f4f7fa",
      "stroke_color": "#ccd7e3",
      "stroke_width": 1
    },
    {
      "id": "title",
      "kind": "text",
      "x": 16,
      "y": 12,
      "w": 200,
      "h": 30,
      "text": "Pump P-01",
      "bold": true,
      "font_size": 16,
      "text_align": "left",
      "color": "#f4f7fa",
      "text_color": "#243c50",
      "border_color": "#f4f7fa"
    },
    {
      "id": "pilot",
      "kind": "lamp",
      "x": 290,
      "y": 12,
      "w": 34,
      "h": 34,
      "tag": "$running",
      "lamp_colors": {
        "on": "#14b889",
        "off": "#d7e0e9",
        "bad": "#e5a339"
      }
    },
    {
      "id": "symbol",
      "kind": "ellipse",
      "x": 20,
      "y": 56,
      "w": 72,
      "h": 72,
      "color": "#ffffff",
      "stroke_color": "#334155",
      "stroke_width": 3,
      "dynamics": {
        "states": [
          {
            "when": {
              "tag": "$fault",
              "op": "eq",
              "value": true
            },
            "style": {
              "stroke_color": "#c64b51",
              "color": "#fbe9ea"
            }
          },
          {
            "when": {
              "tag": "$running",
              "op": "eq",
              "value": true
            },
            "style": {
              "stroke_color": "#147d75",
              "color": "#e3f6f1"
            }
          }
        ],
        "bad": {
          "stroke_color": "#da982f"
        }
      }
    },
    {
      "id": "rotor",
      "kind": "line",
      "x": 36,
      "y": 72,
      "w": 40,
      "h": 40,
      "points": [
        [
          0,
          0
        ],
        [
          1,
          1
        ]
      ],
      "stroke_color": "#334155",
      "stroke_width": 3,
      "dynamics": {
        "states": [
          {
            "when": {
              "tag": "$running",
              "op": "eq",
              "value": true
            },
            "style": {
              "stroke_color": "#147d75"
            }
          }
        ]
      }
    },
    {
      "id": "flow",
      "kind": "text",
      "x": 108,
      "y": 60,
      "w": 216,
      "h": 32,
      "tag": "$flow",
      "text": "Flow ",
      "unit": " m³/h",
      "decimals": 1,
      "text_align": "left",
      "color": "#ffffff",
      "text_color": "#243c50"
    },
    {
      "id": "state",
      "kind": "text",
      "x": 108,
      "y": 98,
      "w": 216,
      "h": 30,
      "text": "STOPPED",
      "bold": true,
      "color": "#e9eef3",
      "text_color": "#63768b",
      "dynamics": {
        "states": [
          {
            "when": {
              "tag": "$fault",
              "op": "eq",
              "value": true
            },
            "style": {
              "text": "FAULT",
              "color": "#c64b51",
              "text_color": "#ffffff"
            }
          },
          {
            "when": {
              "tag": "$running",
              "op": "eq",
              "value": true
            },
            "style": {
              "text": "RUNNING",
              "color": "#147d75",
              "text_color": "#ffffff"
            }
          }
        ],
        "bad": {
          "color": "#da982f",
          "text_color": "#ffffff",
          "text": "—"
        }
      }
    },
    {
      "id": "start",
      "kind": "button",
      "x": 20,
      "y": 148,
      "w": 146,
      "h": 44,
      "text": "Start",
      "tag": "$running",
      "action": "set",
      "value": true,
      "color": "#147d75",
      "text_color": "#ffffff",
      "dynamics": {
        "enabled": {
          "tag": "$permit",
          "op": "eq",
          "value": true,
          "bad": false
        },
        "disabled": {
          "color": "#d7e0e9",
          "text_color": "#8a9aab"
        },
        "disabled_reason": "No permit"
      }
    },
    {
      "id": "stop",
      "kind": "button",
      "x": 176,
      "y": 148,
      "w": 146,
      "h": 44,
      "text": "Stop",
      "tag": "$running",
      "action": "set",
      "value": false,
      "color": "#ffffff",
      "text_color": "#243c50",
      "border_color": "#ccd7e3"
    }
  ]
}

Preview340 × 210

Parameters

$runningbool
$faultbool
$flowfloat
42.5
$permitbool

Approximate in-browser preview. Real rendering is done by Qt in Studio and Runtime.

→ Full library object and dynamics reference