Facility Control

 View Only
  • 1.  Changing button colour based on a counter

    Posted 11-15-2019 18:21

    Hi, I am very new to dashboard so any help is appreciated.

         I am trying to get a button to switch between two colours based on if the value of a counter is even or odd. 



  • 2.  RE: Changing button colour based on a counter

    Posted 11-18-2019 18:55

    Hi Adam,

    You can store the counter as an integer parameter and use ogScript to retrieve this parameter and determine if the value is odd or even. The ogScript setStyle() function allows us to change the colour of a button. I have created a demo panel which demonstrates this and have listed the code for it.

    NOTE: You may notice I left some ogscript.debug() commands in the code. This command outputs to the DashBoard debug console window and is a great tool for learning. You can enable the debug window by clicking: Views > openGear Debug Information

    Please let me know if you have any questions.

     

    <abs contexttype="opengear" gridsize="20" id="_top" keepalive="false">
    <meta>
    <params>
    <param access="1" constrainttype="INT_NULL" name="counter" oid="counter" precision="0" type="INT32" value="11" widget="default"/>
    </params>
    <ogscript/>
    <api>function btnChange() {
    var num = params.getValue("counter", 0);
    if (num%2==0) {
    // Number is even
    ogscript.setStyle("btn","bg#FF0000");
    } else {
    // Number is Odd
    ogscript.setStyle("btn","bg#2614EF");
    }
    }

    function incrementCounter() {
    // Increment counter parameter
    var num = params.getValue("counter", 0);
    num+=1;
    params.setValue("counter", 0, num);
    ogscript.debug("Counter is now: "+num);
    }</api>
    </meta>
    <button buttontype="push" height="172" id="btn" left="54" name="Color Button" style="bg#2614EF;" top="32" width="303">
    <task tasktype="ogscript"/>
    </button>
    <param expand="true" height="120" left="680" oid="counter" style="size:Biggest;" top="60" widget="label" width="360"/>
    <button buttontype="push" height="60" left="420" name="Increment Counter" top="60" width="200">
    <task tasktype="ogscript">incrementCounter();
    btnChange();</task>
    </button>
    <button buttontype="push" height="60" left="420" name="Reset Counter" top="120" width="200">
    <task tasktype="ogscript">params.setValue("counter", 0, 0);
    btnChange();
    ogscript.debug("Counter Reset!");</task>
    </button>
    </abs>

    #DashBoard


  • 3.  RE: Changing button colour based on a counter

    Posted 11-19-2019 03:40

    Thank you Dave! this really helped. 


    #DashBoard