Rich Interface

class epyk.interfaces.components.CompRich.Rich(ui)

adv_text(section, title, content, background: str = '', options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

:param section:
:param title: String | Component. Optional. A panel title. This will be attached to the title property.
:param content:
:param background:
:param options: Optional. Specific Python options available for this component.
:param profile: Optional. A flag to set the component performance storage.

color(code, content: str = 'data copied to clipboard', width: Optional[Union[tuple, int, str]] = (20, 'px'), height: Optional[Union[tuple, int, str]] = (20, 'px'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Color component.

Tags:
Categories:

Usage:

:param code: Tuple or String. The color code.
:param content: Optional.
:param width: Optional. A tuple with the integer for the component width and its unit.
:param height: Optional. A tuple with the integer for the component height and its unit.
:param options: Optional. Specific Python options available for this component.
:param profile: Optional. A flag to set the component performance storage.

composite(schema, width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[bool, dict]] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Composite bespoke object.

This object will be built based on its schema. No specific CSS Style and class will be added to this object. The full definition will be done in the nested dictionary schema.

Tags:
Categories:

Usage:

schema = {'type': 'div', 'css': {}, 'class': , 'attrs': {} 'arias': {},  'children': [
    {'type': : {...}}
    ...
]}

Parameters:

schema – The component nested structure.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
helper – Optional. The value to be displayed to the helper icon.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

console(content: str = '', width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (200, 'px'), html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Display an component to show logs.

Tags:
Categories:

Usage:

c = page.ui.rich.console(
  "* This is a log section for all the events in the different buttons *", options={"timestamp": True})

Underlying HTML Objects:

epyk.core.html.HtmlTextEditor.Console

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/checkbox.py

Parameters:

content – Optional. The console content.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

countdown(day, month, year, hour: int = 0, minute: int = 0, second: int = 0, label: Optional[str] = None, icon: str = 'fas fa-stopwatch', time_ms_factor: int = 1000, width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Add a countdown to the page and remove the content if the page has expired.

Tags:
Categories:

Usage:

page.ui.rich.countdown(24, 9 2021)

Underlying HTML Objects:

epyk.core.html.HtmlDates.CountDownDate

Related Pages:

https://www.w3schools.com/js/js_date_methods.asp https://www.w3schools.com/howto/howto_js_countdown.asp https://fontawesome.com/icons/stopwatch?style=solid

Parameters:

day – Day’s number.
month – Month’s number.
year – Year’s number.
hour – Optional. Number of hours.
minute – Optional. Number of minutes.
second – Optional. Number of seconds.
label – Optional. The component label content.
icon – Optional. The component icon content from font-awesome references.
time_ms_factor – Optional. The format from the format in milliseconds.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
html_code – Optional. The component identifier code (for both Python and Javascript).
helper – Optional. A tooltip helper.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

delta(record=None, components=None, title: Optional[str] = None, align: str = 'center', width: Optional[Union[tuple, int, str]] = ('auto', ''), height: Optional[Union[tuple, int, str]] = ('auto', ''), options: Optional[Union[bool, dict]] = None, helper: Optional[str] = None, profile: Optional[Union[bool, dict]] = None)

Usage:

page.ui.rich.delta({'number': 100, 'prevNumber': 60, 'thresold1': 100, 'thresold2': 50}, helper="test")

Underlying HTML Objects:

epyk.core.html.HtmlTextComp.Delta

Tags:

Numbers |

Categories:

Container |

Parameters:

record – Optional. The input data for this component.
components – Optional. The HTML components to be added to this component.
title – Optional. A panel title. This will be attached to the title property.
align – The text-align property within this component.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
options – Optional. Specific Python options available for this component.
helper – Optional. A tooltip helper.
profile – Optional. A flag to set the component performance storage.

elapsed(day: Optional[int] = None, month: Optional[int] = None, year: Optional[int] = None, label=None, icon=None, width=(None, 'px'), height=(None, 'px'), html_code=None, helper=None, options=None, profile=None)

Tags:
Categories:

Usage:

dt = page.ui.rich.elapsed(day=1, month=1, year=2021)
page.ui.button("Click").click([dt.build({"year": 2022, "month": 1, "day": 1})])

Parameters:

day – The day number
month – The month number [1, 12]
year – The year number
label –
icon –
width – Tuple. Optional. A tuple with the integer for the component width and its unit.
height – Tuple. Optional. A tuple with the integer for the component height and its unit.
html_code – String. Optional. An identifier for this component (on both Python and Javascript side).
helper – String. Optional. The value to be displayed to the helper icon.
options – Dictionary. Optional. Specific Python options available for this component.
profile – Boolean | Dictionary. Optional. A flag to set the component performance storage.

info(text: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Display an info icon with a tooltip.

Tags:
Categories:

Usage:

page.ui.info("Test")

Underlying HTML Objects:

epyk.core.html.HtmlOthers.Help

Related Pages:

https://fontawesome.com/icons/question-circle?style=solid https://api.jqueryui.com/tooltip/

Parameters:

text – Optional. The content of the tooltip.
profile – Optional. A boolean to store the performances for each components.
options – Optional. Specific Python options available for this component.

light(color: Optional[str] = None, height: Optional[Union[tuple, int, str]] = (None, 'px'), label: Optional[str] = None, align: str = 'left', tooltip: Optional[str] = None, helper: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Add a traffic light component to give a visual status of a given process.

Tags:
Categories:

Usage:

page.ui.rich.light("red", label="label", tooltip="Tooltip", helper="Helper")
page.ui.rich.light(True)

Underlying HTML Objects:

epyk.core.html.HtmlTextComp.TrafficLight

Parameters:

color – Optional. A hexadecimal color code.
height – Optional. A tuple with the integer for the component height and its unit.
label – Optional. The text of label to be added to the component.
align – Optional. A string with the horizontal position of the component.
tooltip – Optional. A string with the value of the tooltip.
helper – Optional. The filtering properties for this component.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

markdown(text: str = '', width: Optional[Union[tuple, int, str]] = ('calc(100% - 10px)', ''), height: Optional[Union[tuple, int, str]] = ('auto', ''), html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) → MarkdownReader

Tags:
Categories:

Usage:

md = page.ui.rich.markdown('''
  # H1
  ## H2
  ### value
  #### rrr
  ##### H5
  ###### H6
  value
  ''')

Underlying HTML Objects:

epyk.core.html.HtmlTextEditor.Editor

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/markdown.py

Parameters:

text – Optional. The value to be displayed to the component.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

powered(by=None, width=(100, '%'), height=(None, 'px'), options=None, profile=None)

Display badges for the specifies JavaScript modules.

Tip: If by is None. This will display only the main JavaScript module with the current version. It will not display the underlying components.

This component needs to be called at the end to ensure all the imported will be registered.

Tags:

Categories:

Parameters:

by – List. Optional. Name of JavaScript library aliases.
width – Tuple. Optional. A tuple with the integer for the component width and its unit.
height – Tuple. Optional. A tuple with the integer for the component height and its unit.
options – Dictionary. Optional. Specific Python options available for this component.
profile – Boolean | Dictionary. Optional. A flag to set the component performance storage.

search_input(text: str = '', placeholder: str = 'Search..', color: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, tooltip: Optional[str] = None, extensible: bool = False, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Search bar.

Tags:
Categories:

Usage:

page.ui.inputs.search()

Underlying HTML Objects:

epyk.core.html.HtmlInput.Search

Related Pages:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search

Parameters:

text – Optional. The value to be displayed to the component.
placeholder – Optional. The text display when empty.
color – Optional. The font color in the component. Default inherit.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
tooltip – Optional. A string with the value of the tooltip.
extensible – Optional. Flag to specify the input style.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

search_results(records=None, results_per_page: int = 20, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Display the search results. This will return the matches and the details.

Tags:
Categories:

Usage:

Underlying HTML Objects:

epyk.core.html.HtmlTextComp.SearchResult

Parameters:

records – Optional. The list of dictionaries with the input data.
results_per_page – Optional. The page index.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

stars(val=None, label: Optional[str] = None, color: Optional[str] = None, align: str = 'left', best: int = 5, html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Entry point for the Stars component.

Tags:
Categories:

Usage:

page.ui.rich.stars(3, label="test", helper="This is a helper")
stars = page.ui.rich.stars(3, label="test", helper="This is a helper")
stars.click()

Underlying HTML Objects:

epyk.core.html.HtmlOthers.Stars

Related Pages:

https://www.w3schools.com/howto/howto_css_star_rating.asp

Parameters:

val – Optional. Number of stars.
label – Optional. The text of label to be added to the component.
color – Optional. The font color in the component. Default inherit.
align – Optional. A string with the horizontal position of the component.
best – Optional. The max number of stars. Default 5.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
options – Optional. Specific Python options available for this component.
helper – Optional. The value to be displayed to the helper icon.
profile – Optional. A flag to set the component performance storage.

status(status: str, width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Tags:
Categories:

Usage:

:param status:
:param width: Optional. A tuple with the integer for the component width and its unit.
:param height: Optional. A tuple with the integer for the component height and its unit.
:param html_code: Optional. An identifier for this component (on both Python and Javascript side).
:param profile: Optional. A flag to set the component performance storage.
:param options: Optional. Specific Python options available for this component.

update(label: Optional[str] = None, color: Optional[str] = None, align: Optional[str] = None, width: Optional[Union[tuple, int, str]] = ('auto', ''), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None)

Last Update time component.

Tags:
Categories:

Usage:

page.ui.rich.update("Last update: ")

update = page.ui.rich.update()
page.ui.button("Click").click([update.refresh()])

Underlying HTML Objects:

epyk.core.html.HtmlDates.LastUpdated

Related Pages:

https://github.com/epykure/epyk-templates/blob/master/locals/components/calendar.py

Parameters:

label – Optional. The label to be displayed close to the date. Default Last Update.
color – Optional. The color code for the font.
align – Optional.
width – Optional. A tuple with the integer for the component width and its unit.
height – Optional. A tuple with the integer for the component height and its unit.
html_code – Optional. The component identifier code (for both Python and Javascript).
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.