def home():
wp = jp.QuasarPage(tailwind=True)
page = jp.Div(a=wp, classes="bg-gray-200 h-screen")
# jp.Div(a=page, classes="bg-gray-300")
con = jp.Div(a=page, classes="bg-purple-300 m-24 p-10 rounded")
line = jp.Div(a=con, classes="grid grid-cols-3 gap-4")
in_1 = jp.Input(a=line,
placeholder="Enter the first value",
classes="form-input")
in_2 = jp.Input(a=line,
placeholder="Enter the second value",
classes="form-input")
result = jp.Div(a=line, text="Result goes here....")
jp.QBtn(
a=con,
label="Calculate",
color='purple',
icon="calculator",
click=sum_up,
in1=in_1,
in2=in_2,
total=result,
classes=
"bg-purple-600 m-2 py-1 px-4 text-gray-800 rounded hover:bg-purple-800"
)
jp.Div(a=con,
text="interactive div",
mouseenter=mouse_enter,
mouseleave=mouse_leave)
return wp
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.in1 = jp.Input(a=self, placeholder='type me',
input = self.input_handler)
self.in2 = jp.Input(a=self, placeholder='type me2',
input = self.input_handler)
self.in2.div = jp.Div(text='What do you type?', a=self)
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
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 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 serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
div = jp.Div(a=wp, classes="bg-gray-200 h-screen")
jp.Div(a=div,
text="Instant English Dictionary",
classes="text-4xl m-2")
jp.Div(a=div,
text="Get the definition of any English word as you type.",
classes="text-lg")
input_div = jp.Div(a=div, classes="grid grid-cols-2")
output_div = jp.Div(a=div, classes="m-2 p-2 text-lg border-2 h-40")
input_box = jp.Input(
a=input_div,
placeholder="Type in a word here...",
outputdiv=output_div,
classes=
"m-2 bg-gray-100 border-2 border-gray-200 rounded w-64 focus:bg-white "
"focus:outline-none focus:border-purple-500")
input_box.on("input", cls.get_definition)
# jp.Button(a=input_div, text="Get definition",
# classes="border-2 border-purple-500 rounded focus:outline-none "
# "focus:border-red-500", click=cls.get_definition, outputdiv=output_div, inputbox=input_box)
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 serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen")
jp.Div(a=div,
text="Instant English Dictionary",
classes="text-4xl m-2")
jp.Div(
a=div,
text="Get the definition of any English word instantly as you type."
)
input_div = jp.Div(a=div, classes="grid grid-cols-2")
output_div = jp.Div(a=div, classes="m-2 p-2 text-lg border-2 h-40")
input_box = jp.Input(
a=input_div,
placeholder="Type in a word...",
outputdiv=output_div,
classes=
"m-2 bg-gray-100 border-2 border-gray2 rounded w-64 focus:outline-none "
"focus:border-purple-500 focus:bg-white py-2 px-4")
input_box.on('input', cls.get_definition)
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
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
def home():
wp = jp.QuasarPage(tailwind=True)
div = jp.Div(a=wp, classes="bg-gray-200 h-screen")
div1 = jp.Div(a=div, classes="grid grid-cols-3 gap-4 p-4")
in_1 = jp.Input(a=div1, placeholder="Enter first value", classes="form-input")
in_2 = jp.Input(a=div1, placeholder="Enter second value", classes="form-input")
d_output = jp.Div(a=div1, text="Result", classes="text-gray-600")
jp.Div(a=div1, text="Just another Div", classes="text-gray-600")
jp.Div(a=div1, text="Yet another Div", classes="text-gray-600")
div2 = jp.Div(a=div, classes="grid grid-cols-2 gap-4")
jp.QBtn(a=div2, text="Calculate", click=sum_up, in1=in_1, in2=in_2, d=d_output,
classes="border border-blue-500 m-2 py-1 px-4 rounded "
"text-blue-600 hover:bg-red-500 hover:text-white")
jp.Div(a=div2, text="I'm an interactive div", mouseenter=mouse_enter, mouseleave=mouse_leave,
classes="hover:bg-red-500")
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
async def square_input(request):
wp = jp.WebPage()
wp.result_div = jp.Div(text='Result will show up here',
classes='text-xl border m-2 p-2 w-1/3',
a=wp)
wp.in1 = jp.Input(type='number',
a=wp,
placeholder='First number',
input=num_changes,
value=0,
classes=jp.Styles.input_classes)
wp.in2 = jp.Input(type='number',
a=wp,
placeholder='Second number',
input=num_changes,
value=0,
classes=jp.Styles.input_classes)
return wp
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.value = 0
self.tape = jp.Input(
classes='block p-2 m-2 border text-right text-sm bg-gray-200',
a=self,
readonly=True,
value=' ',
style='width: 90%')
self.result = jp.Input(
classes='block p-2 m-2 border text-2xl text-right',
a=self,
readonly=True,
value='0',
style='width: 90%')
d = jp.Div(classes='flex w-auto m-2', a=self)
b = jp.Input(text='type', a=d)
b1 = jp.Button(text='cal!', a=d, click=self.cal_click)
b1.calc = self
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.in1 = jp.Input(a=self,
classes=self.input_classes,
placeholder='Please type here',
input=self.input_handler)
self.in1.div = jp.Div(text='What you type will show up here',
classes='m-2 p-2 h-32 text-xl border-2',
a=self)
def grid_test():
"""Grid test app.
"""
headings = list(string.ascii_uppercase)
index = np.arange(START_INDEX, END_INDEX)
data_frame = pd.DataFrame(index=index, columns=headings)
data_frame = data_frame.fillna('')
# data = np.array([np.arange(10)]*3).T
# css_values = """
# .ag-theme-alpine .ag-ltr .ag-cell {
# border-right: 1px solid #aaa;
# }
# .ag-theme-balham .ag-ltr .ag-cell {
# border-right: 1px solid #aaa;
# }
# """
web_page = jp.WebPage()
root_div = jp.Div(classes='q-pa-md', a=web_page)
in_root_div = jp.Div(classes='q-gutter-md', a=root_div)
cell_label = jp.Input(
a=in_root_div, style='width: 32px; margin-left: 16px', disabled=True)
input_field = jp.Input(classes=jp.Styles.input_classes,
a=in_root_div, width='32px')
input_field.on("input", on_input_key)
input_field.last_cell = None
grid = jp.AgGrid(a=web_page, options=GRID_OPTIONS)
grid.load_pandas_frame(data_frame)
grid.options.pagination = True
grid.options.paginationAutoPageSize = True
grid.cell_label = cell_label
grid.input_field = input_field
grid.on('cellClicked', on_cell_clicked)
grid.on('cellValueChanged', on_cell_value_changed)
input_field.grid = grid
return web_page
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()
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
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 text_confirm(request):
sid = request.session_id
sesspath = "/static/"+sid
file_list = session_data[sid]
texts = [tf.loadtext(f'{sesspath}/{f}',sesspath) for f in file_list]
tc = jp.WebPage()
tc += title
jp.P(text="For each file, pick a version to turn into speech", classes=subtitle_style)
form = jp.Form(a=tc,classes='border m-1 p-1 w-64')
labels = [[] for txt in texts]
for textz,f,ls in zip(texts,file_list,labels):
ts = jp.Div(text=f,a=form,classes="grid grid-flow-col auto-cols-max md:auto-cols-min")
for txt in textz:
if txt is not None:
l = jp.Label(a=ts,classes=input_class)
jp.P(text=txt,a=l,classes=p_class)
jp.Input(a=l,type='radio')
ls += l
confirm_button = jp.Input(value='Confirm', type='submit',a=form,classes='border m-2 p-2')
def confirm(self,msg):
print(msg)
form.on('submit',confirm)
def serve(cls, req):
# Build the web page add layout and place this page in container
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
# classes for input boxes and labels
input_class = "m-2 bg-gray-200 border-2 border-gray-200 rounded py-2 px-4 " \
"focus:outline-none focus:border-purple-500 focus:bg-white"
label_class = "m-2 py-2 px-4"
# create container box for the app
con = jp.Div(a=container, classes="bg-purple-300 p-10 m-10 rounded")
# two lines of titles
jp.Div(a=con, text="Flatmates Bill", classes="text-4xl m-2")
jp.Div(a=con, text="Get the amount of a bill two flatmates owe based on days in the house", classes="text-lg")
# four lines for the input boxes and button
l_fm1 = jp.Div(a=con, classes="grid grid-cols-4")
l_fm2 = jp.Div(a=con, classes="grid grid-cols-4")
l_bill = jp.Div(a=con, classes="grid grid-cols-4")
# div for output
output_div = jp.Div(a=con, classes="m-2 p-2 text-lg border-2 h-10")
l_btn = jp.Div(a=con, classes="grid grid-cols-2")
# boxes where input is typed
jp.Div(a=l_fm1, text="1st Flatmate's name", classes=label_class)
i_fm1_name = jp.Input(a=l_fm1, value="Martin", classes=input_class)
jp.Div(a=l_fm1, text="days in the house", classes=label_class)
i_fm1_days = jp.Input(a=l_fm1, value="28", classes=input_class)
jp.Div(a=l_fm2, text="2nd Flatmate's name", classes=label_class)
i_fm2_name = jp.Input(a=l_fm2, value="Will", classes=input_class)
jp.Div(a=l_fm2, text="days in the house", classes=label_class)
i_fm2_days = jp.Input(a=l_fm2, value="25", classes=input_class)
jp.Div(a=l_bill, text="Bill amount", classes=label_class)
i_bill_amt = jp.Input(a=l_bill, value="120", classes=input_class)
jp.Div(a=l_bill, text="Bill period", classes=label_class)
i_bill_period = jp.Input(a=l_bill, placeholder="e.g.: February 2021", classes=input_class)
jp.Button(a=l_btn, text="calculate", click=cls.get_results, classes="bg-purple-700 rounded p-2 m-2",
fm1_name=i_fm1_name, fm2_name=i_fm2_name,
fm1_days=i_fm1_days, fm2_days=i_fm2_days,
bill_amt=i_bill_amt, bill_period=i_bill_period,
outputdiv=output_div)
jp.Button(a=l_btn, text="generate PDF", click=cls.get_results, classes="bg-purple-700 rounded p-2 m-2",
fm1_name=i_fm1_name, fm2_name=i_fm2_name,
fm1_days=i_fm1_days, fm2_days=i_fm2_days,
bill_amt=i_bill_amt, bill_period=i_bill_period,
outputdiv=output_div)
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 model_demo():
wp = jp.WebPage()
d = jp.Div(a=wp, data={'text': ''})
repeat = 2
output = jp.Div(a=d)
jp.Div(text=f'output', a=output)
MyDiv(text=f'typing will go here',
a=output,
model=[d, 'text'],
repeat=repeat,
initial_text='Yada Yada')
middle_input = jp.Input(text='',
placeholder='Type here',
model=[d, 'text'],
a=d)
return wp
def color_demo(request):
wp = jp.WebPage()
in1 = jp.Input(
type="color",
a=wp,
classes="m-2 p-2",
style="width: 100px; height: 100px",
input=color_change,
debounce=30,
)
in1.d = jp.Div(
text="Click box above to change color of this text",
a=wp,
classes="border m-2 p-2 text-2x1 font-bold",
)
return wp
def serve(cls, req):
# Build the web page
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
con = jp.Div(a=container, classes="bg-purple-300 p-10 rounded")
# two lines of titles
jp.Div(a=con, text="Instant English Dictionary", classes="text-4xl m-2")
jp.Div(a=con, text="Get the definition of any word instantly as you type", classes="text-lg")
# line div creates a holder to put input box in so it can be declared after output div
line = jp.Div(a=con, classes="grid grid-cols-2")
# box where output is displayed listed before input box so input box can reference it
output_div = jp.Div(a=con, classes="m-2 p-2 text-lg border-2 h-40")
# box where input is typed
input_box = jp.Input(a=line, placeholder="Type in a word here...", outputdiv=output_div,
classes="m-2 bg-gray-200 border-2 border-gray-200 rounded w-64 py-2 px-4 "
"focus:outline-none focus:border-purple-500 focus:bg-white")
# dynamic method which calls get_definition as text is typed
input_box.on('input', cls.get_definition)
return wp
def color_demo(request):
wp = jp.WebPage()
in1 = jp.Input(type='color', a=wp, input=color_change, debounce=30)
in1.d = jp.Div(text='click box above to change color', a=wp)
return wp
def photo_browser():
all_container_classes = 'm-1 p-4'
small_img_container_classes = 'm-1 p-1 bg-gray-700'
default_combobox_classes = 'block bg-gray-200 border border-gray-200 text-gray-700 ' \
'py-3 px-4 pr-8 rounded leading-tight focus:outline-none ' \
'focus:bg-white focus:border-gray-500 w-full'
settings_button_classes = 'm-2 p-2'
dropdown_menu_classes = 'm-2 p-2 bg-gray-400'
settings_div_classes = 'w-full'
input_classes = "bg-gray-200 border border-gray-200 rounded py-3 px-4 pr-8 text-gray-700 " \
"focus:outline-none focus:bg-white focus:border-purple-500 w-full"
main_container_style = 'position: absolute; top: 500px; width: 100%; margin: 0;'
images_container_style = 'display:flex; justify-content:center; flex-wrap: wrap;'
main_img_style = 'width: 800px; display: block; margin-left: auto; margin-right: auto;' \
'z-index: 2; left: 0; right: 0; margin: 2% auto;'
small_img_style = 'width: 200px;'
settings_button_style = 'position: absolute;'
dropdown_menu_style = 'position: absolute; top: 55px; z-index: 3;'
settings_div_style = 'position: absolute;'
def small_container_mouseenter(self, msg):
msg.page.main_img.src = self.child.src
self.child.style += ' transform: scale(.85);'
def small_container_mouseleave(self, msg):
if not isinstance(self.child, jp.P):
self.child.style = small_img_style
else:
self.child.style = ''
msg.page.main_img.src = msg.page.main_img_src
def select_default_img(self, msg):
msg.page.main_img_src = self.child.src
for img_cont in msg.page.all_image_containers:
img_cont.set_class('bg-gray-700')
self.set_class('bg-red-700')
def change_images(self, msg):
msg.page.images_container.delete_components()
msg.page.small_images = glob(self.value + '*.*')
msg.page.small_images = natsorted(msg.page.small_images)
msg.page.main_img.src = 'static/' + msg.page.small_images[0]
msg.page.main_img_src = msg.page.main_img.src
msg.page.other_settings_container.show = True
if msg.page.small_images_content_display_combobox.value == "text":
if msg.page.pattern_recognize_checkbox.checked and msg.page.pattern_recognize_input.value:
load_images(mode=2, pattern=msg.page.pattern_recognize_input.value)
else:
load_images(mode=2)
else:
load_images()
if msg.page.main_img_position_checkbox.checked:
msg.page.main_img.style = main_img_style
msg.page.main_img.style += ' position: fixed;'
def toggle_show(self, msg):
self.dropdown_menu.show = not self.dropdown_menu.show
def set_main_img_position(self, msg):
msg.page.main_img.style = main_img_style
if self.checked:
msg.page.main_img.style += ' position: fixed;'
else:
msg.page.main_img.style += ' position: absolute;'
def change_small_images_content_display(self, msg):
msg.page.images_container.delete_components()
if self.value == "photo":
load_images(mode=1)
elif self.value == "text":
load_images(mode=2)
def set_pattern_recognize(self, msg):
msg.page.pattern_recognize_input.show = not msg.page.pattern_recognize_input.show
msg.page.pattern_refresh_button.show = not msg.page.pattern_refresh_button.show
msg.page.pattern_recognize_input.value = ''
pattern_refresh(self, msg)
def pattern_refresh(self, msg):
msg.page.images_container.delete_components()
if wp.small_images_content_display_combobox.value == "text":
load_images(mode=2, pattern=msg.page.pattern_recognize_input.value)
else:
load_images(mode=1)
wp = jp.WebPage()
wp.body_classes = 'bg-gray-600'
small_images_folders = glob('photos/*/')
try:
wp.small_images = glob(small_images_folders[0] + '*.*')
wp.small_images = natsorted(wp.small_images)
main_img_src = 'static/' + wp.small_images[0]
except IndexError:
jp.P(text='Directory photos/ is empty', a=wp, classes='text-5xl m-2 p-2')
return wp
main_img = jp.Img(src='', a=wp, style=main_img_style)
main_img.show = False
main_container = jp.Div(a=wp, style=main_container_style)
settings_div = jp.Div(a=wp, style=settings_div_style, classes=settings_div_classes)
dropdown_menu = jp.Div(a=settings_div, classes=dropdown_menu_classes, style=dropdown_menu_style)
images_dir_location_combobox_container = jp.Div(a=dropdown_menu)
jp.Label(a=images_dir_location_combobox_container, text='Dir for image src*')
images_dir_location_combobox = jp.Select(a=images_dir_location_combobox_container, classes=default_combobox_classes)
other_settings_container = jp.Div(a=dropdown_menu)
other_settings_container.show = False
jp.Label(a=other_settings_container, text='Main img pos fixed?')
main_img_position_checkbox = jp.Input(a=other_settings_container, type='checkbox', classes='m-1 form-checkbox')
main_img_position_checkbox.on("change", set_main_img_position)
jp.Br(a=other_settings_container)
jp.Label(a=other_settings_container, text='Small images content display')
small_images_content_display_combobox = jp.Select(a=other_settings_container, classes=default_combobox_classes)
jp.Option(a=small_images_content_display_combobox, value="photo", text='Photo')
jp.Option(a=small_images_content_display_combobox, value="text", text='Image name')
small_images_content_display_combobox.on('change', change_small_images_content_display)
small_images_content_display_combobox.value = "photo"
jp.Label(a=other_settings_container, text="Pattern recognize?")
pattern_recognize_checkbox = jp.Input(a=other_settings_container, type='checkbox', classes='m-1 form-checkbox')
pattern_recognize_checkbox.on("change", set_pattern_recognize)
pattern_refresh_button = jp.Button(a=other_settings_container)
jp.I(a=pattern_refresh_button, classes='fas fa-sync')
pattern_refresh_button.on('click', pattern_refresh)
pattern_refresh_button.show = False
jp.Br(a=other_settings_container)
pattern_recognize_input = jp.Input(a=other_settings_container, classes=input_classes, placeholder='Type pattern '
'here')
pattern_recognize_input.show = False
pattern_refresh_button.pattern_recognize_input = pattern_recognize_input
settings_button = jp.Button(a=settings_div, classes=settings_button_classes, style=settings_button_style)
settings_button.dropdown_menu = dropdown_menu
jp.I(a=settings_button, classes='fas fa-cogs fa-2x')
settings_button.on('click', toggle_show)
for image_folder in small_images_folders:
jp.Option(value=image_folder, text=image_folder, a=images_dir_location_combobox)
images_dir_location_combobox.on('change', change_images)
images_container = jp.Div(a=main_container, classes='m-1', style=images_container_style)
wp.main_img = main_img
wp.main_img_src = main_img_src
wp.images_container = images_container
wp.pattern_recognize_input = pattern_recognize_input
wp.pattern_refresh_button = pattern_refresh_button
wp.small_images_content_display_combobox = small_images_content_display_combobox
wp.pattern_recognize_checkbox = pattern_recognize_checkbox
wp.main_img_position_checkbox = main_img_position_checkbox
wp.other_settings_container = other_settings_container
def load_images(mode=1, pattern=''):
wp.all_image_containers = []
small_img = ''
for i in range(len(wp.small_images)):
small_img_container = jp.Div(a=images_container, classes=small_img_container_classes,
click=select_default_img, mouseenter=small_container_mouseenter,
mouseleave=small_container_mouseleave, )
if mode == 1:
small_img = jp.Img(src=f'/static/{wp.small_images[i]}', a=small_img_container, style=small_img_style, )
elif mode == 2:
if pattern:
filename_text = basename(wp.small_images[i]).replace(pattern, '')
filename_text = filename_text.replace(filename_text[filename_text.find('.'):], '')
small_img = jp.P(src=f'/static/{wp.small_images[i]}', a=small_img_container,
text=filename_text)
else:
small_img = jp.P(src=f'/static/{wp.small_images[i]}', a=small_img_container,
text=basename(wp.small_images[i]))
small_img_container.child = small_img
wp.all_image_containers.append(small_img_container)
wp.main_img.style = main_img_style
wp.main_img.style += 'position: absolute;'
wp.all_image_containers[0].set_class('bg-red-700')
main_img.show = True
# load_images() # uncomment it if you want to image load automatically
return wp
classes=
'text-gray-800 align-middle text-xs text-right font-style: italic justify-end px-8'
) # , target='_blank' invisible bg-gray-900 border-2 border-gray-700
title_to_show = jp.P(text="Calculador de jornadas de filmación",
classes='m-4 text-xl font-bold text-white overflow-auto')
result_display = jp.Div(
name='result_display', classes='font-bold '
) # 'flex-col m-2 flex-shrink-0 align-top inline-block text-align-right flex-row'
espacios = jp.Space(num=3)
## input elements
fee_inbox = jp.Input(
name="fee_in",
type='number',
title=
'Indique el costo por jornada acordado en el convernio colectivo o en el contrato\nNo utilizar decimales ni fracciones!',
placeholder='honorarios',
tabindex=1,
classes=inbox_style,
delete_flag=False) #
fee_label = jp.Label(text='Valor de la jornada regular =',
classes=label_item_clas)
factor_mult_extras_inbox = jp.Input(
type='number',
title='porcentaje de incremento por hora extra.\nUsualmente es 50%',
value=50,
tabindex=2,
classes=inbox_style,
delete_flag=False)
factor_mult_extras_label = jp.Label(text='Porcentaje por hora extra =',
classes=label_item_clas)
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
