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:
- Buttons Interface
- Calendar Interface
- Code Interface
- Drawers Interface
- Fields Interface
- Timelines Interface
- Forms Interface
- Icons Interface
- Toggles Interface
- Images Interface
- Inputs Interface
- Delimiter Interface
- Layouts Interface
- Links Interface
- Lists Interface
- Media Interface
- Menus Interface
- Modals Interface
- Banners Interface
- NavBars Interface
- Navigation Interface
- Network Interface
- Numbers Interface
- Panels Interface
- Slidings Interface
- Pictogram Interface
- Poller Interface
- Rich Interface
- Sliders Interface
- Steppers Interface
- Steppers Interface
- Tags Interface
- TextReferences Interface
- Texts Interface
- Titles Interface
- Trees Interface
- Vignets Interface
- Geo Interface
- BubbleMaps Interface
- ChartJs Interface
- Choropleth Interface
- D3 Interface
- Dc Interface
- GeoGoogle Interface
- JqueryVertorMap Interface
- GeoLeaflet Interface
- Plotly Interface
- PlotlyBubble Interface
- PlotlyChoropleth Interface
- Chart2d Interface
- Chart3d Interface
- Graphs Interface
- ApexChart Interface
- Billboard Interface
- C3 Interface
- Canvas Interface
- CompChartCss Interface
- ChartJs Interface
- D3 Interface
- DC Interface
- CompChartFrappe Interface
- ChartGoogle Interface
- Nvd3 Interface
- Plotly Interface
- Plotly2D Interface
- Plotly3D Interface
- CompRoughViz Interface
- Sparkline Interface
- SVG Interface
- VegaEmbedded Interface
- Vis Interface
- Vis2D Interface
- Vis3D Interface
- AgGrid Interface
- Datatables Interface
- Pivottable Interface
- D3 Interface
- Google Interface
- Tables Interface
- Plotly Interface
- Tabulators Interface
- 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
pageUsage:
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
pageUsage:
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
pageUsage:
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
pageUsage:
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:
- 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 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:
- property links: Links
Group all the UI components dedicated to produce links to another page or website.
More details on the
Links property
pageUsage:
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:
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 –
Group all the UI menus.
Usage:
Group all the UI components dedicated to produce navigation components such as navigation bar, footer, banner…
More details on the
Navigation property
pageUsage:
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
pageUsage:
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 pollers: Poller
Group all the UI with polling feature.
More details on the
Animations property
pageUsage:
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
pageUsage:
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 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 titles: Titles
Group all the UI components dedicated to produce titles.
More details on the
Titles property
pageUsage:
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'})