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
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
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 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 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
## Description of elements styles attributes.
bbox_style = 'm-2 p-2 h-132 text-xl border-2 background-gray-300 text-white'
inbox_style = "flex m-1 h-6 sm:h-8 lg:h-6 text-base sm:text-xl lg:text-sm bg-gray-200 w-full font-mono font-bold border-2 border-gray-200 rounded px-2 text-gray-700 focus:outline-none focus:bg-white focus:border-purple-500"
boton_style = "p-4 font-bold text-black bg-gray-500 border-2 border-gray hover:bg-blue-300 rounded"
message_classes = 'ml-4 p-2 text-lg text-white overflow-auto font-mono rounded-lg'
label_item_clas = inbox_style.rsplit('bg-')[0] # re-use of inbox style classes
cell_style = 'flex-col p-2 flex-grow-0 flex-shrink-0'
logo_url = 'http://vfx-sup.com/wp-content/uploads/2017/05/CucardaVFXsup_fdoNegro-e1495057122527.png' # "http://vfx-sup.com/wp-content/uploads/2017/05/CucardaVFXsup-150x150.png"
head_div = jp.Div(classes='m-2 flex border border-gray-800 overflow-auto',
delete_flag=False)
logolink = jp.A(href='http://vfx-sup.com', target='_blank') #
logo = jp.Img(a=logolink,
src=logo_url,
classes="m-2 box-border object-left object-contain h-10"
) #TO-DO agregar link y un about a la main page .
info_link_box = jp.Div(classes='justify-end')
info_link = jp.A(
a=info_link_box,
text='Info adicional',
href='http://vfx-sup.com',
title='Información del autor y de uso',
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'