Esempio webapp

Esempio di webapp mostrato per esecuzione con Voila

Per capire il funzionamento, vedere tutorial Applicazioni interattive - Sezione Webapp

Nota: Le celle di testo di Jupyter come questa vengono mostrate anche da Voila.

import ipywidgets as widgets
from ipywidgets import Button, HBox, VBox, Tab, IntSlider, Label, HTML, AppLayout, Layout

# !!!!  IMPORTANTE !!!!
# Il 'pyplot' che vedete qui sotto, che viene importato con il nome di 'plt'
# proviene dalla libreria di bqplot, NON E' lo stesso pyplot di matplotlib !!
# Gli autori di bqplot hanno adottato lo stesso nome e convenzioni per permettervi
# di riusare facilmente esempi che già conoscete di matplotlib

from bqplot import pyplot as plt

x = [2,4,6]
fig = plt.figure()          # genera la figure

lines = plt.plot(x, [15,3,20])
plt.title('Grafico in bqplot')

slider1 = IntSlider()

bottone_vai_pag2 = Button(description="VAI PAGINA 2")


slider2 = IntSlider()
hbox2 = HBox([Button(description='clicca qui'), Button(description='cliccami!')])


tab1 = HBox(children=[fig, VBox([slider1, bottone_vai_pag2])])
tab2 = VBox(children=[slider2,
                      hbox2])

# al momento la prima 'pagina' è il widget Tab
pagina1 = widgets.Tab(children=[tab1, tab2],  layout=Layout(min_height='350px'))

pagina1.set_title(0, 'TAB COL PLOT')
pagina1.set_title(1, 'ALTRA TAB')

bottone_vai_pag1 = Button(description="VAI PAGINA 1")

pagina2 = HBox([
                Label("Questa è la seconda pagina"),
                bottone_vai_pag1
               ],
               layout=Layout(min_height='350px') )


# Il codice HTML è il codice con cui sono scritte le pagine web, qui lo
# usiamo per creare il titolo come esempio ma non è indispensabile conoscerlo
# Se vuoi saperne di più, prova a seguire questo tutorial:    http://coderdojotrento.it/web1
titolo = HTML('<h1 style="color:orange">Webapp Incredibile</h1> <br/>')

# testo comune in fondo alla pagina
credits = Label("Credits: Interfacce Incredibili SRL")

# la struttura della nostra webapp è un pila VBox di elementi.
my_app = VBox( children=[titolo,    # supponiamo che il titolo sia sempre visibile in tutto il sito
                          pagina1,   # al momento la prima 'pagina' è il widget tab
                          credits])  # supponiamo che il titolo sia sempre visibile in tutto il sito

# questa funzione permette di cambiare la parte centrale della webapp passando un nuovo widget
def cambia_pagina(nuova_pagina):

    # le parentesi tonde in questo contesto creano una tupla,
    # cioè una sequenza immutabile di elementi):
    my_app.children = (my_app.children[0],    # il widget del titolo precedente
                        nuova_pagina,           # widget che rappresenta la nuova pagina
                        my_app.children[2])    # il widget dei credits precedente

def bottone_vai_pag2_cliccato(b):
    cambia_pagina(pagina2)

bottone_vai_pag2.on_click(bottone_vai_pag2_cliccato)


def bottone_vai_pag1_cliccato(b):
    cambia_pagina(pagina1)

bottone_vai_pag1.on_click(bottone_vai_pag1_cliccato)

display(my_app)