Howto:Create WebPanel instrument
This guide will show you how to create a one simple web based instrument for a WebPanel. In a picture below, a Cessna 172P 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 172P WebPanel on a browser window. Start Flightgear with a Cessna 172P plane selected and with "--httpd=8080" additional option to start internal webserver. Then from Flightgear's C172P aircraft menu, click "Panel in a Browser" and browser window should open with a working instrument panel. 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, following files are needed:
- 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, save it to aircrafts WebPanel folder and insert following code into it:
{
"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 flightgear/fgdata/next/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 in WebPanel folder with following code:
<!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 <div> 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 <div> with new id tag and .json file. To create a new row for instruments start a new <div class="row">. See example from Cessna 172P planes folder /usr/share/games/flightgear/Aircraft/c172p/WebPanel/c172p-webpanel.html.
INSTRUMENT_NAME.json
INSTRUMENT_NAME.json file specifies how instrument behaves when Flightgears properties change. Create file named pc9m_ASI.json, save it to WebPanel folder and add following code into it:
{
"src": "pc9m_ASI.svg",
"animations": [
{
"element": "#Needle",
"type": "transform",
"transforms": [{
"type": "rotate",
"a": {
"property": "ias",
"interpolation": "AirspeedInterpolation.xml"
},
"x": 256,
"y": 256
}]
}
]
}Explanation for rows:
- "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 to WebPanel folder 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 Inkscape 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 needs to be on a different layers
- layers id needs to be renamed from Inkscapes XML editor. Layer 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.
