Howto:Make a clickable panel

There are two methodes to make a clickable planel in FlightGear at the moment:

• Hotspot: adds a clickable (invisible) face at a certain position.
• Pick: makes a whole object clickable.

The easiest to use is pick, since you do not have to look up all the coordinates. Also the pick animation is more realistic and therefore more often used.

Hotspot

The hotspot animation is somewhat complicated. You have to define the x and y coordinates of every clickable "face" (hotspot) aswell the width and heigth of the hotspot to click on. See the following example of the 777-200.

Panel file

Make a new panel file (.xml) in your aircrafts directory. The following lines are only placed on top of the file:

<PropertyList>

<name>777-200 Overhead Panel</name>
<background>Aircraft/777-200/Panels/transparent-bg.rgb</background>
<w>256</w>
<h>512</h>

<instruments>

<instrument>
 <name>panel hotspots</name>
 <x>128</x>
 <y>256</y>
 <w>256</w>
 <h>512</h>
 <w-base>256</w-base>
 <h-base>512</h-base>

<actions> 

Now all hotspots need to be listed as seperate actions:

<action>
 <name>Master Battery Switch</name>
 <button>0</button>
 <x>-278</x>
 <y>-188</y>
 <w>10</w>
 <h>10</h>
 <binding>
  <command>property-toggle</command>
  <property>/controls/electric/battery-switch</property>
  <step>1</step>
  <min>0</min>
  <max>1</max>
  <wrap>true</wrap>
 </binding>
</action>

We end the file with:

</actions>
</instrument>
</instruments>

</PropertyList>

Model file

Now we need to link to this file from our model's file. Add something similar to the following in your model file:

<panel>
 <path>Aircraft/777-200/Panels/oh-panel.xml</path>
 <bottom-left>
  <x-m>-23.396</x-m>
  <y-m>-0.522</y-m>
  <z-m>0.992</z-m>
 </bottom-left>
 <bottom-right>
  <x-m>-23.396</x-m>
  <y-m>0.522</y-m>
  <z-m>0.992</z-m>
  </bottom-right>
  <top-left>
  <x-m>-22.686</x-m>
  <y-m>-0.522</y-m>
  <z-m>1.323</z-m>
 </top-left>
</panel>

Pick

For 3D clickable object we can use the pick-animation. It makes a whole object clickable. This is especially easy to use with switches.

Add the following code to the .xml file of your panel. Remember to change the object-name into your buttons/knobs/switches name (!) and set the property to the property, corresponding with your button.

<animation>
 <type>pick</type>
  <object-name>Seatbelt-Sign-Button</object-name>
  <action>
   <button>0</button>
   <repeatable>false</repeatable>
   <binding>
    <command>property-toggle</command>
    <property>controls/switches/seatbelt-sign</property>
    <value>0</value>
    <value>1</value>
   </binding>
  </action>
</animation>

You can also use the property-cycle command if you want to cycle through multiple values.

If you want to have an adjustable value (like the knob on radios) you can use the property adjust command, like this:

<animation>
 <type>pick</type>
  <object-name>Ingh-Knob-Right</object-name>
  <action>
   <button>0</button>
   <repeatable>false</repeatable>
   <interval-sec>0.2</interval-sec>
   <binding>
    <command>property-adjust</command>
    <property>instrumentation/altimeter/setting-inhg</property>
    <step>0.005</step>
    <min>26.0</min>
    <max>33.0</max>
    <wrap>false</wrap>
   </binding>
  </action>
</animation>

Setting repeatable to true will make it able to hold a knob or switch.

To check if the pick animation works (on the correct button) we launch FlightGear and click Ctrl-C. Now all clickable objects will get a yellow lining.