I would like to change the color of a circle in SCADA Widget (SVG) based on a measurement. I can show and update the measurement in the SCADA Widget (SVG), but the color of a circle is not changing.
As described under “Preparing SVG files for the SCADA widget” I have tried to prepare an SVG-File with AngularJS directives. But the detailed notation in SVG/XML is unclear for me.
I have tried to use ng-if for the red circle and ng-style for the black circle, to change the color. The color is not changing, for sure the notation is not correct. Is there somewhere a more detailed guideline or an example, how to change color related to measurement threshold?
Please find the SVG xml code below.
You can save it as a .SVG file and use it as an example.
I tell you that the previous code allows you to change the color, specifically if it is greater than 50 it is red and if it is less it becomes green. This can be modified as needed.
Where should you look to understand the color change condition? On the next line:
style=“{{placeholderValue < 50 ? ‘fill:#00ff00;stroke-width:0.529166’ : ‘fill:#ff0000;stroke-width:0.529166’}}”
This line tells us that if the “PlaceHolderValue” is less than 50 then it will be painted green (#00ff00), on the contrary if it is not met it will be painted red (#ff0000).
I hope my answer has been helpful to you, if you have any additional questions, do not hesitate to let me know.
PS: Use Inkscape to create the circle, then save it as .SVG. Any subsequent modifications to the source code were opened from a notepad. `
Looking at the online docs it shows that the svg syntax supports AngularJS directives, so technically you could use the ng-if however it wouldn’t work in the way you are expecting it. Generally an ng-if is used to control whether the element (in this case the <rect> element) is included in the svg image or not. The ng-if is not intended to work on a single property of the element.
However the good news is that you can just use the same syntax used in to set the style property, but applying this to the height property using a simple ternary operator.
For example, if you just want to control the value of the height property based on the c8y_Pressure, then the following snippet can be used:
height="{{c8y_Pressure > 50 ? '10' : '48'}}"
The above height will be set under the following conditions:
When c8y_Pressure > 50, height will be 10
When c8y_Pressure <= 50, height will be 48
Taking the snippet and applying it to the <rect> element, gives you:
However if you are curious how the example would look if you wanted to used ng-if, then the following should do the same thing visually, but under the hood, two different rect elements are being used, and only one variant is being shown at a time.
<!-- This rectangle will be used when 'c8y_Pressure > 50' -->
<rect
ng-if="c8y_Pressure > 50"
style="fill:#e5544a;stroke-width:0"
id="Füllstand"
width="19"
height="10"
x="108.51614"
y="37.651993" />
<!-- This rectangle will be used when 'c8y_Pressure <= 50' -->
<rect
ng-if="c8y_Pressure <= 50"
style="fill:#e5544a;stroke-width:0"
id="Füllstand"
width="19"
height="48"
x="108.51614"
y="37.651993" />
`