Board index FlightGear Support Graphics

Panel in Browser-Create new Instrument & Attitude Indicator

Graphics issues like: bad framerates, weird colors, OpenGL errors etc. Bad graphics ar usually the result of bad graphics cards or drivers.
Forum rules
In order to help you, we need to know a lot of information. Make sure to include answers to at least the following questions in your initial post.

- what OS (Windows Xp/Vista, Mac etc.) are you running?
- what FlightGear version do you use?
- what graphics card do you have?
- does the problem occur with any aircraft, at any airport?
- is there any output printed to the console (black window)?
- copy&paste your commandline (tick the "Show commandline box on the last page of FGRun or the "Others" section on the Mac launcher).
- please upload a screenshot of the problem.

If you experience FlightGear crashes, please report a bug using the issue tracker (can be also used for feature requests).
To run FlightGear on old computers with bad OpenGL support, please take a look at this wiki article. If you are seeing corrupted/broken textures, please see this article.

Note: If you did not get a reponse, even after 7 days, you may want to check out the FlightGear mailing lists to ask your question there.

Panel in Browser-Create new Instrument & Attitude Indicator

Postby Kaosiia » Sat Aug 15, 2020 5:16 pm

Hey guys, I have 2 questions

1)so I am trying to add a flap indicator to my C172 webpanel. I followed the below instructions exactly as written but my flap indicator still does not appear in the webpanel. I even tried playing around with the other instruments, like removing them from the html file to see if it will still shows up in the "Panel in Browser" did. It seems as though changes I make do not reflect in the webpanel.

Modifying the C172 Webpanel for another aircraft

[b]On the move to v2016 my Flightpanel setup on a second computer failed – however Phi offers a potential way to create web based instrument panels for all aircraft. In the text below I have documented my approach which used the information provided by Thorsten and copying the work done for the C172 aircraft.

1. Create the WebPanel folder for the new aircraft

- First make sure that the webpanel works for you with the C172 aircraft. Use the “Panel in Browser” option from the Flightgear menu and ensure the instrument panel appears in your browser, and bookmark the page for future reference. Get this working before proceeding any further.
- Make a copy of the WebPanel folder and its contents found in the Aircraft / C172 folder and paste it into the Aircraft folder for which you want to create a webpanel. For example create dhc6/WebPanel.
- In the WebPanel folder:
- Rename the file c172-webpanel-properties.json to webpanel-properties.json
- Rename the file c172-webpanel.html file to webpanel.html
- Open the file webpanel.html with a text editor and change the <title> reference from C172 to reflect the new aircraft type.
- In the file webpanel.html change the <body reference to point to the .json file that you renamed eg “data-fgpanel-props = webpanel-properties.json”

The file webpanel.html displays the instruments in the browser and uses the data in webpanel-properties.json to link the instruments to the flightgear internal properties. The svg files are the graphics for the various instruments and the individual json files deal with the animation. These now need to be changed to tailor them to the new aircraft type.

2. Add a new instrument to the display – e.g. a fuel gauge

- Edit the file webpanel-properties.json with a text editor
- Add a new definition or edit an existing one to link the new property mirror variable to the relevant variable in the internal properties. See the existing entries as examples of how this works. eg Create a new line such as fuelfwd .... see below
- Run Flightgear selecting the aircraft for which you are creating the Webpanel (aircraft location does not matter) and from the main menu under “Debug” select “Browse internal Properties”.
- Navigate to the relevant internal property, and enter the path (eg /consumables/fuel/tank.....) in the webpanel-properties.json file … see below.

["egt", "/engines/active-engine/egt-norm"],
["egtBug", "/engines/engine/egt-bug-norm"],
["adf", "/instrumentation/adf/indicated-bearing-deg"],
["adf-rotation-deg", "/instrumentation/adf/rotation-deg"],
["fuelfwd", "/consumables/fuel/tank/level-gal_imp"],

3. Create the New instrument

Two or three file types need to be present for the new instrument (1) the .svg graphics file which draws the instrument dial and (2) the .json file which links the graphic to the internal property and animates the graphic to represent the change in the internal property e.g. moves the needle as fuel is used. And possibly (3) interpolation.xml file which scales the dial movement.

