[FEATURE-1245] Add modifier+click to cycle through components under mouse

Ignition
, ,
1

FactoryTalk has the ability to slow-click through components under the mouse and is super handy.

Can this be added into Vision and (turns out this is already a feature in Vision :slight_smile: Alt+click) Perspective? Except it would be far better if, instead of having to click slowly [long cycle time], have this under a modifier key such as Alt/Option key.

If you haven't used FT, say you have 10 objects all on top of each other, this feature lets you click on them slowly, in order to select the objects beneath each other. It effectively cycles through the objects in z-order.

I'm trying to select the green angled pipe attached to TW20006, but it's somewhere at the bottom of the z-order stack and it's proving difficult...
image

Idea here, in case you want to upvote :slight_smile:

2

Alt-click is actually already supposed to do that, scanning through the code…

EDIT: In Vision, at least.

3

Interesting! I haven’t tried it in Vision, using more Perspective these days but i’ll give it a go!
Would be great to get into Perspective :slight_smile: (I tried in P and no dice)

Just tried in Vision (8.1.0) and it works, awesome! Thanks

4

Not to totally hijack this topic, but I am going to a little bit, the screenshot that you posted; is that from a perspective project? If so how are you accomplishing the process lines?

5

Yep that’s from Perspective. The pipework is all created from essentially Label components with borders. I went one step further though to add the Label inside of a View I use as a template which has params to add borders to top/bottom/left/right, amongst other things like change the colour based on contents and status.

I am, however, considering swapping this over to using a single SVG with essentially the same thing, four borders made up with 4 straight lines. I haven’t tried it yet though, but what I’ve found with using Labels and borders is that they don’t scale if you’re using a percent mode coord container, therefore, the pipework doesn’t line up when you change resolution of the client… whereas SVG lines will (unless you specifically tell them not to scale)

{
  "custom": {
    "pipeStyle": "Pipework/Water/Off"
  },
  "params": {
    "bottom": false,
    "flow": false,
    "left": false,
    "pipeContents": "Water",
    "right": false,
    "top": true,
    "width": "5px"
  },
  "propConfig": {
    "custom.pipeStyle": {
      "binding": {
        "config": {
          "expression": "\u0027Pipework/\u0027 + {view.params.pipeContents} + \u0027/\u0027 + \r\nif({view.params.flow}\r\n\t,\u0027On\u0027\r\n\t,\u0027Off\u0027\r\n)"
        },
        "type": "expr"
      },
      "persistent": true
    },
    "params.bottom": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.flow": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.left": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.pipeContents": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.right": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.top": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.width": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 40,
      "width": 60
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "grow": 1
        },
        "propConfig": {
          "props.style.borderBottomStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.bottom}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderBottomWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.borderLeftStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.left}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderLeftWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.borderRightStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.right}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderRightWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.borderTopStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.top}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderTopWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.classes": {
            "binding": {
              "config": {
                "expression": "{view.custom.pipeStyle} + \u0027 \u0027 +\r\nif({view.params.left}, \u0027Pipework/LabelBorders/Left \u0027, \u0027\u0027) +\r\nif({view.params.right}, \u0027Pipework/LabelBorders/Right \u0027, \u0027\u0027) + \r\nif({view.params.top}, \u0027Pipework/LabelBorders/Top \u0027, \u0027\u0027) + \r\nif({view.params.bottom}, \u0027Pipework/LabelBorders/Bottom\u0027, \u0027\u0027) "
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {}
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}
6

It won’t look quite like that, but the piping we’re adding to Perspective soon :tm: is going to be very, very nice and make things a lot easier.

7

Do you have a screenshot of what it might look like, you know, hypothetically speaking? :slight_smile: From speaking to Travis, I know they'll have start and end anchor points that will "follow" the objects they're attached to, as well as potentially path anchor points along the line to coerce them to points they should traverse. I assume this will work for any components, not just the smart symbols objects? (personally I don't think i'll use these, as I like to have full control)

The thing we like to laugh about is that, in a few years time, we'll come back to some of these projects we've done in Perspective and think to ourselves "what the hell was I thinking?? why did I use Labels as pipes??" :laughing: That's the beauty of evolving products and evolving experience

8

Are you using "soon" like "inconceivable" ? I don't think you can trademark that....

2 Likes
9

I'm hip and modern, with my slang from...2006: Urban Dictionary: soon (tm)

I don't know much about the implementation details, I just keep seeing the cool screen recordings one of our devs makes as he works on it. And I don't want to land in hot water for sharing something. Suffice it to say, it's pretty cool.

1 Like