Forum Archive

Tips, tricks, and practices to translate UI components Pythonista <-> Jupyter

DrJJWMac

Hello!

I want to develop interactive demos for science/engineering courses. I have just started learning python for this. My previous (and indeed ongoing parallel) developments of demos have been using Igor Pro and Maple. I found Pythonista to be a wonderful development environment on my iPad. Already, while on a plane trip, I was able to build my first UI driven graph. I especially like that I can work uncoupled from the internet.

On macOS, I will use Jupyter notebooks.

I want to be able to develop the internal functions for the demos and then import + plug-in the appropriate UI components to translate from Pythonista <-> Jupyter. I am no where near conversant enough in the equivalent of import directives to appreciate how to do this with the lowest amount of fuss on my part. I can anticipate that it must be possible.

As a newbie to python (but an expert in interactive demos elsewhere), I would like to open discussion on tips, tricks, and best practices to translate UI components between Pythonista (i.e. import ui) and Jupyter (i.e. import ipywidgets).

I hope this thread finds interest with others.

--
JJW

Matteo

@DrJJWMac Hi, I don't use Jupyter, I don't know how to use it and for which purposes, but I've read something about it.

You want:

  • to write source codes of your Jupyter notebooks using offline Pythonista (so I understand that a Jupyter notebook can be created programmatically with basic Python programming language) and
  • to test a notebook source code with Pythonista using a library created specially to compile the notebook source code in a full user-friendly - full usable Jupyter notebook.

Is it?

If a notebook is intended to calculate something with some plots (for example), could your Pythonista <-> Jupyter converter library perform the calculation or it is intended to be a read-only notebook (like a static web page) and in order to execute the notebook user should use a full working Jupyter environment with 3rd-party libraries properly installed?

Can you kindly provide some existing examples of Jupyter notebooks you'd like to write/create with Pythonista? It is only to understand the "degree of freedom" about the use of Jupyter notebooks with Pythonista.

Thanks
Bye

ccc
try:
    import ui
    in_pythonista = True
except ImportError:
    in_pythonista = False

try:
    import ipywidgets
    on_jupyter = True
except ImportError:
    on_jupyter = False

if in_pythonista:
    print(‘I travel with Pythonista...’)

if on_jupyter:
    print(‘I live on Jupyter...’)
DrJJWMac

@ccc

Thanks. That is a nice trick to learn. I'd wish the rest of the coding was as easy. Unfortunately, the UI elements and the ipywidgets elements essentially have to be "hard coded" for each case. By that point in time, the easier path for me is to create specific header blocks for the imports, for the functions, and for the ui controls. I'll have a specific example immediately below.

--
JJW

DrJJWMac

Here is the example. First the pythonista code. Presume the UI file has also been created.

import ui
import numpy as np
import matplotlib.pyplot as plt

# calculate the EQ line
def plot_EQline(K, A):
    x = np.linspace(0.0, 1.0, 101)
    y = np.linspace(0.0, 1.0, 101)
    yl = x
    g = K*(10**(A*((1 - x)**2)))
    y = g*x/(1+x*(g-1))
    plt.xlabel('Liquid Mole Fraction x')
    plt.ylabel('Gas Mole Fraction y')
    plt.plot(x, y, color='blue')
    plt.plot(x, yl, color='black')
    plt.show()

# run the ui interaction
def update_slider(sender):
    # Get the root view:
    v = sender.superview
    # Get the slider
    K = 1 + 5*v['slider_K'].value
    A = 0 + 2*v['slider_A'].value
    v['label_K'].text = '%2.1f' % K
    v['label_A'].text = '%2.1f' % A
    plot_EQline(K, A)
    plt.close()

# run the demo
v = ui.load_view('EQLine')
v.present('sheet')
update_slider(v['slider_K'])

Now the Jupyter code

from ipywidgets import interact
from ipywidgets import widgets
import numpy as np
import matplotlib.pyplot as plt

# calculate the EQ line
def plot_EQline(K, A):
    x = np.linspace(0.0, 1.0, 101)
    y = np.linspace(0.0, 1.0, 101)
    yl = x
    g = K*(10**(A*((1 - x)**2)))
    y = g*x/(1+x*(g-1))
    plt.xlabel('Liquid Mole Fraction x')
    plt.ylabel('Gas Mole Fraction y')
    plt.plot(x, y, color='blue')
    plt.plot(x, yl, color='black')
    plt.show()

##create the sliders
interact(plot_EQline,
         K=widgets.FloatSlider(min=1,max=5,step=0.1,value=3),
         A=widgets.FloatSlider(min=0,max=2,step=0.1,value=0)
        )

In an ideal world, pythonista would know about ipywidgets.

--
JJW

ccc

Juno - Jupiter for iOS

https://juno.sh

https://juno.us16.list-manage.com/track/click?u=5332e31787bc0c2113afd90e9&id=bf73578620&e=c284fa4f61

Houry1947

Hi, this was very helpful for me as I was searching online for tips for creating a good UI for a new app. I am creating an app named do my assignment and would like your help to make a good and user-friendly UI. I will really appreciate the help.