Need to draw a very simple box that I can change the color of

General Discussion
,
1

Hey all,

I'm looking to create a couple very simple boxes on an HMI screen to show whether a piece of equipment is on/off or faulted.

Any ideas? I saw a couple posts about a drawing editor or tool being brough into perspective but haven't seen anything saying you can actually just draw a box in the designer.

2

Easiest is to use a label. Use styles or manipulate color properties.

https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Label

Edit, example, just copy and paste into your view:

[
  {
    "type": "ia.display.label",
    "version": 0,
    "props": {
      "style": {
        "borderStyle": "solid",
        "borderWidth": 1,
        "textAlign": "center"
      }
    },
    "meta": {
      "name": "Label"
    },
    "position": {
      "x": 25,
      "y": 16,
      "height": 32,
      "width": 169
    },
    "custom": {
      "state": 0
    },
    "propConfig": {
      "props.text": {
        "binding": {
          "type": "property",
          "config": {
            "path": "this.custom.state"
          },
          "transforms": [
            {
              "inputType": "scalar",
              "outputType": "scalar",
              "mappings": [
                {
                  "input": 0,
                  "output": "Off"
                },
                {
                  "input": 1,
                  "output": "On"
                },
                {
                  "input": 2,
                  "output": "Faulted"
                }
              ],
              "fallback": "Unknown",
              "type": "map"
            }
          ]
        }
      }
    }
  }
]
5 Likes
3

Labels are boxes. By default they have no fill and no border. You can change that and @jlandwerlen's example shows you how.

I would advise that you have a look at Perspective's built-in themes and learn to use those colors where possible and to define styles otherwise. This makes it very easy to apply colour consistently throughout your application and to change it without having to edit each component. It also permits very easy switching between light and dark themes.

https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes

https://docs.inductiveautomation.com/display/DOC81/Style+Classes

Watch the Inductive University video on the topic to get you going.

Please be cool with your design and don't choose random garish colours. Copy good GUI designs that your users will be familiar with. Have a read of Changing the Color of a TabStrip Selected Tab Based on the State of a Tag/Multi-state Indicator for some ideas on the subject. While that thread is for a vision application you can design horrible HMIs in Perspective just as easily. Your goal here should be to design a HMI that looks like it was done by a professional rather than by an amateur.

1 Like
4

Yeah, probably the easiest, but SVG's aren't much worse honestly.

[
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 170 170",
      "elements": [
        {
          "type": "rect",
          "fill": {},
          "stroke": {
            "paint": "#000000",
            "width": 10
          },
          "width": 150,
          "height": 150,
          "x": 10,
          "y": 10
        }
      ]
    },
    "meta": {
      "name": "rectangle"
    },
    "position": {
      "x": 99,
      "y": 373,
      "height": 170,
      "width": 170
    },
    "custom": {
      "state": 0
    },
    "propConfig": {
      "props.elements[0].fill.paint": {
        "binding": {
          "type": "property",
          "config": {
            "path": "this.custom.state"
          },
          "transforms": [
            {
              "inputType": "scalar",
              "outputType": "color",
              "mappings": [
                {
                  "input": 0,
                  "output": "#FF0000"
                },
                {
                  "input": 1,
                  "output": "#0000D9"
                }
              ],
              "fallback": "#000000",
              "type": "map"
            }
          ]
        }
      }
    }
  }
]
1 Like