User:Vaipe
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.
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
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.