User:Vaipe: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
No edit summary
(Blanked the page)
Line 1: Line 1:
== 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.
[[File:C172p WebPanel with TV as visual.jpg|thumb|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, 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:
<syntaxhighlight land="xml">
{
  "instrumentSelector": ".instrument",
  "instrumentDataKey":  "fgpanel-instrument",
  "updateInterval":    32,
  "propertyMirror": [
    ["ias",        "/instrumentation/airspeed-indicator/indicated-speed-kt"]
  ]
}
</syntaxhighlight>
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 in WebPanel folder with following code:
<syntaxhighlight land="html">
<!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>
</syntaxhighlight>
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 C172p 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:
<syntaxhighlight land="xml">
{
    "src":    "pc9m_ASI.svg",
    "animations": [
      {
        "element": "#Needle",
        "type":    "transform",
        "transforms": [{
          "type": "rotate",
          "a": {
            "property": "ias",
            "interpolation": "AirspeedInterpolation.xml"
          },
          "x": 256,
          "y": 256
        }]
      }
     
    ]
}
</syntaxhighlight>
"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:
<syntaxhighlight land="xml">
<?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>
</syntaxhighlight>
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/ 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.
[[File:PC-9m WebPanel tutorial air speed instrument.jpg|thumb|Example of WebPanel instrument showing PC-9m airspeed in browser]]

Revision as of 06:21, 19 August 2016

Retrieved from "https://wiki.flightgear.org/w/index.php?title=User:Vaipe&oldid=103155"