panel-sketch 20210411.1

To sketch high performing, interactive visualizations running in the browser and drawing inspiration from p5js

✏ ️ Panel Sketch

THIS IS PRE APLHA SOFTWARE AND YOU CANNOT EXPECT IT TO WORK.

The purpose of the panel-sketch package is to make it easy for Pythonistas to quickly sketch interactive visualizations and other applications running in

• the browser. Potentially without a Python backend
• the Jupyter Notebook.
• your favorite editor or IDE.

It is heavily inspired by p5js, p5js sketches and pyp5js but not limited to the p5js universe. You can also think of it as a Code Sandbox or JS Fiddle but for #Python 🐍.

Check out the panel-sketch examples on Binder

Jupyter Notebook	Jupyter Labs	Panel Apps

THE PANEL APPS LINK IS CURRENTLY NOT WORKING. FORM THE JUPYTER LAB ON BINDER YOU CAN START IT MANUALLY IN A TERMINAL USING

panel serve examples/pyp5js/gallery/gallery.py --static-dirs transcrypt=panel_sketch/sketch_compiler/assets/js/transcrypt/ --port=5007 --allow-websocket-origin=hub.gke2.mybinder.org

and open a link similar to https://hub.gke2.mybinder.org/user/marcskovmadsen-panel-sketch-zods9e4k/proxy/5007/gallery.

It leverages Python to Javascript technologies. Currently Pyodide but potentially also Transcrypt, Brython or similar in the future.

License

The panel-sketch python package and repository is open source and free to use (MIT License).

Installation

With pip

pip install panel-sketch

Usage

import panel_sketch as ps

import panel as pn
pn.extension('Sketch')

src = "https://github.com/holoviz/panel/raw/master/doc/_static/logo_stacked.png"
image_style = "height:95%;cursor: pointer;border: 1px solid #ddd;border-radius: 4px;padding: 5px;"
image_html = f"<img class='image-button' src='{src}' style='{image_style}'>"

sketch = Sketch(value=image_html, height=100, width=100)
pn.Column(sketch, pn.Param(sketch, parameters=["clicks"])).servable()

Reference Guides

• Sketch

Examples

Coming up

Additional Resources

You can find more inspiration via the links below.

• Panel
• Awesome Panel

Roadmap

When I get the time I would like to

• Support Transcrypt for compiling
• Support alternatives to p5js like three.js
• Support extensions to p5js like m5.js
• Add badges for 100% test coverage etc.
• Distribute as conda package

Change Log

• 20210410: First Release to PyPi.