let's assume that you have a new tile that you want to display in the UI to process geospatial data.
the tile cod is the following :
# component/tile/my_tile.py
import time
from sepal_ui import sepalwidgets as sw
import ipyvuetify as v
from component.message import ms
from sepal_ui.scripts import utils as su
class MyTile(sw.Tile):
def __init__(self, model, **kwargs):
# gather models
self.model = model
# a single widget
self.slider = v.Slider(
label = ms.my_tile_slider,
class_ = "mt-5",
thumb_label = True,
v_model = 0
)
self.model.bind(self.slider, 'slider_value')
# construct the Tile with the widget we have initialized
super().__init__(
id_ = "my_tile",
title = ms.my_tile.title,
inputs = [self.slider],
btn = sw.Btn(),
alert = sw.Alert()
)
# now that the Tile is created we can link it to a specific function
self.btn.on_event('click', self._on_run)
@su.loading_button(debug=False)
def _on_run(self, widget, data, event):
time.sleep(5)
self.alert.add_live_msg("I've waited for 5 good seconds...", "warning")
return
At the root of your repository create a notebook called [my process_name]_ui.ipynb
.
In this file will create the instance of the tile object that we created
by writing the following steps (each code block need to be written in a separate cell):
from component import io
from component import tile
Tip
add the debugging io
required for you tile to work in stand-alone. it will allow you to test your process only by launching this notebook
create the io
my_io = MyIo()
create the tile
my_tile = MyTile(io)
display your tile
my_tile
display your io
my_io.__dict__
Normally if you launch all the cell of the current notebook you should already see your tile. Clear all the cell.
in the gathering first cell
add an extra line with that will run the newly created partial ui notebook
# no_ui.ipynb
%run my_tile_ui.ipynb
[...]
and simply display the tiles in separate cells. they will of course be displayed in the order you write them
my_tile
same as in the no_ui.ipynb
notebook, add the extra line to run the newly created partial ui notebook
Then add the my_tile
variable in the app_content list.
in the app_items
list, add a DrawerItem
corresponding to your tile. To link it, use the 'id' attribute of your tile, here "my_tile"
# ui.ipynb
app_items = [
# [...]
sw.DrawerItem(
title = ms.app.drawer_item.aoi,
icon 'fas fa-cogs', # optional
card="my_tile"
)
]
start your voila dashboard "et voila!", you're tile will be loaded at the kernel start and display when you click on the corresponding drawer item.
.. spelling:word-list:: et