# For nicegui
from nicegui import app, Client, ui, events
class WebServer:
def __init__(self):
with Client.auto_index_client:
#create a row
with ui.row().classes('w-full h-60 no-wrap').style("height: 100%"):
self.ui_map = ui.leaflet(center=(37.500, 127.0363))
ui.run()
if __name__ in { '__main__', '__mp_main__' } :
WebServer()
// markers.js test
var markers = { 'initialized': false, 'feature_group': null, 'icon': null };
function init_markers(map_id, icon_type) {
// run after leaflet is loaded
if ( ! markers.initialized ) {
var map = getElement(map_id).map; // see templates/index.html
// map = window.app.$refs["r" + map_id].map;
if ( ! map ) {
console.log('Leaflet map object ' + map_id + ' not found');
return;
}
// group all markers in feature_group and add to map
markers.feature_group = new L.featureGroup([]);
map.addLayer(markers.feature_group);
// define icon prototype, if necessary modify between adding markers
markers.icon = L.DivIcon.extend({
options: {
className: "number-icon",
iconSize: [22, 40],
iconAnchor: [11,40], // from top-left; add half the width. all of the height
popupAnchor: [3, -40],
html: ""
}
});
markers.initialized = true;
}
}
function add_marker(map_id, lat, lng, i, z=0) {
init_markers(map_id);
if ( ! markers.initialized ) {
console.log('Markers not initialized / Leaflet probably not yet loaded');
return;
}
var iconx = new markers.icon({ html: i });
var marker = L.marker([lat, lng], {
icon: iconx,
zIndexOffset: z
})
.addTo( markers.feature_group )
.on('click', handle_marker_click)
// custom attribute, avoids closure in event handling & selector for deletion
marker._ix = i;
}
function delete_marker(i) {
if ( markers.initialized ) {
markers.feature_group.eachLayer(function (layer) {
if (layer._ix == i) {
markers.feature_group.removeLayer(layer);
}
}
)};
}
function delete_all_markers() {
if ( markers.initialized ) {
markers.feature_group.remove();
markers.feature_group = new L.featureGroup([]);
}
}
// example event handlers
function handle_marker_click(e) {
// send ix back to Python
emitEvent('marker-clicked', {'index': e.target._ix});
// or do something locally
delete_marker(e.target._ix);
};
또 static 폴더에 다음 마커 아이콘 파일을 다운로드 하고 파일이름을 marker-icon-40x22.png 라고 변경해준다.
그리고 이 파일을 server.py에 static 파일로 추가하기 위해 server.py 상단에 다음 내용을 한줄 추가해준다.
app.add_static_files("/static", "static")
이렇게 하면 어플에서 사용할 자바스크립트, 이미지 파일등을 브라우저의 static 경로로 로드하게 된다.
# Input file for BushMissonGen
#
# Auto-generated in v4.07
author=Kyubot
title=Gimhae landing VOR DME-A 18R
project=rkpk-rwy18r
version=1.0.0
location=Gimhae Intl
plane=Airbus A320 Neo Asobo
tailNumber=N9999DE
airlineCallSign=HL
flightNumber=1234
introSpeech=
simFile=runway.FLT
parkingBrake=0.00
description=Circle to land Gimhae 18R, ROK
loadingTip=Generated by BushMissionGen.
intro=Try to land one of the most challenging approach to Gimhae RWY 18. You are located 15 DME from KMH R225. Maintain heading 45 until D3 and enter downwind. Then make right turn to land runway 18R while avoiding terrains.
latitude=N35°0'11.82"
longitude=E128°43'23.49"
altitude=+4000.00
pitch=0
bank=0
heading=45
weather=.\WeatherPresets\FewClouds.WPR
season=SUMMER
year=2022
day=167
hours=12
minutes=30
seconds=0
missionType=landing
challengeType=Famous
velocity=200
#icao rw name type LL alt
||CUST0|U|N35° 0' 11.82",E128° 43' 23.49"|+004000.00
||CUST1|U|N35° 0' 11.82",E128° 43' 23.49"|+004000.00
||CUST2|U|N35° 8' 41.63",E128° 53' 42.73"|+002700.00
||CUST3|U|N35° 11' 53.59",E128° 53' 12.74"|+001683.60
||CUST4|U|N35° 13' 17.91",E128° 55' 41.66"|+000854.25
RKPK|18R|RKPK|A|N35° 10' 50.01",E128° 56' 16.98"|+000010.00
