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

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

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

@chjl07 said:

I just need to figure out how to delete the previous image and not have them superimposed when the sliders are used.

Use this to close the previous plot.

plt.close()

--
JJW