First make the svg and json files for the new dial – I did this by making copies of the rpm files and modifying them to display fuel.
- Copy an existing instrument svg file (such as the rpm) and rename it to something relevant to the new instrument eg rename rpm.svg to fuel.svg or alternatively create a new instrument graphic in Inkscape or a similar application, yourself.
- Copy the matching json and interpolation.xml files (in this case rpm) and rename them to the new instrument eg fuel.json. Interpolation files are not required of all types of dial so ignore this file type if they are not present / required.
- Use Inkscape to modify the new graphic to reflect the required look of the dial eg replacing the RPM scale with the fuel quantity such as lbs or gallons.
- Change the document properties meta data using Inkscape to reflect the name of the new instrument. (this is displayed when “hovering” the mouse over the instrument in the browser.
- Edit the json file to make sure (a) "src" references the correct svg file and (b) the internal property is specified correctly e.g. “property”: “fuel”, and (c) if present the interpolation file is referenced.
- A bit of trial and error will be needed here if you are not familiar with json and / or Inkscape.
Place the dial on the webpanel:
- Open webpanel.html in a text editor and modify one of the empty.json entries to reflect the newly created json file for your new instrument. Eg change empty.json to fuel.json.
- Enter a new ID for your instrument eg <div ID = "FUEL" ........> in the same line
- Rearrange the order of the instruments if you need to (not essential now- perhaps wait until it’s all working?)
- Now the webpanel.html file points to the xxx.json file which in turn points to the xxx.svg file and its associated xxx-interpolation.xml file if it is required.

4. Try out the new panel
- start Flightgear with the relevant aircraft selected
- In a separate window start your browser and open the webpage at http://localhost:8080/aircraft-dir/WebP ... panel.html . (i.e. the address you used for the C172 webpanel at the start) You should see the instrument panel which will now include your new instrument.
- (This assumes httpd = 8080 is set in the Flightgear launcher settings)
- aircraft-dir is the logical path to the aircraft folder of the aircraft you are flying
- Test the new instrument (for example fuel) by making a change to the variable displayed in the new instrument - e.g. fuel - in Flightgear menu select Equipment/Fuel - Payload and move the slider to adjust the amount of fuel. If all is well this will be reflected in the dials on the gauge.
- You will almost certainly have to make adjustments to the interpolation.json file to match the angle of the needle against the value show on the gauge. The data in this file relates the internal property values to the position on the dial (0-360 degrees).

- Needle graphic must be called Needle unless you modify the json file accordingly
- The needle must point to 0 degrees in the graphic so that the relevant compass point positions can be referenced in the interpolation file. (eg 50% fuel = needle pointer at 180 degrees) - you will need to experiment with this.
- New graphics should be 512 x 512 pixels in size to fit with the existing instrument matrix in webpanel.html. If you copy and edit an existing instrument the graphic will already be t he right size.
- The browser needs to be refreshed after making changes to the WepPanel files. (eg <shift>F5 in Firefox)
- Clear the cache on the browser if you get unexpected results when changing between aircraft as strange things can happen with cached data and images.


2) My attitude indicator seems to not reflect my out of the window view. It moves funky and in a way that does not make sense. Does anyone have any thoughts on this?
Posts: 71
Joined: Fri Jan 24, 2020 12:06 am

Re: Panel in Browser-Create new Instrument & Attitude Indica

Postby ludomotico » Sat Aug 15, 2020 10:52 pm

Hi Kaosiia,

We are working on an overhaul of the web panel for the C172, which is fully operable and includes many new instruments, such as a the radio stack and a flap indicator. With this version, you can also change radials, radio frequencies, switch buttons... from your tablet! The new KAP140 (the autopilot) is also supported, but this autopilot is not on the master branch yet (afaik), so the KAP140 instrument won’t appear if you are using the “current” version of the C172.

This version is still in development (it doesn’t work very well if there are other external devices sending data to FlightGear, such as Arduino panels), but it is the one I’m using in my setup and I’m pretty confident it works OK most of the time.

- Issue in the development forum:
- Files: you can safely substitute the folder “WebPanel” with the files in this link. Or, if you prefer, save all files in the “WebPanel” folder in this link as “WebPanel-dev” and change your URL accordingly: In this case, you can access http://YOURIP:8080/aircraft-dir/WebPanel-dev for a welcome screen and a list of available panels.

You can also check how instruments are managed in this branch of the C172, to test your code.

The “clean your cache” part is important! Phi (the technology behind the WebPanel) assumes files don’t change and its policy for cache management is not suited for development. Even if you modify your files on disk, if you don’t clean your browser cache, your browser won’t ask for them again for a long time (weeks!). If you are using Firefox, for example, there is an option to “never use the cache” while the development window is active. I’m sure Chrome has a similar option.
User avatar
Posts: 1190
Joined: Tue Apr 24, 2012 1:01 pm
Version: nightly
OS: Windows 10

Re: Panel in Browser-Create new Instrument & Attitude Indica

Postby Hooray » Sun Aug 16, 2020 3:18 pm

please consider copying your write-up over to the wiki to turn it into a tutorial that can be added to, and maintained, by others too.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Posts: 12158
Joined: Tue Mar 25, 2008 8:40 am

Re: Panel in Browser-Create new Instrument & Attitude Indica

Postby Kaosiia » Mon Sep 21, 2020 3:41 pm

Thank you guys so much!!!!!
Posts: 71
Joined: Fri Jan 24, 2020 12:06 am

Re: Panel in Browser-Create new Instrument & Attitude Indica

Postby Johan G » Mon Sep 21, 2020 9:32 pm

Hooray wrote in Sun Aug 16, 2020 3:18 pm:please consider copying your write-up over to the wiki [...]

I can only agree.
Low-level flying — It's all fun and games till someone looses an engine. (Paraphrased from a YouTube video)
Improving the Dassault Mirage F1 (Wiki, Forum, GitLab. Work in slow progress)
Johan G
Posts: 6227
Joined: Fri Aug 06, 2010 5:33 pm
Location: Sweden
Callsign: SE-JG
IRC name: Johan_G
Version: 2020.3.4
OS: Windows 10, 64 bit

Return to Graphics

Who is online

Users browsing this forum: SEMrush [Bot] and 1 guest