Facility Control

Hi.
What is the syntax to use variables for style attributes for custom panel buttons? For example, here is a line of code after manually making style choices:

<button buttontype="push" id="5006" name="7 Tests of
Just Cause
$100" style="size:Bigger;fg#FFFA01;bg#063A71;o#000000;font:bold;">

What I want to do is make button background colors different, if they are the active button. So in the above code, bg#063A71 is my button background color. If I declare a variable like:

<api>var bgDefault = "bg#063A71";</api>

 

Can I then just use (and change) this variable in my subsequent button code? What is the syntax to do so? I've tried a few variations of:

<button buttontype="push" id="5001" name="Weingarten
Rights
$100" style="size:Bigger;fg#FFFA01;'bgDefault';o#000000;">

where I tried to replace the default value with my variable (bgDefault), but it doesn't seem to work. Any ideas?

Hi Shane.
There are a few things you can do.

What you are missing from the code you posted is a call to actually set the style of the button.
What you would do is call ogscript.setStyle('5006', bgDefault); would copy the current value of your "bgDefault" variable into the style of the button with ID "5006".

You could also do something like this:

<style id="DefaultStyle" value="size:Bigger;fg#FFFA01;bg#063A71;o#000000;"/>
<style id="SelectedStyle" value="size:Bigger;fg#FFFA01;bg#FF0000;o#000000;"/>

<button buttontype="push" id="5001" name="Weingarten
Rights
$100" style="style:DefaultStyle">

<api>
function selectButton(buttonID)
{
   //You would probably also want to take the 'current selection' and set its style back to 'DefaultStyle'
   ogscript.setStyle(buttonID, 'style:SelectedStyle');
}
</api>

Another option would be to use a button parameter instead of a button tag. That way you can easily make it a toggle button, react when the toggle button changes state from off to on, change its state from off to on, and specify different styles (back ground colour, icon, etc) for its "selected" or "unselected" states.

Cheers.

James

#DashBoard

James, thanks for the reply. Tried a few things, but still not getting any change to happen when I click on the button. Here is my code for a single button:

<abs contexttype="opengear">

   <style id="DefaultStyle" value="size:Bigger;fg#FFFA01;bg#063A71;o#000000;"/>
   <style id="SelectedStyle" value="size:Bigger;fg#FFFA01;bg#FF0000;o#000000;"/>
   
   <button buttontype="push" height="115" id="1000" left="63" name="Click Me" style="style:DefaultStyle;" top="105" width="195">
   
      <task tasktype="rosstalk">rosstalk.sendMessage('1.1.1.1', 7788, 'TAKE 1001:0:0');
         <api>function selectButton('1000')
         {
            //Set button to selected style
            ogscript.setStyle('1000', 'style:SelectedStyle');
         }
         </api>
      </task>
   </button>
</abs>

 

Any idea what I am missing here? And do you have any documentation about the functions/properties available to me for use in this code? Also usage and syntax examples? I feel like I am fumbling around in the dark trying to guess at syntax, etc.

Thank you,

Shane

#DashBoard

Hi Shane.
Here is a fixed-up version of the code.
Note that the API tag is above all of your buttons and contains any functions you want to make globally available. We call the function we created after calling rosstalk.sendMessage

<abs contexttype="opengear">
   <meta>
      <style id="DefaultStyle" value="size:Bigger;fg#FFFA01;bg#063A71;o#000000;"/>
      <style id="SelectedStyle" value="size:Bigger;fg#FFFA01;bg#FF0000;o#000000;"/>
      <api>function selectButton(buttonID)
      {
         //Set button to selected style
         ogscript.setStyle(buttonID, 'style:SelectedStyle');
      }
      </api>
   </meta>
   <button buttontype="push" height="115" id="1000" left="63" name="Click Me" style="style:DefaultStyle;" top="105" width="195">
      <task tasktype="ogscript">
         rosstalk.sendMessage('1.1.1.1', 7788, 'TAKE 1001:0:0');
         selectButton('1000')
      </task>
   </button>
</abs>

#DashBoard

Ok, I see. thanks. This is working now. Now I need to think about a button-click function that will:

- check status of "isButtonSelected" globally across my whole button grid
- if so, turn it back to default
- change currently selected button to the "selectedButton" state
- change whatever flag variables that may need state changes.

Sound about right?
#DashBoard

Sounds about right.
You might want to use ogscript.getObject and ogscript.putObject to keep track of the current selection.
#DashBoard

What is the syntax to use to put variable names in lines of code? For example, how do I use the "butName" variable's value, instead of "Click Me" in my button task code?

var butName = "Click Me Var";
"Click Me" style="style:DefaultStyle;" top="105" width="195">


#DashBoard

It's a bit unusual to label a button this way - mind if I ask what you're trying to achieve?

Generally, if you're defining the name in script, you would use ogscript.rename("BUTTON ID", butName); to rename it.

Depending on what exactly you're doing, there may be a better approach to take.

#DashBoard

