UI Interface

The UI interface allows you to access the different parts of the framework without having to know the underlying details how these components are built.

External Interfaces:

These interfaces are grouped per category as follows:

Interfaces per Categories:

There are links to existing Web Framework to rely on their components:

Full list of 81 Interfaces:

class epyk.interfaces.Interface.Components(page: PageModel)

Main interface for all components.

Usage:

# To change the default style for components.
page.ui.components_skin = {
  "buttons.absolute": {"clear": {"css": True, "cls": True}, "css": {"color": "red"}, 'cls': ["cssbuttonbasic"]},
  "buttons.check": {"css": {"color": "green"}},
}
Parameters:

page – The web page object.

property animations: Animations

Bespoke CSS and / or components with effects. This could be used to animate the cursor or add a loading events.

More details on the Animations property page

asterix(tooltip: str, family: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, height: Optional[Union[tuple, int, str]] = (None, 'px'), color: Optional[str] = None, align: str = 'left', options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) Icon

Usage:

:param tooltip:
:param family:
: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 color:
:param align:
:param options: Optional. Specific Python options available for this component
:param profile: Optional. A flag to set the component performance storage
property banners: Banners

Group all the available banners.

More details on the Banners property page

Usage:

top = page.ui.banners.top("text")
top.style.css.font_size = '40px'
property bars: NavBars

Group all the UI components dedicated to produce Navigation bar components such as navigation bar, footer, banner…

More details on the Bars property page

Usage:

page.ui
bespoke(html_cls, *args, **kwargs)

Hook to allow the creation of bespoke component using specific configurations. Components can be self-contained in a module and rely on external packages.

Tip: Look at the Import.extend function in order to add external Js and CSS modules to your environment.

Usage:

:param html_cls: Class. The bespoke HTML component
:param args: The python attributes used in the HTML component constructor
:param kwargs: The python attributes used in the HTML component constructor
breadcrumb(values=None, selected: Optional[int] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (30, 'px'), html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) Breadcrumb

Add Breadcrumb information to the page.

Usage:

bc = page.ui.breadcrumb([
  {"text": 'part 1', 'url': 'part1'},
  {"text": 'part 2', 'url': 'part2'},
  {"text": 'part 3', 'url': 'part3'},
])

# This will change the link of part 2 and part 3 and add some extra information in the link
bc.onReady([
  bc[1].dom.setAttribute("href", http.get("type").toString().prepend("part2?")),
  bc[2].dom.setAttribute("href", http.get("type").toString().prepend("http://www.w3schools.com/").add("/howto_css_breadcrumbs.asp"))
])

Templates:

Parameters:
  • values – Optional. The breadcrumb record definition

  • selected – Optional. The selected item 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

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

  • profile – Optional. A flag to set the component performance storage

property buttons: Buttons

Group all the UI components dedicated to produce button or checkbox.

More details on the Buttons property page

Usage:

page.ui.buttons.absolute("Click Me")
page.ui.buttons.switch({'on': "true", 'off': 'false'})
page.ui.buttons.check(label="Label")
property calendars: Calendar

Group all the component related to the time and calendar management.

Usage:

