Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Newbie SVG question

Dashboard Designer & Custom AngularJS Pages
Log in to reply
  • N

    I'm trying to change a text object in my SVG graphic with ng-bind

    <div class="ma-designer-root" id="5ecafcd8-a3b4-4ab9-968a-0507e5d53734" style="width: 1366px; height: 768px; position: relative;">
    <ma-svg ng-include="'/rest/v2/file-stores/default/DownstairsFloorplan.svg'">
    <ma-get-point-value point-xid="DP_5ca78a5a-a87a-451e-a987-4f1bd00459d0" point="point1"></ma-get-point-value>
    <div ma-selector="#text1011"  ng-bind="point1.value"></div>
</div>

    When I enter this my default text disappears but the point value does not appear.

    I've tried using "point1.renderedValue"

    and various combinations of values and {{'s with the same result.

    If I enter a string into the ng-bind (such as ng-bind="'72.10'") it works fine, so I believe the issue is that I'm not referencing the point value from <ma-get-point-value> correctly.

    What am I doing wrong?

    0
  • CraigWeb

    Hi @N8Hart
    2 things I see wrong is that you have not closed the </ma-svg>,
    The <ma-get-point-value> should be outside the <ma-svg> component.
    Here is an example of some working code:

    <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>
    0
  • N

    Thank you Craig!

    this worked

    div class="ma-designer-root" id="5ecafcd8-a3b4-4ab9-968a-0507e5d53734" style="width: 1366px; height: 768px; position: relative;">
   <ma-svg ng-include="'/rest/v2/file-stores/default/DownstairsFloorplan.svg'"><div ma-selector="#text1011"  ng-bind="point1.value"></div></ma-svg>
   <ma-get-point-value point-xid="DP_5ca78a5a-a87a-451e-a987-4f1bd00459d0" point="point1"></ma-get-point-value>
   
</div>

    I'm sure that I had the svg closed initially but I messed with it so much that at some point it got cut. I was missing that the ma-selector needed to be within the ma-svg.

    0