mracko / MSFS-Mobile-Companion-App

Mobile Companion App for MSFS 2020
GNU Affero General Public License v3.0
355 stars 42 forks source link

Implemented a KML overaly #54

Closed luka97 closed 2 years ago

luka97 commented 2 years ago

Hi,

I implemented a KML overaly for the map using this leaflet plugin.

The user has the ability to load a local KML file.

input map

mracko commented 2 years ago

This looks really cool! Thanks! I didn't have time to check the code yet, but how does it work on a mobile device? Will I see the KML overlay on a mobile device if I load the KML file on my PC?

luka97 commented 2 years ago

No, you load the KML on the clients. It’s not persistent, so if you reload the page it gets reset. I maybe will modify it in the next day to also support KML files in the same directory as the .exe and/or persistence using the localstorage API.

mracko commented 2 years ago

I'm no expert but I like the idea of automatically loading KML files that are in the same directory as the EXE (in addition to what you've already done).

FYI: I'm planning on releasing the next update in about a month. I'll most likely add this into the release.

luka97 commented 2 years ago

Ok, I implemented the feature to display the KMLs that are in the same directory as the EXE. I also added the ability to hide or show them as desired. If you prefer I can add visibility controls directly in the leaflet layer selector.

I tested and proof-read the code and instructions that I added, but another look doesn't hurt.

mracko commented 2 years ago

Thanks a lot! This looks great! I'm on vacation now so I'll have a look at it later. If everything works fine (which I'm sure it will), then I will merge your pull request with the master. I want to wait a bit because of the recent SU5 issues and then work on the WT CJ4 and FBW A32NX controls.

Regarding "If you prefer I can add visibility controls directly in the leaflet layer selector." - I don't think this is necessary. Unless you have a good idea on how to make the UI work on a small mobile device and PC or a tablet.

I'll let you know once I've tested your KML integration.

mracko commented 2 years ago

I've just made a quick test of the KML import function and noticed the following:

Do you have any idea why this is the case? I've tried a different KML (https://www.norcamp.de/en/cc-download/kml/finland-norcamp-garmin.kml) and this one works just fine.

Thanks!

Btw, do you know a site where I can download good KML files like POIs etc which I could use in MSFS?

luka97 commented 2 years ago

The link you provided redirects me to the homepage of the site. If you can give me the file then I can test it. Regarding intresting KML files I don't know of any. I create the KML files myself, when I plan a long VFR trip)

mracko commented 2 years ago

Try this link https://www.mylpg.eu/stations/slovakia/poi/ and download the POI for Google Earth (.kml) file. I know, it doesn't make any sense to use this KML for MSFS, but it's one of the first I found. :)

luka97 commented 2 years ago

Ok, I think I fixed it. It turns out you have to specify which format to use when you use open(%filepath%,"r"), I changed it to "rb" to read as bytes and now it works.

mracko commented 2 years ago

Looking good! Both KMLs now work as they should. Before I merge this, could you make some adjustments to the UI? Here are my comments:

1) Change the title from "KML files on the server" to "KML Server Files" 2) Change the description to "KML files located in the same directory as the Mobile Companion App executable will be automatically imported and listed below. Click on them to toggle their visibility. Green means visible, red means hidden." 3) Change the "No server files" to eg <h6> or bold <p> and make sure that it's aligned left with the rest of the text. 4) Change the title from "Import KML file" to "Import KML File Locally" 5) Change the Import KML text to "Load or delete a KML file locally. The KML data will only be visible on the client from which the file was uploaded. You can import only one local KML file." 6) Add a <hr class="bg-secondary"> between "KML Server Files" and "Import KML File Locally" 7) Delete the __pycache__ folder and files from your commit.

Only minor visual changes as you can see. Good work! Thanks a lot! I'll merge it with the master then.

luka97 commented 2 years ago

Ok, I think I changed everything. You should add a .gitignore file like it was suggested in #58 so that we don't have to remove these unwanted files and folders manually.

mracko commented 2 years ago

Thanks! Looking great! I've noticed one last thing - the buttons for selecting individual KML files are too big/tall. They are actually larger than any button I use in the UI. Could you change the height/size so it's similar to the btn-sm class? I've tried adding it into the code, however, it didn't seem to make any change.

And thanks for the .gitignore tip. I've now added it into the master.

luka97 commented 2 years ago

Ok, I'm using a list group just to get the right spacing and flow of elements and it defaults to big paddings. Fixed by specifiying the defualt bootstrap paddings for a button, maybe not the best solution, but it's one that works.

mracko commented 2 years ago

Thanks for the cool feature addition! I've now merged it into the master.