Simple Gauge Background Arc Length

Ignition
,
1

I've got a view in Perspective that shows several different simple gauges with different maxValues. I've noticed that when I increase the maxValue property the length of the background arc shrinks.

image
image681×243 7.49 KB

These 2 gauges will be set with bindings on the maxValues so they change based on what is being measured. When the view reloads, the background arc resets to the correct length, but with the bindings enabled they never reset. Below are the JSONs for both gauges and their parent containers

This is on Ignition 8.1.47

[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_1"
    },
    "position": {
      "x": 457,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC1",
      "Title": "PandA Line 1"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 600,
          "maxValue": 1200,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 1",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]

[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_2"
    },
    "position": {
      "x": 789,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC2",
      "Title": "PandA Line 2"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 12,
          "maxValue": 24,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 2",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]
2
  1. I suggest that you post the JSON of each gauge here (see Wiki - how to post code on this forum) so we can reproduce the problem. For debugging it would be useful if you set different colors for the arc and arcBackground if you haven't already and set the value to 50% of max.
  2. What version are you running?
3

I was wrong in my original post (which I will update after this). When I change the max Value, at first the background arc will shrink, but will correct itself on reload (in designer or perspective workstation) however the full system will have a tag binding on the max value based on what's being displayed (CPM, CPH, CPD) and when I enable those bindings the arc never corrects itself on reload.

Below are the JSONs for the 2 gauges as well as their parent components (I included because the bindings reference the parents).

This is on Ignition 8.1.47

[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_1"
    },
    "position": {
      "x": 457,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC1",
      "Title": "PandA Line 1"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 600,
          "maxValue": 1200,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 1",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]

[
  {
    "type": "ia.container.coord",
    "version": 0,
    "props": {
      "mode": "percent",
      "style": {
        "classes": "DashboardBox_Style",
        "overflow": "hidden",
        "overflowX": "hidden",
        "overflowY": "hidden"
      }
    },
    "meta": {
      "name": "DashboardBox_2"
    },
    "position": {
      "x": 789,
      "y": 26,
      "height": 219,
      "width": 319
    },
    "custom": {
      "PLCName": "PLC2",
      "Title": "PandA Line 2"
    },
    "children": [
      {
        "type": "ia.chart.simple-gauge",
        "version": 0,
        "props": {
          "value": 12,
          "maxValue": 24,
          "arc": {
            "width": 30,
            "color": "#47FF47"
          },
          "arcBackground": {
            "color": "#2B2B2B",
            "opacity": 0.5
          },
          "label": {
            "size": 30,
            "color": "#000000",
            "units": "CPH",
            "maxDecimal": 0
          },
          "style": {
            "classes": []
          }
        },
        "meta": {
          "name": "SimpleGauge"
        },
        "position": {
          "x": -0.0408,
          "y": 0.0594,
          "height": 1.1416,
          "width": 1.0815
        },
        "custom": {},
        "propConfig": {
          "props.label.units": {
            "binding": {
              "config": {
                "path": "parent.custom.Metric"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          },
          "props.maxValue": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Metric"
              },
              "transforms": [
                {
                  "fallback": 20,
                  "inputType": "scalar",
                  "mappings": [
                    {
                      "input": "CPM",
                      "output": 20
                    },
                    {
                      "input": "CPH",
                      "output": 1200
                    },
                    {
                      "input": "CPD",
                      "output": 28800
                    }
                  ],
                  "outputType": "scalar",
                  "type": "map"
                }
              ]
            }
          },
          "props.value": {
            "binding": {
              "type": "property",
              "enabled": false,
              "overlayOptOut": true,
              "config": {
                "path": "parent.custom.Value"
              }
            },
            "persistent": true
          }
        }
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "PandA Line 2",
          "textStyle": {
            "color": "#000000",
            "fontSize": 22,
            "fontWeight": "bold",
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Title"
        },
        "position": {
          "height": 0.1461,
          "width": 1
        },
        "custom": {},
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "parent.custom.Title"
              },
              "overlayOptOut": true,
              "type": "property"
            },
            "persistent": true
          }
        }
      }
    ],
    "propConfig": {
      "custom.Location": {
        "binding": {
          "config": {
            "expression": "replace({this.custom.Title}, \" \", \"_\")"
          },
          "type": "expr"
        }
      },
      "custom.Metric": {
        "binding": {
          "config": {
            "path": ".../InfoPanelContainer/MultiStateButton_Units.custom.State"
          },
          "overlayOptOut": true,
          "transforms": [
            {
              "fallback": "",
              "inputType": "scalar",
              "mappings": [
                {
                  "input": 1,
                  "output": "CPM"
                },
                {
                  "input": 2,
                  "output": "CPH"
                },
                {
                  "input": 3,
                  "output": "CPD"
                }
              ],
              "outputType": "scalar",
              "type": "map"
            }
          ],
          "type": "property"
        }
      },
      "custom.Value": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "indirect",
            "references": {
              "Location": "{this.custom.Location}",
              "Metric": "{this.custom.Metric}",
              "PLC_Name": "{this.custom.PLCName}",
              "Project_Name": "{session.custom.ProjectName}"
            },
            "tagPath": "[default]{Project_Name}/{PLC_Name}/HMI_{Location}_Rate/{Metric}_Current"
          },
          "overlayOptOut": true,
          "type": "tag"
        }
      }
    }
  }
]
4

I haven't managed to replicate the problem. All looks OK so far.

This bit concerns me a little. For example, views read parameters on load but never refer to them again. You don't seem to be doing anything with parameters as far as I can see.

Why and how are you reloading the view?

5

all this is within a tab container, so I tab away, then tab back

6

Try making the troublesome tab persistent so it doesn't need to reload.

Tab persistent
Tab persistent357×530 42.5 KB

Right-click ...

7

The tabs were already set to persistent

I reached out to Inductive Automation Support about it and was just told this was a known bug:

If the “maxValue” and the "minValue" of the Component is changed in the Designer when the Component is selected or via scripting, the component adjusts accordingly but the arcBackground does not appear until we toggle the Preview mode or close/reopen the view.

I found a work around by using a simple gauge with no values set behind the real one to act as a background for now.