I have a question about perspective script. Please see the image:
When I want to drag a time schedual to the time component(that is a flex container defineded by myself). I want to create a color block like the blue one in the image(when I drag a new schedual, the time component will show it’s time period , i think I need to create a label component in real time ). So a need a script method like create(‘Label’), and the define it’s label and background .
Does ignition support create perspective components(like Label Icon and so on) through script?
Short answer: No.
Long answer: Yes, but it’s fairly complicated, and only really works well in Flex Containers or as part of a Flex Repeater. What you need to do is place an Embedded View at the location. Now this Embedded View is neither a Label nor an Icon, so what you need to do is make a View which is ONLY a Label or ONLY an Icon.
To do this:
Make a new View (I recommend using a Flex Container for the root).
Select the View node in the Progress browser.
Hold Shift and then right-click the View node, then select (Copy JSON).
Paste the contents of your clipboard into a text editor.
Change the type value to “ia.display.icon” or “ia.display.label”.
If using the Icon, the props object should only have one key: path, and its value should be the path of the icon you want to use.
If using the Label, the props object should only have a text key, and its value should be the text you want displayed.
Now copy the contents of your text editor.
Hold shift and right-click the View node, then select “Paste JSON”.
The final step is to create a new param (path for icon, or text for Label), and bind the path or text to the param.
The following json is a Flex View which is an Icon. I can programmatically place this Icon anywhere in my project by setting the path of an Embedded View to use the path of this View, and supplying a path param which is the path of the Icon I want to use.
{
"custom": {},
"params": {
"path": "material/camera"
},
"propConfig": {
"params.path": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 60,
"width": 60
}
},
"root": {
"meta": {
"name": "root"
},
"propConfig": {
"props.path": {
"binding": {
"config": {
"path": "view.params.path"
},
"type": "property"
}
}
},
"type": "ia.display.icon"
}
}
You need to make sure that you account for whether or not the Embedded View should be displayed if you haven’t selected anything yet, and this is done via EmbeddedView.position.display (false) in Flex-type containers, or EmbeddedView.props.style.display (none) in other containers.
