Help with manipulating SVG

[iperry]

Heya,

I have a SVG gauge that I am trying to manipulate but I am having difficulty trying to move the value indicator (triangle) or dynamically add a component from the page HTML.

               <div style="position: relative; display: inline-block;"> <!--  class="img-overlay-wrap" -->
                    <ma-svg ng-include="'/modules/mangoUI/web/dev/img/Bar_Gauge_v2.svg'">
                        <div ma-selector="#Bar_Setpoint" style="fill: {{$parent.normalColor}}; y: 57"></div>
                        <div ma-selector="#Arrow" ng-style="{'points': '72,114 2,149 2,79'}" style="fill: {{$parent.normalColor}};"></div>
                        <!-- ng-style="{'points': '72,114 2,149 2,79'}" -->
                        <polygon id="Arrow1" points="72,114 2,149 2,79"/>
                    </ma-svg>
                </div>

I can change the color of the indicator and move the green bar within the main stack easy enough. However, I haven't been able to figure out the syntax for changing the coordinates of the triangle. Also, it would be interesting to add another component dynamically.

Has anyone had success with this? Any ideas?

Thanks
Ian

Update: found this after I posted:
<div ma-selector="#Arrow" transform="translate(30) rotate(45 50 50)"></div>

I don't need to rotate the triangle but it shows how to move it. Makes much more sense to apply a transform to the component instead of calculating the new location myself.

[JoelHaggar]

Here is an example of an SVG with color and coordinates being changed.

<div class="ma-designer-root" id="447bd8dc-dd5d-4955-a00f-38bf41c0864f" style="width: 1366px; height: 768px; position: relative;" ma-scale-to="ma-ui-page-view" ma-center="true">
    <ma-svg id="4806442a-b91e-405c-9ae4-04ff54548554" style="position: absolute; left: 0px; top: 0px; width: 1230px; height: 747.781px;" ng-include="'/rest/v2/file-stores/default/Jupiter Bus Drawing_110117 Model (2)-joel.svg'">
        <div ma-selector="#Breaker1" ng-style="{transform: 'translateX(' + (breaker1.value ? 0 : 30)  + 'px)'}"></div>
        <div ma-selector="#Breaker2" ng-style="{transform: 'translateX(' + (breaker2.value ? 0 : 30)  + 'px)'}"></div>
        <div ma-selector="#Breaker3" ng-style="{transform: 'translateY(' + (breaker3.value ? 0 : -30)  + 'px)'}"></div>
        <div ma-selector="#Breaker1Power" ng-class="{'power-off': !breaker1.value &amp;&amp; (!breaker3.value || !breaker2.value)}"></div>
        <div ma-selector="#Breaker2Power" ng-class="{'power-off': !breaker2.value &amp;&amp; (!breaker3.value || !breaker1.value)}"></div>
    </ma-svg>
    <style>
        .power-off > * {
            stroke: green;
        }
    </style>
    <ma-get-point-value point-xid="DP_TestData_Breaker1" point="breaker1"></ma-get-point-value>
    <ma-get-point-value point-xid="DP_TestData_Breaker2" point="breaker2"></ma-get-point-value>
    <ma-get-point-value point-xid="DP_TestData_Breaker3" point="breaker3"></ma-get-point-value>
    <ma-get-point-value point-xid="DP_TestData_Breaker4" point="breaker4"></ma-get-point-value>
    <ma-switch id="c50ce943-b269-4922-964a-afe45e9994ab" style="position: absolute; left: 1230px; top: 90px;" point="breaker1"></ma-switch>
    <ma-switch id="92e2e353-f4c6-48cd-925b-280915d6ed4e" style="position: absolute; left: 1230px; top: 152px;" point="breaker2"></ma-switch>
    <ma-switch id="a6068041-9570-4ed9-a511-22e46b130b0b" style="position: absolute; left: 1230px; top: 214px;" point="breaker3"></ma-switch>
    <ma-switch id="71515480-e5aa-4637-ad79-bf80c1f4e1ce" style="position: absolute; left: 1230px; top: 276px;" point="breaker4"></ma-switch>
</div>

[iperry]

Hi Joel,

Thanks for the reply. I was able to target the components in the SVG, such as the triangle indicator and bars, and move them about, change their size, change their colour, etc. This is the first time I have really worked with SVG images and now seeing how powerful they can be. I was able to create a working gauge with indicator, setpoints, deadbands, etc for our temperature and liquid height sensors, linked to their respective data points.

The roadblock I am having now is how to add a component to the SVG programmatically. I am playing with a site SVG on which I want to add components as needed. As new sensors are added to the network, I would like them to appear on the site without having to editing the site SVG image. It seems I should be able to do this with the "primitive" svg tag but it doesn't work with the ma-svg tag.

Any suggestions would be great.

Thanks
Ian

[phildunlap]

Hi Ian,

Have you considered using an ng-repeat inside your SVG? You may have to do some work structuring the object that you use in the ng-repeat element to have position information, or perhaps you could base the position off the $index available inside the ng-repeat. Extending what was going on in this thread: https://forum.infiniteautomation.com/topic/3772/svg-ma-selector-change-text-within-svg

Using SVG

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text id="grump" x="65" y="55" class="Rrrrr"></text>
  <text x="{{$index*95}}" y="25" class="Rrrrr" ng-repeat="item in seedText">{{item}}</text>
</svg>

My page

<ma-svg ng-include="'/test.svg'" style="width: 150px">
      <div ma-selector="#grump" ng-bind="textInput"></div>
</ma-svg>

<input type="text" ng-model="textInput" ng-init="textInput='Grumpy!'; seedText=['foo','bar']"></input>

appears as

[iperry]

Hi Phil,

i hadn't considered placing an ng-repeat inside the SVG. This might be something to look at. My concern would be maintaining the file as it is created by our website designer and I wouldn't want to update it each time there is a change made. However, there likely could be a facility in Corel to add code like this to the image.

To extend your example, my original thoughts were to add new components to the svg in the page:

<ma-svg ng-include="'/test.svg'" style="width: 150px">
<div ma-selector="#grump" ng-bind="textInput"></div>
<text x="90" y="55" class="small">Dog</text>
</ma-svg>

Thanks
Ian

[CraigWeb]

Hi @iperry

Do you plan on dynamically editing the SVG to add more elements or dynamically adding SVG's to the page.
Not sure how you have structured your SVG and if new sensors have a relation to the existing sensors ie: connecting pipes or lines ect.

You could do a ng-repeat and dynamically add smaller SVG's for each sensors data that comes from the pages query.

[phildunlap]

@iperry

I don't believe that will work, you would need to define the elements you wish to have in the SVG in the SVG.

@CraigWeb

That's a good idea!