Notebook

Composite components short demos¶

This notebook provides simple example usages for composite H5Gizmo components,

Please see the

H5Gizmos composite components documentation for discussions of theses examples.

In [ ]:

from H5Gizmos import ClickableText, Label

def play(*ignored):
    L.add("I'm afraid I can't do that, Dave.")
    
T = ClickableText("global thermonuclear war.", on_click=play)
L = Label("Click to play: ", T)
await L.show()

In [ ]:

from H5Gizmos import RadioButtons, Button, Stack, Html

title = Html("<h4>Entertainment</h4>")
genre = RadioButtons("scifi action romance".split())
duration = RadioButtons("half hour series".split())
language = RadioButtons("Spanish French German".split())
show_options = Button("Show options")

S = Stack(
    children=[
        title,
        genre, 
        duration, 
        language, 
        show_options]
)
await S.show()

In [ ]:

from H5Gizmos import Html, RadioButtons, Button, Shelf

title = Html("<h4>Entertainment</h4>")
genre = RadioButtons("scifi action romance".split())
duration = RadioButtons("half hour series".split())
language = RadioButtons("Spanish French German".split())
show_options = Button("Show options")

S = Shelf(
    children=[
        title,
        genre, 
        duration, 
        language, 
        show_options]
)
await S.show()

In [ ]:

from H5Gizmos import RangeSlider, Text, Shelf

low_text = Text("low")
low_text.resize(width=150).css({"text-align": "center"})
hi_text = Text("high")
hi_text.resize(width=150).css({"text-align": "center"})

def r_slide_callback(*ignored):
    low = RS.low_value
    high = RS.high_value
    low_text.text(" %s <= %s " % (m, low))
    hi_text.text(" %s <= %s " % (high, M))

m = -50
M = 100
d = 30
RS = RangeSlider(
    minimum=m,
    maximum=M,
    low_value=m+d,
    high_value=M-d,
    step=1,
    orientation="horizontal", # or "vertical"
    on_change=r_slide_callback,
)
RS.resize(width=300)

S = Shelf(
    children=[low_text, RS, hi_text]
)

await S.show()

In [ ]:

from H5Gizmos import RadioButtons, Button, Template

genre = RadioButtons("scifi action romance".split())
duration = RadioButtons("half hour series".split())
language = RadioButtons("Spanish French German Greek".split())
show_options = Button("Show options")

T = (Template("""
<table>
<tr> <th colspan="2">Entertainment Choices</th> </tr>
<tr>
    <th> Genre </th>
    <td> <div class="GENRE"/> </td>
</tr>
<tr>
    <th> Length </th>
    <td> <div class="DURATION"/> </td>
</tr>
<tr>
    <th> Language </th>
    <td> <div class="LANGUAGE"/> </td>
</tr>
<tr> <th colspan="2"> <div class="SHOW_OPTIONS"/> </th> </tr>
</table>
""").put(genre, "GENRE")
    .put(duration, "DURATION")
    .put(language, "LANGUAGE")
    .put(show_options, "SHOW_OPTIONS")
    )

await T.show()

def show(*ignored):
    T.add("I'm afraid I can't do that, Dave.")
    
show_options.set_on_click(show)

In [ ]:

# Implicit shelf in stack
from H5Gizmos import Html, RadioButtons, Button, Stack

genre = RadioButtons("scifi action romance".split())
duration = RadioButtons("half hour series".split())
language = RadioButtons("Spanish French German".split())
show_options = Button("Show options")

S = Stack(
    children=[
        "<h4>Entertainment</h4>", 
        [genre, duration, language], 
        show_options]
)
await S.show()

In [ ]: