Simple Gauge Background Arc Length

[Ryan_Marsh]

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.

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"
        }
      }
    }
  }
]

[Transistor]

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?

[Ryan_Marsh]

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"
        }
      }
    }
  }
]

[Transistor]

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

@Ryan_Marsh

When the view reloads, the background arc resets to the correct length

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?

[Ryan_Marsh]

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

[Transistor]

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

Right-click ...

[Ryan_Marsh]

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.

[danielps1818]

Hello!

Does anyone if this bug got fixed? It still occurs as OP said.

Thx!

[lrose]

Doesn't appear that it has been resolved yet. I wouldn't solve it in the same way the OP has though, I would use an embedded SVG.

See

Perspective, faster page

Okay, I had a bit of free time today, so here is a complete SVG solution. You could do the Label as SVG text as well, or a gauge needle if you wanted, I haven't gone that far. Just a little example of the power of using the Ignition Designer to add SVG elements. I didn't include the label for the example. Note: All of this (outside of the calculations needed to find the points for the shape) was done inside of the designer (yes I can be somewhat of a masochist at times. ). First a s…

If you want something more comprehensive than a simple gauge that can be done as well, I will gladly help if I can.

For example (done entierly in the designer).

[Steve_Laubach]

I agree that it's best to do a gauge as an SVG.

You want to center the origin if you're trying to rotate part of an SVG drawing such as the needle. I do that using this style class.

.psc-center-origin{
transform-origin: center;
transform-box: fill-box;
}