content = {
  "2020-07-02": {'task1': 50, 'task2': 50},
  "2020-07-03": {'task1': 100},
  "2020-07-21": {'task4': 100},
  "2020-07-22": {'task4': 100}
}
july = page.ui.calendars.days(7, content, align="center", options={"colors": {"task4": 'red'}})
captcha(text: str = 'Submit', width: Optional[Union[tuple, int, str]] = (None, 'px'), height: Optional[Union[tuple, int, str]] = (None, 'px'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) HtmlCaptcha

Usage:

page.ui.captcha()
Parameters:
  • text – Optional. The button content for the captcha validation

  • 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

property charts: Graphs

Group all the UI components dedicated to produce charts.

Different kind of charts framework are available (ChartJs, Plotly, C3, Billboard, NVD3, DC, Vis, Frappe, Vega, Apex or even D3).

Usage:

from epyk.mocks import urls
page = pk.Page()
chart = page.ui.charts.chartJs.line(y_columns=["Armenia", "France", "Germany"], x_axis="year")
page.body.onLoad([
  page.js.fetch(urls.CO2_DATA).csvtoRecords().get([
    chart.build(page.data.js.record("data").filterGroup("test").pivot("country", "co2", "year", type="float"))
  ])])
property codes: Code

Group all the UI Components dedicated to display code fragments.

This will wrap the Javascript module codemirror.

More details on the Codes property page

Usage:

page.ui.codes.css(".test {color: red}")

Related Pages:

component(alias: str, **kwargs)

Load a standalone component inheriting from Standalone.Component.

Usage:

comp = page.ui.component("test-color")
comp.prepare(text="Test")
Parameters:

alias – The component selector

contents(title: str = 'Contents', top: int = 10, right: int = 10, left: Optional[int] = None, 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) ContentsTable

Add a content table to the page.

Usage:

menu = page.ui.contents()
menu.add(page.ui.text("Simple text"))
menu.anchor("Test", 3, "#name")
page.ui.button("Button").click([
  menu.build([{"text": 'ok', "level": 0, "anchor": "#test"}])
])

page.body.onReady([
  menu.build([
    {"anchor": '#test', 'level': 1, 'text': 'Ok'}
  ])
])

Templates:

Parameters:
  • title – Optional. The title for the content table

  • top – Optional. The top property affects the vertical position of a positioned element

  • right – Optional. The right property affects the horizontal position of a positioned element

  • left – Optional. The left property affects the horizontal position of a positioned element

  • 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

css(css_attrs: dict)

Change the CSS Style of the main container in the page.

Usage:

page.ui.css({"color": "blue"})
Parameters:

css_attrs – The CSS attributes to be applied.

property delimiters: Delimiter

Shortcut property to the various delimiters styles.

Related Pages:

Usage:

property drawers: Drawers

Group all the UI drawers components.

Usage:

extension(package_name: str, alias: Optional[str] = None)

Add an extension base on it is name.

Usage:

:param package_name: The package name.
:param alias: Optional. The alias for the link in report.ui.
property fields: Fields

Group all the UI components dedicated to produce input items.

Those components are editable items which need to be updated by the user of the dashboard. This category will take into account TextArea, input text…

Usage:

form(components: Optional[List[Html]] = None, helper: Optional[str] = None, method: str = 'POST', action: str = '#', label: str = 'Submit') Form

Creates a new empty form.

Usage:

f = page.ui.form()
Parameters:
  • components – Optional. The HTML components to be added to the HTML form

  • helper – Optional. The value to be displayed to the helper icon

  • method – Optional. The method used to transfer data

  • action – Optional. The end point for submitting data

  • label – Optional. The text on the submit button

property forms: Forms

Group all the Forms components dedicated to drop data.

Related Pages:

Usage:

property geo: Geo

Group all the UI components dedicated to produce Trees or selection items.

Usage:

l = page.ui.geo.mapbox.globe()
l.load([...])
l.options.style = 'mapbox://styles/mapbox/streets-v11'

marker = l.js.marker(-0.11, 51.508)
marker2 = l.js.marker(12.65147, 55.608166, options={"color": 'black', "rotation": 45})
page.body.onReady([marker, marker2])
property icons: Icons

Group all the UI components dedicated to produce icon items.

This category of component will rely on the font-awesome library for the final display.

Usage:

property images: Images

Group all the UI components dedicated to produce image or collection of images.

Usage:

property inputs: Inputs

Group all the UI components dedicated to produce input items.

Those components are editable items which need to be updated by the user of the dashboard. This category will take into account TextArea, input text…

Usage:

json(data: Optional[dict] = None, width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = (100, '%'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) HtmlJson

HTML component to display a Json.

Usage::

from epyk.mocks import urls

page = pk.Page() records = pd.DataFrame(page.py.requests.csv(urls.DEMO_COUNTRY)) records = records[records[“Year”] == “2010”] # Create a link to download data as a Json file viewer = page.ui.json(records.to_dict()) viewer.options.hoverPreviewEnabled = True viewer.options.hoverPreviewArrayCount = 5

Related Pages:

Parameters:
  • data (dict) – Optional. The Json object to be display

  • 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

property layouts: Layouts

Group all the UI components dedicated to produce component containers.

All the items in this category are dedicated for the structure of the dashboard and they are mainly holder of other components. This will mainly rely on bootstrap for the display of the different objects in the page.

Usage:

Group all the UI components dedicated to produce links to another page or website.

More details on the Links property page

Usage:

page.ui.links.external('data', 'www.google.fr', icon="fas fa-align-center", options={"target": "_blank"})
page.ui.layouts.new_line(2)
property lists: Lists

Group all the UI components dedicated to produce list or selection items.

Simple list, trees or DropDown boxes will be part of this category of items.

Usage:

loading(text: str = 'Loading', color: Optional[Union[str, bool]] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) Loading

Entry point to the loading component.

This component will create a
  • label component for the text

  • icon component for the loading icon

Usage:

:param text: Optional. The text in the component (during the loading)
:param color: Optional. The font color in the component. Default inherit
:param options: Optional. Specific Python options available for this component
:param profile: Optional. A flag to set the component performance storage
property media: Media

Group all the UI components dedicated to produce media (video and audio) items.

Plain Vanilla HTML5 components.

Usage:

cam = page.ui.media.camera()
page.ui.button("start").click([cam.dom.start()])
page.ui.button("play").click([cam.dom.play()])
page.ui.button("Stop").click([cam.dom.stop()])
page.ui.button("record (Start)").click([cam.dom.record()])
page.ui.button("record (Stop)").click([cam.dom.record(False)])
page.ui.button("takepicture").click([cam.dom.takepicture()])

Templates:

menu(component: Union[Html, List[Html]], title: Optional[Union[str, dict]] = None, copy: str = 'fas fa-copy', editable: tuple = ('fas fa-user-edit', 'fas fa-user-lock'), refresh: str = 'fas fa-redo-alt', visible: tuple = ('fas fa-eye-slash', 'fas fa-eye'), post: Optional[dict] = None, height: tuple = (18, 'px'), save_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, update_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, menu_items=None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) Col

TODO: Improve the editable feature for Markdown.

Usage:

p2 = page.ui.paragraph("paragraph", options={"markdown": True})
menu2 = page.ui.texts.menu(p2, save_funcs=[
  page.js.alert(p2.dom.content)
], update_funcs=[
  p2.build("Updated paragraph")
], profile=True)
Parameters:
  • component

  • title

  • copy

  • editable

  • refresh

  • visible

  • post

  • height

  • save_funcs

  • update_funcs

  • menu_items

  • options

  • profile

property menus: Menus

Group all the UI menus.

Usage:

property modals: Modals

Group all the UI components dedicated to produce modal components.

Usage:

property navigation: Navigation

Group all the UI components dedicated to produce navigation components such as navigation bar, footer, banner…

More details on the Navigation property page

Usage:

nav = page.ui.navigation.nav(height=(30, 'px'), title={"This is an example": "by Epyk"})
for component in ["Menu 1", "Menu 2"]:
  title = nav.add_right(component)
property network: Network

Group all the UI Components dedicated to display messaging services.

This category will group (chat, RSS streams, forum, bot …). Those components are interactive and they would require underlying services and databases in order to fully work.

More details on the Networks property page

Usage:

page = pk.Page()
page.ui.network
property numbers: Numbers

Group all the UI components dedicated to produce Numbers components.

The items in this category will not be editable and they will only provide nice number renderings.

Usage:

property panels: Panels

Group all the UI panels.

Usage:

property pictos: Pictogram

Group all the built-in pictogram.

Usage:

property pollers: Poller

Group all the UI with polling feature.

More details on the Animations property page

Usage:

page.ui.select()
poller = page.ui.pollers.live(2, [
  page.js.console.log(page.js.objects.date())
], components=[page.ui.text("Updated feeds")])
postit(components: Optional[List[Html]] = None, anchor: Optional[Html] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) Div

TODO: add click event to keep the display.

Usage:

example = page.ui.title("Example")
text = page.ui.text("This is a text")
example.style.css.color = 'red'
data_rest = page.py.requests.csv(data_urls.PLOTLY_APPLE_PRICES)
ts = page.ui.charts.chartJs.timeseries(data_rest, y_columns=['AAPL.Open'], x_axis="Date", height=200)

# Create a postit anchor to display the popup when the mouse is on it.
p = page.ui.postit([example, text, ts])
p.anchor.style.css.margin_left = '50px'
p.popup.style.css.height = "250px"
p.popup.style.css.width = "300px"

Templates:

Parameters:
  • components – Optional.

  • anchor – Optional.

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

print(text: Optional[str] = None, end: str = '\n', html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) Text

Mimic the print function available in Python. This will create a div container with the content as a string.

This function can be also used to display Python function. Inspect module will be used in this case to get the source code.

Usage:

import pandas
page.ui.print('pandas: {}'.format(pandas.__version__))
Parameters:
  • text – Optional. The content to be displayed.

  • end – Optional. The end of line.

  • 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.

Returns:

:py:class:`A HTML text component <epyk.core.html.HtmlText.Text>’

property pyk: Bespoke

Bespoke catalog of components.

Usages:

text = page.ui.pyk.progress.circle()
text.style.css.color = "red"
qrcode(data=None, width: Optional[Union[tuple, int, str]] = (128, 'px'), height: Optional[Union[tuple, int, str]] = (128, 'px'), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) HtmlQRCode

HTML component to display a QR Code from a string.

Usage:

Related Pages:

TODO: Add options

Parameters:
  • data – Optional. The value to be converted to QR Code

  • 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

property rich: Rich

Group all the UI components dedicated to produce rich HTML Components.

This category will take into account very specific and bespoke components.

Usage:

page.ui.fields.now(label="timestamp", color="red", helper="This is the report timestamp")
page.ui.rich.delta({'number': 100, 'prevNumber': 60, 'thresold1': 100, 'thresold2': 50}, helper="test")
page.ui.rich.info("text")
property selectors

Get the list of bespoke selector aliases loaded as components

property sliders: Sliders

Group all the UI components dedicated to produce slider items.

Those components are interactive and can be used to filter the data on other items in the dashboard. Those components are mainly relying on Jquery and JqueryUi.

More details on the Sliders property page

Usage:

slider = page.ui.slider(5)
slider.options.step = 0.01
slider.options.slide(precision=2)
slideshow(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = ('auto', ''), options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None) SlideShow

SlideShow component for pictures from the tiny-slider library. More details regarding this library here: https://github.com/ganlanyuan/tiny-slider.

Usage:

ss = page.ui.slideshow([page.ui.text("Great results %s" % i) for i in range(20)])

ss.add_index_changed([
  page.js.console.log("ok"),
  page.js.console.log(ss.dom.info.indexCached),
  page.js.console.log(ss.dom.info.index),
])

Related Pages:

Parameters:
  • components – Optional. With the different components

  • width – Optional. The component width in pixel or percentage

  • height – Optional. The component height in pixel

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

property steppers: Steppers

Group all the UI steppers components.

Usage:

s = page.ui.steppers.arrow()
s.options.column_title = "name"
btn = page.ui.button("Load")
btn.click(
  s.build([
        {"value": 'test 1', "status": 'success', 'name': "1", 'title': 'test', "label": 'test'},
        {"value": 'test 2', "status": 'pending', "tooltip": "processing"},
        {"value": 'test 3'},
        {"value": 'test 4'}])
)
property steps: Steppers

Group all the UI steps components.

Usage:

property tables: Tables

Group all the UI components dedicated to produce tables or pivot tables.

Different kind of tables are available in the framework (Tabulator, DataTable, PivotTable or even a bespoke implementation).

Usage:

property tags: Tags

Group all the other tags available in HTML.

Those tags can be considered as normal HTML component, which means Js and CSS features are also available.

Usage:

property texts: Texts

Group all the UI components dedicated to produce text components.

The items in this category will not be editable and they will only provide nice text structure like paragraph, formatted text…

Usage:

property timelines: Timelines

Usage:

property titles: Titles

Group all the UI components dedicated to produce titles.

More details on the Titles property page

Usage:

page.ui.titles.head("test")
property trees: Trees

Group all the UI components dedicated to produce Trees or selection items.

Usage:

property vignets: Vignets

Group all the UI components dedicated to produce rich HTML Components.

This category will take into account very specific and bespoke components.

Usage:

page.ui.vignets.number(500, "Test")
page.ui.vignets.number(500, "Test 2 ", options={"url": "http://www.google.fr"})
page.ui.vignets.block({
  "text": 'This is a brand new python framework', "title": 'New Python Web Framework',
  "button": {"text": 'Get Started', 'url': "/getStarted"}, 'color': 'green'})