def index():
wp = jp.WebPage()
ymd = datetime.date.today().strftime("%Y%m%d")
for media_id in media_list:
d = jp.Div(a=wp, classes='flex bg-blue-200 text-lg p-2 m-2')
jp.A(text=media_list[media_id], href=f'/news/{media_id}/{ymd}', a=d)
return wp
def html_comps_rotate_xform():
wp = jp.WebPage()
for degree in range(0, 361, 10):
image = jp.Img(
src="https://www.python.org/static/community_logos/python-powered-h-140x182.png",
a=wp,
)
image.classes = "m-4 p-4 inline-block"
image.style = f"transform: rotate({degree}deg)"
image.height = 100
image.width = 100
image.degree = degree
def straighten(self, msg):
self.style = f"transform: rotate(0deg)"
def rotate_back(self, msg):
self.style = f"transform: rotate({self.degree}deg)"
def no_rotate(self, msg):
self.degree = 0
self.set_class("bg-red-200")
image.on("mouseenter", straighten)
image.on("mouseleave", rotate_back)
image.on("click", no_rotate)
return wp
def show_demo():
wp = jp.WebPage()
b = jp.Button(text="Click to toggle show", a=wp, classes=button_classes)
d = jp.Div(text="Toggled by show", classes="m-2 p-2 text-2x1 border w-48", a=wp)
b.d = d
jp.Div(text="Will always show", classes="m-2", a=wp)
def toggle_show(self, msg):
self.d.show = not self.d.show
b.on("click", toggle_show)
b = jp.Button(text="Click to toggle visibility", a=wp, classes=button_classes)
d = jp.Div(text="Toggled by visible", classes="m-2 p-2 text-2x1 border w-48", a=wp)
d.visibility_state = "visible"
b.d = d
jp.Div(text="Will always show", classes="m-2", a=wp)
def toggle_visible(self, msg):
if self.d.visibility_state == "visible":
self.d.set_class("invisible")
self.d.visibility_state = "invisible"
else:
self.d.set_class("visible")
self.d.visibility_state = "visible"
b.on("click", toggle_visible)
return wp
def signal_values():
data = tresults.all().namedtuples()
wp = jp.WebPage()
chart_in, chart_out = jp.HighCharts(
a=wp, options=CHART_DEF), jp.HighCharts(a=wp, options=CHART_DEF)
series = defaultdict(lambda: defaultdict(list))
for row in data:
if row.ssid in ('Sunny Days 13', 'Sunny Days 3', 'Sunny Days 4',
'Sunny Days 15', 'SmallWall'):
pass
json = loads(row.json)
series[row.type][row.ssid, 'recv'].append(
to_Mbps(json['end']['sum_received']['bits_per_second']))
series[row.type][row.ssid, 'sent'].append(
-to_Mbps(json['end']['sum_sent']['bits_per_second']))
chart_in.options.subtitle.text = 'Client to server direction'
chart_in.options.series = [{
'name': (ssid, type),
'data': values
} for (ssid, type), values in series[T_INPUT].items()]
chart_out.options.subtitle.text = 'Server to client direction'
chart_out.options.series = [{
'name': (ssid, type),
'data': values
} for (ssid, type), values in series[T_OUTPUT].items()]
return wp
async def main_screen():
main = jp.WebPage(websockets=False)
main += title
main += subtitle
def pdf_input(self,msg):
print("event")
sesspath = msg.session_id
print(msg.session_id)
if not os.path.isdir(sesspath):
os.mkdir(sesspath)
print(f"path made for {msg.session_id}")
for i,v in enumerate(msg.form_data.files):
print("getting file "+str(i))
with open(f'{sesspath}/{v.name}','wb') as f:
f.write(base64.b64decode(v.file_content))
file_list = os.listdir(sesspath)
print(f"> got {file_list}")
if file_list:
session_data[msg.session_id] = file_list
msg.page.redirect = 'text_confirm'
print(f"> got {file_list}")
jp.P(text="Upload a pdf to get started",a=main,classes='w-full flex-none text-sm')
form = jp.Form(a=main,enctype='multipart/form-data',submit=pdf_input)
jp.Input(type='file',classes=jp.Styles.input_classes,a=form,accept='application/pdf',multiple=True)
jp.Button(type='submit',text='Upload',classes=jp.Styles.button_simple,a=form)
return main
def plot_test():
wp = jp.WebPage()
f = plt.figure()
plt.plot([0, 1, 4, 9], marker='*', markersize=20, markeredgecolor='red')
plt.title('Matplotlib Example')
plt.xlabel('x data')
plt.ylabel('y data')
chart = jp.Matplotlib(a=wp)
chart.num_points = 4
plt.close(f)
b = jp.Button(text='Add Point', a=wp,
classes='m-2 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded')
b.chart = chart
def add_point(self, msg):
self.chart.num_points += 1
np = self.chart.num_points
f = plt.figure()
plt.plot([i*i for i in range(np)], marker='*', markersize=20, markeredgecolor='red')
plt.title(f'This chart has {np} points')
plt.xlabel('x data')
plt.ylabel('y data')
self.chart.set_figure(f)
plt.close(f)
b.on('click', add_point)
return wp
def hello_world():
wp = jp.WebPage()
for i in range(1,11):
jp.P(
text=f'{i}) Hello world!',
a =wp, style=f'font-size: {10*i}px')
return wp
def grid_test(wm_df):
"""
JUSTpy Grid functionaliy code...
https://justpy.io/grids_tutorial/grid_events/
"""
wp = jp.WebPage()
print('This WF_DF', type(wm_df))
grid = wm_df.jp.ag_grid(a=wp)
grid.options.pagination = True
grid.options.paginationAutoPageSize = True
grid.options.columnDefs[0].cellClass = [
'text-white', 'bg-blue-500', 'hover:bg-blue-200'
]
for col_def in grid.options.columnDefs[1:]:
col_def.cellClassRules = {
'font-bold': 'x < 20',
'bg-red-300': 'x < 20',
'bg-yellow-300': 'x >= 20 && x < 50',
'bg-green-300': 'x >= 50'
}
print('Hello', type(wp))
return wp
def rot_img():
wp = jp.WebPage()
image = jp.Img(src='https://i.ibb.co/Pjh1cJ6/caveman.jpg', a=wp)
image.classes = 'm-4 p-4 inline-block border border-blue-500 rounded'
image.style = f'transform: rotate(0deg)'
image.height = 400
image.width = 400
button_div = jp.Div(classes='flex m-4 flex-wrap', a=wp)
button_classes = 'bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 border border-blue-700 rounded items-center'
def rotate(self, msg):
if self.image.style == f'transform: rotate(0deg)':
self.image.style = f'transform: rotate(90deg)'
elif self.image.style == f'transform: rotate(90deg)':
self.image.style = f'transform: rotate(180deg)'
elif self.image.style == f'transform: rotate(180deg)':
self.image.style = f'transform: rotate(270deg)'
elif self.image.style == f'transform: rotate(270deg)':
self.image.style = f'transform: rotate(0deg)'
br = jp.Button(text='Rotate',
a=button_div,
classes=button_classes,
click=rotate)
br.image = image
return wp
def event_demo():
wp = jp.WebPage()
button_div = jp.Div(classes='flex m-4 flex-wrap', a=wp)
w_button_classes = 'bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 border border-blue-700 rounded ' \
'mr-2 '
r_button_classes = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 ' \
'rounded mr-2 '
w_message = jp.Div(text='Click ↑ button to get weather condition',
classes='text-xl my-4',
a=wp)
r_message = jp.Div(text='Click ↑ button to get currency',
classes='text-xl my-4',
a=wp)
bw = jp.Button(text='Weather',
a=button_div,
classes=w_button_classes,
click=weather_click)
bw.message = w_message
br = jp.Button(text='Currency',
a=button_div,
classes=r_button_classes,
click=rate_click)
br.message = r_message
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 inner_demo():
wp = jp.WebPage()
d = jp.Div(a=wp, classes = 'm-4 p-4 text-3x1')
d.inner_html = '<pre>Hello there. \n How are you?</pre>'
jp.Div(a=wp, inner_html=my_html)
for color in ['red', 'green', 'blue', 'pink', 'yellow', 'teal', 'purple']:
jp.Div(a=wp, inner_html=f'<p class="ml-2 text-{color}-500 text-3x1">{color}</p>')
return wp
async def index(request):
wp = jp.WebPage(data={'symbols': ','.join(symbols), 'q': None})
in1 = jp.Input(a=wp,
classes=input_classes,
placeholder='Please type here',
model=[wp, 'symbols'])
b = jp.Button(text='Read', click=read, a=wp, classes=button_classes)
return wp
async def input_demo(request):
wp = jp.WebPage(data={'text': '', 'result': ''})
input_classes = "m-2 bg-gray-200 border-2"
jp.Input(a=wp,
classes=input_classes,
placeholder='please type',
model=[wp, 'text'])
jp.Div(model=[wp, 'text'], a=wp)
return wp
def event_demo():
wp = jp.WebPage()
wp.title = 'event demo'
wp.favicon = './favicon.ico'
d = jp.P(text='Not clicked yet',
a=wp,
classes='text-xl m-2 p-2 bg-blue-500 text-white')
d.on('click', my_click)
return wp
def link_demo_simple():
wp = jp.WebPage()
jp.Link(
text="Python Org",
href="https://python.org",
a=wp,
classes="m-2 p-2 text-xl text-white bg-blue-500 hover:bg-blue-700",
)
return wp
async def square_input(request):
wp = jp.WebPage(data={'result': ''})
result_div = jp.Div(text='Result will show up here',
classes=p_classes,
model=[wp, 'result'])
in1 = jp.Input(type='number', a=wp)
in2 = jp.Input(type='number', a=wp)
wp.data['result'] = in1 * in2
wp.add(reuslt_div)
return wp
def hello_world():
wp = jp.WebPage()
for i in range(1, 11):
jp.P(text=f'{i}) Hello World!', a=wp, style=f'font-size: {10*i}px')
d = jp.Div(text='Hello world!')
d.on('click', my_click)
wp.add(d)
print(1)
return wp
def event_demo():
wp = jp.WebPage()
d = jp.Div(text='Not clicked yet',
a=wp,
classes='w-48 text-xl m-2 p-c bg-blue-500 text-white')
d.on('click', my_click)
d.additional_properties = [
'screenX', 'pageY', 'altKey', 'which', 'movementX', 'button', 'buttons'
]
return wp
def tab_comp_test():
wp = jp.WebPage(data={'tab': 'id2556'})
t = Tabs(a=wp,
classes='w-3/4 m-4',
style='',
animation=True,
content_height=550)
for chart_type in ['bar', 'column', 'line', 'spline']:
d = jp.Div(style=Tabs.wrapper_style, delete_flag=True)
my_chart = jp.HighCharts(a=d,
classes='m-2 p-2 border',
style='width: 1000px;',
options=my_chart_def,
use_cache=False)
my_chart.options.chart.type = chart_type
my_chart.options.title.text = f'Chart of Type {chart_type.capitalize()}'
my_chart.options.subtitle.text = f'Subtitle {chart_type.capitalize()}'
t.add_tab(f'id{chart_type}', f'{chart_type}', d)
d_flex = Div(classes='flex',
a=wp) # Container for the two dog pictures tabs
t = Tabs(a=d_flex,
classes=' w-1/2 m-4',
animation=True,
content_height=550,
model=[wp, 'tab'],
change=tab_change)
for pic_id in pics_papillons:
d = jp.Div(style=Tabs.wrapper_style)
jp.Img(
src=
f'https://images.dog.ceo/breeds/papillon/n02086910_{pic_id}.jpg',
a=d)
t.add_tab(f'id{pic_id}', f'Pic {pic_id}', d)
t = TabsPills(a=d_flex,
classes='w-1/2 m-4',
animation=True,
content_height=550,
change=tab_change)
for pic_id in pics_french_bulldogs:
d = jp.Div(style=Tabs.wrapper_style)
jp.Img(
src=
f'https://images.dog.ceo/breeds/bulldog-french/n02108915_{pic_id}.jpg',
a=d)
t.add_tab(f'id{pic_id}', f'Pic {pic_id}', d)
input_classes = "w-1/3 m-2 bg-gray-200 border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 focus:outline-none focus:bg-white focus:border-purple-500"
in1 = jp.Input(classes=input_classes, model=[wp, 'tab'], a=wp)
return wp
async def input_demo(request):
wp = jp.WebPage()
in1 = jp.Input(type='number',
a=wp,
classes=input_classes,
placeholder='Please type here')
in1.div = jp.Div(text='What you type will show up here',
classes=p_classes,
a=wp)
in1.on('input', my_input)
return wp
async def input_demo(request):
wp = jp.WebPage(data={'text':'Initial text'})
button_classes = 'w-32 m-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
b = jp.Button(text='Reset', click=reset_all, a=wp, classes=button_classes)
jp.Hr(a=wp)
input_classes = "m-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded xtw-64 py-2 px-4 text-gray-700 focus:outline-none focus:bg-white focus:border-purple-500"
for _ in range(5):
jp.Input(a=wp, classes=input_classes, placeholder='Please type here', model=[wp, 'text'])
for _ in range(3):
jp.Div(model=[wp, 'text'], classes='m-2 p-2 h-32 text-xl border-2 overflow-auto', a=wp)
return wp
async def input_demo(request):
wp = jp.WebPage()
wp.title = 'input demo'
wp.favicon = './favicon.ico'
wp.debug = True
in2 = jp.Input(a=wp, classes=input_classes, placeholder='Please type here')
in2.div = jp.Div(text='What you type will show, 입력하는 것이 보여집니다.',
classes=p_classes,
a=wp)
in2.on('input', my_input)
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 serve(cls, req):
wp = jp.WebPage()
word = req.query_params.get('w')
defined = definition.Definition(word).get()
response = {"word": word, "definition": defined}
wp.html = json.dumps(response)
return wp
def count_test(request):
start_num = int(request.query_params.get('num', 10))
animation = request.query_params.get('animation', 'flip')
wp = jp.WebPage()
count_button = jp.Button(text='Start Countdown',
classes=button_classes,
a=wp,
click=count_down)
count_button.start_num = start_num
count_button.count_animation = animation
return wp
def grid_test():
wp = jp.WebPage()
grid = jp.AgGrid(a=wp,
options=grid_options,
style='height: 200px; width: 300px; margin: 0.25em')
grid.options.rowData.append({
'make': 'Autocars',
'model': 'Sussita',
'price': 3
})
return wp
async def parse_demo(request):
wp = jp.WebPage()
c = jp.parse_html("""
<div>
<p class="m-2 p-2 text-red-500 text-xl">Paragraph 1</p>
<p class="m-2 p-2 text-blue-500 text-xl">Paragraph 2</p>
<p class="m-2 p-2 text-green-500 text-xl">Paragraph 3</p>
</div>
""", a=wp)
print(c)
print(c.components)
return wp
def comp_test():
wp = jp.WebPage()
colors = ['red', 'green', 'blue', 'pink', 'yellow', 'teal', 'purple']
select = jp.Select(classes='w-32 text-xl m-4 p-2 bg-white border rounded',
a=wp,
value='red',
change=change_color)
for color in colors:
select.add(
jp.Option(value=color, text=color, classes=f'bg-{color}-600'))
select.color_div = jp.Div(classes='bg-red-600 w-32 h-16 m-4', a=wp)
return wp
def women_majors():
wp = jp.WebPage()
wm.jp.plot(
0,
wm_under_20,
kind='spline',
a=wp,
title='The gender gap is transitory - even for extreme cases',
subtitle=
'Percentage of Bachelors conferred to women form 1970 to 2011 in the US for extreme cases where the percentage was less than 20% in 1970',
classes='m-2 p-2 w-3/4')
return wp
