HtmlImage Module

class epyk.core.html.HtmlImage.AnimatedImage(page, image, text, title, html_code, url, path, width, height, options, profile)

from_base64(text: str)

Load an image from a base64 string.

Usage:

x = np.arange(0, 15, 0.1)
y = np.sin(x)
plt.plot(x, y)

str_io = io.BytesIO()
plt.savefig(str_io, format='jpg')
str_io.seek(0)

self.from_base64(base64.b64encode(str_io.read()).decode("utf-8"))

Parameters:: text – The encoded picture
Returns:: self to allow the chaining

from_plot(plt)

Load an image from a plt object from matplotlib.

Usage:

x = np.arange(0, 15, 0.1)
y = np.sin(x)
plt.plot(x, y)

img2 = page.ui.img(width=(50, "%"))
img2.from_plot(plt)
img2.style.css.display = "inline-block"

Parameters:: plt – matplotlib.pyplot. The ploting features in matplotlib
Returns:: self to allow the chaining.

class epyk.core.html.HtmlImage.Background(page: PageModel, components: List[Html], label: Optional[str], color: Optional[str], width: Optional[Union[tuple, int, str]], icon: Optional[str], height: Optional[Union[tuple, int, str]], editable: bool, align: str, padding: Optional[str], html_code: Optional[str], tag: str, helper: Optional[str], options: Optional[Union[bool, dict]], profile: Optional[Union[bool, dict]])

build(value: Optional[Union[str, list, JsDataModel]] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None, component_id: Optional[str] = None, dataflows: Optional[List[dict]] = None, **kwargs)

Parameters:

value – Optional. Component data
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage
component_id – Optional. A DOM component reference in the page
dataflows – Chain of data transformations

class epyk.core.html.HtmlImage.Badge(page: PageModel, text, width, height, label, icon, background_color, color, url, tooltip, options, profile)

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The onclick event occurs when the user clicks on an element.

Parameters:

js_funcs – The Javascript functions.
profile – Optional. A flag to set the component performance storage.
source_event – Optional. The JavaScript DOM source for the event (can be a sug item).
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded.

property dom: JsHtml

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript available for a DOM element by default.

Usage:

div = page.ui.div(htmlCode="testDiv")
print(div.dom.content)

Returns:: A Javascript Dom object.

property options: OptionsBadge: Property to the options specific to the HTML component.

class epyk.core.html.HtmlImage.Emoji(page: PageModel, symbol: str, top: tuple, options: Optional[dict], profile: Optional[Union[bool, dict]])

property dom: JsHtmlRich

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

Returns:: A Javascript Dom object

class epyk.core.html.HtmlImage.Figure(page: PageModel, components: List[Html], label: Optional[str], color: Optional[str], width: Optional[Union[tuple, int, str]], icon: Optional[str], height: Optional[Union[tuple, int, str]], editable: bool, align: str, padding: Optional[str], html_code: Optional[str], tag: str, helper: Optional[str], options: Optional[Union[bool, dict]], profile: Optional[Union[bool, dict]])

class epyk.core.html.HtmlImage.Icon(page, value, width, height, color, tooltip, options, html_code, profile)

border()

Add a border to the icon.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The onclick event occurs when the user clicks on an element.

Parameters:

js_funcs – The Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. The JavaScript DOM source for the event (can be a sug item)
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

property dom: JsHtmlIcon

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

Returns:: A Javascript Dom object

fixed_width()

Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

flip(direction: str = 'h')

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

This will use the font-awesome flip classes.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Parameters:: direction – Optional. The direction reference (h or v)

goto(url: str, js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, target: str = '_blank', source_event: Optional[str] = None)

Click event which redirect to another page.

Parameters:

url – The url text
js_funcs – Optional. The Javascript Events triggered before the redirection
profile – Optional. A flag to set the component performance storage
target – Optional. The name (type) of the href link
source_event – Optional. The event source

hover_colors(color_hover: str, color_out: Optional[str] = None)

Change the color of the button background when the mouse is hover.

Usage:

page.ui.icons.capture().icon.hover_colors("red", "yellow")

Parameters:

color_hover – The color of the icon when mouse hover
color_out – Optional. The color of the icon when mouse out

press(js_press_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, js_release_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, pressed_class: Optional[str] = None, on_ready: bool = False)

Special click event to keep in memory the state of the component.

Usage:

i = page.ui.icon("Click Me")

Parameters:

js_press_funcs – Optional. Javascript functions
js_release_funcs – Optional. Javascript functions
profile – Optional. A flag to set the component performance storage
pressed_class – Optional. The CSS class when component’s status is pressed
on_ready – Optional. Event when component is ready on HTML side

pull(position: str = 'left')

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons

Parameters:: position – Optional. The icon pull position

pulse()

Add the pulse class to the font awesome icon.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

