Templating

Voilà gridstack

gridstack.js is a jQuery plugin for widget layouts. This enables multi-column drag and drop grids and customizable layouts suitable for Bootstrap v3. It also works with knockout.js and touch devices.

The Gridstack Voilà template uses the metadata of the notebook cells to design the notebook’s layout. It is supposed to support the entire specification for the outdated Jupyter Dashboards.

voila-vuetify

voila-vuetify is a template for using Voilà with the Material Design Component Framework Vuetify.js.

Installation

$ pipenv install bqplot ipyvuetify voila-vuetify

Usage

To use voila-vuetify in a notebook, you first have to import ipyvuetify:

import ipyvuetify as v

Then you can create a layout, for example with:

v.Tabs(_metadata={'mount_id': 'content-main'}, children=[
    v.Tab(children=['Tab1']),
    v.Tab(children=['Tab2']),
    v.TabItem(children=[
        v.Layout(row=True, wrap=True, align_center=True, children=[
            v.Flex(xs12=True, lg6=True, xl4=True, children=[
                fig, slider
            ]),
            v.Flex(xs12=True, lg6=True, xl4=True, children=[
                figHist2, sliderHist2
            ]),
            v.Flex(xs12=True, xl4=True, children=[
                fig2
            ]),
        ])
    ]),
    v.TabItem(children=[
        v.Container(children=['Lorum ipsum'])
    ])
])

You can use bqplot_vuetify_example.ipynb with:

$ pipenv run voila --template vuetify-default bqplot_vuetify_example.ipynb

Then your standard browser will open the URL http://localhost:8866/ and show you the plots in Responsive Material Design.

Example for Voilà-vuetify with the monitor resolution of a laptop MDPI screen:

Example for Voilà-vuetify with the monitor resolution of an iPhone X:

voila-debug

voila-debug is a template for displaying debug information when working on Voilà applications.

Installation

$ pipenv install voila-debug

Usage

You can use the template debug.ipynb with:

$ pipenv run voila --template=debug --VoilaExporter.template_file=debug.tpl

This will open your default browser with the URL localhost:8866.

Then you can take a closer look at how it works at http://localhost:8866/voila/render/docs/dashboards/voila/debug.ipynb.

In addition to an example widget, it contains a code cell for exiting the kernel:

import os

def kill_kernel(change):
    os._exit(0)

button = widgets.Button(description="Kill Kernel")
button.on_click(kill_kernel)
button

voila-reveal

voila-reveal is a template for slideshows based on RevealJS.

Installation

$ pipenv install voila-reveal

Usage

You can use the template with:

$ pipenv run voila --template=reveal reveal.ipynb

Additional options can be used to override the default settings, for example to change the default value for transition Fade to Zoom with:

$ pipenv run voila --template=reveal --VoilaConfiguration.resources="{'reveal': {'transition': 'zoom'}}" reveal.ipynb

If configuration options are to be saved permanently, a conf.json file can be created in share/jupyter/voila/templates/reveal/:

{
  "traitlet_configuration": {
    "resources": {
      "reveal": {
        "scroll": false,
        "theme": "simple",
        "transition": "zoom"
      }
    }
  }
}

You can then turn your notebook into a slideshow in View ‣ Cell Toolbar ‣ Slideshow. In a cell toolbar you can choose between

Slide

left to right

Sub-Slide

top to bottom

Fragment

stops inside a slide

Notes

Speaker notes opened in a new window when the presenter press the t key

If you want to publish your slideshow on binder, you must write the following tag in the metadata of the notebook in Edit ‣ Edit Notebook Metadata:

"rise": {
    "autolaunch": true
}

You can also use the chalkboard reveal plugin in the metadata of the notebook:

"rise": {
  "enable_chalkboard": true
}

Create your own templates

A Voilà template is a folder that is located in the virtual environment at share/jupyter/voila/templates and for example, contains the following:

/Users/veit/.local/share/virtualenvs/jupyter-tutorial--q5BvmfG/share/jupyter/voila/templates/mytheme
├── conf.json
├── nbconvert_templates
│   └── voila.tpl
├── static
│   ├── mytheme.js
│   └── mytheme.css
└── templates
    ├── 404.html
    ├── browser-open.html
    ├── error.html
    ├── page.html
    └── tree.html

conf.json

Configuration file that for example refers to the basic template:

{"base_template": "default"}

nbconvert_templates

Custom templates for nbconvert.

static

Directory for static files.

templates

Custom tornado templates.