Thanks, James. I'm trying to automate creation of our button panels, so that we may create them quickly and easily. We use these often as button panels to drive XPression gfx to run Jeopardy-like game shows in our broadcasts. I'd like to set up an easy way to enter button names (Jeopardy question categories, etc.) at the top of the code, as well as IP info (we have several XPression boxes), so we can create game controller boards quickly and easily. (As opposed to searching through the code, changing literal button names and IP addresses, etc.)

Does this make sense? Definitely open to hear alternatives and better ways - just going about this the way I currently know how to do it.

Thanks,

sf
#DashBoard

Okay, got it.
In that case, I would recommend assigning the buttons IDs and doing a rename of each button "onload".

Another thing you can consider is exposing things your users need to change (IP addresses, button names ,etc.) as parameters and then using ogScript to look-up the current parameter value when it is needed.

I've attached an example that exposes a bunch of button names as parameters and renames them when they're updated in the config tab.

<abs contexttype="opengear" style="">
   <meta>
      <ogscript handles="onchange,onload" oid="Tab_Selection">var elementCount = params.getElementCount('button_names');
for (var i = 0; i &lt; elementCount; i++)
{
   ogscript.debug(params.getValue('button_names', i));
   ogscript.rename('button-' + i, params.getValue('button_names', i));
}
</ogscript>
      <params>
         <param access="1" constrainttype="INT_CHOICE" name="Tab Selection" oid="Tab_Selection" precision="0" stateless="true" type="INT32" value="0" widget="radio-toggle">
            <constraint key="0">Production</constraint>
            <constraint key="1">Configuration</constraint>
         </param>
         <param access="1" maxlength="0" name="Button Names" oid="button_names" precision="0" type="STRING_ARRAY" value="Hello;b;c;d;e;f;g;h;i;j;k;l;m;n" widget="text">
            <value>Hello</value>
            <value>b</value>
            <value>c</value>
            <value>d</value>
            <value>e</value>
            <value>f</value>
            <value>g</value>
            <value>h</value>
            <value>i</value>
            <value>j</value>
            <value>k</value>
            <value>l</value>
            <value>m</value>
            <value>n</value>
         </param>
         <param access="1" constrainttype="STRING_CHOICE" name="Button Table" oid="button_names_table" precision="0" stateless="true" type="INT16" value="-1" widget="table">
            <constraint>button_names</constraint>
         </param>
      </params>
   </meta>
   <abs height="82" left="5" right="8" style="bdr:etched;bg#dark;" top="6">
      <label bottom="5" left="5" name="Rename Buttons" right="5" style="txt-align:center;font:bold;size:Biggest;" top="5"/>
      <label bottom="5" right="5" style="bg-u:platform:/plugin/com.rossvideo.common.oglml/patterns/ross-150.png;bg-align:center;bg-fill:shrink;" top="5" width="169"/>
      <param bottom="5" expand="true" left="5" oid="Tab_Selection" runtasksonload="true" style="style:toggleButton;" top="5" width="250">
         <task tasktype="ogscript">var selection = params.getValue('Tab_Selection', 0);
if (selection == 0)
{
   ogscript.reveal('production-tab');
}
else if (selection == 1)
{
   ogscript.reveal('config-tab');
}</task>
      </param>
   </abs>
   <tab bottom="6" left="6" right="9" tabposition="none" top="99">
      <abs id="production-tab" name="Production" style="bdr:etched;bg#dark;">
         <flow align="west" bottom="7" horizontalfill="true" left="5" linefill="true" right="9" top="4" verticalfill="true">
            <button buttontype="push" height="123" id="button-0" width="154"/>
            <button buttontype="push" height="123" id="button-1" width="154"/>
            <button buttontype="push" height="123" id="button-2" width="154"/>
            <button buttontype="push" height="123" id="button-3" width="154"/>
            <button buttontype="push" height="123" id="button-4" width="154"/>
            <button buttontype="push" height="123" id="button-5" width="154"/>
            <button buttontype="push" height="123" id="button-6" width="154"/>
            <button buttontype="push" height="123" id="button-7" width="154"/>
            <button buttontype="push" height="123" id="button-8" width="154"/>
            <button buttontype="push" height="123" id="button-9" width="154"/>
            <button buttontype="push" height="123" id="button-10" width="154"/>
            <button buttontype="push" height="123" id="button-11" width="154"/>
            <button buttontype="push" height="123" id="button-12" width="154"/>
            <button buttontype="push" height="123" id="button-13" width="154"/>
         </flow>
      </abs>
      <abs id="config-tab" name="Configuration" style="bdr:etched;bg#dark;">
         <param bottom="10" evenstyle="f:bg#dark;" expand="true" left="10" oddstyle="f:bg#444444;" oid="button_names_table" showlabel="false" style="bg#dark;fg#panelfg;bdr:etched;" top="10" width="400">
            <config key="w.rowheight">45</config>
         </param>
      </abs>
   </tab>
</abs>

#DashBoard