В этом учебном пособии приведены инструкции по созданию этого веб-приложения Python для построения графика функции cos для определенных параметров, предоставленных пользователем. пользователь должен указать параметры A и B в уравнении y=Acos(Bx) вместе с пределами a и b графика.

Шаг 1: Информация ​

  • Вы можете заполнить необходимые поля, как показано на следующем изображении.
  • Вы можете использовать изображение Favicon по умолчанию.
  • Используемое основное изображение доступно здесь.

Шаг 2: Входные данные ​

Начните с создания группы ввода: «Параметры функции» и двух числовых входных переменных.

Отредактируйте первую входную переменную:

  • Установите имя переменной capitala.
  • Установите метку на «А».
  • Установите значение по умолчанию на 1
  • Ограничьте диапазон между минимальным значением -10 и максимальным значением 10 с шагом 0,001.

Нажмите ПРИМЕНИТЬ ИЗМЕНЕНИЯ, чтобы сохранить свою работу:

Точно так же примените изменения, показанные на следующем изображении, ко второму входу.

Вы также можете добавить расширенный текстовый ввод, который разъясняет пользователю форму, используемую уравнением косинуса, и пределы параметров «A» и «B». Для этого нажмите кнопку «+» и перетащите ввод RichText. Наведите указатель мыши на недавно созданный ввод и нажмите кнопку редактирования. Добавьте необходимый текст и при необходимости используйте генератор уравнений латекса, как показано на следующем изображении:

Теперь вы должны увидеть следующие входные данные на экране:

С помощью мыши перетащите поле форматированного текста и переместите его над параметрами «A» и «B»:

Теперь создайте новую группу ввода под названием «Параметры графика». Создайте два входа «a» и «b», чтобы указать левую и правую границы графика. Установите имена их переменных как a и b соответственно. Измените их значения по умолчанию на -10 и 10 соответственно. Теперь вы должны увидеть на экране следующее:

Шаг 3: Код ​

Как описано в разделе Создание графики, вам необходимо сначала определить вспомогательную функцию plt_show, которая генерирует встраиваемое изображение, прежде чем определять функцию main:

import matplotlib.pyplot as plt
import numpy as np
import base64
import io
def plt_show(plt, width=500, dpi=100):
    # Converts matplotlib plt to image data string
    #   plt is the matplotlib pyplot or figure
    #   width is the width of the graph image in pixels
    #   dpi (dots per inch) is the resolution of the image
    bytes = io.BytesIO()
    plt.savefig(bytes, format='png', dpi=dpi)  # Save as png image
    if hasattr(plt, "close"):
        plt.close()
    bytes.seek(0)
    base64_string = "data:image/png;base64," + \
        base64.b64encode(bytes.getvalue()).decode("utf-8")
    return "<img src='" + base64_string + "' width='" + str(width) + "'>"
def main(inputs):
    # Code to generate a plot using matplot lib (plt)
    # The following line uses the plt_show function to create an embeddable image
    img = plt_show(plt)
    return {"Image": img}

Чтобы получить доступ к входным данным, сгенерированным на предыдущем шаге, нажмите <> Input Variables, скопируйте каждую переменную и вставьте ее в новое назначение переменной внутри функции main:

def main(inputs):
    A = inputs['capitala']
    B = inputs['capitalb']
    a = inputs['a']
    b = inputs['b']
    # Code to generate a plot using matplotlib (plt)
    # The following line uses the plt_show function to create an embeddable image
    img = plt_show(plt)
    return {"Image": img}

Теперь вы можете использовать функции matplotlib для создания необходимого графика:

def main(inputs):
    A = inputs['capitala']
    B = inputs['capitalb']
    a = inputs['a']
    b = inputs['b']
    x = np.arange(a,b,0.01)
    y = A*(np.cos(B*x))
    plt.plot(x,y)
    plt.xlabel("x")
    plt.ylabel("y")
    # The following line uses the plt_show function to create an embeddable image
    img = plt_show(plt)
    return {"Image": img}

Шаг 4: Вывод ​

Вы можете просто вывести изображение, сгенерированное кодом:

Шаг 5. Документы​

Вы можете пропустить добавление какой-либо документации для этого руководства.

Шаг 6: Предварительный просмотр ​

В разделе предварительного просмотра убедитесь, что приложение работает должным образом:

Когда все будет готово, нажмите PUBLISH, чтобы опубликовать приложение в Интернете. Эта версия приложения доступна здесь:

https://www.mecsimcalc.com/app/5862152/explore_the_cos_function

Не забудьте также проверить приложение, которое позволяет пользователю вводить и отображать любое допустимое выражение в x:

https://www.mecsimcalc.com/app/0153466/function_plot