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)
A friendly wrapper for modern SQLAlchemy and Alembic

A friendly wrapper for modern SQLAlchemy (v1.4 or later) and Alembic. Documentation: https://jpsca.github.io/sqla-wrapper/ Includes: A SQLAlchemy wrap

Juan-Pablo Scaletti 129 Nov 28, 2022
API mocking with Python.

apyr apyr (all lowercase) is a simple & easy to use mock API server. It's great for front-end development when your API is not ready, or when you are

Umut Seven 55 Nov 25, 2022
AutoExploitSwagger is an automated API security testing exploit tool that can be combined with xray, BurpSuite and other scanners.

AutoExploitSwagger is an automated API security testing exploit tool that can be combined with xray, BurpSuite and other scanners.

6 Jan 28, 2022
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

402 Jan 06, 2023
A python bot using the Selenium library to auto-buy specified sneakers on the nike.com website.

Sneaker-Bot-UK A python bot using the Selenium library to auto-buy specified sneakers on the nike.com website. This bot is still in development and is

Daniel Hinds 4 Dec 14, 2022
PacketPy is an open-source solution for stress testing network devices using different testing methods

PacketPy About PacketPy is an open-source solution for stress testing network devices using different testing methods. Currently, there are only two c

4 Sep 22, 2022
pytest plugin that let you automate actions and assertions with test metrics reporting executing plain YAML files

pytest-play pytest-play is a codeless, generic, pluggable and extensible automation tool, not necessarily test automation only, based on the fantastic

pytest-dev 67 Dec 01, 2022
CNE-OVS-SIT - OVS System Integration Test Suite

CNE-OVS-SIT - OVS System Integration Test Suite Introduction User guide Discussion Introduction CNE-OVS-SIT is a test suite for OVS end-to-end functio

4 Jan 09, 2022
A simple asynchronous TCP/IP Connect Port Scanner in Python 3

Python 3 Asynchronous TCP/IP Connect Port Scanner A simple pure-Python TCP Connect port scanner. This application leverages the use of Python's Standa

70 Jan 03, 2023
WEB PENETRATION TESTING TOOL 💥

N-WEB ADVANCE WEB PENETRATION TESTING TOOL Features 🎭 Admin Panel Finder Admin Scanner Dork Generator Advance Dork Finder Extract Links No Redirect H

56 Dec 23, 2022
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
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
Test scripts etc. for experimental rollup testing

rollup node experiments Test scripts etc. for experimental rollup testing. untested, work in progress python -m venv venv source venv/bin/activate #

Diederik Loerakker 14 Jan 25, 2022
Python drivers for YeeNet firmware

yeenet-router-driver-python Python drivers for YeeNet firmware This repo is under heavy development. Many or all of these scripts are not likely to wo

Jason Paximadas 1 Dec 26, 2021
d4rk Ghost is all in one hacking framework For red team Pentesting

d4rk ghost is all in one Hacking framework For red team Pentesting it contains all modules , information_gathering exploitation + vulnerability scanning + ddos attacks with 12 methods + proxy scraper

d4rk sh4d0w 15 Dec 15, 2022
Docker-based integration tests

Docker-based integration tests Description Simple pytest fixtures that help you write integration tests with Docker and docker-compose. Specify all ne

Avast 326 Dec 27, 2022
Divide full port scan results and use it for targeted Nmap runs

Divide Et Impera And Scan (and also merge the scan results) DivideAndScan is used to efficiently automate port scanning routine by splitting it into 3

snovvcrash 226 Dec 30, 2022
pytest_pyramid provides basic fixtures for testing pyramid applications with pytest test suite

pytest_pyramid pytest_pyramid provides basic fixtures for testing pyramid applications with pytest test suite. By default, pytest_pyramid will create

Grzegorz Śliwiński 12 Dec 04, 2022
Hamcrest matchers for Python

PyHamcrest Introduction PyHamcrest is a framework for writing matcher objects, allowing you to declaratively define "match" rules. There are a number

Hamcrest 684 Dec 29, 2022