rotate(value: int)

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Parameters:: value – The rotation angle

set_icon(value: str)

Add the icon class reference to the CSS class attribute of the component.

Parameters:: value – An icon class reference

size(value: int)

Icons inherit the font-size of their parent container which allow them to match any text you might use with them.

With the following classes, we can increase or decrease the size of icons relative to that inherited font-size.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

Parameters:: value – The value of the size factor for the icon

spin()

Add the spin class to the font awesome icon.

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

property style: ClassIcon: Property to the CSS Style of the component.

class epyk.core.html.HtmlImage.IconToggle(page, value, width, height, color, tooltip, options, html_code, profile)

add_components(components: List[Html])

Add a list of components.

Parameters:: components – The HTML components.

click(js_on_off_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The onclick event occurs when the user clicks on an element.

Parameters:

js_on_off_funcs – The Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. The JavaScript DOM source for the event (can be a sug item)
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

class epyk.core.html.HtmlImage.Image(page, image, path, align, html_code, width, height, profile, options)

property dom: JsHtmlImg

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

Returns:: A Javascript Dom object

from_base64(text: str)

Load an image from a base64 string.

Usage:

x = np.arange(0, 15, 0.1)
y = np.sin(x)
plt.plot(x, y)

str_io = io.BytesIO()
plt.savefig(str_io, format='jpg')
str_io.seek(0)

self.from_base64(base64.b64encode(str_io.read()).decode("utf-8"))

Parameters:: text – The encoded picture
Returns:: self to allow the chaining

from_plot(plt)

Load an image from a plt object from matplotlib.

Usage:

x = np.arange(0, 15, 0.1)
y = np.sin(x)
plt.plot(x, y)

img2 = page.ui.img(width=(50, "%"))
img2.from_plot(plt)
img2.style.css.display = "inline-block"

Parameters:: plt – matplotlib.pyplot. The ploting features in matplotlib.
Returns:: self to allow the chaining

goto(url: str, js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, target: str = '_blank', source_event: Optional[str] = None)

Click event which redirect to another page.

Parameters:

url – the url.
js_funcs – Optional. The Javascript Events triggered before the redirection
profile – Optional. A flag to set the component performance storage
target – Optional. The target attribute specifies where to open the linked document
source_event – Optional. The event source

loading(status: bool = True, label: str = 'https://loading.io/mod/spinner/spinner/sample.gif', *args, **kwargs)

Loading feature for image.

Usage:

chart_obj.loading()
....
chart_obj.loading(False)

Parameters:

status – Optional. Specific the status of the display of the loading component
label – Optional. Picture full path

class epyk.core.html.HtmlImage.ImgCarousel(page, images, path, selected, width, height, options, profile)

add_plot(plot, title: str = '', width: Optional[Union[tuple, int, str]] = 'auto')

Parameters:

plot – matplotlib.pyplot. The ploting features in matplotlib
title – The chart title
width – Optional.

Returns:

self to allow the chaining.

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Add click event on this component.

Parameters:

js_funcs – The Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – optional. The reference of the component
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

from_base64_list(values: List[str], width: Union[str, tuple] = 'auto')

Parameters:

values –
width – Optional.

Returns:

self to allow the chaining.

set_nav_dots(selected: int = 0)

Parameters:: selected –
Returns:: self to allow the chaining.

class epyk.core.html.HtmlImage.SlideShow(page, images, width, height, options, profile)

add(component: Html)

Add a component to the slider container.

Parameters:: component – A component to be added to the slider container

add_drag_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_drag_move(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_drag_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_index_changed(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – The source target for the event

add_new_breakpoint_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_new_breakpoint_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_plot(plot, width: tuple = (220, 'px'))

Parameters:

plot – matplotlib.pyplot. The ploting features in matplotlib.
width – Optional.

Returns:

self to allow the chaining.

add_touch_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_touch_move(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_touch_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_transition_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

add_transition_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

property dom: JsHtmlTinySlider

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

Returns:: A Javascript Dom object.

empty()

Empty all the values already defined on the Python side.

This will be called before the JavaScript Transpilation.

property js: TinySlider

The tiny slider javascript events.

Return the Javascript internal object.

Returns:: A Javascript object

property jsonId: Return the Javascript variable of the json object.

property options: OptionsTinySlider

The tiny slider options.

Related Pages:

https://github.com/ganlanyuan/tiny-slider

refresh(): Component refresh function. Javascript function which can be called in any Javascript event.

rem_drag_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_drag_move(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_drag_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_index_changed(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – The source target for the event

rem_new_breakpoint_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_new_breakpoint_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_touch_dnd(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_touch_move(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_touch_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_transition_end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

rem_transition_start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Parameters:

js_funcs – The JavaScript fragments
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event

property style: ClassTinySlider: Property to the CSS Style of the component.