Jupyter Python+Javascript Widgets1: link javascript variables with Kernel Python variables and vice-versa.
Note: One way to create a communication channel from the frontend to the backend is to open an HTTP Server, but there is also another way: ipybus. See associated readme for further discussion
jpjwidgets is not a replacement2 for ipywidgets, it is just a complement which fill some gaps and brings some 'innovations'
- The most differentiating feature is that jpjwidgets brings a REST API, built by the application designer, embedded in the notebook
- Using the jupyter server proxy
- With the above feature, its possible to to fill the gap Jupyter Lab had (by design): communicate from javascript browser to the python kernel off-the-shelf
- This HTTP communciation is safe as based upon the security framework of jupyter lab
- the notebook is at the same time
- A Jupyter IPython notebook
- A REST API (which can also serve some web pages or files if needed)
- This web server attached to a notebook can also be used to load dynamically javascript modules
- Please use UI widgets from ipywidgets: jpjwidgets project will not develop that (the range widget is just a POC)
- To copy browser's javascript variables to IPython kernel variable
- To set some browser's variable based upon IPython kernel variable (native to Jupyter Notebook)
- Dynamically load some javascript modules (ESM)
- Use Web Components inside jupyter Notebooks
- Feed the notebook with pictures from your smartphone live (implementation not provided)
- get the current calling Notebook url in a python variable
- get the browser Geo Position (if the user accepts) in a Python variable
- dynamically load javascript modules
- Basic-Modules from MDN as a showcase
- x-spreadsheet: an excel like front-end
- wired-elements Web Components showcase
- Javascript is simply generated thanks to the repr_javascript capability of IPython Notebook
- this allows to set whatever javascript variable from a notebook programmatically
- it can also be generated by the HTML function of IPython.display module
- Writing back javascript values to the notebook via the HTTP server
- this allows to set whatever python IPython kernel variable with javascript Browser values
- callback can also be implemented to change the state of the notebook when variable are received
- Base Framework: Jupyter Lab + Jupyter ipywidgets + Jupyter Server proxy
- Copy: notebook, python file and subdirectories widgets and modules -- just for LoadJavascriptModules (including content) in a Jupyter Lab directory
- create the widgets directory in the above (if not created for LoadJavascriptModules)
- git clone might be a friend for the above
- Run: The notebooks
| Notebook | features |
|---|---|
| LeanGettingStarted.ipynb | Getting Started example to retrieve the Notebook url in a python variable |
| javascriptwidgets.ipynb | Three examples: Notebook url, Browser Geo position, a slider Range UI |
| LoadingJavascriptModules.ipynb | Show case for loading javascript modules see Basic-Modules and MDN |
| x_spreadsheet.ipynb | Load the excel like spreadsheet from x-spreadsheet |
| wired-elements.ipynb | Simple demo to show Web Component use inside Jupyter wired-elements |
| httpserver.py | A python script to help managing a python based HttpServer see |
- Read the notebooks notes
- read the python file comments if you want to dig the HTTP server operations
- Don't forget to stop the HTTP server, best is to shutdown the IPython kernel, as the used port will generate an issue elsewhere.
- you can select the port when launching a server, just add port=xxxx to the start function
- The HTTP server might sometime lock the port which request restart of the jupyter server
- In computing, a Widget is an application, or a component of an interface, that enables a user to perform a function or access a service.
- This clarification was requested by @krassowski see