Facility Control

We are trying to highlight a label within a string array in order to drag and drop its value to another parameter.

is there a way to change the label bg color on mouse over (mouseEnter / mouseExit) of the individual elements?

The following is an example:

<abs contexttype="opengear" id="_top" keepalive="false" style="">
<meta>
<params>
<param access="1" maxlength="0" name="Players" oid="player.oid" precision="0" type="STRING_ARRAY" widget="default">
<value>0</value>
<value>1</value>
<value>2</value>
<value>3</value>
<value>4</value>
<value>5</value>
<value>6</value>
<value>7</value>
</param>
</params>
<ogscript handles="onmouseenter" oid="onMouseEnter" targetid="field.players.all.id">onMouseEnter(this);</ogscript>
<ogscript handles="onmouseexit" oid="onMouseExit" targetid="field.players.all.id">onMouseExit(this);</ogscript>
<api>function onMouseEnter(obj)
{
ogscript.debug("On Mouse Enter: " + obj.getIndex());
//ogscript.setStyle( ... on Element with obj.getIndex() ... );
}

function onMouseExit(obj)
{
ogscript.debug("On Mouse Exit: " + obj.getIndex());
//ogscript.setStyle( ... on Element with obj.getIndex() ... );
}</api>
</meta>
<simplegrid cols="1" height="672" left="54" rows="11" top="48" vspace="5" width="149">
<param expand="true" height="25" id="field.players.all.id" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bg#listbg;bdr:round;" width="40"/>
</simplegrid>
</abs>

The only way I found to do this is to split up the parameter inside the simple grid, so that each index has it's own cell.   I then gave an id to each cell, and made the mouseevents handle all those ids.   

Here is the code:

<abs contexttype="opengear" id="_top" keepalive="false">
<meta>
<params>
<param access="1" maxlength="0" name="Players" oid="player.oid" precision="0" type="STRING_ARRAY" widget="default">
<value>0</value>
<value>1</value>
<value>2</value>
<value>3</value>
<value>4</value>
<value>5</value>
<value>6</value>
<value>7</value>
</param>
</params>
<ogscript handles="onmouseenter" oid="onMouseEnter" targetid="p1,p2,p3,p4,p5,p6,p7,p8">onMouseEnter(this);</ogscript>
<ogscript handles="onmouseexit" oid="onMouseExit" targetid="p1,p2,p3,p4,p5,p6,p7,p8">onMouseExit(this);</ogscript>
<api>function onMouseEnter(obj)
{
ogscript.debug("On Mouse Enter: " + obj.getIndex());
ogscript.setStyle("p" + (obj.getIndex() + 1), "bg#ff0000" );

}

function onMouseExit(obj)
{
ogscript.debug("On Mouse Exit: " + obj.getIndex());
ogscript.setStyle("p" + (obj.getIndex() + 1), "bg#ffffff" );
}</api>
</meta>
<simplegrid cols="1" height="596" left="525" top="51" width="200">
<param element="0" expand="true" id="p1" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="1" expand="true" id="p2" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="2" expand="true" id="p3" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="3" expand="true" id="p4" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="4" expand="true" id="p5" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="5" expand="true" id="p6" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="6" expand="true" id="p7" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
<param element="7" expand="true" id="p8" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bdr:round;"/>
</simplegrid>
</abs>

But that means that any time you add/remove from your array, you have to update your simplegrid manually (perhaps with setXML).

I just wanted to follow-up on this one with a bit of an easier approach. If you have multiple elements with the same ID, you can actually target an individual element by using 'element_id.element_index' when calling ogscript.rename or ogscript.setStyle. Here is an updated example:

<abs contexttype="opengear" id="_top" keepalive="false" style="">
<meta>
<params>
<param access="1" maxlength="0" name="Players" oid="player.oid" precision="0" type="STRING_ARRAY" widget="default">
<value>0</value>
<value>1</value>
<value>2</value>
<value>3</value>
<value>4</value>
<value>5</value>
<value>6</value>
<value>7</value>
</param>
</params>
<ogscript handles="onmouseenter" oid="onMouseEnter" targetid="field.players.all.id">onMouseEnter(this);</ogscript>
<ogscript handles="onmouseexit" oid="onMouseExit" targetid="field.players.all.id">onMouseExit(this);</ogscript>
<api>function onMouseEnter(obj)
{
ogscript.debug("On Mouse Enter: " + obj.getIndex());
ogscript.setStyle('field.players.all.id.' + obj.getIndex(), 'bdr#FF0000');
//ogscript.setStyle( ... on Element with obj.getIndex() ... );
}

function onMouseExit(obj)
{
ogscript.debug("On Mouse Exit: " + obj.getIndex());
ogscript.setStyle('field.players.all.id.' + obj.getIndex(), 'bdr#000000');
//ogscript.setStyle( ... on Element with obj.getIndex() ... );
}</api>
</meta>
<simplegrid cols="1" height="672" left="54" rows="11" top="48" vspace="5" width="149">
<param expand="true" height="25" id="field.players.all.id" oid="player.oid" showlabel="false" style="txt-align:center;font:bold;bg#listbg;bdr:round;" width="40"/>
</simplegrid>
</abs>

Thanks James, that's very helpful