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'