Progress Bar Component

Ignition
1

Hi All,

Does anyone know if its possible to have 2 process varibles function within the progress bar?

I would like to have it so can show current PV and target PV.

Thanks.

2

No, as its name suggests, it's a progress bar!
You can make your own quite easily using three labels, background, setpoint and actual.

ActualAndSetpoint

Paste the code below into Project Browser | Perspective | Views.

View 
{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 173,
      "width": 489
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "sldActual"
        },
        "position": {
          "height": 0.173,
          "width": 0.3926,
          "x": 0.2738,
          "y": 0.3622
        },
        "props": {
          "value": 28
        },
        "type": "ia.input.slider"
      },
      {
        "meta": {
          "name": "sldSetpoint"
        },
        "position": {
          "height": 0.173,
          "width": 0.3926,
          "x": 0.274,
          "y": 0.573
        },
        "props": {
          "value": 43
        },
        "type": "ia.input.slider"
      },
      {
        "meta": {
          "name": "lblActual"
        },
        "position": {
          "height": 0.173,
          "rotate": {
            "anchor": "50% 169%"
          },
          "width": 0.1022,
          "x": 0.0286,
          "y": 0.3622
        },
        "props": {
          "text": "Actual"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "lblSetpoint"
        },
        "position": {
          "height": 0.173,
          "rotate": {
            "anchor": "50% 169%"
          },
          "width": 0.1022,
          "x": 0.0286,
          "y": 0.573
        },
        "props": {
          "text": "Setpoint"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Track"
        },
        "position": {
          "height": 0.173,
          "width": 1,
          "y": 0.1081
        },
        "props": {
          "style": {
            "backgroundColor": "--neutral-30"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "barActual"
        },
        "position": {
          "height": 0.173,
          "y": 0.1081
        },
        "propConfig": {
          "position.width": {
            "binding": {
              "config": {
                "expression": "{../sldActual.props.value} / 100\r\n"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "backgroundColor": "#5585F2"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "barSetpoint"
        },
        "position": {
          "height": 0.173,
          "width": 0.01,
          "y": 0.1081
        },
        "propConfig": {
          "position.x": {
            "binding": {
              "config": {
                "expression": "{../sldSetpoint.props.value} / 100\r\n"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "backgroundColor": "#233C73"
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "mode": "percent"
    },
    "type": "ia.container.coord"
  }
}
4 Likes
3

thanks.

thats cool!

4

Make a reusable view with parameters for setpoint and actual. Note that I used a coordinate container with width set to percent. Tweak that as required and bind the width of the Actual bar to the "actual" parameter and the X position of the Setpoint bar to the "setpoint" parameter.

1 Like