Facility Control

 View Only
  • 1.  toggle button

    Posted 10-23-2020 12:30

    Hello guys,

    I hope everyone be fine.

    I had dealing with toggle button problem for a long time, and I'd like to know if you could help me, please? 

    I want insert a colour on toggle button when it's pressed (on) and I want that this colour disappear when I change from this button to other one. 

    Currently, I can create a toggle button, and by default, it's become blue when I pressed its, but when I click on other, the former continuous with blue colour (pressed state), and it causes confusion during operation of system.  it's this problem I want solve. 

    Thanks, 



  • 2.  RE: toggle button

    Posted 10-23-2020 14:28

    Hello,

    Here is an example panel I have that shows how to use toggle buttons:

    <abs contexttype="opengear" gridsize="20" id="_top" style="">
    <meta>
    <params>
    <param access="1" constrainttype="STRING_CHOICE" maxlength="0" name="toggleChoice" oid="toggleChoice" type="STRING" value="One" widget="radio-toggle">
    <constraint>One</constraint>
    <constraint>Two</constraint>
    <constraint>Three</constraint>
    <constraint>Four</constraint>
    <constraint>Five</constraint>
    </param>
    </params>
    </meta>
    <label height="60" left="40" name="Toggle Buttons Example" style="txt-align:west;size:Bigger;" top="40" width="900"/>
    <label height="20" left="40" name="When you have a Choice Constrained Parameter, you can display them as a Toggle Buttons widget" style="txt-align:west;" top="100" width="900"/>
    <label height="20" left="40" name="Note: There is a &quot;Toggle Button&quot; (singular) and a &quot;Toggle Buttons&quot; (plurar) widget. In this panel, we are using the plural one." style="txt-align:west;" top="120" width="900"/>
    <label height="20" left="40" name="In this panel, there is one parameter which is a choice constrained String. You can see it here:" style="txt-align:west;" top="160" width="580"/>
    <param expand="true" height="60" left="40" oid="toggleChoice" showlabel="false" top="200" width="660"/>
    <label height="20" left="40" name="When applying styles, you can apply three different styles to these buttons, one for the On state, one for the Off state, and one for both (Default)." style="txt-align:west" top="300" width="920"/>
    <param expand="true" height="60" left="40" oid="toggleChoice" showlabel="false" style="size:Big;t:bg#orange;t:fg#panelfg;f:bg#textbg;f:fg#listbg;" top="360" width="660"/>
    <label height="20" left="40" name="In the above parameter view, the default font size is &quot;Big&quot;, the On color is &quot;Orange&quot; with a &quot;White&quot; foreground, and the Off Color is dark with a gray foreground." style="txt-align:west" top="420" width="1000"/>
    <label height="20" left="40" name="Note that if you use a specific style for the On state, you should also specify that style (with a different value) for the Off or Default state. " style="txt-align:west;" top="460" width="900"/>
    <label height="20" left="40" name="Otherwise the style will not change back when the button is no longer on." style="txt-align:west" top="480" width="640"/>
    <simplegrid cols="1" height="280" left="40" top="520" width="120">
    <param expand="true" oid="toggleChoice" showlabel="false"/>
    </simplegrid>
    <label height="20" left="180" name="If you want your buttons in a different orientation, or a multicolumn layout, use a SimpleGrid, with the number of column you want. " style="txt-align:west;" top="520" width="860"/>
    <simplegrid cols="2" height="200" left="180" top="600" width="160">
    <param expand="true" oid="toggleChoice" showlabel="false"/>
    </simplegrid>
    <label height="20" left="180" name="Then place the parameter in that simplegrid." style="txt-align:west" top="540" width="560"/>
    <simplegrid cols="3" height="140" left="360" top="600" width="240">
    <param expand="true" oid="toggleChoice" showlabel="false"/>
    </simplegrid>
    <label height="20" left="40" name="There are different tabs in the Style tab for those three states." style="txt-align:west" top="320" width="680"/>
    </abs>

     

     

    When you have a toggle buttons widget, you can double click on it and set its style.   When you do, you have 3 different tabs, one for "default", one for "on" and one for "off":

     

    If you set a style (like the bg color) for "On", you need to also define it for "Off".   Otherwise when the value goes from on to off, it will not change.   So make sure you define your On color AND your Off color.

     


    #DashBoard


  • 3.  RE: toggle button

    Posted 10-27-2020 14:41

    Hello Ben, 

    Thank you very much for your help, it's an amazing example panel using toggle buttons. I was able to customize my panel the way I always wanted. 

    However, I'm working on a panel which works as a matrix, and when I selected a specific button, I can send one of my input video source to pip that I want (multviewer head). In that case, I have four input video source, an both of them, are set to go to my destination 31.  

    I used ''take crosspoint'' function to create my buttons, as you can see in the photo below. 

    Now, I want to add the param [oid=toggleChoice] on them to change their appearance, making the buttons look like your example. I tried copy this param and added on ''take crosspoint'' task, but it didn't work. 

    Could you help again, please? 


    #DashBoard


  • 4.  RE: toggle button

    Posted 10-27-2020 16:18

    I think what you want is a parameter that is an integer with a choice constraint:

     

    In the choice constraint, put the source number for your crosspoint, and whatever name you want.   In the above examples, we have the sources 2, 7, 12, and 14.

    Then put that parameter on screen, and style it as you want (like in my previous post).

    Then double click on the parameter, and add a task at the bottom.   This task will trigger when the parameter changes.

    In that task, you can use the parameter value to set your crosspoint.   Something like this, but with a crosspoint block instead.

    I assume you would pipe it into either the source, or destination of the set crosspoint block.

    I did not completely understand what you are trying to do.   You may need a second parameter (one for source and one for dest).   But it should be the same process for both.

     

    Here is a panel that has a source and destination parameter.   If either changes, if puts a message on the console with both.

    <abs contexttype="opengear" gridsize="20" id="_top" keepalive="false" style="">
    <meta>
    <params>
    <param access="1" constrainttype="INT_CHOICE" name="source" oid="source" precision="0" type="INT16" value="7" widget="radio-toggle">
    <constraint key="2">Hyperdeck 1</constraint>
    <constraint key="7">Hyperdeck 2</constraint>
    <constraint key="12">Hyperdeck 3</constraint>
    <constraint key="14">Hyperdeck 4</constraint>
    </param>
    <param access="1" constrainttype="INT_CHOICE" name="dest" oid="dest" precision="0" type="INT16" value="14" widget="radio-toggle">
    <constraint key="2">Hyperdeck 1</constraint>
    <constraint key="7">Hyperdeck 2</constraint>
    <constraint key="12">Hyperdeck 3</constraint>
    <constraint key="14">Hyperdeck 4</constraint>
    </param>
    </params>
    </meta>
    <param expand="true" height="80" left="140" oid="source" showlabel="false" top="60" width="580">
    <task tasktype="ogscript">/*! block id=1011,1008,1009,1010 !*/
    ogscript.debug(("Source is " + params.getValue('source', 0) + " Destination is " + params.getValue('dest', 0)));
    /*!!
    &lt;block id="1011" type="ogscript_debug" x="700" y="111" w="243" MESSAGE="ID:1008" /&gt;
    &lt;block id="1008" type="math_add" x="449" y="88" VALUE="Source is " VAL_1="ID:1009" VAL_1_1=" Destination is " VAL_1_2="ID:1010" w="218" VAL_1_3="" /&gt;
    &lt;block id="1009" type="param__top&amp;amp;source (source)[0]" x="10" y="228" w="243" SET="" /&gt;
    &lt;block id="1010" type="param__top&amp;amp;dest (dest)[0]" x="10" y="320" w="243" SET="" /&gt;
    !!*/
    /*!!&lt;checksum&gt;4ce05a8eb5377c4e847c53e2d9f5adb1&lt;/checksum&gt;!!*/</task>
    </param>
    <param expand="true" height="80" left="140" oid="dest" showlabel="false" top="220" width="580">
    <task tasktype="ogscript">


    /*! block id=1011,1008,1009,1010 !*/
    ogscript.debug(("Source is " + params.getValue('source', 0) + " Destination is " + params.getValue('dest', 0)));
    /*!!
    &lt;block id="1011" type="ogscript_debug" x="700" y="111" w="243" MESSAGE="ID:1008" /&gt;
    &lt;block id="1008" type="math_add" x="449" y="88" VALUE="Source is " VAL_1="ID:1009" VAL_1_1=" Destination is " VAL_1_2="ID:1010" w="218" VAL_1_3="" /&gt;
    &lt;block id="1009" type="param__top&amp;amp;source (source)[0]" x="10" y="228" w="243" SET="" /&gt;
    &lt;block id="1010" type="param__top&amp;amp;dest (dest)[0]" x="10" y="320" w="243" SET="" /&gt;
    !!*/
    /*!!&lt;checksum&gt;4ce05a8eb5377c4e847c53e2d9f5adb1&lt;/checksum&gt;!!*/</task>
    </param>
    <label height="40" left="140" name="Source" style="txt-align:west" top="20" width="80"/>
    <label height="40" left="140" name="Destination" style="txt-align:west;" top="180" width="80"/>
    </abs>

     

    Hopefully that helps.

     


    #DashBoard


  • 5.  RE: toggle button

    Posted 10-27-2020 18:02

    Hi,

    Yes, that's exactly what I want to do. 

    I was confused only in the Crosspoint block, I'm not sure if I really understand the logical behinds this. 

    How I want that my source 1 (HyperDeck 1) goes to my destination 31, I filled the block in this way, is it correct? 

    Because if this really the logical of Crosspoint block, I just need to replicate it to another sources(2,3 e 4).

     

    Thanks, 


    #DashBoard


  • 6.  RE: toggle button

    Posted 10-28-2020 20:32

    The image you pasted is the same as the image I uploaded.   Did you paste the right image?   I think it should look something like this:

     

     


    #DashBoard


  • 7.  RE: toggle button

    Posted 10-28-2020 21:10

    Hello,

    No, it isn't the same image.

    I put an image that shows: ''source is 1'' and ''destination is 31'', inside the add block. I want to know if  this really the logical of Crosspoint block.

    follow the image:

     


    #DashBoard


  • 8.  RE: toggle button

    Posted 10-28-2020 21:37

    The "add" block simply adds strings together so we could output them in the debug console.   It has nothing to do with the crosspoint block.   In your script, you should not need the add block at all.

     

    If I understand correctly, you should only use the "take crosspoint" block from the Ultrix.


    #DashBoard


  • 9.  RE: toggle button

    Posted 10-29-2020 17:14

    Hi,

    I copied code posted by you in yours last comment, and I only changed the values of key to my real values. 

     

    After that, I followed what you suggested me, I opened param[oid=source] folder, and I modified the task created by you to ''take crosspoint'' task. How in this parameter I have four buttons (HyperDeck 1,2....3,4), I did four ''take crosspoint'' tasks, one for each source. 

    However, the buttons didn't work, even adding the tasks, they doesn't do anything. When I create a test button and add on it the ''take crosspoint'' function, it worked very well, but in our parameters the same is not repeated. 

    My other problem is the task related to param[oid=dest]..... I have no idea what action I should add in this parameter. I just keep the initial settings customized by you, but as you said me previously, I don't need the add block at all. 


    #DashBoard


  • 10.  RE: toggle button

    Posted 10-29-2020 17:34

    You only need one task on the source parameter (not 4).   I know there are four "buttons", but it's really just one parameter with four choices.   When you click on one of the buttons, the source parameter gets the value associated with that button.

    When the value changes to a different choice, you trigger the one task.  In that task, you can get the current value of the source (what button the user just pressed), and use that to set your crosspoint.

    So instead of running this:

     

    You want this:

    That take the number that was just selected as the source, and routes it to destination 31.   

     

    You also probably don't always want 31.  You probably want to route it to the selected destination instead.

    So you could do:

     

    That will route the selected source to the selected destination.

     

    You want this to happen when the user changes the source or when the user changes the destination.   So both the source and the destination parameters need a task that triggers when they change.    That task is the same for both parameters.   So no matter if the user changes the source or if they change the destination, the new crosspoint is set.

     

     


    #DashBoard