Slider Problem

richard.mortimer

I'm no expert on this, but when I've had difficulties with sliders, I've bound via the ng-model and added the gettersetter options thus:

ng-model="Settings.TrendSet" ng-model-options="{getterSetter:true}"

Hope that helps!

Richard

pyeager

Hey Richard! Thanks for responding!

Does that code go in the ma-slider tag?

CraigWeb

@pyeager
Could you share your code? I just tested 2 sliders which selected 2 different points by xid and had no problem.

pyeager

Craig:

It may be relevant that I am referencing points in a watchlist, not directly by xid.

I added code per Richard's suggestion above, but it didn't work.

The ma-switch tags work perfectly, btw.

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="bdf6367e-41bf-4705-837e-51b76febf75c" watch-list-xid="WL_4e7ba034-a9e5-465a-9f73-6f051687438f"></ma-watch-list-get>

<!-- main div -->
<div class="ma-designer-root" id="a76ab9f5-436c-44b1-b305-5c85190db2fd" style="width: 800px; height: 900px; position: relative;" ma-center="false">
    
    <!-- snowgun data panel -->
    <md-card id="9320c33c-aaea-4754-9f11-1f81a657a3ea" style="position: absolute; left: 313.961px; top: 3.31944px; width: 220px; height: 380px; background-color: rgb(49, 62, 50); z-index: 1; border-width: medium; border-style: outset;">
        <ma-watch-list-parameters id="28ac3d98-fbd8-4e68-ae0f-a951c49da9f6" ng-model="designer.parameters" watch-list="designer.watchList" style="position: absolute; width: 120px; left: 0px; top: 0px; height: 57.9167px; z-index: 1; color: rgb(251, 246, 246); box-sizing: inherit;"></ma-watch-list-parameters>
        <ma-switch id="b18a8052-0a4f-4136-8d49-996d6eb5e2c0" style="position: absolute; left: 95px; top: 40px; height: 45px; width: 75px;" point="designer.points | filter:{name:'Heat'}:true | maFirst"></ma-switch>
        <ma-switch id="1cde7f06-a9a0-4088-a7f6-04788e66da55" style="position: absolute; left: 95px; top: 100px; width: 75px; height: 35px; color: rgb(255, 255, 255); z-index: 1; text-align: center; border-color: rgb(242, 193, 20);" point="designer.points | filter:{name:'Air'}:true | maFirst">Air</ma-switch>
        <ma-switch id="e453ca70-c5a7-40f8-a81b-520a710d9443" style="position: absolute; left: 95px; top: 70px; width: 75px; height: 35px; color: rgb(85, 12, 12); z-index: 1;" point="designer.points | filter:{name:'Fan'}:true | maFirst" display-type="switch">Fan</ma-switch>
        <ma-switch id="9cc6db90-2293-4f9c-aec5-269d777394c6" style="position: absolute; left: 95px; top: 130px; z-index: 2; width: 76.6667px; height: 35px;" point="designer.points | filter:{name:'Auto Throttle'}:true | maFirst"></ma-switch>
        <div id="b6312e4b-201f-4ad5-94e3-bdc30e783088" style="position: absolute; left: 55px; top: 60px; width: 33.9931px; height: 26.9965px;">Heat</div>
        <div id="50d13d9f-dccd-4dbf-b847-b57988091664" style="position: absolute; left: 65px; top: 90px; width: 23.9931px; height: 20.9896px;">Air</div>
        <div id="034536aa-19aa-4d8a-853b-5e1905ca4179" style="position: absolute; left: 60px; top: 120px; width: 30.9896px; height: 20.9896px;">Fan</div>
        <div id="1f359aa4-fed3-4ee3-9f45-971f066ec170" style="position: absolute; left: 85.3333px; top: 260px; width: 41.9618px; height: 20.9896px;">Water</div>
        <div id="2e878eb0-1ca6-415b-bbfb-2f5e9553d44d" style="position: absolute; left: 5px; top: 150px; z-index: 1; width: 86.9792px; height: 22.9861px;">Auto Throttle</div>

        <div id="f4e18517-131b-4f8b-a39e-26a36b39e97f" style="position: absolute; left: 70px; top: 180px; width: 73.9931px; height: 21.9792px; z-index: 1;">Auto Limit</div>
        
        <div id="18f62378-1716-452a-8193-2a62de2ba77c" style="position: absolute; left: 80px; top: 340px;">{{designer.parameters.dn}}</div>
        <div id="328d11b7-38a4-4cd6-aff9-89cb5286a547" style="position: absolute; left: 135px; top: 10px;">wbF</div>
        
        <ma-slider id="0ed34c73-cd0d-4af7-bec2-83d6c49072ab" min="0" max="4" step="1" vertical="false" invert="false" discrete="false" hide-input="true" style="position: absolute; left: 365.278px; top: 224.635px; z-index: 1;" point="designer.points | filter:{name:'Auto Limit'}:true | maFirst"></ma-slider>
        
        <ma-slider id="2bcc3b79-a38d-4cbf-ac04-4e401ee72081" min="0" max="4" step="1" vertical="false" invert="false" discrete="true" hide-input="true" style="position: absolute; left: 30px; top: 295.625px; z-index: 1; height: 20px; width: 150px;" point="designer.points | filter:{name:'Water'}:true | maFirst" ng-model="Settings.TrendSet" ng-model-options="{getterSetter:true}"></ma-slider>
        
        <ma-point-value id="0fff3ae3-e145-4e57-b77e-8706a2c6caff" enable-popup="hide" style="position: absolute; left: 165px; top: 10px; z-index: 2; width: 42.9861px; height: 23.9583px;" point="designer.points | filter:{name:'Wet Bulb'}:true | maFirst"></ma-point-value>
    </md-card>
