A single module to link Python ecosystem to the Web

Overview

Maintenance made-with-python PyPI version shields.io Documentation Status PRs welcome Donate

A single module to link Python ecosystem to the Web. Have a quick look at the Gallery first to get convinced !

FAQ For any questions, please use Stackoverflow with the tag Epyk we will be happy to answer (unfortunately we cannot yet create tags in this platform)

This project is in active and constant improvement so do not forget to run the below command to always get the latest version install.

pip install epyk --upgrade

Presentation

About the project


We started the implementation of Epyk already few years ago in order to help Python developers (from beginner to advanced) to present their work to clients or colleagues. At this time there were only few packages in Python available and it was quite difficult for people to move to web technologies like JS, HTML and CSS.

With this idea we started to create Epyk, a kind of transpiler which is dedicated to assist from Python the developers to develop rich web UI. It will try, thanks to the autocompletion provided by the library, to familiarise the developer / data scientist in the wording of web technologies. Indeed we tried as much as possible to keep the same naming convention for CSS attributes and Javascript function to simplify the review of the transpiled HTML page if needed.

Today Epyk is a bit more than a transpiler as it will encompass more than 100 JavaScript and CSS modules.

Most of the popular web libraries (JQuery, Bootstrap, ApexCharts, ChartJs, Tabulator, AgGrid...) are available from the Epyk components. The resulting page transpiled will only import the ones needed for the selected components.

Library's target


Epyk's is to ensure the implementation of a coherent system using a minimum of layers. With Epyk the user stays in the Python layer to drive and optimize the data transformation. This Framework also encourages the implementation of Micro services and cloud based architecture.

The full documentation is available on Read the Docs

In the Template Repository lot of examples are available to run as static pages or with underlying Python servers:

_ fastapi_viewer.py: A simple interactive web page to display data from pandas_datareader.

  • fastapi_viewer_logs.py: An interactive web page to display log messages based on user inputs/filters
  • fastapi_webscraping.py: An example of report extracting data from a website to analyse the prices
  • fastapi_db.py : An App to display documentation and allow a versioning in a SqLite database.

Also a Gallery is available to get more visible results

Quickstart

For people impatient to understand the concept, you can test the below minimalist dashboard.

Install Epyk

pip install epyk

The below code will create a simple interactive dashboard relying on internal mock data.

import epyk as pk

# Just to get mock data to test
from epyk.tests import mocks

page = pk.Page()
page.headers.dev()

js_data = page.data.js.record(data=mocks.languages)
filter1 = js_data.filterGroup("filter1")

select = page.ui.select([
  {"value": '', 'name': 'name'},
  {"value": 'type', 'name': 'code'},
])

bar = page.ui.charts.chartJs.bar(mocks.languages, y_columns=["rating", 'change'], x_axis='name')
pie = page.ui.charts.chartJs.pie(mocks.languages, y_columns=['change'], x_axis='name')
page.ui.row([bar, pie])

select.change([
  bar.build(filter1.group().sumBy(['rating', 'change'], select.dom.content, 'name')),
  pie.build(filter1.group().sumBy(['change'], select.dom.content, 'name')),
])

More information in the doc Getting started with Epyk

Compatibility

No dependency hence the library can be integrated to any existing Python project

Epyk is compatible with the most common Web Python Frameworks (Flask and Django). By default, the server package embeds a Flask app as it is easier to install and ready to use.

The Framework can be included within a Jupyter or JupyterLab project. But this will lead to some limitations - for example Ajax and Socket will not be available.

The generated Web pages are compatible with the common modern web frameworks.

But the target is to be full stack developers and be flexible enough to integrate our UI pages to any existing ecosystem. Thus some outs features are available to wrap page to be visible on any server.

This encourages the collaboration and breaks the IT silos. It can fully work in an Agile way of working as developers, business analysts, product owners and users can work on the same stack and improve directly the final product. Any work done on the side within Jupyter or standalone Python scripts can be easily integrated !

Epyk can be integrated to any Python web servers and can be linked to JavaScript web framework. It is collaborative library focusing on the data transformation and promoting the team collaboration.

Have a look at the Design and Architecture documentation to get more details.

Usage

First install Epyk to your Python environment

From static pages


pip install epyk

Create a report and change CSS3 or add JavaScript events.

import epyk as pk

page = pk.Page()
page.headers.dev()

button = page.ui.button("Click me")
button.style.css.color = "red"
button.click([
    page.js.console.log("log message")
])
.... 

# Then to produce the html page
page.outs.html_file(path="/templates", name="test")

Using a web server


Go to the next level and add real time flux in few lines or code. Epyk allows to integrate concepts of Reactive programming thanks to Python 3 and asyncio. All the features available in JavaScript (socket, websocket, observable ...) can be used as long as the underlying webserver is compatible.

If the underlying web server is not compatible with those modern features, Ajax (post, get...) are also available. More examples are available in the []template / interactive](https://github.com/epykure/epyk-templates/tree/master/interactives) section.

On the client side

page = Report()
page.headers.dev()

socket.connect(url="127.0.0.1", port=3000, namespace="/news")
input = rptObj.ui.input()

pie = rptObj.ui.charts.chartJs.polar([], y_columns=[1], x_axis="x")

container.subscribe(socket, 'news received', data=socket.message['content'])
pie.subscribe(socket, 'news received', data=socket.message['pie'])

rptObj.ui.button("Send").click([
  socket.emit("new news", input.dom.content)
])

page.outs.html_file(path="/templates", name="socket_example")

On the server side (using socketio)

from flask import Flask, render_template_string
from flask_socketio import SocketIO, emit

app = Flask(__name__)

app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

 
@socketio.on('new news', namespace='/news')
def new_news(message):
  values = getSeries(5, 100)
  result_pie = chart_data.chartJs.y(values, [1, 4, 5], 'g')
  emit('news received', {"content": message, 'pie': result_pie}, broadcast=True)

From Notebooks


We maintain a separate Github repository of Jupyter Notebooks that contain an interactive tutorial and examples:

https://nbviewer.jupyter.org/github/epykure/epyk-templates-notebooks/

To launch a live notebook server with those notebook using binder click on one of the following badge:

Binder

More examples are available on the official repository

Coming soon

Epyk Studio is a rich and collaborative framework to simplify the use of this library with bespoke configuration / styles. You can start downloading it here or contribute to the project on the Github repository. This is still under development hence it is not yet official released

Feedback and Contribution

See CONTRIBUTING.md

Please get in touch if there is any feature you feel Epyk-UI needs.

Donate

Want to donate? Feel free. Send to blockchain

Comments
  • Bug in css for button

    Bug in css for button

    It looks like the button references the base name of the css class instead whereas the class is declared as the css class name suffixed with the htmlId.

    For instance:

    Whereas the styles are declared as such:

    .cssbuttonbasic_button_2051657361000 {font-weight: bold ;padding: 1px 10px ;margin: 2px 0 2px 0 ;text-decoration: none ;border-radius: 5px ;white-space: nowrap ;display: inline-block ;-webkit-appearance: none ;-moz-appearance: none ;border: 1px solid #1b5e20 ;color: #000000 ;background-color: #FFFFFF ;} .cssbuttonbasic_button_2051657361000:hover {text-decoration: none ;cursor: pointer ;background-color: #1b5e20 ;color: #e8f5e9 ;} .cssbuttonbasic_button_2051657361000:focus {outline: 0 ;} .cssbuttonbasic_button_2051657361000:disabled {cursor: none ;background-color: #1b5e20 ;color: #43a047 ;font-style: italic ;}

    bug 
    opened by epykachu 3
  • Add api folder in the root

    Add api folder in the root

    Add dedicated API folder in order to simplify the structure object and not always use dictionaries.

    This might help on transparency and also ensure a good structure of the input data.

    question 
    opened by epykure 2
  • Add banners for sponsor

    Add banners for sponsor

    Create new new interface in banners components to add sponsors in a simple way.

    The component should have title, content and a list of sponsors defined in the following repository. https://github.com/epykure/ressources/tree/master/logos

    Ideally the pictures should be downloaded when this component is used.

    opened by epykure 1
  • Slight change in how the css classes get added

    Slight change in how the css classes get added

    Hello, in the Html.py module I have changed the order of the pyClassNames so that the latest added classes get precedence in the css world:

    elif pyClassNames is not None:
      pyClsNames = [cls.get_ref() if hasattr(cls, 'get_ref') else cls for cls in pyClassNames['main']][::-1]
    

    this fixes an issue whereby all the classes that were defined previously would take precedence over the newly defined attributes.

    Let me know if there's a cleaner to achieve this.

    question 
    opened by epykachu 1
  • Create feature to check if a component is visible

    Create feature to check if a component is visible

    Add some feature to make this available: https://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen

    An example https://jsfiddle.net/t2L274ty/1/

    enhancement 
    opened by epykure 1
  • Remove the force of the html folder when we output an html file

    Remove the force of the html folder when we output an html file

    I think we should remove the fact that we force the output to go to an html folder when the user specifies a path, if he doesn't then no problem, but if he does then that path should be where the file is created.

    enhancement question 
    opened by epykachu 1
  • Review the CSS Framework

    Review the CSS Framework

    Totally review the design of this module in order to add flexibility and to make it more user friendly.

    All the CSS attributes and classes should be statically defined

    bug 
    opened by epykure 1
  • Add Vignet Video

    Add Vignet Video

    This is a nice task for a first issue into the project.

    We would need to add a vignet video component.

    You can refer to the vignet components as it should exactly the same code structure.

    The reference is in epyk.core.components.CompVignets.image.

    You need the same signature and instead of an image component inside the method you would need a video component found in CompMedia.Media instead of CompImages.Images.

    enhancement good first issue 
    opened by epykachu 0
  • Add hierarchy of components

    Add hierarchy of components

    It might be good to add htmlItems to any components in order to be able to know the children of a main components.

    This could be useful in the Bootstrap extension (or in the composite items) when we are changing a style or replacing a CSS class.

    Once this will be available the module BsStyle.py can be updated accordingly

    enhancement 
    opened by epykure 0
  • Make the utf8 -> html code automatic

    Make the utf8 -> html code automatic

    Try to make the conversion from utf8 to html code for the display in the UI less manual.

    The mapping is done here: PyExt.py but maybe there is a better way to do it

    UTF8_TO_HTML = { b'\xe2\x80\x99': "'", b'\xe2\x81\x80': entities.EntUtf8.CHARACTER_TIE, b'\xe2\x81\x81': entities.EntUtf8.CARET_INSERTION_POINT, b'\xe2\x81\x82': entities.EntUtf8.ASTERISM, b'\xe2\x81\x83': entities.EntUtf8.HYPHEN_BULLET, b'\xe2\x81\x84': entities.EntUtf8.FRACTION_SLASH,

    opened by epykure 0
  • Add Arrow functions

    Add Arrow functions

    Create in the module JsFncs.py a class Arrows() which will allow the definition of arrow functions

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

    Also add a decorator to specify that this function is not compatible for Internet Explorer.

    enhancement 
    opened by epykure 0
Releases(1.6.2)
  • 1.6.2(Sep 7, 2021)

    This release brings lot of bug fixes and a link with popular external web frameworks.

    • Integrate Moment library to the ase Javascript features.
    • Improve documentation.
    • Jquery UI shortcut in the Web frameworks.
    • Toast Framework (first version).
    • Add column style for fields.
    • Add Bootstrap Dominus Tempus.
    • New vega chart libs.
    • Add leaflet event object.
    • Add JavaScript Fetch API.

    More details available in the changelog file.

    Source code(tar.gz)
    Source code(zip)
    epyk-1.6.2-py2.py3-none-any.whl(3.03 MB)
  • 1.5.0(Apr 5, 2021)

    [1.5.9] - 2021-04-05

    Added

    • Add input number styles.
    • Add fields.number interface.
    • Add XMLHttpRequest timeout.
    • Add data apexCharts shortcut for events.
    • Add new input data in data_urls (owid repo)
    • Add trigger shortcut to dom property.
    • Add Poller components.
    • Add CSS calc for width.
    • Add more and filter button.
    • Add Github standard text reference component.
    • New Apex Gauge component.
    • New CSS Style configs with predefined CSS inline configurations.
    • Add a themes property to change the themes with auto completion.
    • Add Index and step to be able to create custom themes from the available ones.
    • Add predefined CSS classes overrides.
    • Add white and black themes properties.
    • Introduce first version of skins for websites.
    • data ListItems (first version).
    • Add standard menu bar for HTML components
    • Add the options to get all the components in powered.
    • Add standard function for copy, download and clear.
    • Add url JavaScript attribute.
    • Add options in the Item list add() method.
    • Add getUrlFromData() method in the Js core module to convert variable to url.
    • Add URL property to window JS core module.
    • Add Stringify function for objects.
    • Add predefined fixed icon component.
    • Add predefined left input component.
    • Add align argument to formula component.
    • Add better management of the Interfaces skins
    • Add min-height to the Highlight component
    • Add is_true options to the automatic import manager
    • Markdown Python conversion function.
    • Icons menu.
    • Add Bootstrap icon family from standard components.
    • Add paragraph as an Interface shortcut.
    • Add Texts menu.
    • Add Items lists menu.
    • Add copyToClipboard DOM shortcut to components.

    Changed

    • Change button live style.
    • Change Rich, Vignets and number interfaces.
    • Change data default values for Sparkline interfaces.
    • Add nowrap style to list of links.
    • Include the color reference for the standard color names in charts.
    • Fix toMoney formatter for ApexCharts (to be done for other charts).
    • Default behaviour for icons application links.
    • Rename module GrpChart to GrpClsChart to follow the naming convention.
    • Use of notch to get the main color used instead of an index in the CSS predefined classes.
    • Remove Default.font() function from css.
    • Change color allocation for powered by component.
    • Change List menu component.
    • Change icon colors for input fields.
    • ChartJs JavaScript data() interface => align with build method.
    • ChartJs common series attributes.
    • Changed the Paragraph Markdown display

    Fixed

    • Link builder function.
    • Extensible search class width.
    • List tag position.
    • Fix jqueryui dependency with popperjs.
    • Handle not checked state for radio.
    • Height for the chart.
    • Update ApexChart package version.
    • Fix the Input options.
    • Remove the use of the static default CSS module for sizes.
    • Review all the existing themes.
    • Centralise the charts colors codes for themes.
    • Create dark mode and align grey color codes.
    • Fix ChartJs builder function names.
    • Fix context menu for Lists.
    • Fix add JavaScript function for Items list.
    • Fix slider component.
    • Align slider with the new options model.
    • fix external JavaScript text injection.
    • Highlights builder improvement.
    • Highlights Options definition.
    • Fix the CSS style of the print component.
    • Fixed webworkers integration from Flask.
    • Fixed PivotTableJs component renderers.
    • Fixed Icon family use.
    • Fixed color for content editable.
    Source code(tar.gz)
    Source code(zip)
    epyk-1.5.9-py2.py3-none-any.whl(2.86 MB)
Owner
null
A cross-platform GUI automation Python module for human beings. Used to programmatically control the mouse & keyboard.

PyAutoGUI PyAutoGUI is a cross-platform GUI automation Python module for human beings. Used to programmatically control the mouse & keyboard. pip inst

Al Sweigart 7.5k Dec 31, 2022
A rewrite of Python's builtin doctest module (with pytest plugin integration) but without all the weirdness

The xdoctest package is a re-write of Python's builtin doctest module. It replaces the old regex-based parser with a new abstract-syntax-tree based pa

Jon Crall 174 Dec 16, 2022
FFPuppet is a Python module that automates browser process related tasks to aid in fuzzing

FFPuppet FFPuppet is a Python module that automates browser process related tasks to aid in fuzzing. Happy bug hunting! Are you fuzzing the browser? G

Mozilla Fuzzing Security 24 Oct 25, 2022
The Good Old Days. | Testing Out A New Module-

The-Good-Old-Days. The Good Old Days. | Testing Out A New Module- Installation Asciimatics supports Python versions 2 & 3. For the precise list of tes

Syntax. 2 Jun 8, 2022
Selenium-python but lighter: Helium is the best Python library for web automation.

Selenium-python but lighter: Helium Selenium-python is great for web automation. Helium makes it easier to use. For example: Under the hood, Helium fo

Michael Herrmann 3.2k Dec 31, 2022
splinter - python test framework for web applications

splinter - python tool for testing web applications splinter is an open source tool for testing web applications using Python. It lets you automate br

Cobra Team 2.6k Dec 27, 2022
splinter - python test framework for web applications

splinter - python tool for testing web applications splinter is an open source tool for testing web applications using Python. It lets you automate br

Cobra Team 2.3k Feb 5, 2021
✅ Python web automation and testing. 🚀 Fast, easy, reliable. 💠

Build fast, reliable, end-to-end tests. SeleniumBase is a Python framework for web automation, end-to-end testing, and more. Tests are run with "pytes

SeleniumBase 3k Jan 4, 2023
Aioresponses is a helper for mock/fake web requests in python aiohttp package.

aioresponses Aioresponses is a helper to mock/fake web requests in python aiohttp package. For requests module there are a lot of packages that help u

null 402 Jan 6, 2023
User-oriented Web UI browser tests in Python

Selene - User-oriented Web UI browser tests in Python (Selenide port) Main features: User-oriented API for Selenium Webdriver (code like speak common

Iakiv Kramarenko 575 Jan 2, 2023
Airspeed Velocity: A simple Python benchmarking tool with web-based reporting

airspeed velocity airspeed velocity (asv) is a tool for benchmarking Python packages over their lifetime. It is primarily designed to benchmark a sing

null 745 Dec 28, 2022
🏆 A ranked list of awesome python libraries for web development. Updated weekly.

Best-of Web Development with Python ?? A ranked list of awesome python libraries for web development. Updated weekly. This curated list contains 540 a

Machine Learning Tooling 1.8k Dec 26, 2022
This file will contain a series of Python functions that use the Selenium library to search for elements in a web page while logging everything into a file

element_search with Selenium (Now With docstrings ?? ) Just to mention, I'm a beginner to all this, so it it's very possible to make some mistakes The

null 2 Aug 12, 2021
PyBuster A directory busting tool for web application penetration tester, written in python

PyBuster A directory busting tool for web application penetration tester, written in python. Supports custom wordlist,recursive search. Screenshots Pr

Anukul Pandey 4 Jan 30, 2022
This is a web test framework based on python+selenium

Basic thoughts for this framework There should have a BasePage.py to be the parent page and all the page object should inherit this class BasePage.py

Cactus 2 Mar 9, 2022
A simple python script that uses selenium(chrome web driver),pyautogui,time and schedule modules to enter google meets automatically

A simple python script that uses selenium(chrome web driver),pyautogui,time and schedule modules to enter google meets automatically

null 3 Feb 7, 2022
A modern API testing tool for web applications built with Open API and GraphQL specifications.

Schemathesis Schemathesis is a modern API testing tool for web applications built with Open API and GraphQL specifications. It reads the application s

Schemathesis.io 1.6k Jan 6, 2023
a socket mock framework - for all kinds of socket animals, web-clients included

mocket /mɔˈkɛt/ A socket mock framework for all kinds of socket animals, web-clients included - with gevent/asyncio/SSL support ...and then MicroPytho

Giorgio Salluzzo 249 Dec 14, 2022
Web testing library for Robot Framework

SeleniumLibrary Contents Introduction Keyword Documentation Installation Browser drivers Usage Extending SeleniumLibrary Community Versions History In

Robot Framework 1.2k Jan 3, 2023