alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

Improvements for deckgl demo

Browse Source
This commit is contained in:
Philipp Rudiger
2022-04-17 22:33:11 +02:00
parent bb1c80c3ab
commit 05dbc2eaf6
1 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
pyscriptjs/examples/panel_deckgl.html
View File

@@ -2,10 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Pyscript/Panel DeckGL Demo</title> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#0072b5">
<meta name="name" content="Pyscript/Panel DeckGL Demo">
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/icons/favicon.ico" type=""> <title>Pyscript/Panel DeckGL Demo</title>
<meta name="name" content="PyScript/Panel KMeans Demo">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" /> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
@@ -24,23 +26,18 @@
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script> <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script> <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.js"></script> <script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css"> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css"> <link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
<style>
#sidebar {
width: 350px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
#sidebar {
width: 400px;
}
</style>
<link rel="stylesheet" href="../build/pyscript.css" /> <link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script> <script defer src="../build/pyscript.js"></script>
</head> </head>
@@ -98,6 +95,8 @@ class App(pn.viewable.Viewer):
view = param.DataFrame(precedence=-1) view = param.DataFrame(precedence=-1)
arc_view = param.DataFrame(precedence=-1)
radius = param.Integer(default=50, bounds=(20, 1000)) radius = param.Integer(default=50, bounds=(20, 1000))
elevation = param.Integer(default=10, bounds=(0, 50)) elevation = param.Integer(default=10, bounds=(0, 50))
@@ -111,14 +110,17 @@ class App(pn.viewable.Viewer):
def __init__(self, **params): def __init__(self, **params):
self.deck_gl = None self.deck_gl = None
super().__init__(**params) super().__init__(**params)
self.deck_gl = pn.pane.DeckGL(dict(self.spec), mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_both', margin=0) self.deck_gl = pn.pane.DeckGL(
self.deck_gl.param.watch(self.update_spec, 'hover_state') dict(self.spec), mapbox_api_key=MAPBOX_KEY, throttle={'click': 10},
sizing_mode='stretch_both', margin=0)
self.deck_gl.param.watch(self._update_arc_view, 'click_state')
self._playing = False self._playing = False
self._cb = pn.state.add_periodic_callback(self._update, 1000//self.speed, start=False) self._cb = pn.state.add_periodic_callback(
self._update_hour, 1000//self.speed, start=False
)
@param.depends('speed', watch=True) def __panel__(self):
def _update_speed(self): return self.deck_gl
self._cb.period = 1000//self.speed
@property @property
def spec(self): def spec(self):
@@ -168,24 +170,32 @@ class App(pn.viewable.Viewer):
"getTargetColor": [240, 100, 0, 180] "getTargetColor": [240, 100, 0, 180]
} }
@property def _update_hour(self):
def arc_view(self): self.hour = (self.hour+1) % 24
@param.depends('view', watch=True)
def _update_arc_view(self, event=None):
data = self.data if self.view is None else self.view data = self.data if self.view is None else self.view
if not self.deck_gl or not self.deck_gl.hover_state: if not self.deck_gl or not self.deck_gl.click_state:
return data.iloc[:0] self.arc_view = data.iloc[:0]
lon, lat = self.deck_gl.hover_state['coordinate'] else:
lon, lat = self.deck_gl.click_state['coordinate']
tol = 0.001 tol = 0.001
return data[ self.arc_view = data[
(df.pickup_x>=float(lon-tol)) & (df.pickup_x>=float(lon-tol)) &
(df.pickup_x<=float(lon+tol)) & (df.pickup_x<=float(lon+tol)) &
(df.pickup_y>=float(lat-tol)) & (df.pickup_y>=float(lat-tol)) &
(df.pickup_y<=float(lat+tol)) (df.pickup_y<=float(lat+tol))
] ]
def _update(self): @param.depends('hour', watch=True)
self.hour = (self.hour+1) % 24 def _update_hourly_view(self):
self.view = self.data[self.data.hour==self.hour] self.view = self.data[self.data.hour==self.hour]
@param.depends('speed', watch=True)
def _update_speed(self):
self._cb.period = 1000//self.speed
@param.depends('play', watch=True) @param.depends('play', watch=True)
def _play_pause(self): def _play_pause(self):
if self._playing: if self._playing:
@@ -198,12 +208,10 @@ class App(pn.viewable.Viewer):
self.param.speed.precedence = 1 self.param.speed.precedence = 1
self._playing = not self._playing self._playing = not self._playing
@param.depends('view', 'radius', 'elevation', watch=True) @param.depends('view', 'radius', 'elevation', 'arc_view', watch=True)
def update_spec(self, *events): def update_spec(self):
self.deck_gl.object = dict(self.spec) self.deck_gl.object = dict(self.spec)
def __panel__(self):
return self.deck_gl
data = await fetch('https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv') data = await fetch('https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv')
df = pd.read_csv(StringIO(await data.text())) df = pd.read_csv(StringIO(await data.text()))