User Interface
Contents
User Interface#
Thebe includes support for some built-in user interface elements.
The aim is to provide simple elements that can be added to a page and styled accordingly by the consumer without needing to [re]write code. Using these UI elements in the way shown here, assumes that you already have Thebe statically loaded on page.
Built in UI elements are:
Activate Button
Kernel Status Widget
Status Widget#
This element will display the status of the kernel, it will update when the kernel sends new messages or when code is executed. Configure this UI element as follows.
Add a div
element to the page in the desired location.
<div class="thebe-status" />
Then set the following option to mountStatusWidget:true
in the Thebe config object
Example#
Adding the following to a page will render both Activate and Status widgets.
<script type="text/x-thebe-config">
{
requestKernel: true,
binderOptions: {
repo: "binder-examples/requirements",
},
mountActivateWidget: true,
mountStatusWidget: true
}
</script>
<div class="thebe-activate" />
<div class="thebe-status" />
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
Pressing activate will convert the following code into an activate cell, and the kernel status widget will show status of the kernel launch.
%matplotlib inline import numpy as np import matplotlib.pyplot as plt x = np.linspace(0,10) plt.plot(x, np.sin(x)) plt.plot(x, np.cos(x))
Note: If you are looking to load Thebe dynamically, check the custom launch button in the example here.