</div> 



    
    <!-- wet bulb temps -->
    <ma-point-value id="5beedb8d-ab52-4b71-919c-c0279589e5fb" enable-popup="hide" style="position: absolute; left: 300px; top: 705px; z-index: 3; width: 55.9549px; height: 18.9931px; color: rgb(190, 237, 184); background-color: rgba(19, 2, 2, 0.67);" point-xid="DP_d633fdf9-22b6-4a0f-afb5-646eec5bfee4"></ma-point-value>
    <ma-point-value id="dd5dda6f-fa4c-42e1-aaf5-38d70bc58330" enable-popup="hide" style="position: absolute; left: 320px; top: 630px; z-index: 2; width: 54.9826px; height: 19.9653px; color: rgb(109, 233, 109); background-color: rgba(83, 18, 18, 0.8);" point-xid="DP_897140e0-9bcc-4388-b832-83b68962925d"></ma-point-value>

    <!-- dry bulb temps -->
    <ma-point-value id="c234134f-f569-44b4-9112-4539a475abb7" enable-popup="hide" style="position: absolute; left: 180.99px; top: 722.969px; z-index: 2; width: 37.9861px; height: 20px; margin: auto; padding: 4px; background-color: transparent; color: rgb(5, 0, 0); font-weight: bolder;" point-xid="DP_2a63a6d8-ef66-4b87-9f71-9ea9befda3e6" flash-on-change="true"></ma-point-value>
    <ma-point-value id="facf2eda-d2f4-4cf0-9ab3-cc9f726daa89" enable-popup="hide" style="position: absolute; left: 21.9792px; top: 25px; z-index: 2; width: 42.9861px; height: 23.9931px; color: rgb(5, 0, 0); padding: 4px;" point-xid="DP_dc79022b-8378-439a-93dc-f84f3426405c"></ma-point-value>


    <!-- background image -->
    <img id="3b9a616a-f8f9-4ba5-aeea-f344b4abaefd" style="position: absolute; left: 0px; top: 0px; width: 550px;" src="/rest/v2/file-stores/default/CatAerial.jpg">
    
    <!-- snowgun images -->
    <img id="4b5c444a-4149-433f-952e-bedb2de4eaca" style="position: absolute; left: 267px; top: 715px; width: 30px; height: 30px;" src="/rest/v2/file-stores/default/polecat.png" ng-click="designer.parameters = {dn: 'polecat1'}">
    <img id="145c6c46-d066-4fdf-9021-9c9c01d4698c" style="position: absolute; left: 272px; top: 695px; width: 30px; height: 30px;" src="/rest/v2/file-stores/default/polecat.png" ng-click="designer.parameters = {dn: 'polecat2'}">;
    <img id="f507bf7a-0806-4ad4-a531-163b6bbdc0e7" style="position: absolute; left: 280px; top: 670px; width: 30px; height: 30px;" src="/rest/v2/file-stores/default/polecat.png" ng-click="designer.parameters = {dn: 'polecat3'}">;
    <img id="a463757e-7a51-463d-a4fd-d57388100941" style="position: absolute; left: 286px; top: 647px; width: 30px; height: 30px;" src="/rest/v2/file-stores/default/polecat.png" ng-click="designer.parameters = {dn: 'polecat4'}">
    <img id="957a3fa2-e3a0-4b8d-9328-a83fb1f9a73b" style="position: absolute; left: 292px; top: 623px; width: 27.9861px; height: 27.9861px;" src="/rest/v2/file-stores/default/polecat.png" ng-click="designer.parameters = {dn: 'polecat5'}">
    <img id="8fce8e5e-bb3a-44cc-b80c-c2b894bf6756" style="position: absolute; left: 297px; top: 600px; width: 30px; height: 30px;" src="/rest/v2/file-stores/default/polecat.png" ng-click="designer.parameters = {dn: 'polecat6'}">

CraigWeb

Indeed it does not work. it's a little late here to try to figure out why. Here is a way to get it to work.


