Overhaul of the webpanels

[Juanvvc]

Hi,

The current webpanel shows instrument, but they are not actionable.

I'm working on an overhaul of the webpanels. The objective is being able to control instruments and operate radios from an iPad or Android devices using a mouse or a touch screen.

This is the current state of my proposal for the webpanel:

Currently, ALT, NAVs, the bug in the HI, ADF, EGT and the radio stack are all actionable from the browser (Firefox on a PC, Safari on an iPad)

The files in the WebPanel directory are totally independent from the rest of the repository, and I guess porting the panel to another aircraft is as easy as copying the WebPages directory and tweaking the properties, if needed, although they are fairly standard properties.

There is only one breaking change: I updated bootstrap to version 4 and jquery to version 3 because the versions of these libraries in the current c172p and FGDATA/Phi are too old for modern browsers to scale instruments correctly and their support for touchscreens is limited. I know the webpanels are used in heavily customized hardware with old browsers, and this kind of users might not like the update: the instruments have changed their position and size slightly, and old browsers might be not compatible with the new version of bootstrap.

Next steps:

• Finish the radio stack. The DME is much more difficult to configure than expected.
• Add engine instruments: temperature, vacuum indicator, electrical params...
• Add the autopilot. I'm not very fond of autopilots, so it is not really a priority to me.
• Provide several panels: the complete panel, a simplified panel (like the old one, but make it fill the screen) and a radio panel.
• Add a stopclock.
• Add a HSI as an alternative to the NAV1.
• Throughout testing.

[Juanvvc]

This issue is a duplicated of #695, with added interactivity.

[gilbertohasnofb]

@Juanvvc thanks for this work! Once you open a PR I will gladly do some testing.

[Juanvvc]

I'm still working on this feature. Right now, not only most instruments and radios can be controlled from a touch screen (iPad or Android), but also light switches and flaps.

The stopper for everything to work as intended is the autopilot. I guess the reason the c172p doesn't have an autopilot dialog is because the interface to talk to the KAP140 is annoying, to say the less:

• button inputs are sent as nasal commands to the KAP140.
• The output (i.e, the KAP140 display) is managed as a huge list of animations controlled by nasal.

The web interface cannot run nasal, and as a result it cannot trigger button events. Dialogs can run nasal when a button is pressed, but the KAP140 animated display cannot be easily represented on a dialog. Since the KAP140 is not using properties for input and outputs, but as "internal variables", any possible communication with the KAP140 using a web interface or a dialog is difficult to code.

The KAP140 is the only instrument that is not included in the c172p directory and is loaded from Aircraft/Generic/Instruments. In addition, I don't know of any aircraft providing a dialog interface to the KAP140.

Hence, to have an interface with the KAP140 apart from the 3D model, such as a dialog or a web panel:

• either the KAP140 nasal API must be redesigned. This is a hard task that breaks compatibility with any other aircraft using the same autopilot.
• or an "intermediate layer" from the property tree to the KAP140 nasal code must be developed inside the c172p folder. I believe this is an easy task, but not efficient nor fun. For example, the logic that controls the display would be reproduced/copied in JavaScript.

As a result, I'm going to propose web panels without an autopilot and look for a solution for an interface with the KAP140 in the future.

[gilbertohasnofb]

@Juanvvc Do you want to open a PR with your work even though the AP is not implemented?

[Juanvvc]

Yes, in a couple of days, after some additional testing.

Thanks!

[Juanvvc]

I've created a new branch with the proposal for the interactive Phi panels. I still want to test everything on several devices (iPad and Android), and it is not ready for your consideration yet.

If you want to test how it works right now, run FlightGear with "--httpd=8080" and visit http-://localhost:8080/aircraft-dir/webpanel http://localhost:8080/aircraft-dir/WebPanel

You can control all instruments, switches and levers, and run through the complete starting procedure.

Missing pieces:

