Spatial input

[frafra]

Hi!
It would be nice to be able to insert spatial data, like a location (taken with getCurrentPosition or using leaflet-locatecontrol maybe) and/or have a GeoJSON input using leaflet-geoman.

[wang0618]

There is no out-of-box spatial data input widget for now in PyWebIO, you can use run_js() to achive this.

import json

import pywebio
from pywebio.input import *
from pywebio.output import *
from pywebio.session import *
from pywebio.session import next_client_event

GET_POS_JS = """
navigator.geolocation.getCurrentPosition(function (res) {
    let crd = res.coords;
    WebIO.sendMessage({
        event: "js_yield",
        task_id: WebIOCurrentTaskID,
        data: {
            latitude:crd.latitude,
            longitude:crd.longitude,
            accuracy:crd.accuracy,
        }
    });
});
"""


def get_pos():
    run_js(GET_POS_JS)
    res = next_client_event()
    assert res['event'] == 'js_yield'
    return res['data']


def main():
    """Get the location directly"""
    pos = get_pos()
    put_code(json.dumps(pos, indent=4), 'json')


def pos_input():
    """Geolocation input widget"""

    def on_click(set_value):
        pos = get_pos()
        label = '(%f, %f)' % (pos['latitude'], pos['longitude'])
        set_value(pos, label)

    pos = input('Geolocation', action=("Get Position", on_click), readonly=True)
    put_code(json.dumps(pos, indent=4), 'json')


if __name__ == '__main__':
    pywebio.start_server([main, pos_input], port=8080, debug=True)

In fact, it's better to use

In fact, eval_js() is the most appropriate way to execute js expression and get its value, but currently eval_js() does not support returning values in js callbacks, so here I use a method that are not shown in the documentation to get the return value.

Later I will adjust eval_js() to support returning values in js callbacks.

[frafra]

That is great! Would you be willing to accept contributions for spatial types in the future? Or would it be better to handle them as an independent module?

[wang0618]

Spatial type input is not used very often in most cases, and I think it might be better as an independent module.

Thanks for the support of PyWebIO, next I will add the PyWebIO development documentation to allow users to create custom input widget.

[frafra]

Sure, that makes sense.
Thank you for your help and congratulations for your very nice project.

[frafra]

Updated version using the improved eval_js (7bd09d5 or versions greater than 1.2.3) using async/await.

import json

import pywebio
from pywebio.input import *
from pywebio.output import *
from pywebio.session import *

GET_POS_JS = """
new Promise(resolve => {
    navigator.geolocation.getCurrentPosition(function (res) {
        let crd = res.coords;
        resolve({
            latitude:crd.latitude,
            longitude:crd.longitude,
            accuracy:crd.accuracy,
        });
    });
});
"""


async def get_pos():
    return await eval_js(GET_POS_JS)


async def main():
    """Get the location directly"""
    pos = await get_pos()
    put_code(json.dumps(pos, indent=4), 'json')


async def pos_input():
    """Geolocation input widget"""

    async def on_click(set_value):
        pos = await get_pos()
        label = '(%f, %f)' % (pos['latitude'], pos['longitude'])
        set_value(pos, label)

    pos = input('Geolocation', action=("Get Position", on_click), readonly=True)
    put_code(json.dumps(pos, indent=4), 'json')


if __name__ == '__main__':
    pywebio.start_server([main, pos_input], port=8080, debug=True, cdn=False)

Diff shown below:

@@ -4,42 +4,36 @@
 from pywebio.input import *
 from pywebio.output import *
 from pywebio.session import *
-from pywebio.session import next_client_event
 
 GET_POS_JS = """
-navigator.geolocation.getCurrentPosition(function (res) {
-    let crd = res.coords;
-    WebIO.sendMessage({
-        event: "js_yield",
-        task_id: WebIOCurrentTaskID,
-        data: {
+new Promise(resolve => {
+    navigator.geolocation.getCurrentPosition(function (res) {
+        let crd = res.coords;
+        resolve({
             latitude:crd.latitude,
             longitude:crd.longitude,
             accuracy:crd.accuracy,
-        }
+        });
     });
 });
 """
 
 
-def get_pos():
-    run_js(GET_POS_JS)
-    res = next_client_event()
-    assert res['event'] == 'js_yield'
-    return res['data']
+async def get_pos():
+    return await eval_js(GET_POS_JS)
 
 
-def main():
+async def main():
     """Get the location directly"""
-    pos = get_pos()
+    pos = await get_pos()
     put_code(json.dumps(pos, indent=4), 'json')
 
 
-def pos_input():
+async def pos_input():
     """Geolocation input widget"""
 
-    def on_click(set_value):
-        pos = get_pos()
+    async def on_click(set_value):
+        pos = await get_pos()
         label = '(%f, %f)' % (pos['latitude'], pos['longitude'])
         set_value(pos, label)
 
@@ -48,4 +42,4 @@
 
 
 if __name__ == '__main__':
-    pywebio.start_server([main, pos_input], port=8080, debug=True)
+    pywebio.start_server([main, pos_input], port=8080, debug=True, cdn=False)

cdn=False is only required for dev versions locally built.