<ma-slider id="d61ee3c4-ed67-41da-8ed1-cc6c9be98cad" min="0" max="100" step="1" vertical="false" invert="false" discrete="false" hide-input="false" style="position: absolute; left: 97px; top: 71px;" point-xid="{{slider1.xid}}"></ma-slider>
    <ma-slider id="310448f1-30a2-4f81-ba11-faa0f496ea2f" min="0" max="100" step="1" vertical="false" invert="false" discrete="false" hide-input="false" style="position: absolute; left: 162px; top: 167px;" point-xid="{{slider2.xid}}"></ma-slider>
    <br>
    
    <ma-calc input="designer.points | filter:{name:'slider1'} | maFirst" output="slider1"></ma-calc>
     <ma-calc input="designer.points | filter:{name:'slider2'} | maFirst" output="slider2"></ma-calc>

pyeager

@craigweb said in Slider Problem:

<ma-slider id="d61ee3c4-ed67-41da-8ed1-cc6c9be98cad" min="0" max="100" step="1" vertical="false" invert="false" discrete="false" hide-input="false" style="position: absolute; left: 97px; top: 71px;" point-xid="{{slider1.xid}}"></ma-slider>
<ma-slider id="310448f1-30a2-4f81-ba11-faa0f496ea2f" min="0" max="100" step="1" vertical="false" invert="false" discrete="false" hide-input="false" style="position: absolute; left: 162px; top: 167px;" point-xid="{{slider2.xid}}"></ma-slider>
<br>
<ma-calc input="designer.points | filter:{name:'slider1'} | maFirst" output="slider1"></ma-calc>
 <ma-calc input="designer.points | filter:{name:'slider2'} | maFirst" output="slider2"></ma-calc>

Craig:

Thanks for responding.

I don't think referring to the data point with an XID works well with a watchlist.

Jared Wiltshire

@pyeager There is a lot of speculation in this thread. Lets go back to what was going wrong in the first place.

What were the actual symptoms? Tell me exactly what you did, and what you saw.
Were there any errors in the browser console?
Can you see a set point value request being made under the network tab when you adjust the slider?
What version of Mango are you using?
What version of the UI module are you using?

pyeager

Jared:

Symptoms:

Using the dashboard designer, add a ma-slider control to adjust a data point via a watchlist. Things work just fine. Add another ma-slider to adjust a different data point via the same watchlist. The second slider doesn't work, and the first one may or may not work.

Errors in Browser Console

Only one, apparently unrelated, referring to problems with md-button and IE.

Network request: Yes, I see a network request under the network tab when moving the slider. The slider returns to zero, but shows the value that attempted to be set.

Version: Mango Automation v3.5.6
mangoUI version 3.5.5

Edit: Not sure if it is relevant, but the data points being referenced are from a virtual data source.

Jared Wiltshire

@pyeager said in Slider Problem:

ng-model="Settings.TrendSet" ng-model-options="{getterSetter:true}"

OK, <ma-slider> should not have a ng-model or ng-model-options attribute. This is incorrect and may be messing with things.

Second issue is that <ma-slider> does not actually retrieve the point value, you have to use a <ma-get-point-value> for this e.g. <ma-get-point-value points="designer.points"></ma-get-point-value>

Full working example -

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="41a7c1bf-a1bb-4d3f-ac6c-18da35e33828" watch-list-xid="WL_ed918c86-646f-4760-b5af-d9285ff86505"></ma-watch-list-get>
<div class="ma-designer-root" id="160b37d3-12b5-473b-a6cc-8a4c79369fe7" style="width: 1366px; height: 768px; position: relative;">
    <ma-slider id="fb902626-d98c-4d3e-a422-1343f98eabf3" min="0" max="100" step="1" vertical="false" invert="false" discrete="false" hide-input="true" style="position: absolute; left: 117px; top: 221px; width: 451px; height: 58px;" point="designer.points | filter:{name:'Temperature'}:true | maFirst"></ma-slider>
    <ma-slider id="f1cb7f87-3da5-494d-b8c5-b039ec3a9f56" min="0" max="100" step="1" vertical="false" invert="false" discrete="false" hide-input="true" style="position: absolute; left: 117px; top: 279px; width: 451px; height: 58px;" point="designer.points | filter:{name:'Temperature2'}:true | maFirst"></ma-slider>
    <ma-get-point-value id="e0000313-b1b7-4c96-8862-191775ea04d9" style="position: absolute; left: 109px; top: 97px;" points="designer.points"></ma-get-point-value>
</div>

pyeager

@jared-wiltshire said in Slider Problem:

<ma-get-point-value id="e0000313-b1b7-4c96-8862-191775ea04d9" style="position: absolute; left: 109px; top: 97px;" points="designer.points"></ma-get-point-value>

Jared:

Simply including the ma-get-point-value tag appears to have solved the problem.

I would point out that this is a bit counter-intuitive, as ma-switch works just fine as coded by the Dashboard Designer. If one can just drag and drop ma-switch and connect it to a data point, it seems to follow that the slider should do the same thing.

Thanks for your help!

Jared Wiltshire

I would agree! I will make it behave the same.