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.
[1]:
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)
[ ]: