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)
Python 3 wrapper of Microsoft UIAutomation. Support UIAutomation for MFC, WindowsForm, WPF, Modern UI(Metro UI), Qt, IE, Firefox, Chrome ...

Python 3 wrapper of Microsoft UIAutomation. Support UIAutomation for MFC, WindowsForm, WPF, Modern UI(Metro UI), Qt, IE, Firefox, Chrome ...

yin kaisheng 1.6k Dec 29, 2022
Compiles python selenium script to be a Window's executable

Problem Statement Setting up a Python project can be frustrating for non-developers. From downloading the right version of python, setting up virtual

Jerry Ng 8 Jan 09, 2023
Just for testing video streaming using pytgcalls.

tgvc-video-tests Just for testing video streaming using pytgcalls. Note: The features used in this repository is highly experimental and you might not

wrench 34 Dec 27, 2022
FaceBot is a script to automatically create a facebook account using the selenium and chromedriver modules.

FaceBot is a script to automatically create a facebook account using the selenium and chromedriver modules. That way, we don't need to input full name, email and password and date of birth. All will

Fadjrir Herlambang 2 Jun 17, 2022
HTTP traffic mocking and testing made easy in Python

pook Versatile, expressive and hackable utility library for HTTP traffic mocking and expectations made easy in Python. Heavily inspired by gock. To ge

Tom 305 Dec 23, 2022
1st Solution to QQ Browser 2021 AIAC Track 2

1st Solution to QQ Browser 2021 AIAC Track 2 This repository is the winning solution to QQ Browser 2021 AI Algorithm Competition Track 2 Automated Hyp

DAIR Lab 24 Sep 10, 2022
输入Google Hacking语句,自动调用Chrome浏览器爬取结果

Google-Hacking-Crawler 该脚本可输入Google Hacking语句,自动调用Chrome浏览器爬取结果 环境配置 python -m pip install -r requirements.txt 下载Chrome浏览器

Jarcis 4 Jun 21, 2022
Ab testing - basically a statistical test in which two or more variants

Ab testing - basically a statistical test in which two or more variants

Buse Yıldırım 5 Mar 13, 2022
Pymox - open source mock object framework for Python

Pymox is an open source mock object framework for Python. First Steps Installation Tutorial Documentation http://pymox.readthedocs.io/en/latest/index.

Ivan Rocha 7 Feb 02, 2022
Spam the buzzer and upgrade automatically - Selenium

CookieClicker Usage: Let's check your chrome navigator version : Consequently, you have to : download the right chromedriver in the follow link : http

Iliam Amara 1 Nov 22, 2021
show python coverage information directly in emacs

show python coverage information directly in emacs

wouter bolsterlee 30 Oct 26, 2022
A library for generating fake data and populating database tables.

Knockoff Factory A library for generating mock data and creating database fixtures that can be used for unit testing. Table of content Installation Ch

Nike Inc. 30 Sep 23, 2022
Useful additions to Django's default TestCase

django-test-plus Useful additions to Django's default TestCase from REVSYS Rationale Let's face it, writing tests isn't always fun. Part of the reason

REVSYS 546 Dec 22, 2022
Akulaku Create NewProduct Automation using Selenium Python

Akulaku-Create-NewProduct-Automation Akulaku Create NewProduct Automation using Selenium Python Usage: 1. Install Python 3.9 2. Open CMD on Bot Folde

Rahul Joshua Damanik 1 Nov 22, 2021
A mocking library for requests

httmock A mocking library for requests for Python 2.7 and 3.4+. Installation pip install httmock Or, if you are a Gentoo user: emerge dev-python/httm

Patryk Zawadzki 452 Dec 28, 2022
Headless chrome/chromium automation library (unofficial port of puppeteer)

Pyppeteer Pyppeteer has moved to pyppeteer/pyppeteer Unofficial Python port of puppeteer JavaScript (headless) chrome/chromium browser automation libr

miyakogi 3.5k Dec 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 09, 2022
Automatically mock your HTTP interactions to simplify and speed up testing

VCR.py 📼 This is a Python version of Ruby's VCR library. Source code https://github.com/kevin1024/vcrpy Documentation https://vcrpy.readthedocs.io/ R

Kevin McCarthy 2.3k Jan 01, 2023
Doggo Browser

Doggo Browser Quick Start $ python3 -m venv ./venv/ $ source ./venv/bin/activate $ pip3 install -r requirements.txt $ ./sobaki.py References Heavily I

Alexey Kutepov 9 Dec 12, 2022
A complete test automation tool

Golem - Test Automation Golem is a test framework and a complete tool for browser automation. Tests can be written with code in Python, codeless using

486 Dec 30, 2022