def radio_changed(self, msg):
self.result_div.text = ""
d = jp.Div(a=self.result_div, classes="m-2 p-2 border")
for btn in self.btn_list:
if btn.checked:
jp.Span(text=f"{btn.value} is checked", a=d, classes="text-green-500 mr-6")
else:
jp.Span(
text=f"{btn.value} is NOT checked", a=d, classes="text-red-500 mr-6"
)
def radio_test():
wp = jp.WebPage()
genders = ["male", "female", "other"]
ages = [(0, 30), (31, 60), (61, 100)]
outer_div = jp.Div(classes="border m-2 p-2 w-64", a=wp)
# Create div to show radio button selection but don't add yet to page. It will be added at the end
# It is created here so that it could be assigned to the radio button attribute result_div
result_div = jp.Div(
text="Click radio buttons to see results here", classes="m-2 p-2 text-xl"
)
jp.P(a=outer_div, text="Please select your gender:")
gender_list = []
for gender in genders:
label = jp.Label(classes="inline-block mg-1 p-1", a=outer_div)
radio_btn = jp.Input(
type="radio",
name="gender",
value=gender,
a=label,
btn_list=gender_list,
result_div=result_div,
change=radio_changed,
)
gender_list.append(radio_btn)
jp.Span(classes="ml-1", a=label, text=gender.capitalize())
jp.Div(a=outer_div, classes="m-2") # Add spacing and line break
jp.P(a=outer_div, text="Please select your age:")
age_list = []
for age in ages:
label = jp.Label(classes="inline-block mb-1 p-1", a=outer_div)
radio_btn = jp.Input(
type="radio",
name="age",
value=age[0],
a=label,
btn_list=age_list,
result_div=result_div,
change=radio_changed,
)
age_list.append(radio_btn)
jp.Span(classes="ml-1", a=label, text=f"{age[0]} - {age[1]}")
jp.Br(a=outer_div)
wp.add(result_div)
return wp
def check_test():
wp = jp.WebPage(data={'checked': True})
label = jp.Label(a=wp, classes='m-2 p-2 inline-block')
c = jp.Input(type='checkbox', classes='m-2 p-2 form-checkbox', a=label, model=[wp, 'checked'])
caption = jp.Span(text='Click to get stuff', a=label)
in1 = jp.Input(model=[wp, 'checked'], a=wp, classes='border block m-2 p-2')
return wp
def pydeck_demo(request):
wp = jp.QuasarPage(tailwind=True, title='Uber NYC Pickups')
wp.decks = {}
slider_div = jp.Div(a=wp,
classes='flex ml-4',
style='width: 50%; margin-top: 20px')
jp.Div(text='Select hour of pickup:',
a=slider_div,
classes='pt-3 text-xl font-bold ')
s1 = jp.Span(classes='ml-6 mt-1', style='width: 50%', a=slider_div)
jp.QSlider(classes='w-64',
min=0,
max=23,
a=s1,
label=True,
label_always=True,
markers=True,
step=1,
snap=True,
color='red',
change=slider_change)
deck_div = jp.Div(classes='flex ml-2', a=wp)
hour_data = data[data[DATE_TIME].dt.hour == int(0)]
deck = map_deck(hour_data, midpoint[0], midpoint[1], zoom_level_main)
all_div = jp.Div(a=deck_div)
wp.all_caption = jp.Div(text='All New York City from 0:00 to 1:00',
a=all_div,
style='margin: 10px;',
classes='text-xl font-bold')
wp.decks['main'] = jp.PyDeckFrame(
a=all_div,
deck=deck,
style='margin: 10px; height: 400px; width: 450px',
transition_duration=0.5)
for airport, coords in airports.items():
airport_deck = map_deck(hour_data, coords[0], coords[1],
zoom_level_airports)
airport_div = jp.Div(a=deck_div)
jp.Div(text=f'{airport} Airport',
a=airport_div,
style='margin: 10px;',
classes='text-xl font-bold')
wp.decks[airport] = jp.PyDeckFrame(
a=airport_div,
deck=airport_deck,
style='margin: 10px; height: 400px; width: 250px',
transition_duration=0.5)
if _has_altair:
chart = create_histogram(0)
wp.histogram_caption = jp.Div(
text='Breakdown of rides per minute between 0:00 and 1:00',
a=wp,
style='margin-left: 30px;',
classes='text-xl font-bold')
wp.histogram = jp.AltairChart(chart=chart,
a=wp,
style='padding: 10px; width: 100%;')
return wp
async def news(request):
media_id = request.path_params.get('media_id', '009')
ymd = request.path_params.get('ymd', '20200101')
wp = jp.WebPage()
head = jp.Div(a=wp, classes='text-lg')
jp.A(text='Home', href='/', a=head, classes='p-2 bg-green-200')
jp.Span(text=media_list[media_id], a=head, classes='m-2 p-2 bg-blue-200')
jp.A(text='<', href=f'/news/{media_id}/{get_next_ymd(ymd, -1)}', a=head, classes='p-2 bg-red-200')
jp.Span(text=ymd, a=head, classes='p-2 bg-red-100')
jp.A(text='>', href=f'/news/{media_id}/{get_next_ymd(ymd, 1)}', a=head, classes='p-2 bg-red-200')
articles = get_article_list(media_id, ymd)
for article in articles:
div = jp.Div(a=wp, classes='flex bg-gray-200 p-1 m-1 text-lg')
jp.A(text=article['title'], href=article['link'], a=div)
return wp
def html_comps2():
wp = jp.WebPage()
for i in range(10):
d = jp.Div(a=wp, classes="m-2")
for j in range(10):
jp.Span(
text=f"Span #{j+1} in Div #{i+1}",
a=d,
classes="text-white bg-blue-700 hover:bg-blue-200 ml-1 p-1",
)
return wp
def focus_test():
wp = jp.WebPage()
d = jp.Div(classes = 'flex flex-col m-2', a=wp, style='width: 600 px')
input_list = []
number_of_fields = 5
for i in range(1, number_of_fields + 1):
label = jp.Label(a=d, classes = 'm-2 p-2')
jp.Span(text=f'Field {i}', a=label)
in1 = jp.Input(classes = jp.Styles.input_classes, placeholder=f'{i} Type here', a=label, keydown=key_down, spellcheck='false')
in1.on('blur', my_blur)
in1.input_list = input_list
in1.num = i-1
input_list.append(in1)
print(input_list)
return wp
def form_test():
wp = jp.WebPage()
wp.display_url = '/fill_form'
form1 = jp.Form(a=wp, classes='border m-1 p-1 w-64')
user_label = jp.Label(
text='User Name',
classes=
'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2',
a=form1)
in1 = jp.Input(placeholder='User Name', a=form1, classes='form-input')
user_label.for_component = in1
password_label = jp.Label(
classes=
'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2',
a=form1)
jp.Div(
text='Password',
classes=
'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2',
a=password_label)
jp.Input(placeholder='Password',
a=password_label,
classes='form-input',
type='password')
check_label = jp.Label(classes='text-sm block', a=form1)
jp.Input(type='checkbox',
a=check_label,
classes='form-checkbox text-blue-500')
jp.Span(text='Send me stuff', a=check_label, classes='ml-2')
submit_button = jp.Input(value='Submit Form',
type='submit',
a=form1,
classes=button_classes)
def submit_form(self, msg):
print(msg)
msg.page.redirect = '/form_submitted'
session_data[msg.session_id] = msg.form_data
form1.on('submit', submit_form)
return wp
async def page():
wp = jp.WebPage()
wp.head_html = "<link href='https://afeld.github.io/emoji-css/emoji.css' rel='stylesheet'></link>"
root = jp.Div(a=wp)
body = jp.Div(
classes='bg-gray-400 font-sans leading-normal tracking-normal', a=root)
c2 = jp.Nav(classes='bg-gray-800 p-2 mt-0 w-full', a=body)
c3 = jp.Div(
classes='container mx-auto flex flex-wrap items-center', a=c2)
c4 = jp.Div(
classes='flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold', a=c3)
logo_link = jp.A(
classes='text-white no-underline hover:text-white hover:no-underline', href='#', a=c4)
logo_cont = jp.Span(classes='flex text-2xl pl-2', a=logo_link)
logo = jp.I(classes='em em-email my-auto', a=logo_cont)
title = jp.Div(classes="p-2", text="Spam Detector", a=logo_cont)
cont_main = jp.Div(
classes='container mx-auto flex flex-col md:flex-row items-center my-6 md:my-12', a=body)
cont_left = jp.Div(
classes='flex flex-col w-full lg:w-1/2 justify-center items-start pt-12 pb-24 px-6', a=cont_main)
tagline = jp.P(classes='uppercase tracking-loose',
a=cont_left, text='Version: 1.0')
main_title = jp.H1(classes='font-bold text-3xl my-4',
a=cont_left, text='Spam Detector')
description = jp.P(classes='leading-normal mb-4', a=cont_left,
text='Keep the bad guys out! Enter the text of your email below and the Spam Detector will tell you how likely it\'s contents is spam:')
text_in = jp.Textarea(classes='w-full border-2 h-32',
placeholder='Please type here', a=cont_left)
text_in.div = jp.Div(a=cont_left)
text_in.on('input', predict)
cont_right = jp.Div(
classes='w-full lg:w-1/2 lg:py-6 text-center', a=cont_main)
mailbox = jp.I(
classes='text-6xl w-3/5 mx-auto em-svg em-mailbox_with_mail', viewBox='0 0 20 20', a=cont_right)
footer = jp.Div(classes='bg-white h-1', a=body)
footer_cont = jp.Div(
classes='container mx-auto pt-12 md:pt-6 px-6', a=footer)
footer_text_cont = jp.P(classes='py-4', a=footer_cont)
love = jp.I(classes='em em-hearts', a=footer_text_cont)
data = jp.I(classes='em em-bar_chart', a=footer_text_cont)
science = jp.I(classes='em em-test_tube', a=footer_text_cont)
return wp
import justpy as jp
import time
import sqlite3
from modules.monitor import adjust_temp
wp = jp.WebPage(delete_flag=False)
clock_div = jp.Span(
text="Loading...", classes="text-5xl m-1 p-1 bg-gray-300 font-mono", a=wp
)
my_paragraph_design = (
"w-64 bg-blue-500 m-2 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
)
def submit_temp(self, current_temp, target_temp):
self.x = adjust_temp(current_temp, target_temp)
def my_click(self, msg):
self.text = "I was clicked"
print(msg.event_type)
print(msg["event_type"])
print(msg)
def home():
in1 = jp.Input(a=wp, classes=input_classes, placeholder="Target Temperature")
in2 = jp.Input(a=wp, classes=input_classes, placeholder="Current Temperature")
d.on("click", my_click)
return wp
import justpy as jp
import time
import asyncio
wp = jp.WebPage(delete_flag=False)
clock_div = jp.Span(text='Loading...',
classes='text-5xl m-1 p-1 bg-gray-300 font-mono',
a=wp)
async def clock_counter():
while True:
clock_div.text = time.strftime("%a, %d %b %Y, %H:%M:%S",
time.localtime())
jp.run_task(wp.update())
await asyncio.sleep(1)
async def clock_init():
jp.run_task(clock_counter())
async def clock_test():
return wp
jp.justpy(clock_test, startup=clock_init)
