Lecture 34: Building Interactive Web Pages
==========================================

.. index:: graphical user interface

We can view an interactive web page as a graphical user interface,
with the main difference that we need a browser to run the interaction.

At UIC, the computer ``people.uic.edu`` offers web hosting to
students, staff and faculty.
If Apache runs on your computer, then you can run the web pages
by pointing your browser to localhost.

We follow chapter 6 in the book of Gregory Bard
and work through the tangent-line interact.

Drawing Tangent Lines to a Curve
--------------------------------

The code below is adapted from *Sage for Undergraduates* by Gregory Bard,
pages 285 in Figure 1.

::

   f(x) = x^3 - x
   df(x) = diff(f(x), x)
   def tangent_at_point(x0):
       """
       Shows the tangent line at the point x0,
       using f and its derivative as global variables.
       """
       y0 = f(x0)
       slope = df(x0)
       # y - y0 = slope*(x - x0) implies
       # y = slope*x - slope*x0 + y0
       b = y0 - slope*x0
       P1 = plot(f, -2, 2, color='blue', ymin=-6, ymax=6, gridlines='minor')
       P2 = plot(slope*x + b, -2, 2, color='tan', ymin=-6, ymax=6)
       P3 = point((x0, y0), color='red', size=50)
       P = P1+P2+P3
       P.show(figsize=3)

To test the script we run the following cases in separate cells.

::

   tangent_at_point(0.5)
   tangent_at_point(1.5)
   tangent_at_point(-1.75)

The three figures for the x-coordinates 0.5, 1.5, and -1.75
are respectively displayed in :numref:`figwebtangentatpoint1`,
:numref:`figwebtangentatpoint2`, and :numref:`figwebtangentatpoint3`.

.. _figwebtangentatpoint1:

.. figure:: ./figwebtangentatpoint1.png
    :align: center

    The tangent line of :math:`x^3 - x` for :math:`x=0.5`.

.. _figwebtangentatpoint2:

.. figure:: ./figwebtangentatpoint2.png
    :align: center

    The tangent line of :math:`x^3 - x` for :math:`x=1.5`.

.. _figwebtangentatpoint3:

.. figure:: ./figwebtangentatpoint3.png
    :align: center

    The tangent line of :math:`x^3 - x` for :math:`x=-1.75`.

We want to attach a scale to the ``x0`` parameter of the function.
When the user then moves the scale, the point on the curve will move
and the tangent line at that new point will be shown.
To the code we add ``@interact`` before the function definition.
In the header of the function we add the slider.

The parameter ``x0`` of the function is extended into
``x0 = slider(-2, 2, 0.1, -1.5, label='x-coordinate')``.
The first two arguments, ``-2`` and ``2`` determine the range
of the slider, so ``x0`` is constrained to take values in
the interval with bounds ``-2`` and ``2``.
The granularity of the slider is defined as ``0.1``,
the third parameter of the ``slider()``.
The fourth parameter sets the initial value ``-1.5`` of ``x0``.

.. index:: interact, slider

::

   f(x) = x^3 - x
   df(x) = diff(f(x), x)
   @interact
   def tangent_at_point(x0 = slider(-2, 2, 0.1, -1.5, label='x-coordinate')):
       """
      Shows the tangent line at the point x0,
      using f and its derivative as global variables.
      """
      y0 = f(x0)
      slope = df(x0)
      # y - y0 = slope*(x - x0) implies
      # y = slope*x - slope*x0 + y0
      b = y0 - slope*x0
      P1 = plot(f, -2, 2, color='blue', ymin=-6, ymax=6, gridlines='minor')
      P2 = plot(slope*x + b, -2, 2, color='tan', ymin=-6, ymax=6)
      P3 = point((x0, y0), color='red', size=50)
      P = P1+P2+P3
      P.show()

If we execute the code in the cell, then we can already test the
interact as it would run in a web page.
The interact is shown in :numref:`figwebtangentslider`.

.. _figwebtangentslider:

.. figure:: ./figwebtangentslider.png
    :align: center

    An interact with a slider to set the x-coordinate of a point.

Making the Web Page
-------------------

On page 294 of *Sage for Undergraduates* by Gregory Bard,
we have a template of a web page, based on work of Jason Grout.
Once we insert the code in the last cell of the previous section,
we are ready to publish the interactive web page.

The computer ``people.uic.edu`` which can host your web pages
is a Linux computer.  You can login to this computer with your netid.
Your web site is accessible via the URL
``https://netid.people.uic.edu`` where the ``netid`` in the URL
is replaced by your netid.
Below is a description of the steps to
deploy the interact on your web site.

1. Login to ``people.uic.edu`` via ``ssh``,
   available among the internet tools on the lab computers.

2. The files which defined your web pages should be placed
   in the folder ``public_html``.
   Make sure that this folder is accessibile.
   To make ``public_html`` accessible, execute the command
   ``chmod +x public_html`` at the command line.

3. You can edit the html file locally on your computer
   and then transfer the file into the ``public_html`` folder
   on ``people.uic.edu`` with a secure copy which can be found
   among the internet tools on the lab computers.

Note that you account on ``people.uic.edu`` needs to be activated.
Point your browser to ``people.uic.edu`` to activate.

Drop Down Menu
--------------

With ``selector`` we add a drop down menu to let the user choose
from a range of options.  For example, to select a color.

.. index:: interact, selector

::

   fun = x^3 - x
   rng = (x, -2, 2)
   @interact
   def colorplot(colrgb=selector(['red', 'green', 'blue'], label='color: ')):
       """
       Plots the expression defined by fun over the range in rng.
       The parameters fun and rng must be defined before calling colorplot.
       The user can select the color.
       """
       P = plot(fun, rng, color=colrgb)
       P.show()

The result of the interact is shown in :numref:`figwebcolorselector`.

.. _figwebcolorselector:

.. figure:: ./figwebcolorselector.png
    :align: center

    An interact with a selector to let the user select a color.

Assignments
-----------

1. Consider the function \ :math:`f(x) = \exp(-x^2) \sin(2 k \pi x)`
   for \ :math:`x \in [-2,+2]` and for \ :math:`k` ranging from 1 to 10.
   Make an interactive web page that plots \ :math:`f(x)` and with
   a slider so the user can set \ :math:`k`.

2. When plotting in three dimensions we can rotate the axes,
   for example with the ``rotateX`` method.
   Make an interactive plot3d method where the argument for
   ``rotateX`` can be manipulated with a slider.

3. Cassini ovals are all points at distance :math:`c` from the points with 
   coordinates :math:`(-a,0)` and :math:`(a, 0)`,
   and satisfy 

   .. math::

      ((x-a)^2 + y^2)((x+a)^2 + y^2) = c^4.

   Define an interact that plots the Cassini ovals for :math:`x`
   and :math:`y` in :math:`[-4,4]`
   which lets the user select the parameters :math:`(a,c)`
   from the tuples (1,2), (2,1), and (2,3).

4. The coordinates of the Lissajous curve are defined by

   .. math::

      x(t) = \sin(2 t), \quad y(t) = \sin(3 t), \quad t \in [0, 2 \pi].

   Write the code to define an interact to plot this curve.

   * The interact allows the user to set the end of the range 
     for :math:`t` with a slider.

   * The range always starts at 0.
     The smallest value for the end of the range is :math:`\pi/20`.
     The largest value of the end of the range is :math:`2 \pi`.

   * The end value for the range is incremented by :math:`\pi/20`.

   * The initial value for the end of the range 
     is :math:`2 \pi - \pi/10`.