def join_click(e):
if user_name.value == "":
user_name.error_message = "Name cannot be blank!"
user_name.update()
else:
page.user = user_name.value
dlg.open = False
# user_name.focused = False
message.prefix = f"{page.user}:"
message.focused = True
page.update()
broadcast(None, f"{page.user} entered the chat!")
dlg = Dialog(
open=True,
blocking=True,
auto_dismiss=False,
title="Welcome!",
controls=[user_name],
footer=[Button(text="Join chat", primary=True, on_click=join_click)],
)
send = Button("Send", primary=True, on_click=send_click)
form = Stack(
horizontal=True, width="100%", controls=[message, send], on_submit=send_click
)
page.add(messages_pane, form, dlg)
pglet.app("chat", target=main, web=False)
Link(url='http://google.com', value='Visit Google', new_window=True),
Link(value='Link without URL', size='large'),
Link(url='http://google.com', value='Disabled link', disabled=True),
Link(url='http://google.com', controls=[
Icon('Globe'),
Text(' Link with child controls')
]),
link_with_on_click()
])
def link_with_on_click():
def link_clicked(e):
l.data += 1
t.value = f"Link clicked {l.data} time(s)"
stack.update()
#l = Link('Link with on_click event', on_click=link_clicked, title='Click me!', data=0)
l = Link(value='Link with on_click event', on_click=link_clicked, title='Click me!', data=0)
t = Text()
stack = Stack(controls=[l, t])
return stack
def main(page):
page.title = "Link control samples"
page.update()
page.add(links())
pglet.app("python-link", target = main)
show_value=True,
label='Origin from zero',
min=-5,
max=15,
step=1,
value=-2)
])
])
def slider_with_on_change():
def slider_changed(e):
s.data += 1
t.value = f"Slider changed to {int(s.value)}"
stack.update()
s = Slider('Slider with Change event', on_change=slider_changed, data=0)
t = Text()
stack = Stack(controls=[s, t])
return stack
def main(page):
page.title = "Slider control samples"
page.update()
page.add(sliders())
pglet.app("python-slider", target=main)
def main(page):
page.update(Page(title="Counter"))
page.clean()
def on_click(e):
try:
count = int(page.get_value('number'))
#if we get here the number is int
page.send('set number errorMessage=""')
if e.data == '+':
page.set_value('number', count + 1)
elif e.data == '-':
page.set_value('number', count - 1)
except ValueError:
page.send('set number errorMessage="Please enter a number"')
page.add(
Stack(horizontal=True,
controls=[
Button(text='-', onclick=on_click, data='-'),
Textbox(id='number', value='0', align='right'),
Button(text='+', onclick=on_click, data='+'),
]))
pglet.app("inesa-counter-app", target=main, web=True)
t = Text()
stack = Stack(controls=[d, t])
return stack
def change_items_in_dropdown():
def add_clicked(e):
d.options.append(dropdown.Option(new_option.value))
d.value = new_option.value
new_option.value = ''
stack.update()
d = Dropdown()
new_option = Textbox(placeholder='Enter new item name')
add = Button("Add", on_click=add_clicked)
stack = Stack(
controls=[d, Stack(horizontal=True, controls=[new_option, add])])
return stack
def main(page):
page.title = "Dropdown control samples"
page.update()
page.add(dropdowns())
pglet.app("python-dropdown", target=main)
)
first_name = Textbox("First name")
last_name = Textbox("Last name")
age = Textbox("Age")
def add_record(e):
grid.items.append(
Person(
first_name=first_name.value,
last_name=last_name.value,
age=age.value,
employee=True,
))
first_name.value = ""
last_name.value = ""
age.value = ""
page.update()
page.add(
Text("Dynamic grid with template columns", size="large"),
grid_toolbar,
grid,
Text("Add new employee record", size="medium"),
Stack(horizontal=True, controls=[first_name, last_name, age]),
Button("Add record", on_click=add_record),
)
pglet.app("python-grid", target=main, web=False)
import pglet
from pglet import Stack, Text, SpinButton
def spinbuttons():
return Stack(width='50%',
controls=[
Text("SpinButons", size="xLarge"),
SpinButton(label='Default slider')
])
def main(page):
page.title = "Spinbutton control samples"
page.update()
page.add(spinbuttons())
pglet.app("python-spinbutton", target=main)
]),
Stack(horizontal=True,
controls=[
Button(text='4', onclick=on_click, data='4'),
Button(text='5', onclick=on_click, data='5'),
Button(text='6', onclick=on_click, data='6'),
Button(text='*', onclick=on_click, data='*')
]),
Stack(horizontal=True,
controls=[
Button(text='1', onclick=on_click, data='1'),
Button(text='2', onclick=on_click, data='2'),
Button(text='3', onclick=on_click, data='3'),
Button(text='-', onclick=on_click, data='-')
]),
Stack(horizontal=True,
controls=[
Button(text='0', onclick=on_click, data='0'),
Button(text='.', onclick=on_click, data='.'),
Button(text='=', onclick=on_click, data='='),
Button(text='+', onclick=on_click, data='+')
]),
Stack(horizontal=True,
controls=[Button(text='C', onclick=on_click, data='C')]),
Stack(horizontal=True, controls=[history]))
self.history_id = history.id
pglet.app("inesa-calc-app", target=CalcApp, web=True)
import pglet
from pglet import Text, Spinner
def main(page):
page.add(
Text("Spinner sizes", size='xLarge'),
Spinner("Extra small spinner", size='xSmall', label_position='left'),
Spinner("Small spinner", size='small', label_position='left'),
Spinner("Medium spinner", size='medium', label_position='left'),
Spinner("Large spinner", size='large', label_position='left'),
Text("Spinner label positioning", size='xLarge'),
Text("Spinner with label positioned below"),
Spinner("I am definitely loading...", label_position='Bottom'),
Text("Spinner with label positioned above"),
Spinner("Seriously, still loading...", label_position='Top'),
Text("Spinner with label positioned to right"),
Spinner("Wait, wait...", label_position='Right'),
Text("Spinner with label positioned to left"),
Spinner("Nope, still loading...", label_position='Left'))
pglet.app("python-spinner", target=main)
Point(x='Green', y=50, color='LimeGreen', legend='Green', y_tooltip='50%'),
Point(x='Blue', y=30, color='LightSkyBlue', legend='Blue', y_tooltip='30%')
]
)
# Vertical chart with numeric x axis
num_chart = VerticalBarChart(y_ticks=5, y_min=0, y_max=100, y_format='{y}%',
width='100%', height=400, bar_width=10)
page.add(
Text("Vertical chart with textual x axis", size='xLarge'),
simple_chart,
Text("Vertical chart with numeric x axis", size='xLarge'),
num_chart,
)
for v in range(21, 40):
red_point.y = v
page.update()
time.sleep(0.01)
for i in range(0, 100):
num_chart.points.append(Point(x=i, y=round(random.random() * 100)))
if len(num_chart.points) > 30:
num_chart.points.pop(0)
page.update()
time.sleep(0.05)
pglet.app("python-verticalbarchart", target=main)
Text('bold', bold=True, align='center', vertical_align='center', width=100, height=100, border_radius=50, bgcolor='PaleGreen', border='2px solid #555')
]),
Text('Markdown', size='large'),
Text('''
# GitHub Flavored Markdown
## Autolink literals
www.example.com, https://example.com, and [email protected].
## Strikethrough
~one~ or ~~two~~ tildes.
### Code sample
```
import pglet
page = page.page()
```
## Table
| a | b | c | d |
| - | :- | -: | :-: |
''', markdown=True)
)
pglet.app("python-text", target=main)
# from Pglet we need Page, Textbox, Button and Text controls
from pglet import Page, Textbox, Button, Text
# We define "main" function which is an entry point for our application and called for every new user session.
def main(page):
# now we want the button to do something
# we add a new event
def on_click(e):
# we get the entered text
name = page.get_value(txt_name)
# then cleaning the page
page.clean()
# and adding the text with our greeting
page.add(Text(f"Hello, {name}!"))
# on the page we need a textbox
# and a button
txt_name = Textbox("Your name")
btn_hello = Button("Say hello!", onclick=on_click)
# then we add controls to the page
page.add(txt_name, btn_hello)
# then we wait for new users to connect
pglet.app(target=main, web=True)
])
t = Text()
stack = Stack(controls=[cg, t])
return stack
def change_items_in_choicegroup():
def add_clicked(e):
cg.options.append(choicegroup.Option(new_option.value))
new_option.value = ''
stack.update()
cg = ChoiceGroup()
new_option = Textbox(placeholder='Enter new item name')
add = Button("Add", on_click=add_clicked)
stack = Stack(
controls=[cg, Stack(horizontal=True, controls=[new_option, add])])
return stack
def main(page):
page.title = "ChoiceGroup control samples"
page.update()
page.add(choicegroups())
pglet.app("python-choicegroup", target=main)
import pglet
from pglet import Stack, Icon
def main(page):
page.title = "Icons example"
page.gap = 20
page.update()
page.add(
Stack(horizontal=True,
controls=[
Icon("ChangeEntitlements", color='Magenta20'),
Icon("shop", color='CyanBlue10'),
Icon("TrainSolid")
]),
Stack(horizontal=True,
vertical_align='center',
controls=[
Icon("BlockedSite", color='Orange20', size=25),
Icon("settings", color='Gray20', size=50),
Icon("save", color='Blue10', size=100)
]))
pglet.app("python-icon", target=main)
x_type='date',
width='500px',
height='400px',
lines=[Data(color='green', legend='t, °C')])
start_date = datetime.datetime(2021, 4, 1, 10, 5)
m = 0
for i in range(0, 60):
d = start_date + datetime.timedelta(minutes=m)
v = round((random.random() - 0.5) * 40)
temp_chart.lines[0].points.append(Point(x=d, y=v))
m += 1
page.add(Text("Simple line chart with numbers on X axis",
size='xLarge'), simple_chart,
Text("Line chart with two lines", size='xLarge'), multi_chart,
Text("Negative values with time on X axis", size='xLarge'),
temp_chart)
# simulate "running" chart
while (True):
d = start_date + datetime.timedelta(minutes=m)
v = round((random.random() - 0.5) * 40)
temp_chart.lines[0].points.pop(0)
temp_chart.lines[0].points.append(Point(x=d, y=v))
m += 1
page.update()
time.sleep(1)
pglet.app("python-linechart", target=main)
create_vertical_stack('space-between'),
create_vertical_stack('space-around'),
create_vertical_stack('space-evenly')
]))
# Stack submit
def stack_on_submit(e):
stack = e.control
stack.controls.insert(
0, Message("Form has been submitted!",
type='success',
dismiss=True))
stack.update()
form1 = Stack(
padding=10,
width='50%',
border='2px solid #eee',
border_radius=5,
controls=[
Text("Pressing ENTER inside the stack will fire 'submit' event."),
Textbox("First name"),
Textbox("Last name")
],
on_submit=stack_on_submit)
page.add(Text("Stack with Submit event", size='xLarge'), form1)
pglet.app("python-stack", target=main)
Person(first_name='Jack', last_name='Brown', age=43,
employee=True),
Person(first_name='Alice', last_name='Fox', age=25, employee=False)
],
margin=0,
on_select=grid_items_selected)
first_name = Textbox('First name')
last_name = Textbox('Last name')
age = Textbox('Age')
def add_record(e):
grid.items.append(
Person(first_name=first_name.value,
last_name=last_name.value,
age=age.value,
employee=True))
first_name.value = ''
last_name.value = ''
age.value = ''
page.update()
page.add(Text("Dynamic grid with template columns",
size='large'), grid_toolbar, grid,
Text("Add new employee record", size='medium'),
Stack(horizontal=True, controls=[first_name, last_name, age]),
Button("Add record", on_click=add_record))
pglet.app("python-grid", target=main)
page.add(
Image(
src='https://via.placeholder.com/350x150',
title='sample image',
alt=
'Example with no image fit value and no height or width is specified.'
),
Image(
src='https://via.placeholder.com/350x150',
width=600,
title='sample image',
alt='Example with no image fit value and only width is specified.'
),
Image(
src='https://via.placeholder.com/350x150',
height=100,
title='sample image',
alt='Example with no image fit value and only height is specified.'
),
Image(
src='https://via.placeholder.com/350x150',
width=100,
height=100,
title='sample image',
alt=
'Example with no image fit value and height or width is specified.'
))
pglet.app("python-image", target=main)
prog2.value = 0
prog2.update()
time.sleep(2)
prog2.description = "Collecting information..."
prog2.value = 20
prog2.update()
time.sleep(2)
prog2.description = "Creatring database entities..."
prog2.value = 40
prog2.update()
time.sleep(2)
prog2.description = "Verifying the data..."
prog2.value = 60
prog2.update()
time.sleep(2)
prog2.description = "Finishing the process, almost done..."
prog2.value = 80
prog2.update()
time.sleep(2)
prog2.description = "Your account has been created!"
prog2.value = 100
prog2.update()
pglet.app("python-progress", target=main)
try:
count = int(txt_number.value)
txt_number.error_message = ""
if e.data == "+":
txt_number.value = count + 1
elif e.data == "-":
txt_number.value = count - 1
except ValueError:
txt_number.error_message = "Please enter a number"
page.update()
txt_number = Textbox(value="0", align="right")
page.add(
Stack(
horizontal=True,
controls=[
Button("-", on_click=on_click, data="-"),
txt_number,
Button("+", on_click=on_click, data="+"),
],
))
pglet.app("counter", target=main)
import pglet
from pglet import Text
def main(page):
print(page.user_auth_provider, page.user_name, page.user_email)
page.add(Text(f"Hello to session {page.session_id}!"))
pglet.app(target=main, permissions="")
import pglet
from pglet import Textbox, Button, Text
def main(page):
def btn_click(e):
name = txt_name.value
page.clean(True)
page.add(Text(f"Hello, {name}!"))
txt_name = Textbox("Your name")
page.add(txt_name, Button("Say hello!", on_click=btn_click))
pglet.app(target=main)
items=[
nav.Item(key='facebook',
text='Share on Facebook',
icon='Share'),
nav.Item(key='twitter',
text='Share to Twitter',
icon='Share')
])
])
])
return Stack(
gap=30,
controls=[
Stack(controls=[
Text("Nav with groups and Expand, Collapse and Change events",
size="xLarge"), nav1
]),
Stack(controls=[Text("Nav without groups", size="xLarge"), nav2])
])
def main(page):
page.title = "Nav control samples"
page.update()
page.add(navs(page))
pglet.app("python-nav", target=main)
from datetime import datetime
import pglet
from pglet import DatePicker, Stack, Button
def main(page):
def on_change(e):
print(e.control.value)
now = datetime.now()
picker = DatePicker(label="Allow text input", allow_text_input=True)
page.add(
DatePicker("Start date", value=now, on_change=on_change),
DatePicker(label="End date"), picker,
Button("Check value",
on_click=lambda e: print("Selected date:", picker.value)),
DatePicker(label="Allow text input with placeholder",
placeholder='Select date...',
allow_text_input=True,
width='50%'),
DatePicker(value=now,
label="Required",
required=True,
allow_text_input=True))
pglet.app("python-datepicker", target=main)
stack.update()
sb = SearchBox(placeholder='Search something and click Enter, X or Esc',
on_search=enter_clicked,
on_clear=clear_or_esc_clicked)
messages = Stack()
stack = Stack(controls=[sb, messages])
return stack
def searchbox_with_change():
def searchbox_changed(e):
t.value = f'You have searched for {sb.value}.'
stack.update()
sb = SearchBox(placeholder='Search something...',
on_change=searchbox_changed)
t = Text()
stack = Stack(controls=[sb, t])
return stack
def main(page):
page.title = "Searchbox control samples"
page.update()
page.add(searchboxes())
pglet.app("python-searchbox", target=main)
#add stack controls each with Icon and Text
def get_stack_controls(search_name):
stack_controls = []
found_icon_names = search_icons(search_name)
for icon_name in found_icon_names:
s = Stack(controls=[
Icon(name = icon_name),
Text(value = icon_name)
])
stack_controls.append(s)
return stack_controls
stack_controls = get_stack_controls(None)
result_stack = Stack(controls=stack_controls)
self.page.add(SearchBox(id='searchbox', onchange=searchbox_changed, onsearch=enter_clicked, on_change=True), result_stack)
self.page.wait_close()
# read list of icon names from file
file_path = 'C:/Projects/Python/pglet_samples/fluent-icons-clean.txt'
input_file = open(file_path, 'r')
icon_names = []
for line in input_file:
line=line.strip()
icon_names.append(line)
input_file.close()
pglet.app("icon-browser-app", target = IconBrowserApp)
controls=[Textbox(label='Some textbox')]),
Tab(text='C#',
count=30,
controls=[Button(text='Hello button!')]),
Tab(text='Python',
count=0,
controls=[Text(value='Just text...')])
])
return Stack(
gap=30,
width='50%',
controls=[
message,
Stack(controls=[
Text("Link tabs with Change event", size="xLarge"), link_tabs
]),
Stack(controls=[Text("Solid tabs", size="xLarge"), solid_tabs])
])
def main(page):
page.title = "Tabs control samples"
page.horizontal_align = 'stretch'
page.update()
page.add(tabs(page))
pglet.app("python-tabs", target=main)
controls=[
Text("Checkboxes", size="xLarge"),
Checkbox(label='Unchecked checkbox', value=False),
Checkbox(label='Checked checkbox', value=True),
Checkbox(label='Disabled checkbox', disabled=True),
Checkbox(label="Checkbox with rendered box_side='End'",
box_side='End'),
checkbox_with_on_change()
])
def checkbox_with_on_change():
def checkbox_changed(e):
t.value = f"Checkbox value changed to {c.value}"
stack.update()
c = Checkbox('Checkbox with on_change event', on_change=checkbox_changed)
t = Text()
stack = Stack(controls=[c, t])
return stack
def main(page):
page.title = "Checkbox control samples"
page.update()
page.add(checkboxes())
pglet.app("python-checkbox", target=main)
# application's root control (i.e. "view") containing all other controls
self.view = Stack(width='70%',
controls=[
Stack(horizontal=True,
on_submit=self.add_clicked,
controls=[
self.new_task,
Button('Add',
on_click=self.add_clicked)
]), self.tasks_view
])
def add_clicked(self, e):
self.tasks_view.controls.append(Checkbox(label=self.new_task.value))
self.tasks_view.update()
def main(page):
page.title = "ToDo App"
page.horizontal_align = 'center'
page.update()
# create application instance
app = TodoApp()
# add application's root control to the page
page.add(app.view)
pglet.app("todo-app", target=main)
def toggle_with_on_change(page):
def toggle_changed(e):
if t.value:
# Dark theme
page.theme_background_color = '#262626'
page.theme_primary_color = '#3ee66d'
page.theme_text_color = '#edd2b7'
else:
page.theme_background_color = ''
page.theme_primary_color = ''
page.theme_text_color = ''
page.update()
t = Toggle(label="With Change event",
on_text="Dark theme",
off_text="Light theme",
value=False,
on_change=toggle_changed)
return t
def main(page):
page.title = "Toggle control samples"
page.update()
page.add(toggles(page))
pglet.app("python-toggle", target=main)