• the autopilot. I'll keep an eye on issue #1302. I tried to run the new autopilot unsuccessfully. I guess I have to read the manual first!
• the transponder, but it is not a priority.
• Linking to the checklist and map widgets provided by the main Phi interface.

[reiszner]

Hi Juanvvc,

The new KAP 140 runs without nasal. It works only on proprules and you can find all values in the property tree. There is also a dialog for the KAP 140 where you can look what every button set or reset. Will be nice if you take a second look.

[Juanvvc]

Thanks! Yes, I'll check again in the next few days.

[gilbertohasnofb]

@Juanvvc I just tried testing this, but when I visit the webpanel page I get an error:

[Juanvvc]

Ah, I always forget that using the right case is important if you are running FlightGear in OSX or Linux. The right URL is http://localhost:8080/aircraft-dir/WebPanel.

If the last URL does not work, check if http://localhost:8080 shows the main FlightGear Phi panel: maps, properties, checklists, snapshot... If you see another page not related to FlightGear, then you have another service using that port. In this case, you can try listening to another port: run FlightGear with, for example, "--httpd=8585" and then visit http://localhost:8585/aircraft-dir/WebPanel

[gilbertohasnofb]

@Juanvvc great, the correct capitalisation fixed the issue. I tested it and it works super well, besides being such a cool feature! Must be nice to fly with these instruments in a screen and have a large monitor for the outside view. Here are a couple of things I ran into;

• When I first loaded the full panel, I get a pop-up error message error while reading 'instruments/levers.json': Not Found.
• since some things are clickable in the web interface (lights and flaps, for instance), maybe it would be nice to add a heading knob for the Heading Indicator's bug and the OBS for the VOR and ADF. Users with touch screen might like that.
• when the avionics are switched off, the radio still displays all numbers. Perhaps they should turn off just like in the sim.
• is there a reason not to include the ADF radio in the radio only panel?
• maybe adding the throttle and mixture levers to the main panel would be a nice feature

[Juanvvc]

Thanks for testing!

When I first loaded the full panel, I get a pop-up error message error while reading 'instruments/levers.json': Not Found.

That was another capitalization error, but this time inside the code. Fixed.

Just be aware of a nasty feature of FlightGear's web server (nasty for developers, not users): it instructs the browser to cache resources for a long time (days!) This means that you probably won't be able to see the new version unless you clean up your browser's cache. It should be also possible to switch the cache off during development sessions, in the developers menu of your browser.

maybe it would be nice to add a heading knob ...

Good idea

when the avionics are switched off, the radio still displays all numbers

Yes, this also bugs me. Instrument animations, and this includes texts, are managed by the Javascript library provided by Phi (FlightGear's internal web server). Due to the the internal design of this library, animations can only access to the specific property they respond to and they are not aware of the state of other properties.

I'll think about how to fix this.

is there a reason not to include the ADF radio in the radio only panel?

They should be there, but the screen is (intentionally) not scrollable. Maybe they are below your screen? I have checked for another capitalization error, but I can't see where. If you resize your window to be more vertical than horizontal, the ADF and the DME should appear.

My idea with the radio only panel was for it to be used on a mobile phone with a vertical screen, but I can understand other pilots may want to use this panel in other ways.

maybe adding the throttle and mixture levers to the main panel would be a nice feature

Do you mean the complete panel? They were there, but you couldn't see them because of the capitalization error of your first point. Already fixed, I hope.

Do you mean the simple panel? I tried to keep that panel as similar as possible to the original panel, but levers can be included there in the space normally reserved to the yoke.

[Juanvvc]

Must be nice to fly with these instruments in a screen and have a large monitor for the outside view.

BTW, you can use not only another screen. Instead of "localhost" enter the IP address of your computer and you can see the panel on your mobile phone, tablet, laptop...

My current set-up is like this, with the panel on an external iPad:

The mobile phone also shows the map as in a GPS, but I had to use the phone to take the photo :D

[gilbertohasnofb]

Thanks for all the fixes and explanations.

About the levers, I had meant in the full panel, but now I understand they were already implemented but not showing up due to the capitalisation issue.

Yes, this also bugs me. Instrument animations, and this includes texts, are managed by the Javascript library provided by Phi (FlightGear's internal web server). Due to the the internal design of this library, animations can only access to the specific property they respond to and they are not aware of the state of other properties.

Maybe the maintainer of Phi can give us a hand with that?

They should be there, but the screen is (intentionally) not scrollable. Maybe they are below your screen?

Yes resizing my browser to a different shape solved it. Would it not be better if the radio height adjusted to the current window? I understand it not being scrollable, but showing everything on any screen would possibly be better IMO.

My current set-up is like this, with the panel on an external iPad:

That's super cool. This is a great work!

[gilbertohasnofb]

BTW, let me know if you need more tests from me.

[kaosiia]

Hey, I am currently using the webpanel for the c172p and i have run into an issue i have been trying to resolve for a month now.

Airport is KUNV ( University Park Airport), Runway 24, aircraft is c172p and 3100 ft means we are on the glideslope.

If you take a look at the image, you will notice on the VOR1 located in the cockpit, it shows that we are below the glideslope. This is correct as we are at about 2600 ft which is below the glideslope, so the VOR1 in the cockpit depicts my actual flight behavior.

On the other hand, if you look at the image you will notice the webpanel, the VOR1 on here shows that we are above the glideslope. Exactly the opposite of what the VOR1 on the cockpit says. Now, every other instrument on the webpanel and cockpit both match up except the VOR1. It seems the VOR1 on the webpanel has the correct magnitude but the wrong direction.(VOR2 also has this problem)

I am hoping someone here has an idea of what could be going on? Or can offer some sort of direction...as to how to fix the VOR1 on the webpanel. The localizer works well and shows the correct thing on both the VOR1 in the cockpit and on the webpanel. It is the glideslope that has this issue....

[wlbragg]

Thanks for reporting this. Hopefully if @Juanvvc is still working on this you brought this issue to the right person and place to get it fixed. Let see if we get a response, maybe an update on progress.

[Juanvvc]

Oh, I've answered in the forum. Most probably, you must change line 36 of VOR1.json and VOR2.json from 120 to -120.

I'm moving FlightGear to a setup specialized in simulation and I cannot test the change for a few days, but I'm very interested that these external interfaces work correctly!

[Juanvvc]

I've just committed the fix to the bug reported by @kaosiia It was the wrong sign in the factor of lines 36 in VOR1 and VOR2.

The WebPanels are ready to be merged into master. I believe they are better than the old panels, and in any case they are not worse. If fact, this bug was not introduced by me and it is in the master branch as well. I'll test the panels during this week and, if every thing goes ok, I'll issue the change request.

The only thing that was preventing me to make the change request is the (missing) support to the old KAP140, or the (partial) support to the new KAP140. I guess we don't have a decision yet about which AP is going to be finally installed on the C172P.

[wlbragg]

Yes, we are going to port the KAP from the c182s as soon as they are done with it. It uses the new KAP with tuned AP logic. Shouldn't be to much longer.

[wlbragg]

If you make a PR I'll merge it.

[pfefferCode]

what is the status?

[wlbragg]

We are either waiting on the creation of a webpanel merge request or the KAP140 upgrade.

[waltereliasfiuner]

Hello, where can I download this new version so I can test it? Thank you.

[waltereliasfiuner]

I have detected an error that I don't know how to correct. When the flag is set to TO in NAV1, it eventually happens that in the WebPanel it appears in FRONT. And vice versa.

[wlbragg]

This is still waiting on @Juanvvc to add the new 140 as far as I am aware. @Juanvvc maybe you can push what you have to a branch and at least everyone will have access to what you have finished. It also could spark interest for someone to finish it.