User:Vaipe

From FlightGear wiki
Revision as of 06:09, 19 August 2016 by Vaipe (talk | contribs)
Jump to navigation Jump to search

How to: Create instrument for Flightgear WebPanel

This guide will show you how to create a one simple web based instrument for a WebPanel. In a picture below, a C172s WebPanel is shown in another monitor in front of a lcd tv used as a scenery visual.

Flightgear flightsimulators Cessna C172p WebPanel in monitor front of a TV used as visual

First you should check that you can see a Cessna C172s WebPanel on a browser window. Start Flightgear with a C172s and from Flightgear's aircrafts menu, click "Panel in a Browser" and browser window should open with a working instrument panel. And when you start engine and lift off, instruments should be moving.

This HowTo uses following software:

  • Ubuntu 16.04
  • Flightgear 2016.2.1
  • PC-9m aircraft
  • Inkscape






WebPanel folder and instrument files for aircraft

Create a folder named "WebPanel" into Flightgear's aircraft folder. In Ubuntu, installed aircraft folders can be found from: /home/YOUR_USER_NAME/.fgfs/Aircraft/org.flightgear.official/Aircraft

For WebPanel to work, following files are needed:

  • webpanel-properties.json (maps Flightgears internal properties for instruments)
  • webpanel.html (html page what is shown in browser)

and for a single instrument:

  • INSTRUMENT_NAME.svg (vector image shown in www-page as flight instrument)
  • INSTRUMENT_NAME.json (for instrument animations)
  • INSTRUMENT_NAMEInterpolation.xml (not necessary file, but used if instrument animation needs to be non-linear)




webpanel-properties.json

webpanel-properties.json file maps Flightgears internal properties to instruments. Create a file named webpanel-properties.json and insert following code into aircrafts WebPanel-folder:

{
  "instrumentSelector": ".instrument",
  "instrumentDataKey":  "fgpanel-instrument",
  "updateInterval":     32,

  "propertyMirror": [
    ["ias",         "/instrumentation/airspeed-indicator/indicated-speed-kt"]

  ]
}

This example file will take only planes indicated speed in knots and sends it to "ias". If you need multiple internal properties for one instrument or for creating other instruments, see example from /usr/share/games/flightgear/Aircraft/c172p/WebPanel/c172p-webpanel-properties.json file, for how more rows for multiple properties are added.




WebPanel www-page file

Create webpanel.html file and save it with following:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Tweaks for panel on an ipad - from https://gist.github.com/tfausak/2222823 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" -->
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>FlightGear - PC-9m Instrument Panel</title>
<style type="text/css" media="screen">
body,html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    border: 0;
    margin: 0;
    padding: 0;
}

.instrument {
    border: 1px solid #131313;
    padding: 8px;
    background-color: #111111;
}
</style>


<script type="text/javascript" charset="utf-8"
    src="/3rdparty/jquery/jquery-1.11.1.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/bootstrap.min.js"></script>

<script type="text/javascript" charset="utf-8" src="/lib/jquery.fganimate.js"></script>
<script type="text/javascript" charset="utf-8" src="/lib/fgfs.js"></script>

</head>
<body data-fgpanel="true" data-fgpanel-props="webpanel-properties.json">
  <div class="row">
    <div id="pc9m_ASI" class="instrument col-xs-2" data-fgpanel-instrument="pc9m_ASI.json"></div>
  </div>
</body>
</html>


This creates a file for browser to show instruments. Important is data-fgpanel-props="webpanel-properties.json"> which specifies planes properties .json file. In

tag id="pc9m_ASI" and data-fgpanel-instrument="pc9m_ASI.json" specifies what instrument is drawn into browser. To create a new instrument, add another
with new id tag and .json file. To create a new row for instruments start a new
. See example from C172p planes folder /usr/share/games/flightgear/Aircraft/c172p/WebPanel/c172p-webpanel.html.





INSTRUMENT_NAME.json

INSTRUMENT_NAME.json file (in this HowTo: pc9m_ASI.json) specifies how instrument behaves when Flightgears properties change. Create file named pc9m_ASI.json and add following into it:

{ 
    "src":    "pc9m_ASI.svg",

    "animations": [
      {
        "element": "#Needle",
        "type":    "transform",
        "transforms": [{
          "type": "rotate",
          "a": {
            "property": "ias",
            "interpolation": "AirspeedInterpolation.xml"
          },
          "x": 256,
          "y": 256
        }]
      }
      
    ]
}

"src": "pc9m_ASI.svg": filename of instruments .svg vector graphic file "element": "#Needle": instruments .svg images id what is meant to be animated "type": "rotate": we are rotating Needle layer of instrument image property "ias": Flightgears internal property that causes the movement "interpolation": file where interpolation is specified "x": 256, "y": 256: specifies origo for rotation. In our image size 512x512px, 256px is in middle of the image.


INSTRUMENT_NAMEInterpolation.xml

Create file AirspeedInterpolation.xml and save it with following code:

<?xml version="1.0"?>
<!--
 This file is part of FlightGear, the free flight simulator
 http://www.flightgear.org/

 Copyright (C) 2009 Torsten Dreyer, Torsten (at) t3r _dot_ de

 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU General Public License as
 published by the Free Software Foundation; either version 2 of the
 License, or (at your option) any later version.

 This program is distributed in the hope that it will be useful, but
 WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 General Public License for more details.
-->
<PropertyList>
   <entry><ind>   0</ind><dep>    0</dep></entry>
   <entry><ind>  35</ind><dep>   36</dep></entry>
   <entry><ind>  40</ind><dep>   50</dep></entry>
   <entry><ind>  60</ind><dep>  100</dep></entry>
   <entry><ind>  80</ind><dep>  152</dep></entry>
   <entry><ind> 100</ind><dep>  206</dep></entry>
   <entry><ind> 120</ind><dep>  249</dep></entry>
   <entry><ind> 140</ind><dep>  291</dep></entry>
   <entry><ind> 160</ind><dep>  333</dep></entry>
   <entry><ind> 190</ind><dep>  340</dep></entry>
</PropertyList>

Interpolation lists first number input property (air speed in this example) and second number is angle for needle.



Creating instrument graphics with Inkscape

If you are not familiar with Inkscape, see https://inkscape.org/en/learn/tutorials/

To create a instrument image, start creating a new 512x512 px size file with Inkscape. When drawing .svg file, following issues need to be kept in mind:

  • moving objects need to be on different layers
  • layers id needs to be renamed from Inkscapes XML editor. Animation will fail if id is not correct.

Draw a round face and a simple needle on top of it

  • Create new layer and call it "Face". Draw a circle in it.
  • create new layers called "Needle" and draw a needle in it. Needles rotating point should be in middle of the drawing area. Rename its ID from XML editor to "Needle".
  • Save it with a pc9m_ASI.svg name in to PC-9m aircrafts WebPanel folder.


Test WebPanel

To test instrument in WebPanel, start Flightgear with "--httpd=8080" additional option to start Flightgears web server.

When Flightgear has started, go to http://localhost:8080/aircraft-dir/WebPanel/webpanel.html address and simple instrument with one needle and without numbers should be visible.

Start PC-9m and when speed is rising you should see needle to start moving.

Example of WebPanel instrument showing PC-9m airspeed in browser